feat(blog): Add author social icons for bluesky, mastodon, threads, twitch, youtube, instagram (#10768)

Co-authored-by: sebastien <[email protected]>
Co-authored-by: Chas Emerick <[email protected]>

Author: 3 people

.prettierignore

@@ -4,6 +4,7 @@ node_modules
 build
 coverage
 .docusaurus
+.idea
 
 .svg
 *.svg

packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts

@@ -15,14 +15,27 @@ describe('normalizeSocials', () => {
       linkedin: 'ozakione',
       github: 'ozakione',
       stackoverflow: 'ozakione',
+      threads: 'gingergeekuk',
+      bluesky: 'gingergeek.co.uk',
+      instagram: 'thisweekinreact',
+      twitch: 'gingergeek',
+      youtube: 'gingergeekuk',
+      mastodon: 'Mastodon',
     };
 
+    // eslint-disable-next-line jest/no-large-snapshots
     expect(normalizeSocials(socials)).toMatchInlineSnapshot(`
       {
+        "bluesky": "https://bsky.app/profile/gingergeek.co.uk",
         "github": "https://github.com/ozakione",
+        "instagram": "https://www.instagram.com/thisweekinreact",
         "linkedin": "https://www.linkedin.com/in/ozakione/",
+        "mastodon": "https://mastodon.social/@Mastodon",
         "stackoverflow": "https://stackoverflow.com/users/ozakione",
+        "threads": "https://www.threads.net/@gingergeekuk",
+        "twitch": "https://twitch.tv/gingergeek",
         "twitter": "https://twitter.com/ozakione",
+        "youtube": "https://youtube.com/@gingergeekuk",
       }
     `);
   });
