♻️ Make basic l10n messages lazy-loaded

assets/i18n/basic/en-US.json

@@ -0,0 +1,21 @@
+{
+  "NAV": {
+    "INDEX": "Blog",
+    "RSS": "RSS",
+    "SEARCH": "Search",
+    "ABOUT": "About"
+  },
+  "PAGINATION": {
+    "PREV": "Prev",
+    "NEXT": "Next"
+  },
+  "POST": {
+    "BACK": "Back",
+    "TOP": "Top"
+  },
+  "PAGE": {
+    "ERROR_404": {
+      "MESSAGE": "Nothing here"
+    }
+  }
+}

assets/i18n/basic/es-ES.json

@@ -0,0 +1,21 @@
+{
+  "NAV": {
+    "INDEX": "Blog",
+    "RSS": "RSS",
+    "SEARCH": "Buscar",
+    "ABOUT": "Acerca de mí"
+  },
+  "PAGINATION": {
+    "PREV": "Anterior",
+    "NEXT": "Siguiente"
+  },
+  "POST": {
+    "BACK": "Atrás",
+    "TOP": "Arriba"
+  },
+  "PAGE": {
+    "ERROR_404": {
+      "MESSAGE": "No hay nada aquí"
+    }
+  }
+}

assets/i18n/basic/ja-JP.json

@@ -0,0 +1,21 @@
+{
+  "NAV": {
+    "INDEX": "ブログ",
+    "RSS": "購読",
+    "SEARCH": "検索",
+    "ABOUT": "このサイトについて"
+  },
+  "PAGINATION": {
+    "PREV": "前ページ",
+    "NEXT": "次ページ"
+  },
+  "POST": {
+    "BACK": "戻る",
+    "TOP": "トップに戻る"
+  },
+  "PAGE": {
+    "ERROR_404": {
+      "MESSAGE": "ここにはいない"
+    }
+  }
+}

assets/i18n/basic/zh-CN.json

@@ -0,0 +1,21 @@
+{
+  "NAV": {
+    "INDEX": "博客",
+    "RSS": "订阅",
+    "SEARCH": "搜索",
+    "ABOUT": "关于"
+  },
+  "PAGINATION": {
+    "PREV": "上一页",
+    "NEXT": "下一页"
+  },
+  "POST": {
+    "BACK": "返回",
+    "TOP": "回到顶部"
+  },
+  "PAGE": {
+    "ERROR_404": {
+      "MESSAGE": "什么也没有"
+    }
+  }
+}

assets/i18n/basic/zh-HK.json

@@ -0,0 +1,21 @@
+{
+  "NAV": {
+    "INDEX": "網誌",
+    "RSS": "訂閱",
+    "SEARCH": "搜尋",
+    "ABOUT": "關於"
+  },
+  "PAGINATION": {
+    "PREV": "上一頁",
+    "NEXT": "下一頁"
+  },
+  "POST": {
+    "BACK": "返回",
+    "TOP": "回到頂端"
+  },
+  "PAGE": {
+    "ERROR_404": {
+      "MESSAGE": "呢度乜都冇"
+    }
+  }
+}

assets/i18n/basic/zh-TW.json

@@ -0,0 +1,21 @@
+{
+  "NAV": {
+    "INDEX": "部落格",
+    "RSS": "訂閱",
+    "SEARCH": "搜尋",
+    "ABOUT": "關於"
+  },
+  "PAGINATION": {
+    "PREV": "上一頁",
+    "NEXT": "下一頁"
+  },
+  "POST": {
+    "BACK": "返回",
+    "TOP": "回到頂端"
+  },
+  "PAGE": {
+    "ERROR_404": {
+      "MESSAGE": "這裡什麼都沒有"
+    }
+  }
+}

assets/i18n/index.js

@@ -0,0 +1,12 @@
+const requireAsset = require.context('.', true, /^\.\/(\w+)\/([\w-]+)\.json$/, 'lazy')
+
+/**
+ * Lazy-load lang data
+ *
+ * @param {string} section - The section of lang data to load
+ * @param {string} lang    - The language name
+ * @returns {Promise<object>} - The content of a lang JSON
+ */
+export default function loadLocale (section, lang) {
+  return requireAsset(`./${section}/${lang}.json`)
+}

lib/locale.js

@@ -1,14 +1,10 @@
-import { useContext, createContext } from 'react'
-import { useConfig } from '@/lib/config'
-import { fetchLocaleLang } from '@/lib/lang'
+import { createContext, useContext } from 'react'
 
-const LocaleContext = createContext()
-
-export function LocaleProvider ({ children }) {
-  const config = useConfig()
+const LocaleContext = createContext(undefined)
 
+export function LocaleProvider ({ value, children }) {
   return (
-    <LocaleContext.Provider value={fetchLocaleLang(config.lang)}>
+    <LocaleContext.Provider value={value}>
       {children}
     </LocaleContext.Provider>
   )

pages/[slug].js

@@ -38,10 +38,12 @@ export default function BlogPost ({ post, blockMap, emailHash }) {
       />
 
       {/* Back and Top */}
-      <div className={cn(
-        'px-4 flex justify-between font-medium text-gray-500 dark:text-gray-400 my-5',
-        fullWidth ? 'md:px-24' : 'mx-auto max-w-2xl',
-      )}>
+      <div
+        className={cn(
+          'px-4 flex justify-between font-medium text-gray-500 dark:text-gray-400 my-5',
+          fullWidth ? 'md:px-24' : 'mx-auto max-w-2xl'
+        )}
+      >
         <a>
           <button
             onClick={() => router.push(BLOG.path || '/')}
@@ -52,7 +54,10 @@ export default function BlogPost ({ post, blockMap, emailHash }) {
         </a>
         <a>
           <button
-            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            onClick={() => window.scrollTo({
+              top: 0,
+              behavior: 'smooth'
+            })}
             className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
           >
             ↑ {locale.POST.TOP}

pages/_app.js

@@ -5,6 +5,7 @@ import App from 'next/app'
 import '@/styles/globals.css'
 import '@/styles/notion.css'
 import dynamic from 'next/dynamic'
+import loadLocale from '@/assets/i18n'
 import { ConfigProvider } from '@/lib/config'
 import { LocaleProvider } from '@/lib/locale'
 import { prepareDayjs } from '@/lib/dayjs'
@@ -14,11 +15,11 @@ import Scripts from '@/components/Scripts'
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 
-export default function MyApp ({ Component, pageProps, config }) {
+export default function MyApp ({ Component, pageProps, config, locale }) {
   return (
     <ConfigProvider value={config}>
       <Scripts />
-      <LocaleProvider>
+      <LocaleProvider value={locale}>
         <ThemeProvider>
           <>
             {process.env.VERCEL_ENV === 'production' && config?.analytics?.provider === 'ackee' && (
@@ -45,6 +46,7 @@ MyApp.getInitialProps = async ctx => {
 
   return {
     ...App.getInitialProps(ctx),
-    config
+    config,
+    locale: await loadLocale('basic', config.lang)
   }
 }