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