From c93eb9e4930c1cc19c759802e12e1abcfe9130ca Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Mon, 29 Jan 2024 18:28:24 +0100 Subject: [PATCH 1/5] Add support for Reddit and Instagram icons and links --- components/Footer.tsx | 26 +++++++++++++++++ components/PageSocial.module.css | 15 ++++++++++ components/PageSocial.tsx | 48 ++++++++++++++++++++++---------- components/styles.module.css | 11 ++++++++ lib/config.ts | 2 ++ 5 files changed, 87 insertions(+), 15 deletions(-) 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..b93c5d228b 100644 --- a/components/PageSocial.tsx +++ b/components/PageSocial.tsx @@ -6,6 +6,16 @@ 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 { 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' + interface SocialLink { name: string title: string @@ -19,9 +29,7 @@ const socialLinks: SocialLink[] = [ href: `https://twitter.com/${config.twitter}`, title: `Twitter @${config.twitter}`, icon: ( - - - + ) }, @@ -30,9 +38,7 @@ const socialLinks: SocialLink[] = [ href: `https://github.com/${config.github}`, title: `GitHub @${config.github}`, icon: ( - - - + ) }, @@ -41,9 +47,7 @@ const socialLinks: SocialLink[] = [ href: `https://www.linkedin.com/in/${config.linkedin}`, title: `LinkedIn ${config.author}`, icon: ( - - - + ) }, @@ -52,9 +56,16 @@ 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: ( + ) }, @@ -63,9 +74,16 @@ const socialLinks: SocialLink[] = [ href: `https://www.youtube.com/${config.youtube}`, title: `YouTube ${config.youtube}`, icon: ( - - - + + ) + }, + + config.reddit && { + name: 'reddit', + href: `https://www.reddit.com/u/${config.reddit}`, + title: `Instagram ${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) From 79b5a54c4560f9d17390e8b59279bbe17617c829 Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Mon, 29 Jan 2024 18:30:01 +0100 Subject: [PATCH 2/5] Add commented out instagram and reddit config to site.config.ts to document the social links --- site.config.ts | 2 ++ 1 file changed, 2 insertions(+) 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 From ab0b8036728403dcc0ac2090f1ea0fe33402cdff Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Mon, 29 Jan 2024 18:37:26 +0100 Subject: [PATCH 3/5] Fix the titles of the social icons on the right side --- components/PageSocial.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx index b93c5d228b..540cc15b05 100644 --- a/components/PageSocial.tsx +++ b/components/PageSocial.tsx @@ -63,7 +63,7 @@ const socialLinks: SocialLink[] = [ config.instagram && { name: 'instagram', href: `https://www.instagram.com/${config.instagram}`, - title: `Instagram ${config.instagram}`, + title: `Instagram @${config.instagram}`, icon: ( ) @@ -72,7 +72,7 @@ const socialLinks: SocialLink[] = [ config.youtube && { name: 'youtube', href: `https://www.youtube.com/${config.youtube}`, - title: `YouTube ${config.youtube}`, + title: `YouTube @${config.youtube}`, icon: ( ) @@ -81,7 +81,7 @@ const socialLinks: SocialLink[] = [ config.reddit && { name: 'reddit', href: `https://www.reddit.com/u/${config.reddit}`, - title: `Instagram ${config.reddit}`, + title: `Reddit @${config.reddit}`, icon: ( ) From db18839cdf60e1db40de00cd95d72cc139c113d0 Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Mon, 29 Jan 2024 18:44:52 +0100 Subject: [PATCH 4/5] Add the missing instagram & reddit variables to SiteConfig interface --- lib/site-config.ts | 2 ++ 1 file changed, 2 insertions(+) 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; From 5fba1c569b5ca27b2e63915f32aa72cb8635d771 Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Mon, 29 Jan 2024 22:40:56 +0100 Subject: [PATCH 5/5] Remove unused Mastodon and Zhihu FontAwesome icons from side social buttons --- components/PageSocial.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx index 540cc15b05..8949bbe7de 100644 --- a/components/PageSocial.tsx +++ b/components/PageSocial.tsx @@ -9,12 +9,10 @@ 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 { 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' interface SocialLink { name: string