*: refactor language generation script

- Make data more internally consistent
- Move presentation concerns into component
- Ensure proper tsconfig support for scripts

Author: jamiebrynes7

docs/docs/contributing/translation.mdx

@@ -1,4 +1,4 @@
-import { TranslationStatus } from "@site/src/components/TranslationStatus";
+import { TranslationStatus } from "@site/src/components/TranslationStatusV2";
 import translationData from "../translation-status.json";
 
 # Translations
@@ -7,7 +7,7 @@ Before getting started, you should ensure you read the general [contribution gui
 
 ## Status
 
-<TranslationStatus data={translationData} />
+<TranslationStatus {...translationData} />
 
 ## Architecture
 

docs/docs/translation-status.json

@@ -1,16 +1,15 @@
-[
-  {
-    "name": "English",
-    "code": "en",
-    "completed": 207,
-    "missing": 0,
-    "percent": 100
-  },
-  {
-    "name": "Nederlands",
-    "code": "nl",
-    "completed": 146,
-    "missing": 61,
-    "percent": 71
-  }
-]
+{
+  "total": 207,
+  "statuses": [
+    {
+      "name": "English",
+      "code": "en",
+      "completed": 207
+    },
+    {
+      "name": "Nederlands",
+      "code": "nl",
+      "completed": 146
+    }
+  ]
+}

docs/src/components/TranslationStatusV2.tsx

@@ -0,0 +1,48 @@
+import type React from "react";
+
+type TranslationStatus = {
+  name: string;
+  code: string;
+  completed: number;
+};
+
+type Props = {
+  total: number;
+  statuses: TranslationStatus[];
+};
+
+export const TranslationStatus: React.FC<Props> = ({ total, statuses }) => {
+  return (
+    <table style={{ borderCollapse: "collapse", width: "100%" }}>
+      <thead>
+        <tr>
+          <th style={{ padding: "8px", textAlign: "left" }}>Language</th>
+          <th style={{ padding: "8px", textAlign: "right" }}>Completed</th>
+          <th style={{ padding: "8px", textAlign: "right" }}>Missing</th>
+          <th style={{ padding: "8px", textAlign: "right" }}>Percent Complete</th>
+        </tr>
+      </thead>
+      <tbody>
+        {statuses.map(({ name, code, completed }) => {
+          const missing = total - completed;
+          const percent = Math.round((completed / total) * 100);
+          return (
+            <tr key={code}>
+              <td style={{ padding: "8px" }}>
+                {name} ({code})
+              </td>
+              <td style={{ padding: "8px" }}>{completed}</td>
+              <td style={{ padding: "8px" }}>{missing}</td>
+              <td style={{ padding: "8px" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  <span style={{ width: "8ch" }}>{percent}%</span>
+                  <progress value={completed} max={completed + missing} />
+                </div>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};

plugin/scripts/gen-lang-status.ts

@@ -1,6 +1,6 @@
+import { registry } from "../src/i18n";
 import { writeFileSync } from "node:fs";
 import { join } from "node:path";
-import { registry } from "../src/i18n";
 
 const countKeys = (obj: Record<string, unknown>): number => {
   let count = 0;
@@ -16,24 +16,44 @@ const countKeys = (obj: Record<string, unknown>): number => {
   return count;
 };
 
-const totalKeys = countKeys(registry.en.translations);
+type TranslationStatus = {
+  name: string;
+  code: string;
+  completed: number;
+};
+
+const tabulateTranslations = (reg: typeof registry): TranslationStatus[] => {
+  const result: TranslationStatus[] = [];
+
+  for (const definition of Object.values(reg)) {
+    const completed = countKeys(definition.translations);
+
+    result.push({
+      name: definition.name,
+      code: definition.code,
+      completed,
+    });
+  }
+
+  return result;
+};
+
+type Output = {
+  total: number;
+  statuses: TranslationStatus[];
+};
 
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-const result: any[] = [];
+const generateOutput = () => {
+  const total = countKeys(registry.en.translations);
+  const statuses = tabulateTranslations(registry);
 
-for (const definition of Object.values(registry)) {
-  const keys = countKeys(definition.translations);
-  const missing = totalKeys - keys;
-  const percent = Math.round((keys / totalKeys) * 100);
+  const result: Output = {
+    total,
+    statuses,
+  };
 
-  result.push({
-    name: definition.name,
-    code: definition.code,
-    completed: keys,
-    missing,
-    percent,
-  });
-}
+  const outputFilePath = join(__dirname, "..", "..", "docs", "docs", "translation-status.json");
+  writeFileSync(outputFilePath, JSON.stringify(result, null, 2));
+};
 
-const outputFilePath = join(__dirname, "..", "..", "docs", "docs", "translation-status.json");
-writeFileSync(outputFilePath, JSON.stringify(result, null, 2));
+generateOutput();

plugin/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*", "./vitest-setup.ts"],
+  "include": ["src/**/*", "./vitest-setup.ts", "scripts/**/*"],
   "exclude": ["node_modules/*"],
   "compilerOptions": {
     "jsx": "react-jsx",