diff --git a/.changeset/shaky-books-hear.md b/.changeset/shaky-books-hear.md new file mode 100644 index 000000000..8637ce00a --- /dev/null +++ b/.changeset/shaky-books-hear.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Show social accounts in header diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx index c50b68f8e..d305ef222 100644 --- a/packages/gitbook/src/components/Footer/Footer.tsx +++ b/packages/gitbook/src/components/Footer/Footer.tsx @@ -8,7 +8,7 @@ import { tcls } from '@/lib/tailwind'; import { ThemeToggler } from '../ThemeToggler'; import { CONTAINER_STYLE } from '../layout'; import { FooterLinksGroup } from './FooterLinksGroup'; -import { SocialLink } from './SocialLink'; +import { SocialAccountButton } from './SocialAccounts'; const FOOTER_COLUMNS = 4; @@ -145,7 +145,7 @@ export function Footer(props: { context: GitBookSiteContext }) { socialLinks.length > 0 ? (
{socialLinks.map((account) => ( - = }, }; -export function SocialLink(props: { account: SiteSocialAccount; target: SiteExternalLinksTarget }) { - const { account, target } = props; +export function SocialAccountButton( + props: { account: SiteSocialAccount; target: SiteExternalLinksTarget } & ButtonProps +) { + const { account, target, ...rest } = props; const platform = SOCIAL_PLATFORMS[account.platform]; return ( @@ -99,6 +101,23 @@ export function SocialLink(props: { account: SiteSocialAccount; target: SiteExte variant="blank" size="large" target={target} + {...rest} /> ); } + +export function SocialAccountLink(props: { + account: SiteSocialAccount; +}) { + const { account } = props; + const platform = SOCIAL_PLATFORMS[account.platform]; + + return ( + + {platform.label} + + ); +} diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 0a5fc45ca..34d195cc3 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -4,6 +4,7 @@ import { CONTAINER_STYLE, HEADER_HEIGHT_DESKTOP } from '@/components/layout'; import { getSpaceLanguage, t } from '@/intl/server'; import { tcls } from '@/lib/tailwind'; import type { SiteSpace } from '@gitbook/api'; +import { SocialAccountButton } from '../Footer/SocialAccounts'; import { SearchContainer } from '../Search'; import { SiteSectionTabs, encodeClientSiteSections } from '../SiteSections'; import { HeaderLink } from './HeaderLink'; @@ -33,6 +34,10 @@ export function Header(props: { visibleSections.list.some((s) => s.object === 'site-section-group')) ); + const headerSocialAccounts = customization.socialAccounts.filter( + (account) => account.display.header === true + ); + return (
{customization.header.links.length > 0 || + headerSocialAccounts.length > 0 || (!withSections && variants.translations.length > 1) ? ( - {customization.header.links.length > 0 ? ( - <> - {customization.header.links.map((link) => { + {customization.header.links.map((link) => { + return ( + + ); + })} + {headerSocialAccounts.length > 0 ? ( +
+ {headerSocialAccounts.map((account) => { return ( - ); })} - - +
+ ) : null} + {customization.header.links.length > 0 || + headerSocialAccounts.length > 0 ? ( + ) : null} {!withSections && variants.translations.length > 1 ? ( ( ))} + {socialAccounts.length > 0 && } + {socialAccounts.map((account) => ( + + ))}
); diff --git a/packages/gitbook/src/components/Header/headerLinks.module.css b/packages/gitbook/src/components/Header/headerLinks.module.css index 8384648e3..46eb0036a 100644 --- a/packages/gitbook/src/components/Header/headerLinks.module.css +++ b/packages/gitbook/src/components/Header/headerLinks.module.css @@ -18,7 +18,7 @@ } .containerHeaderlinks > :nth-child(n + 1) ~ .linkEllipsis { display: flex; - & div > a:nth-of-type(n + 1) { + & div > *:nth-child(n + 1) { display: flex; } } @@ -29,7 +29,7 @@ } .containerHeaderlinks > :nth-child(n + 2) ~ .linkEllipsis { display: flex; - & div > a:nth-of-type(n + 2) { + & div > *:nth-child(n + 2) { display: flex; } } @@ -40,7 +40,7 @@ } .containerHeaderlinks > :nth-child(n + 3) ~ .linkEllipsis { display: flex; - & div > a:nth-of-type(n + 3) { + & div > *:nth-child(n + 3) { display: flex; } } @@ -51,7 +51,7 @@ } .containerHeaderlinks > :nth-child(n + 4) ~ .linkEllipsis { display: flex; - & div > a:nth-of-type(n + 4) { + & div > *:nth-child(n + 4) { display: flex; } } @@ -62,7 +62,7 @@ } .containerHeaderlinks > :nth-child(n + 5) ~ .linkEllipsis { display: flex; - & div > a:nth-of-type(n + 5) { + & div > *:nth-child(n + 5) { display: flex; } } @@ -73,7 +73,7 @@ } .containerHeaderlinks > :nth-child(n + 6) ~ .linkEllipsis { display: flex; - & div > a:nth-of-type(n + 6) { + & div > *:nth-child(n + 6) { display: flex; } }