✨ feat: enhance SSR support with language extraction, dynamic page titles, and updated styles; adjust color theme

frontend/src/App.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { untrack } from "svelte"
     import { metricCall } from "./config"
     import { location, mobileMenuOpen, currentContentEntry } from "./lib/store"
     import { _, locale } from "./lib/i18n/index"
@@ -21,23 +22,25 @@
         stripLanguageFromPath,
     } from "./lib/i18n"
 
-    export let url = ""
+    let { url = "" }: { url?: string } = $props()
 
     initScrollRestoration()
 
-    if (url) {
-        // ssr
-        let l = url.split("?")
-        $location = {
-            path: l[0],
-            search: l.length > 1 ? l[1] : "",
-            hash: "",
-            push: false,
-            pop: false,
+    // SSR: capture initial URL once (not reactive — url is only set server-side)
+    untrack(() => {
+        if (url) {
+            let l = url.split("?")
+            $location = {
+                path: l[0],
+                search: l.length > 1 ? l[1] : "",
+                hash: "",
+                push: false,
+                pop: false,
+            }
+            const lang = extractLanguageFromPath(l[0]) || DEFAULT_LANGUAGE
+            $locale = lang
         }
-        const lang = extractLanguageFromPath(l[0]) || DEFAULT_LANGUAGE
-        $locale = lang
-    }
+    })
 
     // Redirect root "/" to default language
     $effect(() => {
@@ -137,8 +140,25 @@
         const routePath = stripLanguageFromPath($location.path)
         loadContent(lang, routePath || "/")
     })
+
+    // Dynamic page title
+    const SITE_NAME = "Tibi Starter"
+    let pageTitle = $derived(
+        contentEntry?.meta?.title
+            ? `${contentEntry.meta.title} — ${SITE_NAME}`
+            : contentEntry?.name
+              ? `${contentEntry.name} — ${SITE_NAME}`
+              : SITE_NAME
+    )
 </script>
 
+<svelte:head>
+    <title>{pageTitle}</title>
+    {#if contentEntry?.meta?.description}
+        <meta name="description" content={contentEntry.meta.description} />
+    {/if}
+</svelte:head>
+
 <LoadingBar />
 <ToastContainer />