feat: support Mastodon/BlueSky social button

.env.example

@@ -8,6 +8,8 @@ TWITTER=ccbikai
 GITHUB=ccbikai
 DISCORD=https://DISCORD.com
 PODCASRT=https://PODCASRT.com
+MASTODON=mastodon.social/@Mastodon
+BLUESKY=bsky.app
 
 FOOTER_INJECT=FOOTER_INJECT
 HEADER_INJECT=HEADER_INJECT

README.md

@@ -60,6 +60,8 @@ TIMEZONE="America/New_York"
 TELEGRAM=ccbikai
 TWITTER=ccbikai
 GITHUB=ccbikai
+MASTODON=mastodon.social/@Mastodon
+BLUESKY=bsky.app
 
 ## The following two social media need to be URLs
 DISCORD=https://DISCORD.com

src/assets/bluesky.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+  <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/>
+</svg>

src/assets/mastodon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/>
+  </svg>

src/components/header.astro

@@ -7,6 +7,8 @@ import twitter from '../assets/twitter.svg'
 import github from '../assets/github.svg'
 import discord from '../assets/discord.svg'
 import telegram from '../assets/telegram.svg'
+import mastodon from '../assets/mastodon.svg'
+import bluesky from '../assets/bluesky.svg'
 
 const { SITE_URL } = Astro.locals
 const { channel } = Astro.props
@@ -16,6 +18,8 @@ const TWITTER = getEnv(import.meta.env, Astro, 'TWITTER')
 const GITHUB = getEnv(import.meta.env, Astro, 'GITHUB')
 const TELEGRAM = getEnv(import.meta.env, Astro, 'TELEGRAM')
 const DISCORD = getEnv(import.meta.env, Astro, 'DISCORD')
+const MASTODON = getEnv(import.meta.env, Astro, 'MASTODON')
+const BLUESKY = getEnv(import.meta.env, Astro, 'BLUESKY')
 
 const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
 ---
@@ -110,6 +114,36 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
         </a>
       )
     }
+
+    {
+      MASTODON && MASTODON.length > 0 && (
+        <a href={`https://${MASTODON}`} title="Mastodon" target="_blank">
+          <img
+            {...mastodon}
+            alt={`@${MASTODON}`}
+            class="social-icon"
+            width="1em"
+          />
+        </a>
+      )
+    }
+
+    {
+      BLUESKY && BLUESKY.length > 0 && (
+        <a
+          href={`https://bsky.app/profile/${BLUESKY}`}
+          title="BlueSky"
+          target="_blank"
+        >
+          <img
+            {...bluesky}
+            alt={`@${BLUESKY}`}
+            class="social-icon"
+            width="1em"
+          />
+        </a>
+      )
+    }
   </div>
 </div>