add i18n translation hygiene

Author: dnywh

.github/workflows/validate-app.yml

@@ -0,0 +1,29 @@
+name: Validate App
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run app checks
+        run: npm run check

messages/de.json

@@ -12,6 +12,8 @@
     "supabase:reset": "supabase db reset",
     "seed:local-media": "node scripts/seed-local-media.mjs",
     "supabase:diff": "supabase db diff",
+    "i18n:check": "node scripts/check-i18n-messages.mjs",
+    "check": "npm run i18n:check && npm run format:check",
     "format": "prettier --write .",
     "format:check": "prettier --check ."
   },

messages/en.json

@@ -0,0 +1,266 @@
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+const rootDir = process.cwd();
+const configPath = path.join(rootDir, "src/i18n/config.ts");
+const messagesDir = path.join(rootDir, "messages");
+
+function readConfig() {
+  const source = fs.readFileSync(configPath, "utf8");
+  const localesMatch = source.match(/locales\s*=\s*(\[[^\]]+\])\s*as const/);
+  const defaultLocaleMatch = source.match(
+    /defaultLocale:\s*Locale\s*=\s*["']([^"']+)["']/
+  );
+
+  if (!localesMatch) {
+    throw new Error(`Could not find the locales array in ${configPath}`);
+  }
+
+  const locales = JSON.parse(localesMatch[1].replaceAll("'", '"'));
+  const defaultLocale = defaultLocaleMatch?.[1] ?? locales[0];
+
+  if (!locales.includes(defaultLocale)) {
+    throw new Error(
+      `Default locale "${defaultLocale}" is not listed in ${configPath}`
+    );
+  }
+
+  return { locales, defaultLocale };
+}
+
+function readMessages(locale) {
+  const filePath = path.join(messagesDir, `${locale}.json`);
+
+  if (!fs.existsSync(filePath)) {
+    throw new Error(
+      `Missing message file: ${path.relative(rootDir, filePath)}`
+    );
+  }
+
+  return JSON.parse(fs.readFileSync(filePath, "utf8"));
+}
+
+function valueType(value) {
+  if (Array.isArray(value)) {
+    return "array";
+  }
+
+  if (value === null) {
+    return "null";
+  }
+
+  return typeof value;
+}
+
+function flattenMessages(value, pathParts = [], entries = new Map()) {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    entries.set(pathParts.join("."), {
+      type: "object",
+      value,
+    });
+
+    for (const [key, childValue] of Object.entries(value)) {
+      flattenMessages(childValue, [...pathParts, key], entries);
+    }
+
+    return entries;
+  }
+
+  entries.set(pathParts.join("."), {
+    type: valueType(value),
+    value,
+  });
+
+  return entries;
+}
+
+function leafKeys(entries) {
+  return [...entries]
+    .filter(([, entry]) => entry.type !== "object")
+    .map(([key]) => key)
+    .sort();
+}
+
+function extractIcuArguments(message) {
+  const argumentsSet = new Set();
+
+  for (let index = 0; index < message.length; index += 1) {
+    if (message[index] !== "{") {
+      continue;
+    }
+
+    const match = message
+      .slice(index + 1)
+      .match(/^([A-Za-z_][\w]*)\s*(?:[,}])/);
+
+    if (match) {
+      argumentsSet.add(match[1]);
+    }
+
+    let depth = 1;
+    index += 1;
+
+    while (index < message.length && depth > 0) {
+      if (message[index] === "{") {
+        depth += 1;
+      } else if (message[index] === "}") {
+        depth -= 1;
+      }
+
+      index += 1;
+    }
+  }
+
+  return [...argumentsSet].sort();
+}
+
+function extractRichTextTags(message) {
+  const tags = new Set();
+  const tagPattern = /<\/?([A-Za-z][\w]*)\b[^>]*>/g;
+
+  for (const match of message.matchAll(tagPattern)) {
+    tags.add(match[1]);
+  }
+
+  return [...tags].sort();
+}
+
+function listDifference(left, right) {
+  const rightSet = new Set(right);
+  return left.filter((item) => !rightSet.has(item));
+}
+
+function sameList(left, right) {
+  return (
+    left.length === right.length &&
+    left.every((item, index) => item === right[index])
+  );
+}
+
+function formatList(items) {
+  return items.map((item) => `- ${item}`).join("\n");
+}
+
+function compareLocale(locale, baselineLocale, baselineEntries, localeEntries) {
+  const problems = [];
+  const baselineLeaves = leafKeys(baselineEntries);
+  const localeLeaves = leafKeys(localeEntries);
+  const missingKeys = listDifference(baselineLeaves, localeLeaves);
+  const extraKeys = listDifference(localeLeaves, baselineLeaves);
+
+  if (missingKeys.length > 0) {
+    problems.push(
+      `messages/${locale}.json is missing keys from messages/${baselineLocale}.json:\n${formatList(
+        missingKeys
+      )}`
+    );
+  }
+
+  if (extraKeys.length > 0) {
+    problems.push(
+      `messages/${locale}.json has extra keys not found in messages/${baselineLocale}.json:\n${formatList(
+        extraKeys
+      )}`
+    );
+  }
+
+  for (const [key, baselineEntry] of baselineEntries) {
+    const localeEntry = localeEntries.get(key);
+
+    if (!localeEntry) {
+      continue;
+    }
+
+    if (baselineEntry.type !== localeEntry.type) {
+      problems.push(
+        `messages/${locale}.json has a structural mismatch at "${key}": expected ${baselineEntry.type}, found ${localeEntry.type}`
+      );
+      continue;
+    }
+
+    if (localeEntry.type !== "string") {
+      continue;
+    }
+
+    if (localeEntry.value.trim() === "") {
+      problems.push(`messages/${locale}.json has an empty string at "${key}"`);
+      continue;
+    }
+
+    const baselineArguments = extractIcuArguments(baselineEntry.value);
+    const localeArguments = extractIcuArguments(localeEntry.value);
+
+    if (!sameList(baselineArguments, localeArguments)) {
+      problems.push(
+        `messages/${locale}.json has ICU placeholder mismatch at "${key}": expected {${baselineArguments.join(
+          ", "
+        )}}, found {${localeArguments.join(", ")}}`
+      );
+    }
+
+    const baselineTags = extractRichTextTags(baselineEntry.value);
+    const localeTags = extractRichTextTags(localeEntry.value);
+
+    if (!sameList(baselineTags, localeTags)) {
+      problems.push(
+        `messages/${locale}.json has rich-text tag mismatch at "${key}": expected <${baselineTags.join(
+          ">, <"
+        )}>, found <${localeTags.join(">, <")}>`
+      );
+    }
+  }
+
+  return problems;
+}
+
+function main() {
+  const { locales, defaultLocale } = readConfig();
+  const baselineMessages = readMessages(defaultLocale);
+  const baselineEntries = flattenMessages(baselineMessages);
+  const problems = [];
+
+  for (const locale of locales) {
+    const messages = readMessages(locale);
+    const entries = flattenMessages(messages);
+
+    for (const [key, entry] of entries) {
+      if (entry.type === "string" && entry.value.trim() === "") {
+        problems.push(
+          `messages/${locale}.json has an empty string at "${key}"`
+        );
+      }
+    }
+
+    if (locale === defaultLocale) {
+      continue;
+    }
+
+    problems.push(
+      ...compareLocale(locale, defaultLocale, baselineEntries, entries)
+    );
+  }
+
+  if (problems.length > 0) {
+    console.error(
+      `i18n message check failed with ${problems.length} problem(s):`
+    );
+    console.error("");
+    console.error(problems.join("\n\n"));
+    process.exitCode = 1;
+    return;
+  }
+
+  console.log(
+    `i18n message check passed for ${locales.length} locale(s): ${locales.join(
+      ", "
+    )}`
+  );
+}
+
+try {
+  main();
+} catch (error) {
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+}