@@ -33,13 +46,19 @@ describe('normalizeSocials', () => {
       linkedIn: 'ozakione',
       gitHub: 'ozakione',
       STACKoverflow: 'ozakione',
+      instaGRam: 'thisweekinreact',
+      BLUESKY: 'gingergeek.co.uk',
+      tHrEaDs: 'gingergeekuk',
     };
 
     expect(normalizeSocials(socials)).toMatchInlineSnapshot(`
       {
+        "bluesky": "https://bsky.app/profile/gingergeek.co.uk",
         "github": "https://github.com/ozakione",
+        "instagram": "https://www.instagram.com/thisweekinreact",
         "linkedin": "https://www.linkedin.com/in/ozakione/",
         "stackoverflow": "https://stackoverflow.com/users/ozakione",
+        "threads": "https://www.threads.net/@gingergeekuk",
         "twitter": "https://twitter.com/ozakione",
       }
     `);
@@ -62,12 +81,14 @@ describe('normalizeSocials', () => {
       linkedin: 'ozakione',
       github: 'https://github.com/ozakione',
       stackoverflow: 'https://stackoverflow.com/ozakione',
+      mastodon: 'https://hachyderm.io/@hachyderm',
     };
 
     expect(normalizeSocials(socials)).toMatchInlineSnapshot(`
       {
         "github": "https://github.com/ozakione",
         "linkedin": "https://www.linkedin.com/in/ozakione/",
+        "mastodon": "https://hachyderm.io/@hachyderm",
         "stackoverflow": "https://stackoverflow.com/ozakione",
         "twitter": "https://twitter.com/ozakione",
       }

packages/docusaurus-plugin-content-blog/src/authorsSocials.ts

@@ -21,6 +21,12 @@ export const AuthorSocialsSchema = Joi.object<AuthorSocials>({
     .try(Joi.number(), Joi.string())
     .custom((val) => String(val)),
   x: Joi.string(),
+  bluesky: Joi.string(),
+  instagram: Joi.string(),
+  threads: Joi.string(),
+  mastodon: Joi.string(),
+  twitch: Joi.string(),
+  youtube: Joi.string(),
 }).unknown();
 
 type PredefinedPlatformNormalizer = (value: string) => string;
@@ -35,6 +41,12 @@ const PredefinedPlatformNormalizers: Record<
   linkedin: (handle: string) => `https://www.linkedin.com/in/${handle}/`,
   stackoverflow: (userId: string) =>
     `https://stackoverflow.com/users/${userId}`,
+  bluesky: (handle: string) => `https://bsky.app/profile/${handle}`,
+  instagram: (handle: string) => `https://www.instagram.com/${handle}`,
+  threads: (handle: string) => `https://www.threads.net/@${handle}`,
+  mastodon: (handle: string) => `https://mastodon.social/@${handle}`, // can be in format user@other.server and it will redirect if needed
+  twitch: (handle: string) => `https://twitch.tv/${handle}`,
+  youtube: (handle: string) => `https://youtube.com/@${handle}`, // https://support.google.com/youtube/answer/6180214?hl=en
 };
 
 type SocialEntry = [string, string];

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -46,7 +46,13 @@ declare module '@docusaurus/plugin-content-blog' {
     | 'github'
     | 'linkedin'
     | 'stackoverflow'
-    | 'x';
+    | 'x'
+    | 'bluesky'
+    | 'instagram'
+    | 'threads'
+    | 'mastodon'
+    | 'youtube'
+    | 'twitch';
 
   /**
    * Social platforms of the author.

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -1708,6 +1708,54 @@ declare module '@theme/Icon/Socials/StackOverflow' {
   export default function StackOverflow(props: Props): ReactNode;
 }
 
+declare module '@theme/Icon/Socials/Bluesky' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Bluesky(props: Props): ReactNode;
+}
+
+declare module '@theme/Icon/Socials/Instagram' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Instagram(props: Props): ReactNode;
+}
+
+declare module '@theme/Icon/Socials/Threads' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Threads(props: Props): ReactNode;
+}
+
+declare module '@theme/Icon/Socials/YouTube' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function YouTube(props: Props): ReactNode;
+}
+
+declare module '@theme/Icon/Socials/Twitch' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Twitch(props: Props): ReactNode;
+}
+
+declare module '@theme/Icon/Socials/Mastodon' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Mastodon(props: Props): ReactNode;
+}
+
 declare module '@theme/TagsListByLetter' {
   import type {ReactNode} from 'react';
   import type {TagsListItem} from '@docusaurus/utils';

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/index.tsx

@@ -17,6 +17,12 @@ import X from '@theme/Icon/Socials/X';
 import StackOverflow from '@theme/Icon/Socials/StackOverflow';
 import LinkedIn from '@theme/Icon/Socials/LinkedIn';
 import DefaultSocialIcon from '@theme/Icon/Socials/Default';
+import Bluesky from '@theme/Icon/Socials/Bluesky';
+import Instagram from '@theme/Icon/Socials/Instagram';
+import Threads from '@theme/Icon/Socials/Threads';
+import Youtube from '@theme/Icon/Socials/YouTube';
+import Mastodon from '@theme/Icon/Socials/Mastodon';
+import Twitch from '@theme/Icon/Socials/Twitch';
 
 import styles from './styles.module.css';
 
@@ -30,6 +36,12 @@ const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
   stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'},
   linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
   x: {Icon: X, label: 'X'},
+  bluesky: {Icon: Bluesky, label: 'Bluesky'},
+  instagram: {Icon: Instagram, label: 'Instagram'},
+  threads: {Icon: Threads, label: 'Threads'},
+  mastodon: {Icon: Mastodon, label: 'Mastodon'},
+  youtube: {Icon: Youtube, label: 'YouTube'},
+  twitch: {Icon: Twitch, label: 'Twitch'},
 };
 
 function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig {

packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {SVGProps, ReactNode} from 'react';
+
+// SVG Source: https://svgl.app/
+function Bluesky(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 226"
+      {...props}>
+      <path
+        fill="#1185FE"
+        d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"
+      />
+    </svg>
+  );
+}
+export default Bluesky;

packages/docusaurus-theme-classic/src/theme/Icon/Socials/GitHub/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactNode, SVGProps} from 'react';
+import type {ReactNode, SVGProps, CSSProperties} from 'react';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
@@ -14,14 +14,14 @@ import styles from './styles.module.css';
 function GitHub(props: SVGProps<SVGSVGElement>): ReactNode {
   return (
     <svg
-      viewBox="0 0 256 250"
+      xmlns="http://www.w3.org/2000/svg"
       width="1em"
       height="1em"
+      viewBox="0 0 256 250"
+      preserveAspectRatio="xMidYMid"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
       {...props}
-      className={clsx(props.className, styles.githubSvg)}
-      xmlns="http://www.w3.org/2000/svg"
-      style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}
-      preserveAspectRatio="xMidYMid">
+      className={clsx(props.className, styles.githubSvg)}>
       <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
     </svg>
   );

packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type {SVGProps, ReactNode, CSSProperties} from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function Instagram(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 256"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.instagramSvg)}>
+      <path d="M128 23.064c34.177 0 38.225.13 51.722.745 12.48.57 19.258 2.655 23.769 4.408 5.974 2.322 10.238 5.096 14.717 9.575 4.48 4.479 7.253 8.743 9.575 14.717 1.753 4.511 3.838 11.289 4.408 23.768.615 13.498.745 17.546.745 51.723 0 34.178-.13 38.226-.745 51.723-.57 12.48-2.655 19.257-4.408 23.768-2.322 5.974-5.096 10.239-9.575 14.718-4.479 4.479-8.743 7.253-14.717 9.574-4.511 1.753-11.289 3.839-23.769 4.408-13.495.616-17.543.746-51.722.746-34.18 0-38.228-.13-51.723-.746-12.48-.57-19.257-2.655-23.768-4.408-5.974-2.321-10.239-5.095-14.718-9.574-4.479-4.48-7.253-8.744-9.574-14.718-1.753-4.51-3.839-11.288-4.408-23.768-.616-13.497-.746-17.545-.746-51.723 0-34.177.13-38.225.746-51.722.57-12.48 2.655-19.258 4.408-23.769 2.321-5.974 5.095-10.238 9.574-14.717 4.48-4.48 8.744-7.253 14.718-9.575 4.51-1.753 11.288-3.838 23.768-4.408 13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155 3.555 52.297 1.392 61.602.77 75.226.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774.622 13.625 2.785 22.93 5.95 31.071 3.27 8.417 7.647 15.556 14.763 22.672 7.116 7.116 14.254 11.492 22.672 14.763 8.142 3.165 17.446 5.328 31.07 5.95 13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95 8.418-3.27 15.556-7.647 22.672-14.763 7.116-7.116 11.493-14.254 14.764-22.672 3.164-8.142 5.328-17.446 5.95-31.07.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0Zm0 62.27C91.698 62.27 62.27 91.7 62.27 128c0 36.302 29.428 65.73 65.73 65.73 36.301 0 65.73-29.428 65.73-65.73 0-36.301-29.429-65.73-65.73-65.73Zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667-19.103 42.667-42.667 42.667Zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36-8.483 0-15.36-6.876-15.36-15.36 0-8.483 6.877-15.36 15.36-15.36 8.484 0 15.36 6.877 15.36 15.36Z" />
+    </svg>
+  );
+}
+
+export default Instagram;

packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/styles.module.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+[data-theme='dark'] .instagramSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .instagramSvg {
+  fill: var(--dark);
+}