From 19c29b6fb2e02646b65b209128526bba6acdaf02 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <hi@kopyl.dev>
Date: Sat, 28 Sep 2024 00:18:35 +0300
Subject: [PATCH] Auto locale

---
 src/lib/translations.ts      | 14 +++++++++++++-
 src/routes/+layout.server.ts | 18 ++++++++++++++++++
 src/routes/+layout.ts        | 14 ++++++--------
 src/routes/About.svelte      |  4 ++--
 4 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 src/routes/+layout.server.ts

diff --git a/src/lib/translations.ts b/src/lib/translations.ts
index f2216cc..498aef4 100644
--- a/src/lib/translations.ts
+++ b/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);
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..8ca549d
--- /dev/null
+++ b/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 },
+  };
+}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 7c33a8a..cdfd012 100644
--- a/src/routes/+layout.ts
+++ b/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 }) => {
+export const load: LayoutLoad = async ({ url, data }) => {
   const { pathname } = url;
+  const { locale } = data.i18n
 
-  const initLocale = 'ru';
+  await loadTranslations(locale, pathname);
 
-  await loadTranslations(initLocale, pathname);
   return {};
-}
+};
diff --git a/src/routes/About.svelte b/src/routes/About.svelte
index 4ae0e76..50bdea8 100644
--- a/src/routes/About.svelte
+++ b/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')}