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 (
);
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;
}
}