From aafab40f6849c92edad6ead2c01bf33cc1d29834 Mon Sep 17 00:00:00 2001
From: Isaac Overacker <isaac@alchemyrpg.com>
Date: Sat, 12 Nov 2022 21:26:41 -0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20support=20for=20Mastodon=20li?=
 =?UTF-8?q?nk=20in=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Footer.tsx        | 12 ++++++++++++
 components/styles.module.css |  4 ++++
 lib/config.ts                | 12 ++++++++++++
 lib/site-config.ts           |  1 +
 site.config.ts               |  1 +
 5 files changed, 30 insertions(+)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 29e4b1c..4ae849a 100644
--- a/components/Footer.tsx
+++ b/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}
diff --git a/components/styles.module.css b/components/styles.module.css
index 011b197..32cbfa4 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -93,6 +93,10 @@
   color: #2795e9;
 }
 
+.mastodon:hover {
+  color: #5a4be1;
+}
+
 .zhihu:hover {
   color: #0066ff;
 }
diff --git a/lib/config.ts b/lib/config.ts
index f82bc1d..4b3d6e8 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -55,12 +55,24 @@ export const language: string = getSiteConfig('language', 'en')
 
 // social accounts
 export const twitter: string | null = getSiteConfig('twitter', null)
+export const mastodon: string | null = getSiteConfig('mastodon', null)
 export const github: string | null = getSiteConfig('github', null)
 export const youtube: string | null = getSiteConfig('youtube', null)
 export const linkedin: string | null = getSiteConfig('linkedin', null)
 export const newsletter: string | null = getSiteConfig('newsletter', null)
 export const zhihu: string | null = getSiteConfig('zhihu', null)
 
+export const getMastodonHandle = (): string | null => {
+  if (!mastodon) {
+    return null
+  }
+
+  // Since Mastodon is decentralized, handles include the instance domain name.
+  // e.g. @example@mastodon.social
+  const url = new URL(mastodon)
+  return `${url.pathname.slice(1)}@${url.hostname}`
+}
+
 // default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
 export const defaultPageIcon: string | null = getSiteConfig(
   'defaultPageIcon',
diff --git a/lib/site-config.ts b/lib/site-config.ts
index 61552d5..b8c4fb6 100644
--- a/lib/site-config.ts
+++ b/lib/site-config.ts
@@ -16,6 +16,7 @@ export interface SiteConfig {
   newsletter?: string
   youtube?: string
   zhihu?: string
+  mastodon?: string;
 
   defaultPageIcon?: string | null
   defaultPageCover?: string | null
diff --git a/site.config.ts b/site.config.ts
index f17107c..4b82dc5 100644
--- a/site.config.ts
+++ b/site.config.ts
@@ -20,6 +20,7 @@ export default siteConfig({
   twitter: 'transitive_bs',
   github: 'transitive-bullshit',
   linkedin: 'fisch2',
+  // mastodon: '#', // optional mastodon profile URL, provides link verification
   // newsletter: '#', // optional newsletter URL
   // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`