Add logics and icons for Bluesky and Mastodon social media.

docusaurus.config.ts

@@ -129,6 +129,22 @@ const config: Config = {
           target: "_blank",
           className: "x-icon",
         },
+
+        {
+          to: "https://bsky.app/profile/quantstack.bsky.social",
+          title: "Bluesky",
+          position: "right",
+          target: "_blank",
+          className: "bluesky-icon",
+        },
+
+        {
+          to: "https://mastodon.social/@QuantStack",
+          title: "Mastodon",
+          position: "right",
+          target: "_blank",
+          className: "mastodon-icon",
+        },
       ],
     },
 

package.json

@@ -70,6 +70,6 @@
     ]
   },
   "engines": {
-    "node": ">=18.0"
+    "node": "18.x"
   }
 }

src/components/about/SocialMediaContacts.tsx

@@ -3,32 +3,44 @@ import Link from "@docusaurus/Link";
 import GHPicture from "@site/static/img/socialmedias/GH.svg";
 import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
 import XPicture from "@site/static/img/socialmedias/X.svg";
+import BlueskyPicture from "@site/static/img/socialmedias/Bluesky.svg";
+import MastodonPicture from "@site/static/img/socialmedias/Mastodon.svg";
 
 export default function SocialMediaContacts({ person }) {
   return (
     <>
       <div className="flex-full-centered">
         <div>
-          {person.onGithub === "true" ? (
-            <Link href={person.githubLink}>{<GHPicture />}</Link>
+          {person.GitHubLink ? (
+            <Link href={person.GitHubLink}>{<GHPicture />}</Link>
           ) : (
             null
           )}
         </div>
-        {person.onLinkedIn === "true" ? (
+        {person.LinkedInLink ? (
           <Link href={person.LinkedInLink}>{<LinkedInPicture />}</Link>
         ) : (
           null
         )}
-        {person.onX === "true" ? (
+        {person.XLink ? (
           <Link href={person.XLink}>{<XPicture />}</Link>
         ) : (
           null
         )}
+        {person.BlueskyLink ? (
+          <Link href={person.BlueskyLink}>{<BlueskyPicture />}</Link>
+        ) : (
+          null
+        )}
+        {person.MastodonLink ? (
+          <Link href={person.MastodonLink}>{<MastodonPicture />}</Link>
+        ) : (
+          null
+        )}
       </div>
       <div className="flex-full-centered">
-        <Link href={person.githubLink} className={styles.githubname}>
-          {person.githubName}
+        <Link href={person.GitHubLink} className={styles.GitHubName}>
+          {person.GitHubName}
         </Link>
       </div>
     </>