complete i18n PoC

README.md

@@ -250,6 +250,7 @@ See [Does JavaScript guarantee object property order? - Stack Overflow](https://
 - [x] Allows customizing primary color for the current theme
 - [x] Export PDF directly (using browser's print feature)
 - [x] Supports responsive style for themes, so that the CV site is friendly to view on mobile devices.
+- [ ] i18n and language switcher
 - [ ] Add more themes.
 - [ ] Allows switching themes in Editor
 - [ ] Add more sample data. By clicking the "Load Sample" button, a dialog will open, allowing the user to select from various languages

package.json

@@ -31,6 +31,7 @@
     "ejs": "^3.1.8",
     "iconify-icon": "^1.0.3",
     "markdown-it": "^13.0.1",
+    "node-polyglot": "^2.5.0",
     "object-path": "^0.11.8"
   }
 }

src/themes/data.js

@@ -4,9 +4,11 @@ import { renderMarkdown } from '../lib/markdown';
 
 export const varNamePrimaryColor = '--color-primary'
 
-export function getRenderData(cvData) {
+export function getRenderData(cvData, locale, polyglot) {
   return {
     cv: cvData,
+    locale,
+    t: polyglot.t.bind(polyglot),
     fn: {
       getCVTitle,
       reformatDate,

src/themes/index.js

@@ -1,4 +1,6 @@
+import dayjs from 'dayjs';
 import ejs from 'ejs';
+import Polyglot from 'node-polyglot';
 
 import { upsertStyleTag } from '../lib/utils';
 import {
@@ -15,13 +17,17 @@ const themeNames = ['reorx']
 // cannot be used because we need vite to transform scss into css
 const styleMoudules = import.meta.glob("./*/index.scss", { "query": "?inline" })
 
+console.log('themes index')
 for (const name of themeNames) {
   const templateModule = await import(`./${name}/index.ejs`)
+  const themeModule = await import(`./${name}/index.js`)
+  console.log(`theme supported locales: ${themeModule.locales}`)
 
   // https://vitejs.dev/guide/features.html#glob-import
   const styleModule = await styleMoudules[`./${name}/index.scss`]()
 
   themes[name] = {
+    index: themeModule,
     template: templateModule.default,
     style: styleModule.default,
   }
@@ -34,17 +40,25 @@ export function getTheme(name) {
   return themes[name]
 }
 
-export function renderTheme(template, cvData, options) {
+export function renderTheme(theme, cvData, locale, options) {
-  return ejs.render(template, getRenderData(cvData), options)
+  const polyglot = new Polyglot({
+    phrases: theme.index.localeMessages[locale],
+  })
+  dayjs.locale(locale)
+  return ejs.render(theme.template, getRenderData(cvData, locale, polyglot), options)
 }
 
 const cvStyleId = 'cv-style'
 
 export function renderThemeOn(name, el, data, primaryColor) {
   const theme = getTheme(name)
-  el.innerHTML = renderTheme(theme.template, data)
+  el.innerHTML = renderTheme(theme, data, 'zh-cn')
 
   upsertStyleTag(cvStyleId, theme.style)
 
   document.documentElement.style.setProperty(varNamePrimaryColor, primaryColor)
 }
+
+export function loadThemeData(name) {
+  require(`./${name}/index.js`)
+}

src/themes/reorx/index.ejs

@@ -64,10 +64,10 @@ function dateRange(item, level) {
   // level: 1: year, 2: month, 3: day
   switch (level) {
     case 1:
-      format = 'YYYY'
+      format = t('format_year')
       break;
     case 2:
-      format = 'MMM YYYY'
+      format = t('format_year_month')
       break;
   }
   if (format) {
@@ -90,7 +90,7 @@ function dateRange(item, level) {
 <% if (hasItems(cv.education)) { %>
 <section class="education-section">
   <div class="section-title">
-    <h2>Educations</h2>
+    <h2><%= t('title_education') %></h2>
     <div class="line"></div>
   </div>
   <% for (const item of cv.education) { %>

src/themes/reorx/index.js

@@ -0,0 +1,11 @@
+import 'dayjs/locale/zh-cn';
+
+export const locales = ['en', 'zh-cn']
+
+export const localeMessages = {}
+
+for (const locale of locales) {
+  localeMessages[locale] = (await import(`./locales/${locale}.js`)).default
+}
+
+console.log('load theme reorx', localeMessages)

src/themes/reorx/locales/en.js

@@ -0,0 +1,5 @@
+export default {
+  'title_education': 'Educations',
+  'format_year': 'YYYY',
+  'format_year_month': 'MMM YYYY',
+}

src/themes/reorx/locales/zh-cn.js

@@ -0,0 +1,5 @@
+export default {
+  'title_education': '教育经历',
+  'format_year': 'YYYY',
+  'format_year_month': 'YYYY年MMM',
+}