feat: print-friendly layout + comment count on every post overview
- 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:
+39
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user