✨ Add support for Mastodon link in footer

components/Footer.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
+import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
 import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
 import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
 import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
@@ -63,6 +64,17 @@ export const FooterImpl: React.FC = () => {
           </a>
         )}
 
+        {config.mastodon && (
+          <a
+            className={styles.mastodon}
+            href={config.mastodon}
+            title={`Mastodon ${config.getMastodonHandle()}`}
+            rel='me'
+          >
+            <FaMastodon />
+          </a>
+        )}
+
         {config.zhihu && (
           <a
             className={styles.zhihu}

components/styles.module.css

@@ -93,6 +93,10 @@
   color: #2795e9;
 }
 
+.mastodon:hover {
+  color: #5a4be1;
+}
+
 .zhihu:hover {
   color: #0066ff;
 }