♻️ Make config injectable

* New hook: useConfig
* Avoid sending private fields from config file to client

Author: SilentDepth

components/BlogPost.js

@@ -1,8 +1,10 @@
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 import FormattedDate from '@/components/FormattedDate'
 
 const BlogPost = ({ post }) => {
+  const BLOG = useConfig()
+
   return (
     <Link href={`${BLOG.path}/${post.slug}`}>
       <article key={post.id} className="mb-6 md:mb-8">

components/Comments.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import cn from 'classnames'
 import { fetchCusdisLang } from '@/lib/cusdisLang'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 
 const GitalkComponent = dynamic(
   () => {
@@ -26,6 +26,7 @@ const CusdisComponent = dynamic(
 
 const Comments = ({ frontMatter }) => {
   const router = useRouter()
+  const BLOG = useConfig()
 
   const fullWidth = frontMatter.fullWidth ?? false
 
@@ -55,7 +56,7 @@ const Comments = ({ frontMatter }) => {
       )}
       {BLOG.comment && BLOG.comment.provider === 'cusdis' && (
         <CusdisComponent
-        lang={fetchCusdisLang()}
+          lang={fetchCusdisLang(BLOG.lang)}
           attrs={{
             host: BLOG.comment.cusdisConfig.host,
             appId: BLOG.comment.cusdisConfig.appId,

components/Container.js

@@ -1,12 +1,14 @@
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 import Head from 'next/head'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 // import BlogPost from './BlogPost'
 
 const Container = ({ children, layout, fullWidth, ...customMeta }) => {
+  const BLOG = useConfig()
+
   const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
   const meta = {
     title: BLOG.title,

components/Footer.js

@@ -1,6 +1,8 @@
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 import Vercel from '@/components/Vercel'
 const Footer = ({ fullWidth }) => {
+  const BLOG = useConfig()
+
   const d = new Date()
   const y = d.getFullYear()
   const from = +BLOG.since

components/FormattedDate.js

@@ -1,18 +1,29 @@
-'use client'
-
+import { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 
 dayjs.extend(localizedFormat)
 
-const lang = BLOG.lang.slice(0, 2)
-import(`dayjs/locale/${lang}`)
-  .then(() => {
-    dayjs.locale(BLOG.lang.slice(0, 2))
-  })
-  .catch(() => console.warn(`dayjs locale \`${lang}\` not found`))
+const loaded = {}
 
 export default function FormattedDate ({ date }) {
+  const lang = useConfig().lang.slice(0, 2)
+  const [isLocaleLoaded, setIsLocaleLoaded] = useState(loaded[lang] === true)
+
+  useEffect(() => {
+    if (!isLocaleLoaded) {
+      loaded[lang] ??= import(`dayjs/locale/${lang}`).then(
+        () => {
+          loaded[lang] = true
+          dayjs.locale(lang)
+        },
+        () => console.warn(`dayjs locale \`${lang}\` not found`)
+      )
+      loaded[lang].then(() => setIsLocaleLoaded(true))
+    }
+
+  }, [isLocaleLoaded, lang])
+
   return <span>{dayjs(date).format('ll')}</span>
 }

components/Gtag.js

@@ -1,18 +1,20 @@
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
+import { useConfig } from '@/lib/config'
 import * as gtag from '@/lib/gtag'
 
 const Gtag = () => {
+  const config = useConfig()
   const router = useRouter()
   useEffect(() => {
     const handleRouteChange = url => {
-      gtag.pageview(url)
+      gtag.pageview(config.analytics.gaConfig.measurementId, url)
     }
     router.events.on('routeChangeComplete', handleRouteChange)
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [router.events])
+  }, [config, router.events])
   return null
 }
 export default Gtag

components/Header.js

@@ -1,11 +1,12 @@
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 import { useLocale } from '@/lib/locale'
 import useTheme from '@/lib/theme'
 
 const NavBar = () => {
+  const BLOG = useConfig()
   const locale = useLocale()
   const links = [
     { id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
@@ -33,6 +34,7 @@ const NavBar = () => {
 }
 
 export default function Header ({ navBarTitle, fullWidth }) {
+  const BLOG = useConfig()
   const { dark } = useTheme()
 
   // Favicon

components/NotionRenderer.js

@@ -2,8 +2,8 @@ import { createElement as h } from 'react'
 import dynamic from 'next/dynamic'
 import { NotionRenderer as Renderer } from 'react-notion-x'
 import { getTextContent } from 'notion-utils'
-import BLOG from '@/blog.config'
-import tailwindConfig from '@/tailwind.config'
+import { FONTS_SANS, FONTS_SERIF } from '@/consts'
+import { useConfig } from '@/lib/config'
 import Toggle from '@/components/notion-blocks/Toggle'
 
 // Lazy-load some heavy components & override the renderers of some block types
@@ -106,10 +106,12 @@ const mapPageUrl = id => `https://www.notion.so/${id.replace(/-/g, '')}`
  * @param props - Anything that react-notion-x/NotionRenderer supports
  */
 export default function NotionRenderer (props) {
+  const config = useConfig()
+
   const font = {
-    'sans-serif': tailwindConfig.theme.extend.fontFamily.sans,
-    'serif': tailwindConfig.theme.extend.fontFamily.serif
-  }[BLOG.font]
+    'sans-serif': FONTS_SANS,
+    'serif': FONTS_SERIF
+  }[config.font]
 
   // Mark block types to be custom rendered by appending a suffix
   if (props.recordMap) {

components/Pagination.js

@@ -1,8 +1,9 @@
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 import { useLocale } from '@/lib/locale'
 
 const Pagination = ({ page, showNext }) => {
+  const BLOG = useConfig()
   const locale = useLocale()
   const currentPage = +page
   let additionalClassName = 'justify-between'

components/Post.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Image from 'next/image'
 import cn from 'classnames'
-import BLOG from '@/blog.config'
+import { useConfig } from '@/lib/config'
 import useTheme from '@/lib/theme'
 import FormattedDate from '@/components/FormattedDate'
 import TagItem from '@/components/TagItem'
@@ -19,7 +19,8 @@ import TableOfContents from '@/components/TableOfContents'
  * @prop {string}   emailHash  - Author email hash (for Gravatar)
  * @prop {boolean} [fullWidth] - Whether in full-width mode
  */
-export default function Post(props) {
+export default function Post (props) {
+  const BLOG = useConfig()
   const { post, blockMap, emailHash, fullWidth = false } = props
   const { dark } = useTheme()