diff --git a/src/app.css b/src/app.css index 0b2e5e8..5452a41 100644 --- a/src/app.css +++ b/src/app.css @@ -506,3 +506,42 @@ footer a:hover, border-left: 1px solid var(--color-stein-200); } } + +/* ── Print rules ──────────────────────────────────────────────────────────── + Goal: print only the article. `print:hidden` on chrome (header/footer/ + banner/breadcrumbs/comments) handles structural removal. The rules below + set page margins, force black-on-white, expand links, and keep images + inside the page break. */ +@media print { + @page { + margin: 1.5cm; + } + html, + body { + background: white \!important; + color: black \!important; + font-size: 11pt; + } + /* Show the URL after each anchor inside the article so printed pages stay + useful when the screen-only links are gone. */ + article a[href]:not([href^="#"])::after { + content: " (" attr(href) ")"; + font-size: 0.85em; + color: #555; + word-break: break-all; + } + /* Don't break inside images, keep figures together with their captions. */ + img, + figure { + break-inside: avoid; + max-width: 100% \!important; + height: auto \!important; + } + /* Keep headings with the next paragraph. */ + h1, + h2, + h3, + h4 { + break-after: avoid; + } +} diff --git a/src/lib/comment-counts.ts b/src/lib/comment-counts.ts new file mode 100644 index 0000000..963edd8 --- /dev/null +++ b/src/lib/comment-counts.ts @@ -0,0 +1,49 @@ +/** + * Helper for fetching comment counts in bulk and keying them by post slug. + * Used by overview components (BlogOverview, PostOverviewBlock) so each + * render fires a single `/api/comments/counts?ids=…` request instead of + * one request per card. + */ + +import { env } from "$env/dynamic/public"; +import type { PostEntry } from "$lib/cms"; + +export type CommentCountsMap = Record; + +/** Strip the leading slash so it matches `params.slug` (= comment page_id). */ +export function postSlugForComments(p: PostEntry): string { + const raw = (p as { slug?: string; _slug?: string }).slug ?? p._slug ?? ""; + return raw.replace(/^\//, "").trim(); +} + +/** + * Bulk-fetch approved comment counts for many posts. Returns a map + * `{ slug: count }` (slug as in `postSlugForComments`). Missing or failed + * responses resolve to an empty object — callers can then `?? null` per slug. + */ +export async function fetchCommentCounts( + slugs: string[], + options?: { environment?: string; signal?: AbortSignal }, +): Promise { + const cleaned = slugs.filter(Boolean); + if (cleaned.length === 0) return {}; + const cmsBase = ( + env.PUBLIC_CMS_URL || + import.meta.env.PUBLIC_CMS_URL || + "" + ).replace(/\/$/, ""); + if (!cmsBase) return {}; + const url = new URL(`${cmsBase}/api/comments/counts`); + url.searchParams.set("ids", cleaned.join(",")); + if (options?.environment) { + url.searchParams.set("_environment", options.environment); + } + try { + const r = await fetch(url.toString(), { signal: options?.signal }); + if (!r.ok) return {}; + const d = (await r.json()) as { counts?: CommentCountsMap }; + return d?.counts ?? {}; + } catch { + return {}; + } +} diff --git a/src/lib/components/BlogOverview.svelte b/src/lib/components/BlogOverview.svelte index 42f6fef..579bdcc 100644 --- a/src/lib/components/BlogOverview.svelte +++ b/src/lib/components/BlogOverview.svelte @@ -8,7 +8,7 @@ import { postHref } from "$lib/blog-utils"; import { t as tStatic, T } from "$lib/translations"; import type { Translations } from "$lib/translations"; - import { env } from "$env/dynamic/public"; + import { fetchCommentCounts, postSlugForComments, type CommentCountsMap } from "$lib/comment-counts"; interface TagEntry { _slug?: string; @@ -115,43 +115,15 @@ const totalCount = $derived(totalPosts); - // Bulk-fetch comment counts for the visible posts. Uses a single - // `/api/comments/counts` request keyed on the post slug. Failures keep the - // map empty so cards just don't render the badge. - let commentCounts = $state>({}); - - function postSlug(p: PostEntry): string { - const raw = (p as { slug?: string; _slug?: string }).slug ?? p._slug ?? ""; - return raw.replace(/^\//, "").trim(); - } - + // Bulk-fetch comment counts for the visible posts (single request per render). + let commentCounts = $state({}); $effect(() => { - const slugs = posts.map(postSlug).filter(Boolean); - if (slugs.length === 0) { - commentCounts = {}; - return; - } - const cmsBase = ( - env.PUBLIC_CMS_URL || - import.meta.env.PUBLIC_CMS_URL || - "" - ).replace(/\/$/, ""); - if (!cmsBase) return; - const url = new URL(`${cmsBase}/api/comments/counts`); - url.searchParams.set("ids", slugs.join(",")); - let cancelled = false; - fetch(url.toString()) - .then((r) => (r.ok ? r.json() : { counts: {} })) - .then((d) => { - if (cancelled) return; - commentCounts = (d?.counts ?? {}) as Record; - }) - .catch(() => { - if (!cancelled) commentCounts = {}; + const ctrl = new AbortController(); + fetchCommentCounts(posts.map(postSlugForComments), { signal: ctrl.signal }) + .then((map) => { + commentCounts = map; }); - return () => { - cancelled = true; - }; + return () => ctrl.abort(); }); @@ -298,7 +270,7 @@ post={post} href={postHref(post)} tagBase={`${basePath}/tag`} - commentCount={commentCounts[postSlug(post)] ?? null} + commentCount={commentCounts[postSlugForComments(post)] ?? null} /> {/each} diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte index 9a43477..f4a734e 100644 --- a/src/lib/components/PostCard.svelte +++ b/src/lib/components/PostCard.svelte @@ -97,7 +97,7 @@ {/if} - {#if commentCount != null && commentCount > 0} + {#if commentCount != null}
0 || textHtml.length > 0); + + // Bulk-fetch comment counts for the visible posts (single request per render). + let commentCounts = $state({}); + $effect(() => { + const ctrl = new AbortController(); + fetchCommentCounts(posts.map(postSlugForComments), { signal: ctrl.signal }) + .then((map) => { + commentCounts = map; + }); + return () => ctrl.abort(); + }); {#if hasContent} @@ -42,13 +54,23 @@ {#if design === "list" && posts.length > 0}
{#each posts as post} - + {/each}
{:else if design === "cards" && posts.length > 0}
{#each posts as post} - + {/each}
{/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a7303eb..73508c6 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -269,35 +269,43 @@
{/if} -
- +
+
+ +
{#if topBannerData} - +
+ +
{/if} -
-
+
+
{#if breadcrumbItems.length > 0} - +
+ +
{/if} {@render children()}
-
+
+
+
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte index 40d11ed..bc06ee7 100644 --- a/src/routes/post/[slug]/+page.svelte +++ b/src/routes/post/[slug]/+page.svelte @@ -165,14 +165,16 @@ {/if} {#if data.commentPageId} - -
- -
- +
+ +
+ +
+ +
{/if}