Adding YouTube social icon

components/Footer.tsx

@@ -3,6 +3,7 @@ import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
 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 { 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'
 
@@ -95,6 +96,18 @@ export const FooterImpl: React.FC = () => {
             <FaLinkedin />
           </a>
         )}
+
+        {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>
     </footer>
   )

components/PageSocial.module.css

@@ -100,6 +100,13 @@
   border-color: #c9510c;
 }
 
+.youtube .actionBgPane {
+  background: #FF0000;
+}
+.youtube:hover {
+  border-color: #FF0000;
+}
+
 .medium .actionBgPane {
   background: #00ab6c;
 }

components/PageSocial.tsx

@@ -44,6 +44,17 @@ const socialLinks: SocialLink[] = [
         <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>
     )
+  },
+
+  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)
 

components/styles.module.css

@@ -101,6 +101,10 @@
   color: #c9510c;
 }
 
+.youtube:hover {
+  color: #ff0000;
+}
+
 .linkedin:hover {
   color: #0077b5;
 }

lib/config.ts

@@ -5,199 +5,201 @@
  * for optional depenencies.
  */
 
-import { parsePageId } from 'notion-utils'
-import posthog from 'posthog-js'
-import { getEnv, getSiteConfig } from './get-config-value'
-import { NavigationLink } from './site-config'
-import {
-  PageUrlOverridesInverseMap,
-  PageUrlOverridesMap,
-  NavigationStyle,
-  Site
-} from './types'
-
-export const rootNotionPageId: string = parsePageId(
-  getSiteConfig('rootNotionPageId'),
-  { uuid: false }
-)
-
-if (!rootNotionPageId) {
-  throw new Error('Config error invalid "rootNotionPageId"')
-}
-
-// if you want to restrict pages to a single notion workspace (optional)
-export const rootNotionSpaceId: string | null = parsePageId(
-  getSiteConfig('rootNotionSpaceId', null),
-  { uuid: true }
-)
-
-export const pageUrlOverrides = cleanPageUrlMap(
-  getSiteConfig('pageUrlOverrides', {}) || {},
-  { label: 'pageUrlOverrides' }
-)
-
-export const pageUrlAdditions = cleanPageUrlMap(
-  getSiteConfig('pageUrlAdditions', {}) || {},
-  { label: 'pageUrlAdditions' }
-)
-
-export const inversePageUrlOverrides = invertPageUrlOverrides(pageUrlOverrides)
-
-export const environment = process.env.NODE_ENV || 'development'
-export const isDev = environment === 'development'
-
-// general site config
-export const name: string = getSiteConfig('name')
-export const author: string = getSiteConfig('author')
-export const domain: string = getSiteConfig('domain')
-export const description: string = getSiteConfig('description', 'Notion Blog')
-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 linkedin: string | null = getSiteConfig('linkedin', null)
-export const zhihu: string | null = getSiteConfig('zhihu', null)
-
-// default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
-export const defaultPageIcon: string | null = getSiteConfig(
-  'defaultPageIcon',
-  null
-)
-export const defaultPageCover: string | null = getSiteConfig(
-  'defaultPageCover',
-  null
-)
-export const defaultPageCoverPosition: number = getSiteConfig(
-  'defaultPageCoverPosition',
-  0.5
-)
-
-// Optional whether or not to enable support for LQIP preview images
-export const isPreviewImageSupportEnabled: boolean = getSiteConfig(
-  'isPreviewImageSupportEnabled',
-  false
-)
-
-// Optional whether or not to include the Notion ID in page URLs or just use slugs
-export const includeNotionIdInUrls: boolean = getSiteConfig(
-  'includeNotionIdInUrls',
-  !!isDev
-)
-
-export const navigationStyle: NavigationStyle = getSiteConfig(
-  'navigationStyle',
-  'default'
-)
-
-export const navigationLinks: Array<NavigationLink | null> = getSiteConfig(
-  'navigationLinks',
-  null
-)
-
-// Optional site search
-export const isSearchEnabled: boolean = getSiteConfig('isSearchEnabled', true)
-
-// ----------------------------------------------------------------------------
-
-// Optional redis instance for persisting preview images
-export const isRedisEnabled: boolean =
-  getSiteConfig('isRedisEnabled', false) || !!getEnv('REDIS_ENABLED', null)
-
-// (if you want to enable redis, only REDIS_HOST and REDIS_PASSWORD are required)
-// we recommend that you store these in a local `.env` file
-export const redisHost: string | null = getEnv('REDIS_HOST', null)
-export const redisPassword: string | null = getEnv('REDIS_PASSWORD', null)
-export const redisUser: string = getEnv('REDIS_USER', 'default')
-export const redisUrl = getEnv(
-  'REDIS_URL',
-  `redis://${redisUser}:${redisPassword}@${redisHost}`
-)
-export const redisNamespace: string | null = getEnv(
-  'REDIS_NAMESPACE',
-  'preview-images'
-)
-
-// ----------------------------------------------------------------------------
-
-export const isServer = typeof window === 'undefined'
-
-export const port = getEnv('PORT', '3000')
-export const host = isDev ? `http://localhost:${port}` : `https://${domain}`
-
-export const apiBaseUrl = `/api`
-
-export const api = {
-  searchNotion: `${apiBaseUrl}/search-notion`,
-  getSocialImage: `${apiBaseUrl}/social-image`
-}
-
-// ----------------------------------------------------------------------------
-
-export const site: Site = {
-  domain,
-  name,
-  rootNotionPageId,
-  rootNotionSpaceId,
-  description
-}
-
-export const fathomId = isDev ? null : process.env.NEXT_PUBLIC_FATHOM_ID
-export const fathomConfig = fathomId
-  ? {
-      excludedDomains: ['localhost', 'localhost:3000']
-    }
-  : undefined
-
-export const posthogId = process.env.NEXT_PUBLIC_POSTHOG_ID
-export const posthogConfig: posthog.Config = {
-  api_host: 'https://app.posthog.com'
-}
-
-function cleanPageUrlMap(
-  pageUrlMap: PageUrlOverridesMap,
-  {
-    label
-  }: {
-    label: string
-  }
-): PageUrlOverridesMap {
-  return Object.keys(pageUrlMap).reduce((acc, uri) => {
-    const pageId = pageUrlMap[uri]
-    const uuid = parsePageId(pageId, { uuid: false })
-
-    if (!uuid) {
-      throw new Error(`Invalid ${label} page id "${pageId}"`)
-    }
-
-    if (!uri) {
-      throw new Error(`Missing ${label} value for page "${pageId}"`)
-    }
-
-    if (!uri.startsWith('/')) {
-      throw new Error(
-        `Invalid ${label} value for page "${pageId}": value "${uri}" should be a relative URI that starts with "/"`
-      )
-    }
-
-    const path = uri.slice(1)
-
-    return {
-      ...acc,
-      [path]: uuid
-    }
-  }, {})
-}
-
-function invertPageUrlOverrides(
-  pageUrlOverrides: PageUrlOverridesMap
-): PageUrlOverridesInverseMap {
-  return Object.keys(pageUrlOverrides).reduce((acc, uri) => {
-    const pageId = pageUrlOverrides[uri]
-
-    return {
-      ...acc,
-      [pageId]: uri
-    }
-  }, {})
-}
+ import { parsePageId } from 'notion-utils'
+ import posthog from 'posthog-js'
+ import { getEnv, getSiteConfig } from './get-config-value'
+ import { NavigationLink } from './site-config'
+ import {
+   PageUrlOverridesInverseMap,
+   PageUrlOverridesMap,
+   NavigationStyle,
+   Site
+ } from './types'
+ 
+ export const rootNotionPageId: string = parsePageId(
+   getSiteConfig('rootNotionPageId'),
+   { uuid: false }
+ )
+ 
+ if (!rootNotionPageId) {
+   throw new Error('Config error invalid "rootNotionPageId"')
+ }
+ 
+ // if you want to restrict pages to a single notion workspace (optional)
+ export const rootNotionSpaceId: string | null = parsePageId(
+   getSiteConfig('rootNotionSpaceId', null),
+   { uuid: true }
+ )
+ 
+ export const pageUrlOverrides = cleanPageUrlMap(
+   getSiteConfig('pageUrlOverrides', {}) || {},
+   { label: 'pageUrlOverrides' }
+ )
+ 
+ export const pageUrlAdditions = cleanPageUrlMap(
+   getSiteConfig('pageUrlAdditions', {}) || {},
+   { label: 'pageUrlAdditions' }
+ )
+ 
+ export const inversePageUrlOverrides = invertPageUrlOverrides(pageUrlOverrides)
+ 
+ export const environment = process.env.NODE_ENV || 'development'
+ export const isDev = environment === 'development'
+ 
+ // general site config
+ export const name: string = getSiteConfig('name')
+ export const author: string = getSiteConfig('author')
+ export const domain: string = getSiteConfig('domain')
+ export const description: string = getSiteConfig('description', 'Notion Blog')
+ 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 zhihu: string | null = getSiteConfig('zhihu', null)
+ 
+ // default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
+ export const defaultPageIcon: string | null = getSiteConfig(
+   'defaultPageIcon',
+   null
+ )
+ export const defaultPageCover: string | null = getSiteConfig(
+   'defaultPageCover',
+   null
+ )
+ export const defaultPageCoverPosition: number = getSiteConfig(
+   'defaultPageCoverPosition',
+   0.5
+ )
+ 
+ // Optional whether or not to enable support for LQIP preview images
+ export const isPreviewImageSupportEnabled: boolean = getSiteConfig(
+   'isPreviewImageSupportEnabled',
+   false
+ )
+ 
+ // Optional whether or not to include the Notion ID in page URLs or just use slugs
+ export const includeNotionIdInUrls: boolean = getSiteConfig(
+   'includeNotionIdInUrls',
+   !!isDev
+ )
+ 
+ export const navigationStyle: NavigationStyle = getSiteConfig(
+   'navigationStyle',
+   'default'
+ )
+ 
+ export const navigationLinks: Array<NavigationLink | null> = getSiteConfig(
+   'navigationLinks',
+   null
+ )
+ 
+ // Optional site search
+ export const isSearchEnabled: boolean = getSiteConfig('isSearchEnabled', true)
+ 
+ // ----------------------------------------------------------------------------
+ 
+ // Optional redis instance for persisting preview images
+ export const isRedisEnabled: boolean =
+   getSiteConfig('isRedisEnabled', false) || !!getEnv('REDIS_ENABLED', null)
+ 
+ // (if you want to enable redis, only REDIS_HOST and REDIS_PASSWORD are required)
+ // we recommend that you store these in a local `.env` file
+ export const redisHost: string | null = getEnv('REDIS_HOST', null)
+ export const redisPassword: string | null = getEnv('REDIS_PASSWORD', null)
+ export const redisUser: string = getEnv('REDIS_USER', 'default')
+ export const redisUrl = getEnv(
+   'REDIS_URL',
+   `redis://${redisUser}:${redisPassword}@${redisHost}`
+ )
+ export const redisNamespace: string | null = getEnv(
+   'REDIS_NAMESPACE',
+   'preview-images'
+ )
+ 
+ // ----------------------------------------------------------------------------
+ 
+ export const isServer = typeof window === 'undefined'
+ 
+ export const port = getEnv('PORT', '3000')
+ export const host = isDev ? `http://localhost:${port}` : `https://${domain}`
+ 
+ export const apiBaseUrl = `/api`
+ 
+ export const api = {
+   searchNotion: `${apiBaseUrl}/search-notion`,
+   getSocialImage: `${apiBaseUrl}/social-image`
+ }
+ 
+ // ----------------------------------------------------------------------------
+ 
+ export const site: Site = {
+   domain,
+   name,
+   rootNotionPageId,
+   rootNotionSpaceId,
+   description
+ }
+ 
+ export const fathomId = isDev ? null : process.env.NEXT_PUBLIC_FATHOM_ID
+ export const fathomConfig = fathomId
+   ? {
+       excludedDomains: ['localhost', 'localhost:3000']
+     }
+   : undefined
+ 
+ export const posthogId = process.env.NEXT_PUBLIC_POSTHOG_ID
+ export const posthogConfig: posthog.Config = {
+   api_host: 'https://app.posthog.com'
+ }
+ 
+ function cleanPageUrlMap(
+   pageUrlMap: PageUrlOverridesMap,
+   {
+     label
+   }: {
+     label: string
+   }
+ ): PageUrlOverridesMap {
+   return Object.keys(pageUrlMap).reduce((acc, uri) => {
+     const pageId = pageUrlMap[uri]
+     const uuid = parsePageId(pageId, { uuid: false })
+ 
+     if (!uuid) {
+       throw new Error(`Invalid ${label} page id "${pageId}"`)
+     }
+ 
+     if (!uri) {
+       throw new Error(`Missing ${label} value for page "${pageId}"`)
+     }
+ 
+     if (!uri.startsWith('/')) {
+       throw new Error(
+         `Invalid ${label} value for page "${pageId}": value "${uri}" should be a relative URI that starts with "/"`
+       )
+     }
+ 
+     const path = uri.slice(1)
+ 
+     return {
+       ...acc,
+       [path]: uuid
+     }
+   }, {})
+ }
+ 
+ function invertPageUrlOverrides(
+   pageUrlOverrides: PageUrlOverridesMap
+ ): PageUrlOverridesInverseMap {
+   return Object.keys(pageUrlOverrides).reduce((acc, uri) => {
+     const pageId = pageUrlOverrides[uri]
+ 
+     return {
+       ...acc,
+       [pageId]: uri
+     }
+   }, {})
+ }
+ 

lib/site-config.ts

@@ -13,6 +13,7 @@ export interface SiteConfig {
   twitter?: string
   github?: string
   linkedin?: string
+  youtube?: string
   zhihu?: string
 
   defaultPageIcon?: string | null

site.config.ts

@@ -20,6 +20,7 @@ export default siteConfig({
   twitter: 'transitive_bs',
   github: 'transitive-bullshit',
   linkedin: 'fisch2',
+  youtube: '#', //use custom 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