use dynamic translations

src/app/i18n/en.json

@@ -0,0 +1,19 @@
+{
+  "nav.home": "home",
+  "nav.login": "login",
+  "nav.register": "register",
+  "nav.admin": "admin",
+  "auth.login.cta": "login",
+  "auth.login.register_instead": "register instead?",
+  "auth.register.cta": "signup",
+  "auth.register.login_instead": "login instead?",
+  "auth.username.label": "username",
+  "auth.password.label": "password",
+  "auth.remember_me.label": "stay logged in",
+  "misc.loading": "wait...",
+  "nav.logout": "logout",
+  "post.add_media.cta": "+ add media",
+  "post.public.label": "public",
+  "post.submit.cta": "post",
+  "post.editor.placeholder": "write something..."
+}

src/app/i18n/translationKeys.ts

@@ -0,0 +1,24 @@
+export interface Translations {
+  'auth.login.cta': string
+  'auth.login.register_instead': string
+  'auth.password.label': string
+  'auth.register.cta': string
+  'auth.register.login_instead': string
+  'auth.remember_me.label': string
+  'auth.username.label': string
+
+  'misc.loading': string
+
+  'nav.admin': string
+  'nav.home': string
+  'nav.login': string
+  'nav.logout': string
+  'nav.register': string
+
+  'post.add_media.cta': string
+  'post.editor.placeholder': string
+  'post.public.label': string
+  'post.submit.cta': string
+}
+
+export type TranslationKey = keyof Translations

src/app/i18n/useTranslations.ts

@@ -0,0 +1,13 @@
+import { TranslationKey, Translations } from './translationKeys.ts'
+import en from './en.json' assert { type: 'json' }
+
+export function useTranslations() {
+  // TODO somehow handle other languages (reactively)
+  const texts = en as Translations
+
+  function getText<K extends TranslationKey>(key: K): Translations[K] {
+    return texts[key] ?? key
+  }
+
+  return { t: getText }
+}