add social icons for mastodon and bluesky

Author: cemerick

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

@@ -1708,6 +1708,22 @@ declare module '@theme/Icon/Socials/StackOverflow' {
   export default function StackOverflow(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/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/TagsListByLetter' {
   import type {ReactNode} from 'react';
   import type {TagsListItem} from '@docusaurus/utils';

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

@@ -16,6 +16,8 @@ import GitHub from '@theme/Icon/Socials/GitHub';
 import X from '@theme/Icon/Socials/X';
 import StackOverflow from '@theme/Icon/Socials/StackOverflow';
 import LinkedIn from '@theme/Icon/Socials/LinkedIn';
+import Mastodon from '@theme/Icon/Socials/Mastodon';
+import Bluesky from '@theme/Icon/Socials/Bluesky';
 import DefaultSocialIcon from '@theme/Icon/Socials/Default';
 
 import styles from './styles.module.css';
@@ -30,6 +32,8 @@ const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
   stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'},
   linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
   x: {Icon: X, label: 'X'},
+  mastodon: { Icon: Mastodon, label: "Mastodon" },
+  bluesky: { Icon: Bluesky, label: "Bluesky" },
 };
 
 function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig {

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

@@ -0,0 +1,25 @@
+/**
+ * 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 {ReactNode, SVGProps} 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

@@ -26,4 +26,4 @@ function GitHub(props: SVGProps<SVGSVGElement>): ReactNode {
     </svg>
   );
 }
-export default GitHub;
+export default GitHub;

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

@@ -0,0 +1,29 @@
+/**
+ * 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 {ReactNode, SVGProps} from 'react';
+
+// SVG Source: https://svgl.app/
+function Mastodon(props: SVGProps<SVGSVGElement>): ReactNode {
+  return <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 61 65"
+    width="1em"
+    height="1em"
+    {...props}>
+    <path
+      fill="#563ACC"
+      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"
+    />
+  </svg>
+};
+export default Mastodon;

project-words.txt

@@ -25,6 +25,7 @@ beforeinstallprompt
 Bhatt
 blockquotes
 Blockquotes
+bluesky
 Bokmål
 bunx
 caabernathy
@@ -155,6 +156,7 @@ Marcey's
 markprompt
 Markprompt
 Massoud
+mastodon
 mathjax
 maxlynch
 maxresdefault

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

@@ -10,6 +10,8 @@ authors:
       stackoverflow: https://stackoverflow.com/users/82609/sebastien-lorber
       linkedin: https://www.linkedin.com/in/sebastienlorber/
       newsletter: https://thisweekinreact.com/newsletter
+      bluesky: https://bsky.app/profile/sebastienlorber.com
+      mastodon: https://mastodon.social/@sebastienlorber
   - name: Sébastien Lorber
     imageURL: https://github.com/slorber.png
     socials:

website/_dogfooding/_blog tests/authors.yml

@@ -6,6 +6,7 @@ slorber:
   page: true
   socials:
     x: sebastienlorber
+    bluesky: https://bsky.app/profile/sebastienlorber.com
 
 ozaki:
   name: ozaki