Initial work on i18n (I'm lazy)

Signed-off-by: Alex J <odyssey346@disroot.org>

.vscode/i18n.code-snippets

@@ -0,0 +1,26 @@
+{
+	// Place your ProjectSegfaultWebsite workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"i18n": {
+		"scope": "svelte",
+		"prefix": "i18n",
+		"body": [
+			"{\\$t('common.$1')}"
+		],
+		"description": "i18n Snippet for Project Segfault's website"
+	}
+}

package.json

@@ -2,7 +2,7 @@
 	"name": "project-segfault-website",
 	"version": "2.0.0",
 	"scripts": {
-		"dev": "svelte-kit dev",
+		"dev": "svelte-kit dev --host",
 		"build": "svelte-kit build",
 		"package": "svelte-kit package",
 		"preview": "svelte-kit preview",
@@ -26,7 +26,8 @@
 		"svelte-seo": "^1.4.1",
 		"tslib": "^2.4.0",
 		"typescript": "^4.7.4",
-		"unplugin-icons": "^0.14.5"
+		"unplugin-icons": "^0.14.5",
+		"sveltekit-i18n": "^2.2.2"
 	},
 	"type": "module"
 }

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.3
 
 specifiers:
   '@iconify-json/fa6-solid': ^1.1.4
@@ -12,10 +12,14 @@ specifiers:
   svelte-check: ^2.7.2
   svelte-preprocess: ^4.10.7
   svelte-seo: ^1.4.1
+  sveltekit-i18n: ^2.2.2
   tslib: ^2.4.0
   typescript: ^4.7.4
   unplugin-icons: ^0.14.5
 
+dependencies:
+  sveltekit-i18n: 2.2.2_svelte@3.48.0
+
 devDependencies:
   '@iconify-json/fa6-solid': 1.1.4
   '@iconify-json/simple-icons': 1.1.15
@@ -23,10 +27,10 @@ devDependencies:
   '@sveltejs/kit': 1.0.0-next.350_svelte@3.48.0
   mdsvex: 0.10.6_svelte@3.48.0
   prettier: 2.7.1
-  prettier-plugin-svelte: 2.7.0_nakrehnrzdf7fdea5k3a4dfy4m
+  prettier-plugin-svelte: 2.7.0_prettier@2.7.1+svelte@3.48.0
   svelte: 3.48.0
   svelte-check: 2.7.2_svelte@3.48.0
-  svelte-preprocess: 4.10.7_lvfi2wesz6u4l5rfbnetbucfmm
+  svelte-preprocess: 4.10.7_svelte@3.48.0+typescript@4.7.4
   svelte-seo: 1.4.1_typescript@4.7.4
   tslib: 2.4.0
   typescript: 4.7.4
@@ -168,6 +172,20 @@ packages:
       - supports-color
     dev: true
 
+  /@sveltekit-i18n/base/1.2.1_svelte@3.48.0:
+    resolution: {integrity: sha512-F8gqG2+KAOeT0o2wYlUrW3TRCX7zaD7rBy/1CEVNw0irfw9TgFf/ODmhubkHHT3+6Zk+SMz8RNgeuffBfAMbJw==}
+    peerDependencies:
+      svelte: ^3.x
+    dependencies:
+      svelte: 3.48.0
+    optionalDependencies:
+      '@sveltekit-i18n/parser-default': 1.0.3
+    dev: false
+
+  /@sveltekit-i18n/parser-default/1.0.3:
+    resolution: {integrity: sha512-HheveklTjp3hxpYQhoHfyA6B4bQaUeSV5MQf2usIv/58UF2jY/YqhCAWj9bDBjufbuZc5pSz4BXvdX3WVT+viA==}
+    dev: false
+
   /@types/node/18.0.0:
     resolution: {integrity: sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA==}
     dev: true
@@ -854,7 +872,7 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /prettier-plugin-svelte/2.7.0_nakrehnrzdf7fdea5k3a4dfy4m:
+  /prettier-plugin-svelte/2.7.0_prettier@2.7.1+svelte@3.48.0:
     resolution: {integrity: sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==}
     peerDependencies:
       prettier: ^1.16.4 || ^2.0.0
@@ -1019,7 +1037,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 3.48.0
-      svelte-preprocess: 4.10.7_lvfi2wesz6u4l5rfbnetbucfmm
+      svelte-preprocess: 4.10.7_svelte@3.48.0+typescript@4.7.4
       typescript: 4.7.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -1043,7 +1061,7 @@ packages:
       svelte: 3.48.0
     dev: true
 
