diff --git a/components/Footer.tsx b/components/Footer.tsx
index 2e5452627b..e63aded572 100644
--- a/components/Footer.tsx
+++ b/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 = () => {
)}
+ {config.instagram && (
+
+
+
+ )}
+
{config.youtube && (
{
)}
+
+ {config.reddit && (
+
+
+
+ )}
)
diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css
index 87113e258a..66697892ed 100644
--- a/components/PageSocial.module.css
+++ b/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;
}
diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx
index 36ec81900c..8949bbe7de 100644
--- a/components/PageSocial.tsx
+++ b/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: (
-
+
)
},
@@ -30,9 +36,7 @@ const socialLinks: SocialLink[] = [
href: `https://github.com/${config.github}`,
title: `GitHub @${config.github}`,
icon: (
-
+
)
},
@@ -41,9 +45,7 @@ const socialLinks: SocialLink[] = [
href: `https://www.linkedin.com/in/${config.linkedin}`,
title: `LinkedIn ${config.author}`,
icon: (
-
+
)
},
@@ -52,20 +54,34 @@ const socialLinks: SocialLink[] = [
href: `${config.newsletter}`,
title: `Newsletter ${config.author}`,
icon: (
-
+
+ )
+ },
+
+ config.instagram && {
+ name: 'instagram',
+ href: `https://www.instagram.com/${config.instagram}`,
+ title: `Instagram @${config.instagram}`,
+ icon: (
+
)
},
config.youtube && {
name: 'youtube',
href: `https://www.youtube.com/${config.youtube}`,
- title: `YouTube ${config.youtube}`,
+ title: `YouTube @${config.youtube}`,
+ icon: (
+
+ )
+ },
+
+ config.reddit && {
+ name: 'reddit',
+ href: `https://www.reddit.com/u/${config.reddit}`,
+ title: `Reddit @${config.reddit}`,
icon: (
-
+
)
}
].filter(Boolean)
diff --git a/components/styles.module.css b/components/styles.module.css
index bea8ff1ed9..64b4772ab6 100644
--- a/components/styles.module.css
+++ b/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;
}
diff --git a/lib/config.ts b/lib/config.ts
index bab17e983c..aa81596b2a 100644
--- a/lib/config.ts
+++ b/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)
diff --git a/lib/site-config.ts b/lib/site-config.ts
index b8c4fb60a1..af7eaf2ad2 100644
--- a/lib/site-config.ts
+++ b/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;
diff --git a/site.config.ts b/site.config.ts
index cded79c3bf..07703f283d 100644
--- a/site.config.ts
+++ b/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