1import type {ComponentType, ReactNode} from 'react';
2import React from 'react';
3import clsx from 'clsx';
4import Link from '@docusaurus/Link';
5import type {Props} from '@theme/Blog/Components/Author/Socials';
6
7import Twitter from '@theme/Icon/Socials/Twitter';
8import GitHub from '@theme/Icon/Socials/GitHub';
9import X from '@theme/Icon/Socials/X';
10import StackOverflow from '@theme/Icon/Socials/StackOverflow';
11import LinkedIn from '@theme/Icon/Socials/LinkedIn';
12import DefaultSocialIcon from '@theme/Icon/Socials/Default';
13import Bluesky from '@theme/Icon/Socials/Bluesky';
14import Instagram from '@theme/Icon/Socials/Instagram';
15import Threads from '@theme/Icon/Socials/Threads';
16import Youtube from '@theme/Icon/Socials/YouTube';
17import Mastodon from '@theme/Icon/Socials/Mastodon';
18import Twitch from '@theme/Icon/Socials/Twitch';
19
20import styles from './styles.module.css';
21
22type SocialIcon = ComponentType<{className: string}>;
23
24type SocialPlatformConfig = {Icon: SocialIcon; label: string};
25
26const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
27  twitter: {Icon: Twitter, label: 'Twitter'},
28  github: {Icon: GitHub, label: 'GitHub'},
29  stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'},
30  linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
31  x: {Icon: X, label: 'X'},
32  bluesky: {Icon: Bluesky, label: 'Bluesky'},
33  instagram: {Icon: Instagram, label: 'Instagram'},
34  threads: {Icon: Threads, label: 'Threads'},
35  mastodon: {Icon: Mastodon, label: 'Mastodon'},
36  youtube: {Icon: Youtube, label: 'YouTube'},
37  twitch: {Icon: Twitch, label: 'Twitch'},
38};
39
40function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig {
41  return (
42    SocialPlatformConfigs[platformKey] ?? {
43      Icon: DefaultSocialIcon,
44      label: platformKey,
45    }
46  );
47}
48
49function SocialLink({platform, link}: {platform: string; link: string}) {
50  const {Icon, label} = getSocialPlatformConfig(platform);
51  return (
52    <Link className={styles.authorSocialLink} href={link} title={label}>
53      <Icon className={clsx(styles.authorSocialLink)} />
54    </Link>
55  );
56}
57
58export default function BlogAuthorSocials({
59  author,
60}: {
61  author: Props['author'];
62}): ReactNode {
63  const entries = Object.entries(author.socials ?? {});
64  return (
65    <div className={styles.authorSocials}>
66      {entries.map(([platform, linkUrl]) => {
67        return <SocialLink key={platform} platform={platform} link={linkUrl} />;
68      })}
69    </div>
70  );
71}
72

1import type {ComponentType, ReactNode} from 'react';
2import React from 'react';
3import clsx from 'clsx';
4import Link from '@docusaurus/Link';
5import type {Props} from '@theme/Blog/Components/Author/Socials';
6
7import Twitter from '@theme/Icon/Socials/Twitter';
8import GitHub from '@theme/Icon/Socials/GitHub';
9import X from '@theme/Icon/Socials/X';
10import StackOverflow from '@theme/Icon/Socials/StackOverflow';
11import LinkedIn from '@theme/Icon/Socials/LinkedIn';
12import DefaultSocialIcon from '@theme/Icon/Socials/Default';
13import Bluesky from '@theme/Icon/Socials/Bluesky';
14import Instagram from '@theme/Icon/Socials/Instagram';
15import Threads from '@theme/Icon/Socials/Threads';
16import Youtube from '@theme/Icon/Socials/YouTube';
17import Mastodon from '@theme/Icon/Socials/Mastodon';
18import Twitch from '@theme/Icon/Socials/Twitch';
19
20import styles from './styles.module.css';
21
22type SocialIcon = ComponentType<{className: string}>;
23
24type SocialPlatformConfig = {Icon: SocialIcon; label: string};
25
26const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
27  twitter: {Icon: Twitter, label: 'Twitter'},
28  github: {Icon: GitHub, label: 'GitHub'},
29  stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'},
30  linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
31  x: {Icon: X, label: 'X'},
32  bluesky: {Icon: Bluesky, label: 'Bluesky'},
33  instagram: {Icon: Instagram, label: 'Instagram'},
34  threads: {Icon: Threads, label: 'Threads'},
35  mastodon: {Icon: Mastodon, label: 'Mastodon'},
36  youtube: {Icon: Youtube, label: 'YouTube'},
37  twitch: {Icon: Twitch, label: 'Twitch'},
38};
39
40function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig {
41  return (
42    SocialPlatformConfigs[platformKey] ?? {
43      Icon: DefaultSocialIcon,
44      label: platformKey,
45    }
46  );
47}
48
49function SocialLink({platform, link}: {platform: string; link: string}) {
50  const {Icon, label} = getSocialPlatformConfig(platform);
51  return (
52    <Link className={styles.authorSocialLink} href={link} title={label}>
53      <Icon className={clsx(styles.authorSocialLink)} />
54    </Link>
55  );
56}
57
58export default function BlogAuthorSocials({
59  author,
60}: {
61  author: Props['author'];
62}): ReactNode {
63  const entries = Object.entries(author.socials ?? {});
64  return (
65    <div className={styles.authorSocials}>
66      {entries.map(([platform, linkUrl]) => {
67        return <SocialLink key={platform} platform={platform} link={linkUrl} />;
68      })}
69    </div>
70  );
71}
72