i18n basics

frontend/package-lock.json

@@ -1,14 +1,16 @@
 {
 	"name": "atscan-fe",
-	"version": "0.5.0-alpha",
+	"version": "0.6.2-alpha",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "atscan-fe",
-			"version": "0.5.0-alpha",
+			"version": "0.6.2-alpha",
 			"dependencies": {
-				"js-yaml": "^4.1.0"
+				"i18next": "^23.2.6",
+				"js-yaml": "^4.1.0",
+				"svelte-i18next": "^2.0.0"
 			},
 			"devDependencies": {
 				"@floating-ui/dom": "^1.4.2",
@@ -54,7 +56,6 @@
 			"version": "7.22.5",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
 			"integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
-			"dev": true,
 			"dependencies": {
 				"regenerator-runtime": "^0.13.11"
 			},
@@ -1894,6 +1895,28 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/i18next": {
+			"version": "23.2.6",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-23.2.6.tgz",
+			"integrity": "sha512-i0P2XBisewaICJ7UQtwymeJj6cXUigM+s8XNIXmWk4oJ8iTok2taCbOTX0ps+u9DFcQ6FWH6xLIU0dLEnMaNbA==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://locize.com"
+				},
+				{
+					"type": "individual",
+					"url": "https://locize.com/i18next.html"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+				}
+			],
+			"dependencies": {
+				"@babel/runtime": "^7.22.5"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2771,8 +2794,7 @@
 		"node_modules/regenerator-runtime": {
 			"version": "0.13.11",
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-			"dev": true
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
 		},
 		"node_modules/resolve": {
 			"version": "1.22.2",
@@ -3044,7 +3066,6 @@
 			"version": "3.59.2",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
 			"integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
-			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -3094,6 +3115,15 @@
 				"svelte": "^3.19.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/svelte-i18next": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/svelte-i18next/-/svelte-i18next-2.0.0.tgz",
+			"integrity": "sha512-Y03grFPNI+9fkAx5fgrz9SJY5/tAEBJ512YVP2GN+6nAPNvkY4cgowpUG1KFZzBBthy3FygluBw3jBvhGs6kWQ==",
+			"peerDependencies": {
+				"i18next": "*",
+				"svelte": "*"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.3.2",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",

frontend/package.json

@@ -38,6 +38,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"js-yaml": "^4.1.0"
+		"i18next": "^23.2.6",
+		"js-yaml": "^4.1.0",
+		"svelte-i18next": "^2.0.0"
 	}
 }

frontend/src/lib/i18n.js

@@ -0,0 +1,22 @@
+import i18next from 'i18next';
+import { createI18nStore } from 'svelte-i18next';
+
+i18next.init({
+	lng: 'en',
+	resources: {
+		en: {
+			translation: {}
+		}
+	},
+	interpolation: {
+		escapeValue: true
+	},
+	// allow keys to be phrases having `:`, `.`
+	nsSeparator: false,
+	keySeparator: false,
+
+	// do not load a fallback
+	fallbackLng: false
+});
+
+export const i18n = createI18nStore(i18next);

frontend/src/routes/+layout.svelte

@@ -15,6 +15,7 @@
 	import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
 	import { connect, StringCodec, JSONCodec } from 'nats.ws';
+	import { i18n } from '$lib/i18n.js';
 
 	export let data;
 
@@ -127,7 +128,7 @@
 							href="/dids"
 							class="btn hover:variant-soft-primary"
 							class:bg-primary-active-token={$page.url.pathname.startsWith('/dids')}
-							><span>DIDs</span></a
+							><span>{$i18n.t('DIDs')}</span></a
 						>
 					</div>
 					<div class="relative hidden lg:block">
@@ -135,7 +136,7 @@
 							href="/pds"
 							class="btn hover:variant-soft-primary"
 							class:bg-primary-active-token={$page.url.pathname.startsWith('/pds')}
-							><span>PDS Instances</span></a
+							><span>{$i18n.t('PDS Instances')}</span></a
 						>
 					</div>
 					<div class="relative hidden lg:block">