-  /svelte-preprocess/4.10.7_lvfi2wesz6u4l5rfbnetbucfmm:
+  /svelte-preprocess/4.10.7_svelte@3.48.0+typescript@4.7.4:
     resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -1107,6 +1125,16 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /sveltekit-i18n/2.2.2_svelte@3.48.0:
+    resolution: {integrity: sha512-6eygICleGCSL7elY7A3trF8XUhV+mlW56ZSoD0UUKXlw+Y6u0MTTHDq48u1LyY73SfnlbPHXgTarhTjZ0BvUKA==}
+    peerDependencies:
+      svelte: ^3.x
+    dependencies:
+      '@sveltekit-i18n/base': 1.2.1_svelte@3.48.0
+      '@sveltekit-i18n/parser-default': 1.0.3
+      svelte: 3.48.0
+    dev: false
+
   /tiny-glob/0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
     dependencies:

src/i18n/common.json

@@ -0,0 +1,19 @@
+{
+    "navbarInstances": "Instances & Gameservers",
+    "navbarMinecraft": "Minecraft",
+    "navbarDonate": "Donate",
+    "FAQ": "FAQ",
+    "navbarContact": "Contact",
+    "Blog": "Blog",
+    "INDEXTITLE": "Project Segfault",
+    "indexDescription": "4 idiots, a Sun server and a Hitachi Compute Rack.",
+    "INDEXWHAT": "what",
+    "INDEXWHOAREWE": "We are 4 teenagers who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!",
+    "INDEXTELLMEMORE": "Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?",
+    "INDEXMOREINFO": "We can't fix your daughter's iPad, but there is a navigation bar at the top of the page with links to websites that explain things about us, or contain useful information about us.",
+    "DONATETITLE": "Donate to Project Segfault",
+    "DONATEDESCRIPTION": "The ways you can donate to us and more",
+    "DONATEPLEASEDO": "please do",
+    "DONATEEXPLANATION": "If you donate, we will be more motivated to work on the server and host more stuff and maybe even get more hardware. I really recommend you donate any spare money you have if you enjoy or use our services on a daily basis. Thanks!",
+    "DONATEOKSURE": "sure I'll donate. Links?"
+}

src/i18n/nb.json

@@ -0,0 +1,19 @@
+{
+    "navbarInstances": "Våre tjenester og spillservere",
+    "navbarMinecraft": "Minecraft",
+    "navbarDonate": "Doner",
+    "FAQ": "OSS",
+    "navbarContact": "Kontakt",
+    "Blog": "Blogg",
+    "INDEXTITLE": "Project Segfault",
+    "indexDescription": "4 idioter, en Sun server og en Hitachi Compute Rack.",
+    "INDEXWHAT": "hva",
+    "INDEXWHOAREWE": "Vi er 4 tenåringer med en grei server. Hva gjør vi med denne serveren? Vi ofrer tjenester som respekterer personvernet ditt som for eksempel Invidious, Matrix, Pleroma. Vi kjører også noen spillservere på serveren våres, for eksempel Minecraft. Kanskje vi lager noe originalt... det får du se etterhvert!",
+    "INDEXTELLMEMORE": "Fortell meg mer! Hva kjører dere på serverene deres? Hvor kan jeg komme i kontakt med dere? Kan dere fikse min datters iPad?",
+    "INDEXMOREINFO": "Vi kan ikke fikse din datters iPad, men det er navigasjonslinje på toppen av siden som har lenker til sider som forklarer ting om oss, eller har nyttig informasjon om oss.",
+    "DONATETITLE": "Doner til Project Segfault",
+    "DONATEDESCRIPTION": "Veiene du kan donere til oss og mer",
+    "DONATEPLEASEDO": "vær så snill",
+    "DONATEEXPLANATION": "Hvis du donerer, blir vi mer motivert til å jobbe på serverene våres og ofre flere tjenester, og kanskje skaffe oss mer maskinvare. Jeg anbefaler at du donerer reservepenger hvis du liker å bruke tjenestene våres, eller hvis du bruker våres tjenester på en daglig basis. Takk!",
+    "DONATEOKSURE": "greit, jeg skal donere. Hvor kan jeg donere?"
+}

src/lib/Nav.svelte

@@ -1,5 +1,6 @@
 <script>
 	import * as strings from "$lib/strings";
+	import { t } from '$lib/translations';
 </script>
 
 <nav>
@@ -15,12 +16,12 @@
 	</a>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">{strings.INSTANCES}</a>
