{#if !live}
diff --git a/src/lib/components/blocks/WindkarteBlock.svelte b/src/lib/components/blocks/WindkarteBlock.svelte
index 5b9b53a..3340afd 100644
--- a/src/lib/components/blocks/WindkarteBlock.svelte
+++ b/src/lib/components/blocks/WindkarteBlock.svelte
@@ -69,22 +69,17 @@ let areas = $state([]);
.map((a) => (typeof a === "string" ? a : a._slug))
.filter(Boolean);
- if (slugs.length > 0) {
- const results = await Promise.all(
- slugs.map((slug) =>
- fetch(`${CMS_BASE}/api/content/wind_area/${slug}`, {
- signal: AbortSignal.timeout(6_000),
- }).then((r) => (r.ok ? r.json() : null))
- )
- );
- areas = results.filter((r): r is WindArea => r !== null);
- } else {
- const res = await fetch(`${CMS_BASE}/api/content/wind_area?_limit=100`, {
- signal: AbortSignal.timeout(6_000),
- });
- if (res.ok) {
- const data = await res.json();
- areas = data.items ?? [];
+ const res = await fetch(`${CMS_BASE}/api/content/wind_area?_limit=200`, {
+ signal: AbortSignal.timeout(6_000),
+ });
+ if (res.ok) {
+ const data = await res.json();
+ const allAreas: WindArea[] = data.items ?? [];
+ if (slugs.length > 0) {
+ const slugSet = new Set(slugs);
+ areas = allAreas.filter((a) => slugSet.has(a._slug));
+ } else {
+ areas = allAreas;
}
}
} catch {
diff --git a/src/lib/iconify-mdi-subset.generated.json b/src/lib/iconify-mdi-subset.generated.json
index c2a8fee..2e87570 100644
--- a/src/lib/iconify-mdi-subset.generated.json
+++ b/src/lib/iconify-mdi-subset.generated.json
@@ -288,6 +288,9 @@
},
"tag-outline": {
"body": " {
+ const formats: Array<'avif' | 'webp' | 'jpeg'> = ['webp', 'jpeg'];
+ const quality = 60;
+ const [mobile, tablet, desktop] = await Promise.all([
+ buildResponsiveImage(url, {
+ widths: [480, 828, 1080],
+ ar: '1/1',
+ fit: 'cover',
+ quality,
+ focal,
+ formats,
+ lqip: false,
+ }),
+ buildResponsiveImage(url, {
+ widths: [768, 1024, 1536, 2048],
+ ar: '16/9',
+ fit: 'cover',
+ quality,
+ focal,
+ formats,
+ lqip: false,
+ }),
+ buildResponsiveImage(url, {
+ widths: [1024, 1440, 1920],
+ ar: '24/9',
+ fit: 'cover',
+ quality,
+ focal,
+ formats,
+ }),
+ ]);
+ if (!desktop) return null;
+ const sources = [
+ ...(mobile?.sources.map((s) => ({ ...s, media: '(max-width: 639px)' })) ?? []),
+ ...(tablet?.sources.map((s) => ({
+ ...s,
+ media: '(min-width: 640px) and (max-width: 1023px)',
+ })) ?? []),
+ ...desktop.sources.map((s) => ({ ...s, media: '(min-width: 1024px)' })),
+ ];
+ return { ...desktop, sources };
+}
+
/**
* Fire-and-forget Cache-Warmup: alle srcset-Varianten + Fallback parallel anrequesten.
* Nutzt SvelteKit's `event.fetch` für Self-Calls (keine echten HTTP-Roundtrips in Prod-SSR).
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 8048eee..2ec2f29 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -5,6 +5,7 @@ export const trailingSlash = 'always';
import {
batchFetch,
batchData,
+ cached,
getNavigationByKey,
NavigationKeys,
getPageStubs,
@@ -89,7 +90,13 @@ export const load: LayoutServerLoad = async ({ locals, route }) => {
let bootstrapConfig: PageConfigEntry | null = null;
let bootstrapTopBanner: TopBannerEntry | null = null;
try {
- const batch = await batchFetch([
+ // TTL-Cache über den ganzen Batch — lief vorher ungecacht bei jedem
+ // SSR-Request. CSV-Key-Head: Webhook-Purge jeder beteiligten Collection
+ // invalidiert den Eintrag (siehe invalidateCollection in cms.ts).
+ const batch = await cached(
+ 'navigation',
+ 'navigation,footer,page_config,top_banner:layout-bootstrap:de',
+ () => batchFetch([
{
id: 'navHeader',
collection: 'navigation',
@@ -125,7 +132,7 @@ export const load: LayoutServerLoad = async ({ locals, route }) => {
collection: 'top_banner',
slug: 'site-announcement',
},
- ]);
+ ]));
bootstrapNavHeader = batchData(batch.results.navHeader);
bootstrapNavSocial = batchData(batch.results.navSocial);
bootstrapFooter = batchData(batch.results.footer);
@@ -336,14 +343,21 @@ export const load: LayoutServerLoad = async ({ locals, route }) => {
: `${cmsBase}/api/assets/${rawSrc}`;
const isSvg = u.split('?')[0].toLowerCase().endsWith('.svg');
if (isSvg) {
- // SVGs können nicht transformiert werden — direkt verwenden und inline einbetten
+ // SVGs können nicht transformiert werden — direkt verwenden und inline
+ // einbetten. TTL-gecacht: lief vorher als unconditional fetch bei
+ // jedem SSR-Request gegen das CMS.
logoUrl = u;
try {
- const res = await fetch(u);
- if (res.ok) {
- const text = (await res.text()).trim();
- if (text.includes(' {
+ const res = await fetch(u);
+ if (!res.ok) return null;
+ const text = (await res.text()).trim();
+ return text.includes(' {
+ // Ein Preload pro Breakpoint-Variante (media-Attribut), Format: WebP.
+ // AVIF wäre kleiner, aber ein type-Mismatch (Browser ohne AVIF) macht den
+ // Preload wirkungslos — WebP greift überall. Browser laden nur den Preload,
+ // dessen media-Query matcht.
+ const bannerPreloads = $derived.by(() => {
const r = topBannerData?.responsive;
- if (!r) return null;
- const webp = r.sources.find((s) => s.type === 'image/webp');
- const picked = webp ?? r.sources[0];
- if (!picked) return { href: r.fallback, srcset: undefined as string | undefined, type: undefined as string | undefined };
- return { href: r.fallback, srcset: picked.srcset, type: picked.type };
+ if (!r) return [];
+ type Src = { type: string; srcset: string; media?: string };
+ const sources = r.sources as Src[];
+ const byMedia = new Map();
+ for (const s of sources) {
+ const key = s.media ?? '';
+ const existing = byMedia.get(key);
+ if (!existing || (existing.type !== 'image/webp' && s.type === 'image/webp')) {
+ if (s.type === 'image/webp' || !existing) byMedia.set(key, s);
+ }
+ }
+ return [...byMedia.values()].map((s) => ({
+ href: r.fallback,
+ srcset: s.srcset,
+ type: s.type,
+ media: s.media,
+ }));
});
function escapeLdJson(s: string): string {
@@ -204,17 +220,18 @@
{:else}
- {#if bannerPreload}
+ {#each bannerPreloads as p (p.media ?? p.type)}
- {/if}
+ {/each}
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index d48e284..7fbbb49 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -5,7 +5,7 @@ import {
resolveContentImages,
resolveImageUrls,
} from '$lib/rusty-image';
-import { buildResponsiveImage, warmResponsiveImage, type ResponsiveImage } from '$lib/rusty-image.server';
+import { buildBannerResponsive, warmResponsiveImage, type ResponsiveImage } from '$lib/rusty-image.server';
import {
resolvePostOverviewBlocks,
resolveSearchableTextBlocks,
@@ -16,9 +16,6 @@ import { DEFAULT_HOME_PAGE_SLUG, PAGE_RESOLVE, SITE_NAME } from '$lib/constants'
import { sanitizeBlocks } from '$lib/sanitize-blocks.server';
import { logWarn } from '$lib/log.server';
-const BANNER_WIDTHS = [640, 1024, 1536];
-const BANNER_AR = '16/9';
-
function focalToCss(focal: { x: number; y: number } | undefined): string | null {
if (!focal) return null;
return `${(focal.x * 100).toFixed(2)}% ${(focal.y * 100).toFixed(2)}%`;
@@ -82,13 +79,7 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
const primary = extractCmsImageField(bannerImages[0]);
if (primary?.url) {
focalCss = focalToCss(primary.focal);
- responsive = await buildResponsiveImage(primary.url, {
- widths: BANNER_WIDTHS,
- fit: 'cover',
- ar: BANNER_AR,
- quality: 72,
- focal: primary.focal,
- });
+ responsive = await buildBannerResponsive(primary.url, primary.focal);
}
resolvedImages = await resolveImageUrls(bannerImages as string[], {
width: 2000,
diff --git a/src/routes/[...slug]/+page.server.ts b/src/routes/[...slug]/+page.server.ts
index d219af4..82ce34f 100644
--- a/src/routes/[...slug]/+page.server.ts
+++ b/src/routes/[...slug]/+page.server.ts
@@ -6,7 +6,7 @@ import {
resolveContentImages,
resolveImageUrls,
} from '$lib/rusty-image';
-import { buildResponsiveImage, warmResponsiveImage, type ResponsiveImage } from '$lib/rusty-image.server';
+import { buildBannerResponsive, warmResponsiveImage, type ResponsiveImage } from '$lib/rusty-image.server';
import {
resolvePostOverviewBlocks,
resolveSearchableTextBlocks,
@@ -20,9 +20,6 @@ import { env } from '$env/dynamic/public';
import { error } from '@sveltejs/kit';
import { sanitizeBlocks } from '$lib/sanitize-blocks.server';
-const BANNER_WIDTHS = [640, 960, 1280, 1600, 1920];
-const BANNER_AR = '16/9';
-
function focalToCss(focal: { x: number; y: number } | undefined): string | null {
if (!focal) return null;
return `${(focal.x * 100).toFixed(2)}% ${(focal.y * 100).toFixed(2)}%`;
@@ -106,13 +103,7 @@ export const load: PageServerLoad = async ({ params, locals, fetch, url, setHead
const primary = extractCmsImageField(imageArr[0]);
if (primary?.url) {
topBannerFocalCss = focalToCss(primary.focal);
- topBannerResponsive = await buildResponsiveImage(primary.url, {
- widths: BANNER_WIDTHS,
- fit: 'cover',
- ar: BANNER_AR,
- quality: 72,
- focal: primary.focal,
- });
+ topBannerResponsive = await buildBannerResponsive(primary.url, primary.focal);
const socialRel = ensureTransformedImage(primary.url, {
...POST_SOCIAL_IMAGE_TRANSFORM,
focalX: primary.focal?.x,
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index 59211a7..fc91175 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -84,7 +84,9 @@
? "https://schema.org/Event"
: "https://schema.org/BlogPosting"}
>
-
+
+
{#if data.post.created}