feat: i18n

inlang.config.js

@@ -0,0 +1,25 @@
+/**
+ * @type {import('@inlang/core/config').DefineConfig}
+ */
+export async function defineConfig(env) {
+  const {default: pluginYaml} = await env.$import(
+    "https://cdn.jsdelivr.net/gh/felixhaeberle/inlang-plugin-yaml@2.0.1/dist/index.js",
+  )
+  const {default: sdkPlugin} = await env.$import(
+    "https://cdn.jsdelivr.net/npm/@inlang/sdk-js-plugin@0.10.1/dist/index.js",
+  )
+
+  return {
+    referenceLanguage: "en",
+    plugins: [
+      sdkPlugin({
+        languageNegotiation: {
+          strategies: [{type: "localStorage"}],
+        },
+      }),
+      pluginYaml({
+        pathPattern: "./languages/{language}.yml",
+      }),
+    ],
+  }
+}

languages/de.yml

@@ -0,0 +1 @@
+title: amaCC1ng

languages/en.yml

@@ -0,0 +1 @@
+title: amaCC1ng

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "amacc1ng",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "amacc1ng",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "license": "AGPL-3.0-or-later",
       "devDependencies": {
         "@fontsource-variable/material-symbols-rounded": "^5.0.4",
         "@fontsource-variable/noto-sans-mono": "^5.0.4",
+        "@inlang/sdk-js": "^0.10.1",
         "@material/material-color-utilities": "^0.2.7",
         "@modyfi/vite-plugin-yaml": "^1.0.4",
         "@sveltejs/adapter-static": "^2.0.2",
@@ -1953,6 +1954,31 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@esbuild-plugins/node-modules-polyfill": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@esbuild-plugins/node-modules-polyfill/-/node-modules-polyfill-0.2.2.tgz",
+      "integrity": "sha512-LXV7QsWJxRuMYvKbiznh+U1ilIop3g2TeKRzUxOG5X3YITc8JyyTa90BmLwqqv0YnX4v32CSlG+vsziZp9dMvA==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0",
+        "rollup-plugin-node-polyfills": "^0.2.1"
+      },
+      "peerDependencies": {
+        "esbuild": "*"
+      }
+    },
+    "node_modules/@esbuild-plugins/node-modules-polyfill/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -2317,6 +2343,50 @@
       "integrity": "sha512-CC5p/9/OF3hep8EsSD0UKYMCaA58nqjm4vRKnwvmvHZPA9jFif6q1lRkmI2nx8C30UkdVA1L7JvOUmCUu+RgNA==",
       "dev": true
     },
+    "node_modules/@inlang-git/fs": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@inlang-git/fs/-/fs-0.0.4.tgz",
+      "integrity": "sha512-VGBV8N6wJpb1xHA9dR5qETxaAeDENhN9+KIicNFSazk3OUNjrn/L237+FEXuQyfzwkIsC4T0Mx+qbc0w1/4pqQ==",
+      "dev": true,
+      "dependencies": {
+        "js-base64": "^3.7.5",
+        "outmatch": "^0.7.0"
+      }
+    },
+    "node_modules/@inlang/core": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@inlang/core/-/core-0.9.2.tgz",
+      "integrity": "sha512-NF6jeEMO3HHhkOVCDM0AvWWF36KXXPUm5C4H0IamLQl05dzo0vdk6x8P3eTX4wopEHc0slgE0+I2myvuZQE6dg==",
+      "dev": true,
+      "dependencies": {
+        "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+        "@inlang-git/fs": "^0.0.4",
+        "deepmerge-ts": "^5.1.0",
+        "ts-dedent": "^2.2.0",
+        "zod": "^3.21.4"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      }
+    },
+    "node_modules/@inlang/sdk-js": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@inlang/sdk-js/-/sdk-js-0.10.1.tgz",
+      "integrity": "sha512-AfJ3xss2WKn8h0xEUw33737hWV6YtA21twi+npdawUovVBTCDJP0d5TPggpsZZjYaEJywn24ZkCM7KnBCtRmaw==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/core": "*",
+        "ts-morph": "^19.0.0",
+        "typescript": "^5.1.6"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": "^1.0.0",
+        "svelte": "^3.54.0 || ^4.0.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2879,6 +2949,57 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.20.0.tgz",
+      "integrity": "sha512-7uKjByfbPpwuzkstL3L5MQyuXPSKdoNG93Fmi2JoDcTf3pEP731JdRFAduRVkOs8oqxPsXKA+ScrWkdQ8t/I+Q==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.12",
+        "minimatch": "^7.4.3",
+        "mkdirp": "^2.1.6",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/mkdirp": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
+      "integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -3962,6 +4083,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
+      "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==",
+      "dev": true
+    },
     "node_modules/code-red": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.3.tgz",