+		<a href="https://instances.projectsegfau.lt/">{$t('common.navbarInstances')}</a>
-		<a href="/minecraft">{strings.MINECRAFT}</a>
+		<a href="/minecraft">{$t('common.navbarMinecraft')}</a>
-		<a href="/donate">{strings.DONATE}</a>
+		<a href="/donate">{$t('common.navbarDonate')}</a>
-		<a href="/faq">{strings.FAQ}</a>
+		<a href="/faq">{$t('common.FAQ')}</a>
-		<a href="/contact">{strings.CONTACT}</a>
+		<a href="/contact">{$t('common.navbarContact')}</a>
-		<a href="https://blog.projectsegfau.lt/">{strings.BLOG}</a>
+		<a href="https://blog.projectsegfau.lt/">{$t('common.Blog')}</a>
 	</div>
 </nav>
 

src/lib/strings.json

@@ -2,12 +2,6 @@
 	"NAME": "Project Segfault",
 	"PROJECT": "Project",
 	"SEGFAULT": "Segfault",
-	"INSTANCES": "Instances & Gameservers",
-	"MINECRAFT": "Minecraft",
-	"DONATE": "Donate",
-	"FAQ": "FAQ",
-	"CONTACT": "Contact",
-	"BLOG": "Blog",
 	"SEO_BANNER_URL": "https://projectsegfau.lt:8448/_matrix/media/r0/download/projectsegfau.lt/HBgjhWUExhKPzbpkpIqQfUkF",
 	"COPYRIGHT": "© 2021 - present, Project Segfault",
 	"MATRIX_INVITE": "https://matrix.to/#/#project-segfault:projectsegfau.lt",

src/lib/translations.js

@@ -0,0 +1,23 @@
+import i18n from 'sveltekit-i18n';
+
+/** @type {import('sveltekit-i18n').Config} */
+const config = ({
+  loaders: [
+    {
+      locale: 'en',
+      key: 'common',
+      loader: async () => (
+        await import('../i18n/common.json')
+      ).default,
+    },
+    {
+      locale: 'nb',
+      key: 'common',
+      loader: async () => (
+        await import('../i18n/nb.json')
+      ).default,
+    }
+  ],
+});
+
+export const { t, locale, locales, loading, loadTranslations } = new i18n(config);

src/routes/__layout.svelte

@@ -4,6 +4,22 @@
 	import Footer from "$lib/Footer.svelte";
 </script>
 
+<script context="module">
+  import { locale, loadTranslations } from '$lib/translations';
+
+  export const load = async ({ url }) => {
+    const { pathname } = url;
+
+    const defaultLocale = 'en'; // get from cookie, user session, ...
+
+    const initLocale = locale.get() || defaultLocale; // set default if no locale already set
+
+    await loadTranslations(initLocale, pathname); // keep this just before the `return`
+
+    return {};
+  }
+</script>
+
 <Nav />
 <main>
 	<slot />

src/routes/donate.svelte

@@ -1,21 +1,18 @@
----
-title: Donate to Project Segfault
-description: Our donation methods
----
-
 <script lang="ts">
     import MoneroQR from "$lib/images/Monero.png";
+
+	import { t } from '$lib/translations';
 </script>
 
-# {title}
+<h1>{$t('common.DONATETITLE')}</h1>
 
-## {description}
+<h2>{$t('common.DONATEDESCRIPTION')}</h2>
 
-# please do
+<h1>{$t('common.DONATEPLEASEDO')}</h1>
 
-If you donate, we will be more motivated to work on the server and host more stuff and maybe even get more hardware. I really recommend you donate any spare money you have if you enjoy or use our services on a daily basis.
+<p>{$t('common.DONATEEXPLANATION')}</p>
 
-# yeah sure I'll donate. links?
+<h1>{$t('common.DONATEOKSURE')}</h1>
 
 <div class="monero">
     <span>Monero: <code>47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA</code></span>

src/routes/index.md

@@ -1,16 +0,0 @@
----
-title: Project Segfault
-description: 4 idiots, a Sun server and a Hitachi Compute Rack.
----
-
-# {title}
-
-## {description}
-
-# what
-
-We are 4 teenagers who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
-
-# Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?
-
-We can't fix your daughter's iPad, but there is a navigation bar at the top of the page with links to websites that explain things about us, or contain useful information about us.

src/routes/index.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { t } from '$lib/translations';
+</script>
+
+<h1> {$t('common.INDEXTITLE')} </h1>
+
+<h2> {$t('common.indexDescription')} </h2>
+
+<h1> {$t('common.INDEXWHAT')} </h1> <!-- Cause I feel the need to scream -->
+
+<p> {$t('common.INDEXWHOAREWE')} </p>
+
+<h1> {$t('common.INDEXTELLMEMORE')} </h1>
+
+<p>{$t('common.INDEXMOREINFO')}</p>