Add i18n

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "svelte.svelte-vscode",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "inlang.vs-code-extension"
   ]
 }

frontend/messages/dk.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "fontpageCustomize": "Tilpas din søgning med en",
+  "noOptic": "Ingen Optic",
+  "search": "Søg"
+}

frontend/messages/en.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "fontpageCustomize": "Customise your search with an",
+  "noOptic": "No Optic",
+  "search": "Search"
+}

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite dev --port 8000",
-    "build": "vite build",
+    "build": "paraglide-js compile --project ./project.inlang && vite build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -13,12 +13,15 @@
     "format": "prettier --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss --write .",
     "openapi": "abeye generate http://localhost:3000/beta/api/docs/openapi.json -t ts --api-prefix /beta/api -o src/lib/api/index.ts && prettier --write src/lib/api/index.ts",
     "test:integration": "playwright test",
-    "test:unit": "vitest"
+    "test:unit": "vitest",
+    "postinstall": "paraglide-js compile --project ./project.inlang"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.16",
     "@iconify-json/simple-icons": "^1.1.84",
     "@iconify/svelte": "^3.1.6",
+    "@inlang/paraglide-js": "1.2.5",
+    "@inlang/paraglide-js-adapter-sveltekit": "^0.4.1",
     "@playwright/test": "^1.40.1",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^2.0.0",
@@ -60,4 +63,4 @@
     "tailwind-merge": "^2.1.0",
     "ts-pattern": "^5.0.6"
   }
-}
+}

frontend/project.inlang/project_id

@@ -0,0 +1 @@
+b2415630c9f3bb80ed1eaf01298e0999c1f1feff7457a1490d51bed5b6fd4b91

frontend/project.inlang/settings.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "sourceLanguageTag": "en",
+  "languageTags": [
+    "en",
+    "dk"
+  ],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{languageTag}.json"
+  }
+}

frontend/src/lib/components/OpticSelector.svelte

@@ -3,6 +3,7 @@
   import { opticsStore, opticsShowStore } from '$lib/stores';
   import Select from './Select.svelte';
   import { derived } from 'svelte/store';
+  import * as m from '$paraglide/messages';
 
   export let searchOnChange: boolean;
   export let selected = '';
