Update Footer.tsx

.changeset/six-bars-obey.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Support social links

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, SocialPlatformData> = {
+    [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 (
+        <Button
+            iconOnly
+            label={platform.label}
+            href={platform.href.replace('$handle', account.handle)}
+            icon={platform.icon}
+            variant="blank"
+            size="large"
+            target={target}
+        />
+    );
+}

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -105,11 +105,13 @@ export function SpaceLayout(props: SpaceLayoutProps) {
 
     const withSections = Boolean(visibleSections && visibleSections.list.length > 1);
     const variants = categorizeVariants(context);
+    const socialLinks = customization.socialAccounts.filter((account) => account.display?.footer);
 
     const withFooter =
         customization.themes.toggeable ||
         customization.footer.copyright ||
         customization.footer.logo ||
+        socialLinks.length > 0 ||
         customization.footer.groups?.length;
 
     return (