Implement i18n

Fixes #38

package.json

@@ -29,6 +29,8 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.5",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@sveltekit-i18n/base": "^1.3.7",
+		"@sveltekit-i18n/parser-icu": "^1.0.8",
 		"async-mutex": "^0.5.0",
 		"carbon-components-svelte": "^0.85.0",
 		"carbon-icons-svelte": "^12.6.0",
@@ -37,9 +39,11 @@
 		"svelte": "^4.2.12",
 		"svelte-check": "^3.6.9",
 		"svelte-local-storage-store": "^0.6.4",
+		"sveltekit-i18n": "^2.4.2",
 		"tslib": "^2.6.2",
 		"typescript": "^5.4.3",
-		"vite": "^5.2.8"
+		"vite": "^5.2.8",
+		"vite-plugin-toml": "^0.7.0"
 	},
 	"devDependencies": {
 		"@prgm/sveltekit-progress-bar": "^2.0.0"

src/components/AppHeader.svelte

@@ -4,29 +4,39 @@
   import Light from 'carbon-icons-svelte/lib/Light.svelte'
   import Download from 'carbon-icons-svelte/lib/Download.svelte'
   import LogoGithub from 'carbon-icons-svelte/lib/LogoGithub.svelte'
+  import IbmWatsonLanguageTranslator from 'carbon-icons-svelte/lib/IbmWatsonLanguageTranslator.svelte'
   import {
     Theme, Header, HeaderUtilities, HeaderGlobalAction, HeaderActionLink,
     HeaderNav, HeaderNavItem, TooltipDefinition, SkipToContent,
-    SideNav, SideNavItems, SideNavLink
+    SideNav, SideNavItems, SideNavLink, OverflowMenu, OverflowMenuItem
   } from 'carbon-components-svelte'
 
+  import { t, locale, locales } from '$lib/translations'
+  import { goto } from '$app/navigation'
+  $: ({ route } = $page.data)
+  
+  function changeLocale (locale) {
+    window.location = `/${locale}${route}`
+  }
+
   let theme = 'g90'
   function changeTheme () {
     theme = theme === 'white' ? 'g90' : 'white'
   }
-  
+
   let isSideNavOpen = false
+  const localeCode = locale.get()
   const routes = [
-    [base + '/', 'Home page'],
-    [base + '/settings', 'Settings'],
-    [base + '/help', 'Help'],
-    [base + '/classic/index.html', 'Classic', true]
+    [base + '/' + localeCode + '/', $t('header.home-page')],
+    [base + '/' + localeCode + '/settings', $t('header.settings')],
+    [base + '/' + localeCode + '/help', $t('header.help')],
+    [base + '/classic/index.html', $t('header.classic'), true]
   ]
 </script>
 
 <Theme bind:theme persist persistKey="mkvextract-theme" />
 
-<Header platformName="MKV Extract" bind:isSideNavOpen expandedByDefault={false}>
+<Header platformName={$t('main.name')} bind:isSideNavOpen expandedByDefault={false}>
   <svelte:fragment slot="skip-to-content">
     <SkipToContent />
   </svelte:fragment>
@@ -43,14 +53,29 @@
   </HeaderNav>
 
   <HeaderUtilities>
-    <TooltipDefinition tooltipText="Change color scheme" align="end">
-      <HeaderGlobalAction aria-label="Change color scheme" icon={Light} on:click={changeTheme} />
+    <OverflowMenu style="width: auto" flipped class="bx--header__action">
+      <HeaderGlobalAction
+        slot="menu"
+        aria-label={$t('header.locale')}
+        iconDescription={$t('header.locale')}
+        icon={IbmWatsonLanguageTranslator}
+      />
+      {#each $locales as lc}
+        <OverflowMenuItem
+          text={$t('locales.' + lc)}
+          on:click={() => changeLocale(lc)}
+          disabled={lc === $locale}
+        />
+      {/each}
+    </OverflowMenu>
+    <TooltipDefinition tooltipText={$t('header.color-scheme')} align="end">
+      <HeaderGlobalAction aria-label={$t('header.color-scheme')} icon={Light} on:click={changeTheme} isActive />
     </TooltipDefinition>
-    <TooltipDefinition tooltipText="Check the original mkvextract" align="end">
-      <HeaderActionLink aria-label="Download page" icon={Download} href="https://mkvtoolnix.download/" />
+    <TooltipDefinition tooltipText={$t('header.download')} align="end">
+      <HeaderActionLink aria-label={$t('header.download')} icon={Download} href="https://mkvtoolnix.download/" />
     </TooltipDefinition>
-    <TooltipDefinition tooltipText="Check project on GitHub" align="end">
-      <HeaderActionLink aria-label="GitHub page" icon={LogoGithub} href="https://github.com/qgustavor/mkv-extract/" />
+    <TooltipDefinition tooltipText={$t('header.github')} align="end">
+      <HeaderActionLink aria-label={$t('header.github')} icon={LogoGithub} href="https://github.com/qgustavor/mkv-extract/" />
     </TooltipDefinition>
   </HeaderUtilities>
 </Header>

src/hooks.server.js

@@ -0,0 +1,41 @@
+import { defaultLocale, locales, setLocale, setRoute } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export const handle = async ({ event, resolve }) => {
+  const { url, request } = event;
+  const { pathname } = url;
+
+  // Get defined locales
+  const supportedLocales = locales.get().map((l) => l.toLowerCase());
+
+  // Try to get locale from `pathname`.
+  let locale = supportedLocales.find((l) => l === `${pathname.match(/[^/]+?(?=\/|$)/)}`.toLowerCase());
+
+  // If route locale is not supported
+  if (!locale) {
+    // Get user preferred locale
+    locale = `${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=-|_|,|;)/)}`.toLowerCase();
+
+    // Set default locale if user preferred locale does not match
+    if (!supportedLocales.includes(locale)) locale = defaultLocale;
+
+    // 301 redirect
+    return new Response(undefined, { headers: { 'location': `/${locale}${pathname}` }, status: 301 });
+  }
+
+  // Add html `lang` attribute
+  return resolve({ ...event, locals: { lang: locale } }, {
+    transformPageChunk: ({ html }) => html.replace(/<html.*>/, `<html lang="${locale}">`),
+  });
+};
+
+/** @type {import('@sveltejs/kit').HandleServerError} */
+export const handleError = async ({ event }) => {
+  const { locals } = event;
+  const { lang } = locals;
+
+  await setLocale(lang);
+  await setRoute('error');
+
+  return locals;
+};