messages/es.json

@@ -7,13 +7,15 @@ import LegalFooter from "@/components/LegalFooter";
 import { styled } from "@pigment-css/react";
 import { Suspense } from "react";
 import Toast from "@/components/Toast";
+import { getTranslations } from "next-intl/server";
 
 export const metadata = {
   title: "Profile",
 };
 
 // Keep URL-based feedback in a client leaf so server rendering is driven by auth/data only.
 export default async function ProfilePage() {
+  const t = await getTranslations("Profile.sections");
   const supabase = await createClient();
   // Get the authenticated user first, then fetch profile data in parallel.
   const {
@@ -42,17 +44,17 @@ export default async function ProfilePage() {
       </NakedSection>
 
       <Section>
-        <h2>Listings</h2>
+        <h2>{t("listings")}</h2>
         <ProfileListings user={user} profile={profile} listings={listings} />
       </Section>
 
       <Section>
-        <h2>Account</h2>
+        <h2>{t("account")}</h2>
         <ProfileAccountSettings user={user} profile={profile} />
       </Section>
 
       <Section>
-        <h2>Actions</h2>
+        <h2>{t("actions")}</h2>
         <ProfileActions listings={listings} />
       </Section>
 

package.json

@@ -12,6 +12,7 @@ import StaticPageSection from "@/components/StaticPageSection";
 import HeaderBlock from "@/components/HeaderBlock";
 import FooterBlock from "@/components/FooterBlock";
 import { getNewsletterIssueImageUrl } from "@/utils/storage";
+import { getTranslations } from "next-intl/server";
 
 type NewsletterIssuePageProps = {
   params: Promise<{ slug: string }>;
@@ -54,6 +55,7 @@ export default async function NewsletterIssuePage({
   params,
 }: NewsletterIssuePageProps) {
   const { slug } = await params;
+  const t = await getTranslations("Newsletter");
   const { metadata, customMetadata, formattedDate } =
     await getNewsletterIssueMetadata(slug);
   const title = customMetadata.verboseTitle
@@ -75,8 +77,11 @@ export default async function NewsletterIssuePage({
       <section>
         <StaticPageHeader
           title={title}
-          subtitle={`Issue #${issueNumber} · Published ${formattedDate}`}
-          parent="Newsletter"
+          subtitle={t("issueSubtitle", {
+            number: issueNumber,
+            date: formattedDate,
+          })}
+          parent={t("parent")}
         />
         <LongformTextContainer>
           <NewsletterIssueMarkdown />
@@ -85,14 +90,17 @@ export default async function NewsletterIssuePage({
 
       <StaticPageSection>
         <HeaderBlock>
-          <h2>Get these in your inbox</h2>
+          <h2>{t("inboxTitle")}</h2>
           <p>{siteConfig.newsletter.description}</p>
         </HeaderBlock>
         <NewsletterCallout />
         <FooterBlock>
           <p>
-            Or subscribe to the{" "}
-            <Link href="/newsletter/feed.xml">RSS feed</Link>.
+            {t.rich("rss", {
+              link: (chunks) => (
+                <Link href="/newsletter/feed.xml">{chunks}</Link>
+              ),
+            })}
           </p>
         </FooterBlock>
       </StaticPageSection>