Add Reddit and Instagram social links

components/Footer.tsx

@@ -6,6 +6,8 @@ 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 { FaReddit } from '@react-icons/all-files/fa/FaReddit'
+import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram'
 import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
@@ -124,6 +126,18 @@ export const FooterImpl: React.FC = () => {
           </a>
         )}
 
+        {config.instagram && (
+          <a
+            className={styles.instagram}
+            href={`https://www.reddit.com/u/${config.instagram}`}
+            title={`Instagram ${config.author}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaInstagram />
+          </a>
+        )}
+
         {config.youtube && (
           <a
             className={styles.youtube}
@@ -135,6 +149,18 @@ export const FooterImpl: React.FC = () => {
             <FaYoutube />
           </a>
         )}
+
+        {config.reddit && (
+          <a
+            className={styles.reddit}
+            href={`https://www.reddit.com/u/${config.reddit}`}
+            title={`Reddit ${config.author}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaReddit />
+          </a>
+        )}
       </div>
     </footer>
   )

components/PageSocial.module.css

@@ -107,6 +107,21 @@
   border-color: #FF0000;
 }
 
+.instagram .actionBgPane {
+  background: #d6249f;
+  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
+}
+.instagram:hover {
+  border-color: #FFFFFF;
+}
+
+.reddit .actionBgPane {
+  background: #FF5700;
+}
+.reddit:hover {
+  border-color: #FF5700;
+}
+
 .medium .actionBgPane {
   background: #00ab6c;
 }

components/PageSocial.tsx

@@ -6,6 +6,14 @@ import * as config from '@/lib/config'
 
 import styles from './PageSocial.module.css'
 
+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 { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
+import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
+import { FaReddit } from '@react-icons/all-files/fa/FaReddit'
+import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram'
+
 interface SocialLink {
   name: string
   title: string
@@ -19,9 +27,7 @@ const socialLinks: SocialLink[] = [
     href: `https://twitter.com/${config.twitter}`,
     title: `Twitter @${config.twitter}`,
     icon: (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-        <path d='M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z' />
-      </svg>
+      <FaTwitter />
     )
   },
 
@@ -30,9 +36,7 @@ const socialLinks: SocialLink[] = [
     href: `https://github.com/${config.github}`,
     title: `GitHub @${config.github}`,
     icon: (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-        <path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'></path>
-      </svg>
+      <FaGithub />
     )
   },
 
@@ -41,9 +45,7 @@ const socialLinks: SocialLink[] = [
     href: `https://www.linkedin.com/in/${config.linkedin}`,
     title: `LinkedIn ${config.author}`,
     icon: (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-        <path d='M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z' />
-      </svg>
+      <FaLinkedin />
     )
   },
 
@@ -52,20 +54,34 @@ const socialLinks: SocialLink[] = [
     href: `${config.newsletter}`,
     title: `Newsletter ${config.author}`,
     icon: (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-        <path d='M12 .64L8.23 3H5V5L2.97 6.29C2.39 6.64 2 7.27 2 8V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V8C22 7.27 21.61 6.64 21.03 6.29L19 5V3H15.77M7 5H17V9.88L12 13L7 9.88M8 6V7.5H16V6M5 7.38V8.63L4 8M19 7.38L20 8L19 8.63M8 8.5V10H16V8.5Z' />
-      </svg>
+      <FaEnvelopeOpenText />
+    )
+  },
+
+  config.instagram && {
+    name: 'instagram',
+    href: `https://www.instagram.com/${config.instagram}`,
+    title: `Instagram @${config.instagram}`,
+    icon: (
+      <FaInstagram />
     )
   },
 
   config.youtube && {
     name: 'youtube',
     href: `https://www.youtube.com/${config.youtube}`,
-    title: `YouTube ${config.youtube}`,
+    title: `YouTube @${config.youtube}`,
+    icon: (
+      <FaYoutube />
+    )
+  },
+
+  config.reddit && {
+    name: 'reddit',
+    href: `https://www.reddit.com/u/${config.reddit}`,
+    title: `Reddit @${config.reddit}`,
     icon: (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-        <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' />
-      </svg>
+      <FaReddit />
     )
   }
 ].filter(Boolean)

components/styles.module.css

@@ -110,6 +110,17 @@
   color: #ff0000;
 }
 
+.reddit:hover {
+  color: #FF5700;
+}
+
+.instagram:hover {
+  border-radius: 40px;
+  color: #fff;
+  background: #d6249f;
+  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
+}
+
 .linkedin:hover {
   color: #0077b5;
 }

lib/config.ts

@@ -57,7 +57,9 @@ export const language: string = getSiteConfig('language', 'en')
 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 instagram: string | null = getSiteConfig('instagram', null)
 export const youtube: string | null = getSiteConfig('youtube', null)
+export const reddit: string | null = getSiteConfig('reddit', 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)

lib/site-config.ts

@@ -14,7 +14,9 @@ export interface SiteConfig {
   github?: string
   linkedin?: string
   newsletter?: string
+  instagram?: string
   youtube?: string
+  reddit?: string
   zhihu?: string
   mastodon?: string;
 

site.config.ts

@@ -22,7 +22,9 @@ export default siteConfig({
   linkedin: 'fisch2',
   // mastodon: '#', // optional mastodon profile URL, provides link verification
   // newsletter: '#', // optional newsletter URL
+  // instagram: '#', // optional instagram username
   // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
+  // reddit: '#', // optional reddit username
 
   // default notion icon and cover images for site-wide consistency (optional)
   // page-specific values will override these site-wide defaults