diff --git a/README.md b/README.md index 42c2b21..2956c21 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ make docker-down # "make help" zeigt alle Kommandos ``` -| UI | URL | +| UI | URL | | --- | --- | | Website | | | Tibi Admin | | diff --git a/api/hooks/ssr/get_read.js b/api/hooks/ssr/get_read.js index b2ebdb7..e521293 100644 --- a/api/hooks/ssr/get_read.js +++ b/api/hooks/ssr/get_read.js @@ -164,6 +164,12 @@ const { ssrRequest } = require("../lib/ssr-server") } var tpl = context.fs.readFile("templates/spa.html") + + // Extract language from URL for (before other replacements) + var langMatch = url.match(/^\/(de|en)(\/|$)/) + var pageLang = langMatch ? langMatch[1] : "de" + tpl = tpl.replace(//, '') + tpl = tpl.replace("", head) tpl = tpl.replace("", html) tpl = tpl.replace("", error ? "" : "") diff --git a/api/templates/spa.html b/api/templates/spa.html index d5c0904..84a515b 120000 --- a/api/templates/spa.html +++ b/api/templates/spa.html @@ -1 +1 @@ -frontend/spa.html \ No newline at end of file +../../frontend/spa.html \ No newline at end of file diff --git a/frontend/spa.html b/frontend/spa.html index e422b23..c82819f 100644 --- a/frontend/spa.html +++ b/frontend/spa.html @@ -4,7 +4,6 @@ - __PROJECT_TITLE__ diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index da7f4ce..9e65421 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,4 +1,5 @@ + + {pageTitle} + {#if contentEntry?.meta?.description} + + {/if} + + diff --git a/frontend/src/blocks/HeroBlock.svelte b/frontend/src/blocks/HeroBlock.svelte index 864ea49..79556f6 100644 --- a/frontend/src/blocks/HeroBlock.svelte +++ b/frontend/src/blocks/HeroBlock.svelte @@ -65,9 +65,10 @@ -
- - +
+ +
diff --git a/frontend/src/css/style.css b/frontend/src/css/style.css index 5c349ed..75ff5e0 100644 --- a/frontend/src/css/style.css +++ b/frontend/src/css/style.css @@ -20,17 +20,17 @@ /* ── Custom theme tokens ─────────────────────────────────────────── */ @theme { - --color-brand-50: #f0f5ff; - --color-brand-100: #e0eaff; - --color-brand-200: #c7d7fe; - --color-brand-300: #a4bcfd; - --color-brand-400: #8098f9; - --color-brand-500: #6172f3; - --color-brand-600: #444ce7; - --color-brand-700: #3538cd; - --color-brand-800: #2d31a6; - --color-brand-900: #2d3282; - --color-brand-950: #1f235b; + --color-brand-50: #fef2f3; + --color-brand-100: #fee2e5; + --color-brand-200: #fecacd; + --color-brand-300: #fda4ab; + --color-brand-400: #fb6e7c; + --color-brand-500: #f14152; + --color-brand-600: #ce2237; + --color-brand-700: #ac1526; + --color-brand-800: #8f1523; + --color-brand-900: #7a1723; + --color-brand-950: #43070f; --color-accent-400: #f79009; --color-accent-500: #f59e0b; diff --git a/frontend/src/ssr.ts b/frontend/src/ssr.ts index bcb227a..edf12d1 100644 --- a/frontend/src/ssr.ts +++ b/frontend/src/ssr.ts @@ -1,5 +1,6 @@ -import { addMessages, init } from "svelte-i18n" -import { DEFAULT_LANGUAGE } from "./lib/i18n" +import { render } from "svelte/server" +import { addMessages, init, locale } from "svelte-i18n" +import { DEFAULT_LANGUAGE, extractLanguageFromPath } from "./lib/i18n" import deLocale from "./lib/i18n/locales/de.json" import enLocale from "./lib/i18n/locales/en.json" import App from "./App.svelte" @@ -8,9 +9,30 @@ import App from "./App.svelte" addMessages("de", deLocale) addMessages("en", enLocale) -init({ - fallbackLocale: DEFAULT_LANGUAGE, - initialLocale: DEFAULT_LANGUAGE, -}) +/** + * SSR render wrapper for Svelte 5. + * + * tibi-server calls `app.default.render({ url })`. + * Svelte 5 no longer provides a `.render()` method on components — + * instead `render()` must be imported from `svelte/server`. + * + * This wrapper keeps the hook-side API compatible while delegating + * to the Svelte 5 render function internally. + */ +export default { + render({ url }: { url: string }) { + const lang = extractLanguageFromPath(url) || DEFAULT_LANGUAGE -export default App + init({ + fallbackLocale: DEFAULT_LANGUAGE, + initialLocale: lang, + }) + locale.set(lang) + + const { body, head } = render(App, { + props: { url }, + }) + + return { html: body, head } + }, +}