@@ -19,7 +20,7 @@
   const optics = derived(opticsStore, ($optics) => [...$optics, ...DEFAULT_OPTICS]);
 
   $: options = [
-    { value: '', label: 'No Optic' },
+    { value: '', label: m.noOptic() },
     ...$optics
       .filter((optic) => $opticsShowStore[opticKey(optic)])
       .map((optic) => ({ value: optic.url, label: optic.name })),
@@ -31,7 +32,7 @@
     form="searchbar-form"
     id="optics-selector"
     name="optic"
-    class="m-0 text-neutral-focus text-xs cursor-pointer"
+    class="m-0 cursor-pointer text-xs text-neutral-focus"
     submitOnChange={searchOnChange}
     bind:value={selected}
     {options}

frontend/src/lib/components/Searchbar.svelte

@@ -8,6 +8,7 @@
   import { compressRanked, rankingsToRanked } from '$lib/rankings';
   import { twJoin } from 'tailwind-merge';
   import { P, match } from 'ts-pattern';
+  import * as m from '$paraglide/messages';
 
   export let autofocus = false;
 
@@ -93,12 +94,12 @@
   <label
     for="searchbar"
     class={twJoin(
-      'border-base-400 group relative grid w-full grid-cols-[auto_1fr_auto] items-center rounded-3xl border pl-5 transition focus-within:shadow',
+      'group relative grid w-full grid-cols-[auto_1fr_auto] items-center rounded-3xl border border-base-400 pl-5 transition focus-within:shadow',
       hasFocus && suggestions.length > 0 && 'rounded-b-none',
       hasFocus && 'shadow',
     )}
   >
-    <MagnifyingGlass class="text-base-content w-5" />
+    <MagnifyingGlass class="w-5 text-base-content" />
     <!-- svelte-ignore a11y-autofocus -->
     <input
       type="search"
@@ -129,20 +130,20 @@
       on:keydown={onKeydown}
     />
     <div class="h-full py-0.5 pr-0.5">
-      <Button _class="py-0 h-full" type="submit">search</Button>
+      <Button _class="py-0 h-full" type="submit">{m.search()}</Button>
     </div>
 
     {#if suggestions.length > 0}
-      <div class="bg-base-300 absolute inset-x-5 bottom-px hidden h-px group-focus-within:block" />
+      <div class="absolute inset-x-5 bottom-px hidden h-px bg-base-300 group-focus-within:block" />
       <div
         class={twJoin(
-          'bg-base-300 absolute inset-x-5 bottom-px h-px',
+          'absolute inset-x-5 bottom-px h-px bg-base-300',
           hasFocus ? 'block' : 'hidden',
         )}
       />
       <div
         class={twJoin(
-          'border-base-400 bg-base-100 absolute -inset-x-px bottom-0 translate-y-full flex-col overflow-hidden rounded-3xl rounded-t-none border border-t-0 shadow',
+          'absolute -inset-x-px bottom-0 translate-y-full flex-col overflow-hidden rounded-3xl rounded-t-none border border-t-0 border-base-400 bg-base-100 shadow',
           hasFocus ? 'flex' : 'hidden',
         )}
         role="listbox"
@@ -151,7 +152,7 @@
         {#each suggestions as s, index}
           <button
             class={twJoin(
-              'hover:bg-base-200 flex space-x-3 py-1.5 pl-5',
+              'flex space-x-3 py-1.5 pl-5 hover:bg-base-200',
               selected == index && 'bg-base-200',
             )}
             on:click={() => {
@@ -160,7 +161,7 @@
             }}
             type="submit"
           >
-            <MagnifyingGlass class="text-neutral w-4" />
+            <MagnifyingGlass class="w-4 text-neutral" />
             <span>
               {@html splitAtOverlap(s)[0]}<span class="font-medium"
                 >{@html splitAtOverlap(s)[1]}</span

frontend/src/lib/i18n.ts

@@ -0,0 +1,4 @@
+import { createI18n } from '@inlang/paraglide-js-adapter-sveltekit';
+import * as runtime from '$paraglide/runtime';
+
+export const i18n = createI18n(runtime);

frontend/src/routes/+layout.svelte

@@ -2,28 +2,32 @@
   import '../app.css';
   import Header from '$lib/components/Header.svelte';
   import Footer from '$lib/components/Footer.svelte';
+  import { i18n } from '$lib/i18n';
   import { page } from '$app/stores';
+  import { ParaglideJS } from '@inlang/paraglide-js-adapter-sveltekit';
 </script>
 
 <svelte:head>
   <title>{$page.data.globals?.title || 'Stract'}</title>
   <meta property="og:title" content="Stract" />
   <meta property="og:image" content="https://stract.com/images/biglogo-with-text.png" />
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width" />
 </svelte:head>
 
-<div class="grid min-h-screen grid-rows-[auto_1fr_auto] font-light">
-  <Header />
+<ParaglideJS {i18n}>
+  <div class="grid min-h-screen grid-rows-[auto_1fr_auto] font-light">
+    <Header />
 
-  <slot />
+    <slot />
 
-  <Footer />
-</div>
+    <Footer />
+  </div>
 
-<noscript>
-  <style lang="postcss">
-    .noscript\:hidden {
-      @apply hidden;
-    }
-  </style>
-</noscript>
+  <noscript>
+    <style lang="postcss">
+      .noscript\:hidden {
+        @apply hidden;
+      }
+    </style>
+  </noscript>
+</ParaglideJS>

frontend/src/routes/+page.svelte

@@ -2,18 +2,19 @@
   import OpticSelector from '$lib/components/OpticSelector.svelte';
   import Searchbar from '$lib/components/Searchbar.svelte';
   import BiglogoWithText from '$lib/images/BiglogoWithText.svelte';
+  import * as m from '$paraglide/messages';
 </script>
 
 <div class="mt-[25vh] flex w-full flex-1 flex-col items-center justify-start">
   <div class="mb-2 flex w-64">
     <BiglogoWithText />
   </div>
-  <div class="px-3 w-full md:mx-0 md:max-w-xl">
+  <div class="w-full px-3 md:mx-0 md:max-w-xl">
     <Searchbar autofocus={true} />
   </div>
-  <div class="px-5 mt-3 flex space-x-2 text-neutral text-sm md:text-sm">
+  <div class="mt-3 flex space-x-2 px-5 text-sm text-neutral md:text-sm">
     <div>
-      Customise your search with an{' '}
+      {m.fontpageCustomize()}{' '}
       <a class="font-medium underline" href="/settings/optics">optic</a>:
     </div>
     <OpticSelector searchOnChange={false} />

frontend/svelte.config.js

@@ -25,6 +25,9 @@ const config = {
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
+    alias: {
+      $paraglide: './src/paraglide',
+    },
     csp: {
       directives: {
         'default-src': ["'self'"],

frontend/vite.config.ts

@@ -1,9 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { paraglide } from '@inlang/paraglide-js-adapter-sveltekit/vite';
 import { defineConfig } from 'vitest/config';
 import Icons from 'unplugin-icons/vite';
 
 export default defineConfig({
-  plugins: [sveltekit(), Icons({ compiler: 'svelte' })],
+  plugins: [
+    sveltekit(),
+    paraglide({
+      project: './project.inlang',
+      outdir: './src/paraglide',
+    }),
+    Icons({ compiler: 'svelte' }),
+  ],
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}'],
   },