feat: print-friendly layout + comment count on every post overview
Deploy / verify (push) Successful in 42s
Deploy / deploy (push) Successful in 1m4s

- Hides Header / HeaderOverlay / Footer / TopBanner / Breadcrumbs and
  the comment accordion when printing. Action toolbar already had
  `print:hidden`.
- Adds @media print rules in app.css: 1.5cm page margins, 11pt body,
  forced black-on-white, expand link URLs after anchor text inside
  articles, keep images and headings together at page breaks.
- PostCard now renders the count pill whenever a value is known (incl.
  zero); previously hidden for `count === 0`, so posts whose comments
  are still pending always looked empty.
- Extracts the bulk-fetch helper to `lib/comment-counts.ts`
  (`fetchCommentCounts` + `postSlugForComments`) and uses it from both
  `BlogOverview` and `PostOverviewBlock`. Homepage / any page with a
  post_overview block now shows the badges too — previously only the
  paginated /posts/* routes did.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-04-28 15:29:15 +02:00
parent 6f14e4f150
commit 3d343822e9
7 changed files with 162 additions and 70 deletions
+39
View File
@@ -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;
}
}