feat(docs): added i18n page

packages/docs/.vitepress/config.ts

@@ -97,6 +97,7 @@ export default defineConfig({
       {
         text: 'Resources',
         items: [
+          { text: 'Languages and i18n', link: '/resources/i18n' },
           { text: 'Brand kit', link: '/resources/brand-kit' },
         ],
       },

packages/docs/src/data/i18n.data.ts

@@ -0,0 +1,61 @@
+import type { SiteConfig } from 'vitepress';
+import { sortBy } from 'lodash-es';
+import { createMarkdownRenderer } from 'vitepress';
+import { locales } from '../../../app-client/src/locales/locales';
+
+const config = globalThis.VITEPRESS_CONFIG as SiteConfig;
+const md = await createMarkdownRenderer(config.srcDir, config.markdown, config.site.base, config.logger);
+
+function countKeysDeep(obj: Record<string, unknown>): number {
+  let count = 0;
+
+  for (const key in obj) {
+    count++;
+
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      count += countKeysDeep(obj[key] as Record<string, unknown>);
+    }
+  }
+
+  return count;
+}
+
+const defaultLocaleKeyCount = countKeysDeep(await import(`../../../app-client/src/locales/en.json`).then(({ default: fileContent }) => fileContent));
+
+const localeConfigs = sortBy(await Promise.all(locales.map(async ({ key, name }) => {
+  const { default: fileContent } = await import(`../../../app-client/src/locales/${key}.json`);
+  const keyCount = countKeysDeep(fileContent);
+  const ratio = keyCount / defaultLocaleKeyCount;
+  const isComplete = keyCount === defaultLocaleKeyCount;
+
+  return {
+    key,
+    name,
+    content: fileContent,
+    keyCount,
+    ratio,
+    isComplete,
+  };
+})), 'ratio').reverse();
+
+const mdTable = [
+  '| Locale | Key | Translation completion | Actions |',
+  '| --- | --- | --- | --- |',
+  ...localeConfigs.map(({ key, name, keyCount, ratio, isComplete }) => `| ${[
+    name,
+    key,
+    `${isComplete ? '✅' : '🚧'} ${(ratio * 100).toFixed(0)}% - ${keyCount} / ${defaultLocaleKeyCount}`,
+    `[See translation file](https://github.com/CorentinTh/enclosed/blob/main/packages/app-client/src/locales/${key}.json)`,
+  ].join(' | ')} |`),
+
+].join('\n');
+
+export default {
+  watch: ['../../../app-client/src/locales/*'],
+  async load() {
+    return {
+      localeConfigs,
+      table: md.render(mdTable),
+    };
+  },
+};

packages/docs/src/resources/i18n.md

@@ -0,0 +1,18 @@
+<script setup>
+import { data } from '../data/i18n.data.ts'
+</script>
+
+# Language and i18n
+
+Enclosed supports internationalization (i18n) to make it accessible in multiple languages.
+
+## Supported languages
+
+The following languages are currently supported:
+
+<div v-html="data.table" />
+
+## Contributing to translations
+
+Contributions to improve and expand the app's internationalization support are welcome.
+If you would like to contribute to the translations or add support for a new language, please refer to the [Contributing to Translations](https://github.com/CorentinTh/enclosed/blob/main/packages/app-client/src/locales/README.md) guide.