From 6ad0e36f4d46062db497cf06c882d1423925c998 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 20 Jan 2024 02:00:45 -0800
Subject: feat: localisation

---
 src/routes/+layout.svelte | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1118ebcf..bafc9272 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,9 +13,23 @@
 	import Notification from '$lib/Notification/Notification.svelte';
 	import Root from '$lib/Home/Root.svelte';
 	import root from '$lib/Utility/root';
+	import { addMessages, init, _ } from 'svelte-i18n';
+	import en from '$lib/locale/en.json';
+	import ja from '$lib/locale/ja.json';
 
 	export let data;
 
+	addMessages('en', en);
+	addMessages('ja', ja);
+
+	$: {
+		// import(`../lib/locale/${$settings.displayLanguage}.json`).then((module) => {
+		// 	addMessages($settings.displayLanguage, module.default);
+		// });
+
+		init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage });
+	}
+
 	let currentUserIdentity = {
 		name: '',
 		id: -1,
@@ -63,19 +77,21 @@
 <div id="container">
 	<div id="header" class="card card-centered">
 		<div>
-			<a href={root('/')} class="header-item">Home</a><a
+			<a href={root('/')} class="header-item">{$_('navigation.home')}</a><a
 				href={root('/completed')}
-				class="header-item">Completed</a
+				class="header-item">{$_('navigation.completed')}</a
 			>
-			<a href={root('/schedule')} class="header-item">Subtitle Schedule</a>
-			<a href={root('/updates')} class="header-item">New Releases</a>
-			<a href={root('/tools')} class="header-item">Tools</a>
-			<a href={root('/settings')} class="header-item">Settings</a>
+			<a href={root('/schedule')} class="header-item">{$_('navigation.subtitle_schedule')}</a>
+			<a href={root('/updates')} class="header-item">{$_('navigation.new_releases')}</a>
+			<a href={root('/tools')} class="header-item">{$_('navigation.tools')}</a>
+			<a href={root('/settings')} class="header-item">{$_('navigation.settings')}</a>
 
 			<span style="opacity: 50%;" class="header-item">|</span>
 
 			{#if data.user}
-				<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item">Profile</a>
+				<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item"
+					>{$_('navigation.profile')}</a
+				>
 			{/if}
 
 			{#if data.user === undefined}
@@ -89,10 +105,12 @@
 						);
 					}}
 				>
-					Log in with AniList
+					{$_('navigation.log_in')}
 				</a>
 			{:else}
-				<a href={root('/api/authentication/log-out')} class="header-item">Log out </a>
+				<a href={root('/api/authentication/log-out')} class="header-item"
+					>{$_('navigation.log_out')}
+				</a>
 				{#if data.user}
 					<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item">
 						<img id="avatar" src={currentUserIdentity.avatar} alt="Avatar" />
-- 
cgit v1.2.3