diff --git a/.changeset/six-bars-obey.md b/.changeset/six-bars-obey.md
new file mode 100644
index 000000000..b7985bf74
--- /dev/null
+++ b/.changeset/six-bars-obey.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Support social links
diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx
index e909bba3d..a1fb32cfd 100644
--- a/packages/gitbook/src/components/Footer/Footer.tsx
+++ b/packages/gitbook/src/components/Footer/Footer.tsx
@@ -8,6 +8,7 @@ import { tcls } from '@/lib/tailwind';
import { ThemeToggler } from '../ThemeToggler';
import { CONTAINER_STYLE } from '../layout';
import { FooterLinksGroup } from './FooterLinksGroup';
+import { SocialLink } from './SocialLink';
const FOOTER_COLUMNS = 4;
@@ -137,6 +138,25 @@ export function Footer(props: { context: GitBookSiteContext }) {
) : null
}
+ {
+ // Social Links
+ customization.socialAccounts.filter(
+ (account) => account.display?.footer
+ ).length > 0 ? (
+
+ {customization.socialAccounts
+ .filter((account) => account.display?.footer)
+ .map((account) => (
+
+ ))}
+
+ ) : null
+ }
+
{
// Legal
customization.footer.copyright ? (
diff --git a/packages/gitbook/src/components/Footer/SocialLink.tsx b/packages/gitbook/src/components/Footer/SocialLink.tsx
new file mode 100644
index 000000000..c64258141
--- /dev/null
+++ b/packages/gitbook/src/components/Footer/SocialLink.tsx
@@ -0,0 +1,104 @@
+import {
+ type SiteExternalLinksTarget,
+ type SiteSocialAccount,
+ SiteSocialAccountPlatform,
+} from '@gitbook/api';
+import type { IconName } from '@gitbook/icons';
+import { Button } from '../primitives';
+
+type SocialPlatformData = {
+ label: string;
+ icon: IconName;
+ /** The href to the social platform. `$handle` will be replaced with the account handle. */
+ href: string;
+};
+
+const SOCIAL_PLATFORMS: Record = {
+ [SiteSocialAccountPlatform.Twitter]: {
+ label: 'X/Twitter',
+ icon: 'x-twitter',
+ href: 'https://x.com/$handle',
+ },
+ [SiteSocialAccountPlatform.Instagram]: {
+ label: 'Instagram',
+ icon: 'instagram',
+ href: 'https://instagram.com/$handle',
+ },
+ [SiteSocialAccountPlatform.Facebook]: {
+ label: 'Facebook',
+ icon: 'facebook',
+ href: 'https://facebook.com/$handle',
+ },
+ [SiteSocialAccountPlatform.Linkedin]: {
+ label: 'LinkedIn',
+ icon: 'linkedin',
+ href: 'https://linkedin.com/$handle',
+ },
+ [SiteSocialAccountPlatform.Github]: {
+ label: 'GitHub',
+ icon: 'github',
+ href: 'https://github.com/$handle',
+ },
+ [SiteSocialAccountPlatform.Discord]: {
+ label: 'Discord',
+ icon: 'discord',
+ href: 'https://discord.com/$handle',
+ },
+ [SiteSocialAccountPlatform.Slack]: {
+ label: 'Slack',
+ icon: 'slack',
+ href: 'https://join.slack.com/t/$handle',
+ },
+ [SiteSocialAccountPlatform.Youtube]: {
+ label: 'YouTube',
+ icon: 'youtube',
+ href: 'https://youtube.com/@$handle',
+ },
+ [SiteSocialAccountPlatform.Tiktok]: {
+ label: 'TikTok',
+ icon: 'tiktok',
+ href: 'https://tiktok.com/@$handle',
+ },
+ [SiteSocialAccountPlatform.Reddit]: {
+ label: 'Reddit',
+ icon: 'reddit',
+ href: 'https://reddit.com/@$handle',
+ },
+ [SiteSocialAccountPlatform.Bluesky]: {
+ label: 'Bluesky',
+ icon: 'bluesky',
+ href: 'https://bsky.app/profile/$handle',
+ },
+ [SiteSocialAccountPlatform.Mastodon]: {
+ label: 'Mastodon',
+ icon: 'mastodon',
+ href: 'https://mastodon.social/@$handle',
+ },
+ [SiteSocialAccountPlatform.Threads]: {
+ label: 'Threads',
+ icon: 'threads',
+ href: 'https://threads.net/@$handle',
+ },
+ [SiteSocialAccountPlatform.Medium]: {
+ label: 'Medium',
+ icon: 'medium',
+ href: 'https://medium.com/@$handle',
+ },
+};
+
+export function SocialLink(props: { account: SiteSocialAccount; target: SiteExternalLinksTarget }) {
+ const { account, target } = props;
+ const platform = SOCIAL_PLATFORMS[account.platform];
+
+ return (
+
+ );
+}