Add Bluesky to welcome card (+ update Twitter/X icon) (#221)

* Add Bluesky to welcome card * Replace Twitter icon with X icon
alveusgg · Jan 16, 2025 · 5a012a8 · 5a012a8
1 parent c5688a8
commit 5a012a8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
@@ -5,6 +5,7 @@ import IconAmazon from "./icons/IconAmazon";
 import IconInstagram from "./icons/IconInstagram";
 import IconTikTok from "./icons/IconTikTok";
 import IconTwitter from "./icons/IconTwitter";
+import IconBluesky from "./icons/IconBluesky";
 import IconPlay from "./icons/IconPlay";
 import IconGitHub from "./icons/IconGitHub";
 
@@ -83,11 +84,21 @@ export default function Welcome(props: WelcomeProps) {
             href="https://www.alveussanctuary.org/twitter"
             rel="noreferrer"
             target="_blank"
-            title="Twitter"
+            title="X (Twitter)"
           >
             <IconTwitter size={32} />
           </a>
         </li>
+        <li className={socialClass}>
+          <a
+            href="https://www.alveussanctuary.org/bluesky"
+            rel="noreferrer"
+            target="_blank"
+            title="Bluesky"
+          >
+            <IconBluesky size={32} />
+          </a>
+        </li>
         {nonDefault && (
           <li className={socialClass}>
             <a

diff --git a/src/components/icons/IconBluesky.tsx b/src/components/icons/IconBluesky.tsx
@@ -0,0 +1,13 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/bluesky)
+export default function IconBluesky(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 512 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/components/icons/IconTwitter.tsx b/src/components/icons/IconTwitter.tsx
@@ -1,12 +1,12 @@
 import { BaseIcon, type IconProps } from "./BaseIcon";
 
-// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/twitter)
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/x-twitter)
 export default function IconTwitter(props: IconProps) {
   return (
     <BaseIcon viewBox="0 0 512 512" {...props}>
       <path
         fill="currentColor"
-        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+        d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
       />
     </BaseIcon>
   );