feat: refactoring config to site.config.js

components/Footer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { FaTwitter, FaGithub, FaLinkedin } from 'react-icons/fa'
+import * as config from 'lib/config'
 
 import styles from './styles.module.css'
 
@@ -8,35 +9,41 @@ export const Footer: React.FC<{}> = () => {
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2021 Travis Fischer</div>
       <div className={styles.social}>
-        <a
-          className={styles.twitter}
-          href='https://twitter.com/transitive_bs'
-          title='Twitter @transitive_bs'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <FaTwitter />
-        </a>
+        {config.twitter && (
+          <a
+            className={styles.twitter}
+            href={`https://twitter.com/${config.twitter}`}
+            title={`Twitter @${config.twitter}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaTwitter />
+          </a>
+        )}
 
-        <a
-          className={styles.github}
-          href='https://github.com/transitive-bullshit'
-          title='GitHub @transitive-bullshit'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <FaGithub />
-        </a>
+        {config.github && (
+          <a
+            className={styles.github}
+            href={`https://github.com/${config.github}`}
+            title={`GitHub @${config.github}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaGithub />
+          </a>
+        )}
 
-        <a
-          className={styles.linkedin}
-          href='https://www.linkedin.com/in/fisch2'
-          title='LinkedIn Travis Fischer'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <FaLinkedin />
-        </a>
+        {config.linkedin && (
+          <a
+            className={styles.linkedin}
+            href={`https://www.linkedin.com/in/${config.linkedin}`}
+            title={`LinkedIn ${config.author}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaLinkedin />
+          </a>
+        )}
       </div>
     </footer>
   )

components/NotionPage.tsx

@@ -12,20 +12,12 @@ import { NotionRenderer } from 'react-notion-x'
 
 // utils
 import { getBlockTitle } from 'notion-utils'
-import * as types from 'lib/types'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
-import { mapImageUrl, mapNotionImageUrl } from 'lib/map-image-url'
+import { mapNotionImageUrl } from 'lib/map-image-url'
 import { getPageDescription } from 'lib/get-page-description'
-import {
-  isDev,
-  api,
-  siteDescription,
-  siteAuthorTwitter,
-  defaultPageCover,
-  defaultPageCoverPosition,
-  defaultPageIcon
-} from 'lib/config'
 import { searchNotion } from 'lib/search-notion'
+import * as types from 'lib/types'
+import * as config from 'lib/config'
 
 // components
 import { CustomFont } from './CustomFont'
@@ -38,8 +30,6 @@ import { ReactUtterances } from './ReactUtterances'
 
 import styles from './styles.module.css'
 
-const isServer = typeof window === 'undefined'
-
 export const NotionPage: React.FC<types.PageProps> = ({
   site,
   recordMap,
@@ -80,14 +70,14 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const title = getBlockTitle(block, recordMap) || site.name
 
   console.log('notion page', {
-    isDev,
+    isDev: config.isDev,
     title,
     pageId,
     rootNotionPageId: site.rootNotionPageId,
     recordMap
   })
 
-  if (!isServer) {
+  if (!config.isServer) {
     // add important objects global window for easy debugging
     ;(window as any).recordMap = recordMap
     ;(window as any).block = block
@@ -96,13 +86,13 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const siteMapPageUrl = mapPageUrl(site, recordMap, searchParams)
 
   const canonicalPageUrl =
-    !isDev && getCanonicalPageUrl(site, recordMap)(pageId)
+    !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
 
   const isBlogPost =
     block.type === 'page' && block.parent_table === 'collection'
-  const socialImage = api.renderSocialImage(pageId)
+  const socialImage = config.api.renderSocialImage(pageId)
   const socialDescription =
-    getPageDescription(block, recordMap) ?? siteDescription
+    getPageDescription(block, recordMap) ?? config.description
   let comments: React.ReactNode = null
 
   // only display comments on blog post pages
@@ -129,8 +119,8 @@ export const NotionPage: React.FC<types.PageProps> = ({
         <meta name='twitter:title' content={title} />
         <meta property='twitter:domain' content={site.domain} />
 
-        {siteAuthorTwitter && (
-          <meta name='twitter:creator' content={`@${siteAuthorTwitter}`} />
+        {config.twitter && (
+          <meta name='twitter:creator' content={`@${config.twitter}`} />
         )}
 
         {socialDescription && (
@@ -203,9 +193,9 @@ export const NotionPage: React.FC<types.PageProps> = ({
         darkMode={isDarkMode}
         previewImages={site.previewImages !== false}
         showCollectionViewDropdown={false}
-        defaultPageIcon={defaultPageIcon}
-        defaultPageCover={defaultPageCover}
-        defaultPageCoverPosition={defaultPageCoverPosition}
+        defaultPageIcon={config.defaultPageIcon}
+        defaultPageCover={config.defaultPageCover}
+        defaultPageCoverPosition={config.defaultPageCoverPosition}
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapNotionImageUrl}
         searchNotion={searchNotion}