Auto locale

src/lib/translations.ts

@@ -1,5 +1,7 @@
 import i18n from 'sveltekit-i18n';
 
+export const defaultLocale = 'en';
+
 const config = ({
   loaders: [
     {
@@ -19,4 +21,14 @@ const config = ({
   ],
 });
 
-export const { t, locale, locales, loading, loadTranslations } = new i18n(config);
+export const {
+  t,
+  locale,
+  locales,
+  loading,
+  loadTranslations,
+  setLocale,
+  translations,
+  addTranslations,
+  setRoute
+} = new i18n(config);

src/routes/+layout.server.ts

@@ -0,0 +1,18 @@
+import type {LayoutServerLoad} from './$types';
+import {defaultLocale, locales} from "$lib/translations";
+
+export const prerender = true;
+
+export const load: LayoutServerLoad = async ({ request }) => {
+  const supportedLocales = locales.get().map((l) => l.toLowerCase());
+
+  let locale = `${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=[-_,;])/)}`.toLowerCase();
+
+  if (!supportedLocales.includes(locale)) {
+    locale = defaultLocale;
+  }
+
+  return {
+    i18n: { locale },
+  };
+}

src/routes/+layout.ts

@@ -1,13 +1,11 @@
-import type {LayoutLoad} from './$types';
+import {loadTranslations} from '$lib/translations';
-import {loadTranslations} from "$lib/translations";
+import type {LayoutLoad} from "./$types";
 
-export const prerender = true;
+export const load: LayoutLoad = async ({ url, data }) => {
-
-export const load: LayoutLoad = async ({ url }) => {
   const { pathname } = url;
+  const { locale } = data.i18n
 
-  const initLocale = 'ru';
+  await loadTranslations(locale, pathname);
 
-  await loadTranslations(initLocale, pathname);
   return {};
-}
+};

src/routes/About.svelte

@@ -10,11 +10,11 @@
   </h2>
 
   <div class="grid md:grid-cols-[1fr_auto] gap-6">
-    <div>
+    <div class="max-w-2xl">
       {@html $t('about.text')}
     </div>
 
-    <div class="grid gap-x-2 grid-cols-[auto_1fr] items-center text-slate-400">
+    <div class="grid gap-x-2 grid-cols-[auto_1fr] h-fit items-center text-slate-400">
       <div class="flex gap-2 items-center">
         <MaterialSymbolsWork></MaterialSymbolsWork>
         {$t('about.career')}