From a37470bf9c06c3317e94a19638df10b8cad3e4d2 Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Mon, 12 Feb 2024 19:09:33 +0100
Subject: [PATCH] Format list of supported projects with `Intl`

---
 src/i18n/engine.ts       | 12 ++++++++++++
 src/layouts/layout.astro | 12 ++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/i18n/engine.ts b/src/i18n/engine.ts
index 3321f28..19ba847 100644
--- a/src/i18n/engine.ts
+++ b/src/i18n/engine.ts
@@ -72,6 +72,18 @@ export function applyTranslations(language: string) {
 		}
 	}
 
+	if (Intl.ListFormat) {
+		const formatter = new Intl.ListFormat(language, {
+			style: "short",
+			type: "conjunction",
+		});
+
+		for (const node of document.querySelectorAll("[data-enumerate]")) {
+			const dataset = (node as HTMLElement).dataset;
+			node.innerHTML = formatter.format(dataset.enumerate!.split(","));
+		}
+	}
+
 	document.documentElement.lang = language;
 	document.documentElement.dir =
 		languages[language as keyof typeof languages].dir;
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 34e64ca..e79f581 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -107,12 +107,16 @@ import package_ from "../../package.json";
 			<p><b data-translate="supportedProjects">Supported projects:</b></p>
 			<ul>
 				<li>
-					Mastodon (<span data-translate="incl">incl.</span> Hometown, Fedibird,
-					GlitchCafé)
+					Mastodon (<span data-translate="incl">incl.</span>&#x0020;<span
+						data-enumerate="Hometown,Fedibird,GlitchCafé"
+						>Hometown, Fedibird, GlitchCafé</span
+					>)
 				</li>
 				<li>
-					Misskey (<span data-translate="incl">incl.</span> Firefish/Calckey,
-					FoundKey, Meisskey)
+					Misskey (<span data-translate="incl">incl.</span>&#x0020;<span
+						data-enumerate="Firefish,Calckey,FoundKey,Meisskey"
+						>Firefish, Calckey, FoundKey, Meisskey</span
+					>)
 				</li>
 				<li>Friendica</li>
 				<li>Hubzilla</li>