Small updates

.env.example

@@ -1,2 +1,2 @@
-ORIGIN=http://localhost:3000
+ORIGIN=https://lowenware.com
 PUBLIC_INQUIRY_API_URL=https://my.lowenware.com/api/inquiry

.github/workflows/deploy.yml

@@ -28,6 +28,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: npm
       - run: npm ci
+      - run: cp .env.example .env
       - run: npm run build
       - name: Upload
         run: rsync -avz ./build/ ${{ secrets.LOWENWARE_SSH_USER }}@${{ secrets.LOWENWARE_SSH_HOST }}:${{ vars.LOWENWARE_ROOT }}/${{ github.ref_name }}/

src/hooks.server.ts

@@ -11,13 +11,6 @@ const redirectLegacy: Handle = async ({ event, resolve }) => {
   return resolve(event);
 };
 
-const rootRedirect: Handle = async ({ event, resolve }) => {
-  if (event.url.pathname === '/') {
-    throw redirect(302, `/${defaultLanguage}/`);
-  }
-  return resolve(event);
-};
-
 const setHtmlLang: Handle = async ({ event, resolve }) => {
   const lang = (event.params.lang as Locale | undefined) ?? defaultLanguage;
   return resolve(event, {
@@ -28,4 +21,4 @@ const setHtmlLang: Handle = async ({ event, resolve }) => {
   });
 };
 
-export const handle = sequence(rootRedirect, redirectLegacy, setHtmlLang);
+export const handle = sequence(redirectLegacy, setHtmlLang);

src/lib/shared/locale-preference.ts

@@ -0,0 +1,23 @@
+import { browser } from '$app/environment';
+import { defaultLanguage, isValidLocale, type Locale } from '$lib/shared/defaults';
+
+export const STORAGE_KEY = 'preferred-locale';
+
+export function savePreferredLocale(lang: Locale): void {
+  if (!browser) return;
+  localStorage.setItem(STORAGE_KEY, lang);
+}
+
+export function resolvePreferredLocale(): Locale {
+  if (browser) {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && isValidLocale(stored)) return stored;
+  }
+
+  if (browser) {
+    const nav = navigator.language.toLowerCase();
+    if (nav.startsWith('cs') || nav.startsWith('sk')) return 'cs';
+  }
+
+  return defaultLanguage;
+}

src/lib/ui/layout/site-header.svelte

@@ -34,10 +34,11 @@
 
   $effect(() => {
     if (!open) return;
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
+    const root = document.documentElement;
+    const previousOverflow = root.style.overflow;
+    root.style.overflow = 'hidden';
     return () => {
-      document.body.style.overflow = previousOverflow;
+      root.style.overflow = previousOverflow;
     };
   });
 </script>
@@ -75,17 +76,17 @@
       </button>
     </div>
   </div>
-
-  {#if open}
-    <div class="mobile-nav-backdrop" onclick={close} aria-hidden="true"></div>
-    <nav id="mobile-menu" aria-label="Mobile" class="mobile-nav">
-      {#each navItems as item (item.href)}
-        <a href={item.href} class="mobile-link" onclick={close}>{$_(item.label)}</a>
-      {/each}
-    </nav>
-  {/if}
 </header>
 
+{#if open}
+  <div class="mobile-nav-backdrop" onclick={close} aria-hidden="true"></div>
+  <nav id="mobile-menu" aria-label="Mobile" class="mobile-nav">
+    {#each navItems as item (item.href)}
+      <a href={item.href} class="mobile-link" onclick={close}>{$_(item.label)}</a>
+    {/each}
+  </nav>
+{/if}
+
 <style>
   .site-header {
     position: sticky;
@@ -121,10 +122,13 @@
   }
 
   .header-side-left {
+    grid-column: 1;
     justify-content: flex-start;
   }
 
   .header-side-right {
+    grid-column: 3;
+    justify-self: end;
     justify-content: flex-end;
     gap: 0.75rem;
   }
@@ -170,6 +174,7 @@
   }
 
   .desktop-nav {
+    grid-column: 2;
     display: none;
     align-items: center;
     justify-content: center;
@@ -250,12 +255,12 @@
     position: fixed;
     top: 0;
     right: 0;
-    bottom: 0;
+    height: 100dvh;
     z-index: 45;
     display: flex;
     flex-direction: column;
     width: min(18rem, 85vw);
-    padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
+    padding: calc(3.75rem + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
     background: var(--color-dark);
     border-left: 1px solid var(--color-surface-border);
     overflow-y: auto;

src/lib/ui/toolkit/lang-toggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { supportedLanguages, type Locale } from '$lib/shared/defaults';
+  import { savePreferredLocale } from '$lib/shared/locale-preference';
   import { switchLocalePath } from '$lib/shared/paths';
 
   type Props = { lang: Locale };
@@ -13,7 +14,7 @@
     {#if code === lang}
       <span class="lang-current" aria-current="true">{code.toUpperCase()}</span>
     {:else}
-      <a class="lang-link" {href}>{code.toUpperCase()}</a>
+      <a class="lang-link" {href} onclick={() => savePreferredLocale(code)}>{code.toUpperCase()}</a>
     {/if}
     {#if code !== supportedLanguages[supportedLanguages.length - 1]}
       <span class="lang-separator" aria-hidden="true">|</span>

src/routes/+layout.ts

@@ -1 +1,2 @@
 export const prerender = true;
+export const trailingSlash = 'always';

src/routes/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { resolvePreferredLocale } from '$lib/shared/locale-preference';
+
+  onMount(() => {
+    goto(`/${resolvePreferredLocale()}/`, { replaceState: true });
+  });
+</script>

src/routes/+page.ts

@@ -0,0 +1 @@
+export const ssr = false;

svelte.config.js

@@ -13,7 +13,7 @@ const config = {
       handleHttpError: 'warn',
       handleMissingId: 'warn',
       handleUnseenRoutes: 'warn',
-      entries: ['/en/', '/cs/', '/sitemap.xml']
+      entries: ['/', '/en/', '/cs/', '/sitemap.xml']
     }
   }
 };