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

Co-authored-by: sebastien <lorber.sebastien@gmail.com>
Co-authored-by: Chas Emerick <chas@cemerick.com>

.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)}
+      className={clsx(props.className, styles.githubSvg)}>
-      xmlns="http://www.w3.org/2000/svg"
-      style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}
-      preserveAspectRatio="xMidYMid">
       <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);
+}

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

@@ -11,9 +11,9 @@ import type {ReactNode, SVGProps} from 'react';
 function LinkedIn(props: SVGProps<SVGSVGElement>): ReactNode {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       width="1em"
       height="1em"
-      xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMid"
       viewBox="0 0 256 256"
       {...props}>

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

@@ -0,0 +1,45 @@
+/**
+ * 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 {useId} from 'react';
+import type {SVGProps, ReactNode} from 'react';
+
+// SVG Source: https://svgl.app/
+function Mastodon(props: SVGProps<SVGSVGElement>): ReactNode {
+  const gradientId = useId();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 61 65"
+      width="1em"
+      height="1em"
+      {...props}>
+      <path
+        fill={`url(#${gradientId})`}
+        d="M60.754 14.39C59.814 7.406 53.727 1.903 46.512.836 45.294.656 40.682 0 29.997 0h-.08C19.23 0 16.938.656 15.72.836 8.705 1.873 2.299 6.82.745 13.886c-.748 3.48-.828 7.338-.689 10.877.198 5.075.237 10.142.697 15.197a71.482 71.482 0 0 0 1.664 9.968c1.477 6.056 7.458 11.096 13.317 13.152a35.718 35.718 0 0 0 19.484 1.028 28.365 28.365 0 0 0 2.107-.576c1.572-.5 3.413-1.057 4.766-2.038a.154.154 0 0 0 .062-.118v-4.899a.146.146 0 0 0-.055-.111.145.145 0 0 0-.122-.028 54 54 0 0 1-12.644 1.478c-7.328 0-9.298-3.478-9.863-4.925a15.258 15.258 0 0 1-.857-3.882.142.142 0 0 1 .178-.145 52.976 52.976 0 0 0 12.437 1.477c1.007 0 2.012 0 3.02-.026 4.213-.119 8.654-.334 12.8-1.144.103-.02.206-.038.295-.065 6.539-1.255 12.762-5.196 13.394-15.176.024-.393.083-4.115.083-4.523.003-1.386.446-9.829-.065-15.017Z"
+      />
+      <path
+        fill="#fff"
+        d="M50.394 22.237v17.35H43.52V22.749c0-3.545-1.478-5.353-4.483-5.353-3.303 0-4.958 2.139-4.958 6.364v9.217h-6.835V23.76c0-4.225-1.657-6.364-4.96-6.364-2.988 0-4.48 1.808-4.48 5.353v16.84H10.93V22.237c0-3.545.905-6.362 2.715-8.45 1.868-2.082 4.317-3.152 7.358-3.152 3.519 0 6.178 1.354 7.951 4.057l1.711 2.871 1.714-2.871c1.773-2.704 4.432-4.056 7.945-4.056 3.038 0 5.487 1.069 7.36 3.152 1.81 2.085 2.712 4.902 2.71 8.449Z"
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1={30.5}
+          x2={30.5}
+          y1={0}
+          y2={65}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#6364FF" />
+          <stop offset={1} stopColor="#563ACC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+export default Mastodon;

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

@@ -0,0 +1,30 @@
+/**
+ * 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 Threads(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Threads"
+      viewBox="0 0 192 192"
+      width="1em"
+      fill="none"
+      height="1em"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.threadsSvg)}>
+      <path d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.114 3.895-.169 5.79-.169 6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z" />
+    </svg>
+  );
+}
+export default Threads;

packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/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'] .threadsSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .threadsSvg {
+  fill: var(--dark);
+}

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

@@ -0,0 +1,37 @@
+/**
+ * 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 Twitch(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x={0}
+      y={0}
+      viewBox="0 0 2400 2800"
+      width="1em"
+      height="1em"
+      {...props}>
+      <path
+        d="m2200 1300-400 400h-400l-350 350v-350H600V200h1600z"
+        fill="#fff"
+      />
+      <g>
+        <path
+          d="M500 0 0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300-400 400h-400l-350 350v-350H600V200h1600v1100z"
+          fill="#9146ff"
+        />
+        <path
+          d="M1700 550h200v600h-200zM1150 550h200v600h-200z"
+          fill="#9146ff"
+        />
+      </g>
+    </svg>
+  );
+}
+export default Twitch;

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

@@ -11,10 +11,10 @@ import type {ReactNode, SVGProps} from 'react';
 function Twitter(props: SVGProps<SVGSVGElement>): ReactNode {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 209"
       width="1em"
       height="1em"
-      xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMid"
       {...props}>
       <path

packages/docusaurus-theme-classic/src/theme/Icon/Socials/X/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';
@@ -19,9 +19,9 @@ function X(props: SVGProps<SVGSVGElement>): ReactNode {
       height="1em"
       fill="none"
       viewBox="0 0 1200 1227"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
       {...props}
-      className={clsx(props.className, styles.xSvg)}
+      className={clsx(props.className, styles.xSvg)}>
-      style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}>
       <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
     </svg>
   );

packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/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 YouTube(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      viewBox="0 0 256 180"
+      width="1em"
+      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      {...props}>
+      <path
+        d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
+        fill="red"
+      />
+      <path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z" />
+    </svg>
+  );
+}
+export default YouTube;

project-words.txt

@@ -25,6 +25,9 @@ beforeinstallprompt
 Bhatt
 blockquotes
 Blockquotes
+bluesky
+Bluesky
+BLUESKY
 Bokmål
 bunx
 caabernathy
@@ -94,6 +97,8 @@ froms
 gabrielcsapo
 getcanary
 Gifs
+gingergeek
+gingergeekuk
 Goss
 Goyal
 gtag
@@ -174,6 +179,7 @@ metrica
 Metrika
 microdata
 Microdata
+Milnes
 mindmap
 Mindmap
 mkdn
@@ -320,6 +326,7 @@ Tagkey
 Teik
 Therox
 toplevel
+thisweekinreact
 Transifex
 transpiles
 treeified
@@ -363,6 +370,7 @@ Yacop
 yangshun
 Yangshun
 yangshunz
+zedspencermilnes
 Zhou
 zoomable
 zpao

website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx

@@ -9,11 +9,28 @@ authors:
       github: https://github.com/slorber
       stackoverflow: https://stackoverflow.com/users/82609/sebastien-lorber
       linkedin: https://www.linkedin.com/in/sebastienlorber/
+      instagram: https://www.instagram.com/thisweekinreact/
       newsletter: https://thisweekinreact.com/newsletter
   - name: Sébastien Lorber
     imageURL: https://github.com/slorber.png
     socials:
       x: https://x.com/sebastienlorber
+      instagram: thisweekinreact
+  - name: Zed Spencer-Milnes
+    title: All the socials test
+    urL: https://gingergeek.co.uk
+    image_url: https://github.com/GingerGeek.png
+    page: false
+    socials:
+      x: GingerGeek
+      github: gingergeek
+      linkedin: zedspencermilnes
+      youtube: gingergeekuk
+      bluesky: gingergeek.co.uk
+      stackoverflow: 2064409
+      twitch: gingergeek
+      threads: gingergeekuk
+      mastodon: https://hachyderm.io/@zed
   - name: Sébastien Lorber
     imageURL: https://github.com/slorber.png
     title: Docusaurus Maintainer and This Week In React editor

website/blog/authors.yml

@@ -24,14 +24,13 @@ slorber:
   url: https://thisweekinreact.com
   image_url: https://github.com/slorber.png
   page: true
-  description: >
+  description: A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.
-    A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.
-
-
   socials:
+    bluesky: sebastienlorber.com
     x: sebastienlorber
     linkedin: sebastienlorber
     github: slorber
+    instagram: thisweekinreact
     newsletter: https://thisweekinreact.com
 
 yangshun:

website/docs/api/plugins/plugin-content-blog.mdx

@@ -278,7 +278,8 @@ type AuthorKey = string;
 
 // Social platform name -> Social platform link
 // Example: {MyPlatform: 'https://myplatform.com/myusername'}
-// Pre-defined platforms ("x", "github", "twitter", "linkedin", "stackoverflow") accept handles:
+// Pre-defined platforms
+// ("x", "github", "twitter", "linkedin", "stackoverflow", "instagram", "bluesky", "mastodon", "threads", "twitch", "youtube") accept handles:
 // Example: {github: 'slorber'}
 type AuthorSocials = Record<string, string>;