From 4fb0de8cd56d925974bffa1c325fbc8403a9b843 Mon Sep 17 00:00:00 2001
From: SilentDepth <github@silent.land>
Date: Thu, 23 Mar 2023 21:39:40 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Make=20basic=20l10n=20mess?=
 =?UTF-8?q?ages=20lazy-loaded?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/i18n/basic/en-US.json |  21 +++++
 assets/i18n/basic/es-ES.json |  21 +++++
 assets/i18n/basic/ja-JP.json |  21 +++++
 assets/i18n/basic/zh-CN.json |  21 +++++
 assets/i18n/basic/zh-HK.json |  21 +++++
 assets/i18n/basic/zh-TW.json |  21 +++++
 assets/i18n/index.js         |  12 +++
 lib/lang.js                  | 150 -----------------------------------
 lib/locale.js                |  12 +--
 pages/[slug].js              |  15 ++--
 pages/_app.js                |   8 +-
 11 files changed, 157 insertions(+), 166 deletions(-)
 create mode 100644 assets/i18n/basic/en-US.json
 create mode 100644 assets/i18n/basic/es-ES.json
 create mode 100644 assets/i18n/basic/ja-JP.json
 create mode 100644 assets/i18n/basic/zh-CN.json
 create mode 100644 assets/i18n/basic/zh-HK.json
 create mode 100644 assets/i18n/basic/zh-TW.json
 create mode 100644 assets/i18n/index.js
 delete mode 100644 lib/lang.js

diff --git a/assets/i18n/basic/en-US.json b/assets/i18n/basic/en-US.json
new file mode 100644
index 000000000..bffcf4c3d
--- /dev/null
+++ b/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"
+    }
+  }
+}
diff --git a/assets/i18n/basic/es-ES.json b/assets/i18n/basic/es-ES.json
new file mode 100644
index 000000000..310cc94d7
--- /dev/null
+++ b/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í"
+    }
+  }
+}
diff --git a/assets/i18n/basic/ja-JP.json b/assets/i18n/basic/ja-JP.json
new file mode 100644
index 000000000..24c9c930b
--- /dev/null
+++ b/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": "ここにはいない"
+    }
+  }
+}
diff --git a/assets/i18n/basic/zh-CN.json b/assets/i18n/basic/zh-CN.json
new file mode 100644
index 000000000..30a69e816
--- /dev/null
+++ b/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": "什么也没有"
+    }
+  }
+}
diff --git a/assets/i18n/basic/zh-HK.json b/assets/i18n/basic/zh-HK.json
new file mode 100644
index 000000000..1eed5a123
--- /dev/null
+++ b/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": "呢度乜都冇"
+    }
+  }
+}
diff --git a/assets/i18n/basic/zh-TW.json b/assets/i18n/basic/zh-TW.json
new file mode 100644
index 000000000..605116fdf
--- /dev/null
+++ b/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": "這裡什麼都沒有"
+    }
+  }
+}
diff --git a/assets/i18n/index.js b/assets/i18n/index.js
new file mode 100644
index 000000000..cd6c8e9be
--- /dev/null
+++ b/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`)
+}
diff --git a/lib/lang.js b/lib/lang.js
deleted file mode 100644
index d2b612754..000000000
--- a/lib/lang.js
+++ /dev/null
@@ -1,150 +0,0 @@
-const lang = {
-  en: {
-    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'
-      }
-    }
-  },
-  'zh-CN': {
-    NAV: {
-      INDEX: '博客',
-      RSS: '订阅',
-      SEARCH: '搜索',
-      ABOUT: '关于'
-    },
-    PAGINATION: {
-      PREV: '上一页',
-      NEXT: '下一页'
-    },
-    POST: {
-      BACK: '返回',
-      TOP: '回到顶部'
-    },
-    PAGE: {
-      ERROR_404: {
-        MESSAGE: '什么也没有'
-      }
-    }
-  },
-  'zh-HK': {
-    NAV: {
-      INDEX: '網誌',
-      RSS: '訂閱',
-      SEARCH: '搜尋',
-      ABOUT: '關於'
-    },
-    PAGINATION: {
-      PREV: '上一頁',
-      NEXT: '下一頁'
-    },
-    POST: {
-      BACK: '返回',
-      TOP: '回到頂端'
-    },
-    PAGE: {
-      ERROR_404: {
-        MESSAGE: '呢度乜都冇'
-      }
-    }
-  },
-  'zh-TW': {
-    NAV: {
-      INDEX: '部落格',
-      RSS: '訂閱',
-      SEARCH: '搜尋',
-      ABOUT: '關於'
-    },
-    PAGINATION: {
-      PREV: '上一頁',
-      NEXT: '下一頁'
-    },
-    POST: {
-      BACK: '返回',
-      TOP: '回到頂端'
-    },
-    PAGE: {
-      ERROR_404: {
-        MESSAGE: '這裡什麼都沒有'
-      }
-    }
-  },
-  ja: {
-    NAV: {
-      INDEX: 'ブログ',
-      RSS: '購読',
-      SEARCH: '検索',
-      ABOUT: 'このサイトについて'
-    },
-    PAGINATION: {
-      PREV: '前ページ',
-      NEXT: '次ページ'
-    },
-    POST: {
-      BACK: '戻る',
-      TOP: 'トップに戻る'
-    },
-    PAGE: {
-      ERROR_404: {
-        MESSAGE: 'ここにはいない'
-      }
-    }
-  },
-  es: {
-    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í'
-      }
-    }
-  }
-}
-
-export const fetchLocaleLang = l => {
-  switch (l.toLowerCase()) {
-    case 'zh-cn':
-    case 'zh-sg':
-      return lang['zh-CN']
-    case 'zh-hk':
-      return lang['zh-HK']
-    case 'zh-tw':
-      return lang['zh-TW']
-    case 'ja':
-    case 'ja-jp':
-      return lang.ja
-    case 'es':
-    case 'es-ES':
-      return lang.es
-    case 'en':
-    case 'en-us':
-    default:
-      return lang.en
-  }
-}
diff --git a/lib/locale.js b/lib/locale.js
index 945a1dd5c..01ccf246b 100644
--- a/lib/locale.js
+++ b/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>
   )
diff --git a/pages/[slug].js b/pages/[slug].js
index ac3fd4899..7fc92d47f 100644
--- a/pages/[slug].js
+++ b/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}
diff --git a/pages/_app.js b/pages/_app.js
index fc428587e..e17654649 100644
--- a/pages/_app.js
+++ b/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)
   }
 }