feat(i18n): display banner for outdated translations

'Outdated' is recognized by having an explicit
version field in each translation file.

Author: liketechnik

public/locales/dk/translations.json

@@ -1,4 +1,5 @@
 {
+	"version": 0,
 	"root.description": "Et alternativ til Nix økosystemet",
 
 	"header.community": "Community",

public/locales/en/translations.json

@@ -1,4 +1,8 @@
 {
+	"version": 0,
+	"i18n-outdated.title": "Outdated Translation",
+	"i18n-outdated.description": "This translation has not been updated to the latest version yet.",
+
 	"root.description": "An alternative to the Nix ecosystem",
 
 	"header.community": "Community",

src/components/home/Home.astro

@@ -3,11 +3,21 @@ import Hero from "./Hero.astro";
 import Values from "./Values.astro";
 import Goals from "./Goals.astro";
 import Roadmap from "./Roadmap.astro";
+import I18nOutdated from "../i18n/Outdated.astro";
+
+const { lang } = Astro.params as Params;
+import { isOutdated as i18nIsOutdated } from "../../i18n/utils";
 ---
 
 <main class="grid place-items-center">
 	<Hero />
 
+	{ i18nIsOutdated(lang) &&
+		<div class="prose prose-invert py-16 px-4 max-w-4xl">
+			 <I18nOutdated />
+		</div>
+	}
+
 	<div class="prose prose-invert py-16 px-4 max-w-4xl">
 		<Values />
 		<Goals />

src/components/i18n/Outdated.astro

@@ -0,0 +1,14 @@
+---
+import { useTranslations } from "../../i18n/utils";
+import type { Params } from "../../i18n/utils";
+
+const { lang } = Astro.params as Params;
+const translation = useTranslations(lang);
+---
+
+<section id="i18n-outdated">
+	<h2>{translation("i18n-outdated.title")}</h2>
+	<p class="description">
+		{translation("i18n-outdated.description")}
+	</p>
+</section>

src/i18n/utils.ts

@@ -11,6 +11,14 @@ export function useTranslations(lang: keyof typeof ui) {
 	};
 }
 
+export function isOutdated(lang: keyof typeof ui) {
+	if ("version" in ui[lang]) {
+		return ui[lang]["version"] < ui[defaultLang]["version"];
+	} else {
+		return true;
+	}
+}
+
 export const getStaticPaths = (async () => {
 	return Object.keys(languages).map((name) => ({
 		params: { lang: name as keyof typeof languages },