@@ -4581,6 +4708,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/deepmerge-ts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-5.1.0.tgz",
+      "integrity": "sha512-eS8dRJOckyo9maw9Tu5O5RUi/4inFLrnoLkBe3cPfDMx3WZioXtmOew4TXQaxq7Rhl4xjDtR7c6x8nNTxOvbFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
@@ -6551,6 +6687,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==",
+      "dev": true
+    },
     "node_modules/js-tokens": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-8.0.1.tgz",
@@ -7436,6 +7578,12 @@
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
       "dev": true
     },
+    "node_modules/outmatch": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/outmatch/-/outmatch-0.7.0.tgz",
+      "integrity": "sha512-w1ybiTBffGiwxOO7JJBVVOsIiWwzcfSl/D80amWAU2UDe1o9/SySOUzAwDuN3+jGKQRs0UCDTS8rndFiroJgVQ==",
+      "dev": true
+    },
     "node_modules/p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -7535,6 +7683,12 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -8273,6 +8427,57 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-inject": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-inject/-/rollup-plugin-inject-3.0.2.tgz",
+      "integrity": "sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1",
+        "magic-string": "^0.25.3",
+        "rollup-pluginutils": "^2.8.1"
+      }
+    },
+    "node_modules/rollup-plugin-inject/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-inject/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/rollup-plugin-node-polyfills": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-polyfills/-/rollup-plugin-node-polyfills-0.2.1.tgz",
+      "integrity": "sha512-4kCrKPTJ6sK4/gLL/U5QzVT8cxJcofO0OU74tnB19F40cmuAKSzH5/siithxlofFEjwvw1YAhPmbvGNA6jEroA==",
+      "dev": true,
+      "dependencies": {
+        "rollup-plugin-inject": "^3.0.0"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/rollup-pluginutils/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
     "node_modules/rrweb-cssom": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
@@ -9540,6 +9745,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
+    "node_modules/ts-morph": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-19.0.0.tgz",
+      "integrity": "sha512-D6qcpiJdn46tUqV45vr5UGM2dnIEuTGNxVhg0sk5NX11orcouwj6i1bMqZIz2mZTZB1Hcgy7C3oEVhAT+f6mbQ==",
+      "dev": true,
+      "dependencies": {
+        "@ts-morph/common": "~0.20.0",
+        "code-block-writer": "^12.0.0"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
@@ -10784,6 +11008,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.21.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
+      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }

package.json

@@ -18,6 +18,7 @@
     "@theaninova/prettier-config": "^1.0.0",
     "@types/w3c-web-serial": "^1.0.3",
     "@vite-pwa/sveltekit": "^0.2.5",
+    "@inlang/sdk-js": "^0.10.1",
     "@fontsource-variable/noto-sans-mono": "^5.0.4",
     "@fontsource-variable/material-symbols-rounded": "^5.0.4",
     "stylelint": "^15.9.0",

src/app.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />

src/hooks.server.ts

@@ -0,0 +1,4 @@
+/* This file was created by inlang.
+It is needed in order to circumvent a current limitation of SvelteKit. See https://github.com/inlang/inlang/issues/647
+You can remove this comment and modify the file as you like. We just need to make sure it exists.
+Please do not delete it (inlang will recreate it if needed). */

src/routes/Navigation.svelte

@@ -10,6 +10,7 @@
   import {browser} from "$app/environment"
   import {userPreferences} from "$lib/preferences"
   import Theme from "./Theme.svelte"
+  import {i} from "@inlang/sdk-js"
 
   const training = [
     {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
@@ -28,7 +29,7 @@
 </script>
 
 <nav>
-  <a href="/" class="title">amaCC1ng</a>
+  <a href="/" class="title">{i("title")}</a>
 
   <div class="steps">
     {#each training as { slug, title, icon }}

src/routes/inlang/[language].json/+server.ts

@@ -0,0 +1,4 @@
+/* This file was created by inlang.
+It is needed in order to circumvent a current limitation of SvelteKit. See https://github.com/inlang/inlang/issues/647
+You can remove this comment and modify the file as you like. We just need to make sure it exists.
+Please do not delete it (inlang will recreate it if needed). */

vite.config.ts

@@ -4,6 +4,7 @@ import {sveltekit} from "@sveltejs/kit/vite"
 import {defineConfig} from "vite"
 import {SvelteKitPWA} from "@vite-pwa/sveltekit"
 import ViteYaml from "@modyfi/vite-plugin-yaml"
+import inlangPlugin from "@inlang/sdk-js/adapter-sveltekit"
 
 export default defineConfig({
   build: {
@@ -12,6 +13,7 @@ export default defineConfig({
   },
   plugins: [
     ViteYaml(),
+    inlangPlugin(),
     sveltekit(),
     SvelteKitPWA({
       kit: {