Merge branch 'main' into newsletter-icon

lutao0226 · Jun 2, 2022 · d265d02 · d265d02
2 parents 2db0944 + 8bfdb19
commit d265d02
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 3 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -4,6 +4,7 @@ import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
 import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
+import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
 
@@ -106,6 +107,17 @@ export const FooterImpl: React.FC = () => {
             rel='noopener noreferrer'
           >
             <FaEnvelopeOpenText />
+        )}
+
+        {config.youtube && (
+          <a
+            className={styles.youtube}
+            href={`https://www.youtube.com/${config.youtube}`}
+            title={`YouTube ${config.author}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaYoutube />
           </a>
         )}
       </div>

diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css
@@ -100,6 +100,13 @@
   border-color: #c9510c;
 }
 
+.youtube .actionBgPane {
+  background: #FF0000;
+}
+.youtube:hover {
+  border-color: #FF0000;
+}
+
 .medium .actionBgPane {
   background: #00ab6c;
 }

diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx
@@ -55,6 +55,17 @@ const socialLinks: SocialLink[] = [
         <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>
     )
+  },
+
+  config.youtube && {
+    name: 'youtube',
+    href: `https://www.youtube.com/${config.youtube}`,
+    title: `YouTube ${config.youtube}`,
+    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>
+    )
   }
 ].filter(Boolean)
 

diff --git a/components/styles.module.css b/components/styles.module.css
@@ -101,6 +101,10 @@
   color: #c9510c;
 }
 
+.youtube:hover {
+  color: #ff0000;
+}
+
 .linkedin:hover {
   color: #0077b5;
 }

diff --git a/lib/config.ts b/lib/config.ts
@@ -56,6 +56,7 @@ export const language: string = getSiteConfig('language', 'en')
 // social accounts
 export const twitter: string | null = getSiteConfig('twitter', 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)
@@ -146,8 +147,8 @@ export const site: Site = {
 export const fathomId = isDev ? null : process.env.NEXT_PUBLIC_FATHOM_ID
 export const fathomConfig = fathomId
   ? {
-      excludedDomains: ['localhost', 'localhost:3000']
-    }
+    excludedDomains: ['localhost', 'localhost:3000']
+  }
   : undefined
 
 export const posthogId = process.env.NEXT_PUBLIC_POSTHOG_ID

diff --git a/lib/site-config.ts b/lib/site-config.ts
@@ -14,6 +14,7 @@ export interface SiteConfig {
   github?: string
   linkedin?: string
   newsletter?: string
+  youtube?: string
   zhihu?: string
 
   defaultPageIcon?: string | null

diff --git a/site.config.ts b/site.config.ts
@@ -20,7 +20,8 @@ export default siteConfig({
   twitter: 'transitive_bs',
   github: 'transitive-bullshit',
   linkedin: 'fisch2',
-  // newsletter: '#', //Use full newsletter URL
+  // newsletter: '#', // optional newsletter URL
+  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
 
   // default notion icon and cover images for site-wide consistency (optional)
   // page-specific values will override these site-wide defaults