From aa76aef37fd927141dbc2fa16b9ddd603683f468 Mon Sep 17 00:00:00 2001 From: xrendan Date: Tue, 28 Jul 2026 15:15:00 -0600 Subject: [PATCH 01/17] Style image captions in post bodies and clean up memo print output - An directly following an in .prose-bc content now renders as a caption: button typography (type-button), charcoal, tightly attached under the image. - Print: hide the memo hero, Signpost TOC bar, and draft preview banner; they duplicated the print-only header or are screen-only chrome. - Extract the print-only header into MemoPrintHeader and add it to the Toronto memo page, with a Toronto-lockup brand variant matching the navbar. --- src/app/globals.css | 13 +++ src/app/memos/[slug]/MemoPrintHeader.tsx | 84 +++++++++++++++++++ src/app/memos/[slug]/page.tsx | 60 ++++--------- src/app/toronto/memos/[slug]/page.tsx | 23 ++++- src/components/auth/DraftPreviewBanner.tsx | 4 +- .../custom/signpost/desktop-nav.tsx | 2 +- src/components/custom/signpost/mobile-bar.tsx | 2 +- 7 files changed, 136 insertions(+), 52 deletions(-) create mode 100644 src/app/memos/[slug]/MemoPrintHeader.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 3d4d95f9..6c2b934f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -421,6 +421,19 @@ body { margin: 1.4em 0; } +/* Image captions: an directly after an */ +.prose-bc img:has(+ em) { + margin-bottom: 0; +} + +.prose-bc img + em { + @apply type-button; + display: block; + font-style: normal; + color: var(--color-charcoal-500); + margin-top: 0.5em; +} + /* ─── Supporters list (memo detail) ─── */ .memo-supporters p { diff --git a/src/app/memos/[slug]/MemoPrintHeader.tsx b/src/app/memos/[slug]/MemoPrintHeader.tsx new file mode 100644 index 00000000..3a55573c --- /dev/null +++ b/src/app/memos/[slug]/MemoPrintHeader.tsx @@ -0,0 +1,84 @@ +interface MemoPrintHeaderProps { + title: string; + authorName: string; + authorTitle: string | null; + authorImage: string | null; + date: string; + url: string; + brand?: "canada" | "toronto"; +} + +/* Print-only header: Build Canada branding + memo meta. Hidden on screen + via the .print-only rules in globals.css. */ +export function MemoPrintHeader({ + title, + authorName, + authorTitle, + authorImage, + date, + url, + brand = "canada", +}: MemoPrintHeaderProps) { + return ( +
+
+ {brand === "toronto" ? ( + /* The nav's Toronto lockup: white wordmark + "Toronto" in the + accent-blue box (see Navbar.tsx). Forced color-adjust so the + box prints. */ +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + Build Canada +
+ ) : ( +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + Build Canada + Build Canada +
+ )} + + {url.replace(/^https?:\/\//, "")} + +
+

{title}

+
+ {authorImage && ( + /* eslint-disable-next-line @next/next/no-img-element */ + {authorName} + )} +
+

{authorName}

+ {authorTitle && ( +

+ {authorTitle} +

+ )} +

{date}

+
+
+
+ ); +} diff --git a/src/app/memos/[slug]/page.tsx b/src/app/memos/[slug]/page.tsx index ca4695b1..e7f4b2db 100644 --- a/src/app/memos/[slug]/page.tsx +++ b/src/app/memos/[slug]/page.tsx @@ -6,6 +6,7 @@ import { TwitterEmbed, MemoSubscribe, RelatedMemos } from "./MemoClientParts"; import { MemoEngagement } from "./MemoEngagement"; import { ShareSection } from "@/components/share"; import { MemoHero } from "./MemoHero"; +import { MemoPrintHeader } from "./MemoPrintHeader"; import { Signpost } from "@/components/custom/signpost"; import { buildGraph } from "@/lib/schemas/graph"; import { generateArticleSchema } from "@/lib/schemas/generators/article"; @@ -170,56 +171,27 @@ export default async function MemoDetailPage({ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} /> - {/* Print-only header: Build Canada branding + memo meta */} -
-
-
- {/* eslint-disable-next-line @next/next/no-img-element */} - Build Canada - Build Canada -
- - {fullUrl.replace(/^https?:\/\//, "")} - -
-

{memo.title}

-
- {authorImage && ( - /* eslint-disable-next-line @next/next/no-img-element */ - {memo.author.name} - )} -
-

{memo.author.name}

- {memo.author.title && ( -

- {memo.author.title} -

- )} -

{date}

-
-
-
- - + {/* Hidden in print — the print-only header above already carries the + title, author, and date. */} +
+ +
+
- + {/* Hidden in print — the print-only header above already carries the + title, author, and date. */} +
+ +
+
+
DRAFT — not yet published
@@ -39,7 +39,7 @@ export function DraftPreviewBanner({ state }: DraftPreviewBannerProps) { } return ( -
+
No draft found for this slug.
diff --git a/src/components/custom/signpost/desktop-nav.tsx b/src/components/custom/signpost/desktop-nav.tsx index e2e860bc..429ad16f 100644 --- a/src/components/custom/signpost/desktop-nav.tsx +++ b/src/components/custom/signpost/desktop-nav.tsx @@ -45,7 +45,7 @@ export function DesktopNav({ ); return ( -