feat: add internationalization support

api/server.mjs

@@ -70,6 +70,9 @@ api.use((req, res, next) => {
 const resourcesPath = path.join(__dirname, '..', 'resources')
 api.use('/resources', serveStatic(resourcesPath))
 
+const localesPath = path.join(__dirname, '..', 'locales')
+api.use('/locales', serveStatic(localesPath))
+
 const dataPath = path.join(__dirname, '..', 'data')
 api.use('/data', serveStatic(dataPath))
 
@@ -95,8 +98,25 @@ api.use('/api/weight', routes.weight)
 
 const docsPath = path.join(__dirname, '..', 'docs')
 api.use('/api/docs', serveStatic(docsPath))
-api.get('/api/docs/*', (req, res) => {
-  res.status(404).send('Not found')
+api.use('/api/docs/en', serveStatic(docsPath))
+api.get('/api/docs/:locale/*', async (req, res) => {
+  const { locale } = req.params
+  const doc_id = req.params[0] // Capture the rest of the path as doc_id
+  const localized_doc_path = path.join(docsPath, locale, `${doc_id}.md`)
+  const default_doc_path = path.join(docsPath, 'en', `${doc_id}.md`)
+
+  try {
+    if (fs.existsSync(localized_doc_path)) {
+      return res.sendFile(localized_doc_path)
+    } else if (fs.existsSync(default_doc_path)) {
+      return res.redirect(`/api/docs/en/${doc_id}`)
+    } else {
+      return res.status(404).send('Document not found')
+    }
+  } catch (error) {
+    console.error(error)
+    return res.status(500).send('Internal Server Error')
+  }
 })
 
 api.use('/api/*', (err, req, res, next) => {

locales/en.json

@@ -0,0 +1,5 @@
+{
+  "menu": {
+    "introduction": "Introduction"
+  }
+}

package.json

@@ -96,6 +96,8 @@
     "fetch-cheerio-object": "^1.3.0",
     "front-matter": "^4.0.2",
     "fs-extra": "^11.1.1",
+    "i18next": "^23.8.2",
+    "i18next-http-backend": "^2.4.3",
     "jsonwebtoken": "^9.0.1",
     "knex": "^0.95.15",
     "markdown-it": "^12.3.2",
@@ -114,6 +116,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-i18next": "^14.0.5",
     "react-redux": "^7.2.9",
     "react-router": "^5.3.4",
     "redux-saga": "^1.2.3",
@@ -140,6 +143,7 @@
     "compression-webpack-plugin": "^10.0.0",
     "concurrently": "^8.2.0",
     "copy-text-to-clipboard": "^3.2.0",
+    "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "6.8.1",
     "deepmerge": "4.3.1",

src/core/api/service.js

@@ -32,9 +32,14 @@ export const api = {
     const url = `${API_URL}/posts/${id}?${queryString.stringify(params)}`
     return { url }
   },
-  getDoc({ id }) {
-    const url = `${API_URL}/docs${id}.md`
-    return { url }
+  getDoc({ id, locale = 'en' }) {
+    if (locale === 'en') {
+      const url = `${API_URL}/docs${id}.md`
+      return { url }
+    } else {
+      const url = `${API_URL}/docs/${locale}/${id}.md`
+      return { url }
+    }
   },
   getLabelDoc({ id }) {
     const url = `${API_URL}/docs${id}.md`

src/core/app/actions.js

@@ -1,11 +1,12 @@
 export const appActions = {
   INIT_APP: 'INIT_APP',
 
-  init: ({ token, key }) => ({
+  init: ({ token, key, locale }) => ({
     type: appActions.INIT_APP,
     payload: {
       token,
-      key
+      key,
+      locale
     }
   })
 }

src/core/constants.js

@@ -12,3 +12,23 @@ export const WS_URL = IS_DEV ? 'ws://localhost:8080' : 'wss://nano.community'
 
 // 3 Million Nano (3e36)
 export const REP_MAX_WEIGHT = BigNumber(3).shiftedBy(36)
+export const SUPPORTED_LOCALES = [
+  'ar',
+  'en',
+  'de',
+  'es',
+  'fa',
+  'fr',
+  'hi',
+  'it',
+  'ja',
+  'ko',
+  'nl',
+  'pl',
+  'pt',
+  'ru',
+  'tr',
+  'vi',
+  'zh',
+  'no'
+]

src/core/docs/actions.js

@@ -19,10 +19,11 @@ export const docActions = {
   GET_LABEL_DOC_COMMIT_PENDING: 'GET_LABEL_DOC_COMMIT_PENDING',
   GET_LABEL_DOC_COMMIT_FULFILLED: 'GET_LABEL_DOC_COMMIT_FULFILLED',
 
-  getDoc: (id) => ({
+  getDoc: ({ id, locale = 'en' }) => ({
     type: docActions.GET_DOC,
     payload: {
-      id
+      id,
+      locale
     }
   }),
 

src/core/i18n/actions.js

@@ -0,0 +1,10 @@
+export const i18nActions = {
+  CHANGE_LOCALE: 'CHANGE_LOCALE',
+
+  change_locale: (locale) => ({
+    type: i18nActions.CHANGE_LOCALE,
+    payload: {
+      locale
+    }
+  })
+}

src/core/i18n/index.js

@@ -0,0 +1,26 @@
+import { initReactI18next } from 'react-i18next'
+import i18n from 'i18next'
+import HttpBackend from 'i18next-http-backend'
+
+import { SUPPORTED_LOCALES } from '@core/constants'
+
+export { i18nActions } from './actions'
+export { i18nReducer } from './reducer'
+export { i18nSagas } from './sagas'
+
+i18n
+  .use(HttpBackend)
+  .use(initReactI18next)
+  .init({
+    // detection
+    debug: true,
+    backend: {
+      // Configuration options for the backend plugin
+      loadPath: '/locales/{{lng}}.json' // Path to the translation files
+    },
+    lng: 'en',
+    fallbackLng: 'en',
+    supportedLngs: SUPPORTED_LOCALES
+  })
+
+export default i18n

src/core/i18n/reducer.js

@@ -0,0 +1,17 @@
+import { Record } from 'immutable'
+
+import { i18nActions } from './actions'
+
+const initialState = new Record({
+  locale: 'en'
+})
+
+export function i18nReducer(state = initialState(), { payload, type }) {
+  switch (type) {
+    case i18nActions.CHANGE_LOCALE:
+      return state.set('locale', payload.locale)
+
+    default:
+      return state
+  }
+}

src/core/i18n/sagas.js

@@ -0,0 +1,37 @@
+import { takeLatest, put, fork } from 'redux-saga/effects'
+import i18n from 'i18next'
+
+import { localStorageAdapter } from '@core/utils'
+import { appActions } from '@core/app/actions'
+import { i18nActions } from './actions'
+
+export function* init({ payload }) {
+  if (payload.locale) {
+    yield put(i18nActions.change_locale(payload.locale))
+  }
+
+  // TODO detect user locale
+}
+
+export function ChangeLocale({ payload }) {
+  localStorageAdapter.setItem('locale', payload.locale)
+  i18n.changeLanguage(payload.locale)
+}
+
+//= ====================================
+//  WATCHERS
+// -------------------------------------
+
+export function* watchInitApp() {
+  yield takeLatest(appActions.INIT_APP, init)
+}
+
+export function* watchChangeLocale() {
+  yield takeLatest(i18nActions.CHANGE_LOCALE, ChangeLocale)
+}
+
+//= ====================================
+//  ROOT
+// -------------------------------------
+
+export const i18nSagas = [fork(watchInitApp), fork(watchChangeLocale)]

src/core/reducers.js

@@ -13,6 +13,7 @@ import { networkReducer } from './network'
 import { notificationReducer } from './notifications'
 import { postsReducer } from './posts'
 import { postlistsReducer } from './postlists'
+import { i18nReducer } from './i18n'
 
 const rootReducer = (history) =>
   combineReducers({
@@ -28,7 +29,8 @@ const rootReducer = (history) =>
     network: networkReducer,
     notification: notificationReducer,
     posts: postsReducer,
-    postlists: postlistsReducer
+    postlists: postlistsReducer,
+    i18n: i18nReducer
   })
 
 export default rootReducer

src/core/sagas.js

@@ -10,6 +10,7 @@ import { githubIssuesSagas } from './github-issues'
 import { ledgerSagas } from './ledger'
 import { networkSagas } from './network'
 import { postlistSagas } from './postlists'
+import { i18nSagas } from './i18n'
 
 export default function* rootSage() {
   yield all([
@@ -22,6 +23,7 @@ export default function* rootSage() {
     ...githubIssuesSagas,
     ...ledgerSagas,
     ...networkSagas,
-    ...postlistSagas
+    ...postlistSagas,
+    ...i18nSagas
   ])
 }

src/views/components/app/app.js

@@ -15,7 +15,8 @@ export default class App extends React.Component {
   async componentDidMount() {
     const token = await localStorageAdapter.getItem('token')
     const key = await localStorageAdapter.getItem('key')
-    this.props.init({ token, key })
+    const locale = await localStorageAdapter.getItem('locale')
+    this.props.init({ token, key, locale })
     this.props.getRepresentatives()
     this.props.getNetworkStats()
     this.props.getGithubEvents()

src/views/components/change-locale/change-locale.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FormControl from '@material-ui/core/FormControl'
+import Select from '@material-ui/core/Select'
+import MenuItem from '@material-ui/core/MenuItem'
+
+import './change-locale.styl'
+
+export default function ChangeLocale({ change_locale, locale }) {
+  return (
+    <FormControl className='change-locale'>
+      <Select
+        labelId='change-locale'
+        id='change-locale'
+        value={locale}
+        onChange={(event) => change_locale(event.target.value)}>
+        <MenuItem value='en'>English</MenuItem>
+        <MenuItem value='es'>Español</MenuItem>
+        <MenuItem value='fr'>Français</MenuItem>
+        <MenuItem value='it'>Italiano</MenuItem>
+        <MenuItem value='de'>Deutsch</MenuItem>
+        <MenuItem value='nl'>Nederlands</MenuItem>
+        <MenuItem value='ru'>Русский</MenuItem>
+      </Select>
+    </FormControl>
+  )
+}
+
+ChangeLocale.propTypes = {
+  change_locale: PropTypes.func.isRequired,
+  locale: PropTypes.string.isRequired
+}

src/views/components/change-locale/index.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux'
+import { createSelector } from 'reselect'
+
+import { i18nActions } from '@core/i18n'
+
+import ChangeLocale from './change-locale'
+
+const mapStateToProps = createSelector(
+  (state) => state.getIn(['i18n', 'locale']),
+  (locale) => ({ locale })
+)
+
+const mapDispatchToProps = {
+  change_locale: i18nActions.change_locale
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChangeLocale)