Print style fixes

Author: webstackdev

_TODO.md

@@ -1,12 +1,6 @@
 <!-- markdownlint-disable-file -->
 # TODO
 
-## E2E
-
-View Lighthouse report:
-
-xdg-open ".cache/playwright/lighthouse-reports/run Lighthouse audit on homepage-desktop-1774621624366.html"
-
 ## Print
 
 1. Add a QR code at the bottom of printed pages so it's easier for someone to navigate to from a printed page. We have a QrCode component.
@@ -25,33 +19,14 @@ A professional print header typically includes only these three elements:
 
 - Brand Identity: A high-contrast version of your logo or the site name in plain text for brand recognition.
 - Document Title: The main title of the page (usually the <h1>), ensuring the reader knows exactly what the document is.
-- Source URL: A small, plain-text URL so the reader can find the live version later.
-
-__Elements to Remove__
-
-Hide any interactive or screen-specific components using display: none; in your @media print block:
-
-- Navigation Menus: All top-level and dropdown links.
-- Search Icons/Bars: These are non-functional on paper.
-- Breadcrumbs: While useful on-screen for site hierarchy, they often look like cluttered, disconnected text on paper. Most designers remove them to keep the focus on the primary content.
-- Social Media & CTA Buttons & Download CTA: "Sign In" or "Follow Us" buttons are irrelevant in print.
 
 __Expand External Links For Print__
 
 We can't (yet) directly interface with a printed page to explore links, so link URLs should be visible on the printed version of the Web page. To keep the page relatively clean, I prefer to expand only outbound links in articles, and suppress internal ones. If you've used relative URLs on your website for local links, you can easily do this through an attribute selector and `:after` pseudo classes, thus preventing internal links and links around images from being printed:
 
-```css
-@media print {
-   article a {
-      font-weight: bolder;
-      text-decoration: none;
-   }
-
-   article a[href^=http]:after {
-      content:" <" attr(href) "> ";
-   }
-}
-```
+- Break Lists across pages, the separators between columns are broken too
+- Break code blocks across pages
+- Callouts are breaking across pages, they shouldn't
 
 ## PDF File Generation
 

src/components/CallToAction/Contact/index.astro

@@ -50,7 +50,7 @@ const descriptionId = `${idBase}-description`
 ---
 
 <section
-  class="cta mx-auto max-w-4xl rounded-lg overflow-hidden relative"
+  class="cta mx-auto max-w-4xl rounded-lg overflow-hidden relative print:hidden"
   aria-labelledby={titleId}
   aria-describedby={descriptionId}
 >

src/components/CallToAction/Download/index.astro

@@ -58,7 +58,7 @@ const downloadUrl = `/downloads/${normalizedResource}`
 ---
 
 <section
-  class="bg-linear-to-br from-primary/5 to-accent/5 border border-primary/20 rounded-2xl p-6 md:p-8 mb-6"
+  class="bg-linear-to-br from-primary/5 to-accent/5 border border-primary/20 rounded-2xl p-6 md:p-8 mb-6 print:hidden"
   aria-labelledby={titleId}
   aria-describedby={descriptionId}
 >

src/components/CallToAction/Newsletter/index.astro

@@ -31,7 +31,7 @@ const {
 } = Astro.props
 ---
 
-<newsletter-form class="cta block">
+<newsletter-form class="cta block print:hidden">
   {variant === 'article' && (
     <ArticleNewsletter
       title={title}

src/components/Carousel/index.astro

@@ -91,7 +91,7 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
     <carousel-slider
       data-carousel
       data-carousel-navigation-mode={navigationMode}
-      class="block"
+      class="block print:hidden"
     >
       <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {title && (

src/components/Content/Layout/index.astro

@@ -57,7 +57,7 @@ const isDeepDive = section === 'Deep Dive Articles'
   {
     article.data.cover && (
       <div
-        class="relative w-full overflow-hidden mb-8"
+        class="print-hero-image relative mb-8 w-full overflow-hidden"
         style="aspect-ratio: 1564 / 670;"
         slot="hero-image"
       >
@@ -79,7 +79,7 @@ const isDeepDive = section === 'Deep Dive Articles'
   }
 
   {/** SLOT: after-content */}
-  <section slot="after-content">
+  <section class="print:hidden" slot="after-content">
     <WebMentions url={`https://www.webstackbuilders.com${path}`} />
     {!isDeepDive && (
       <div class="flex flex-col gap-6">
@@ -94,7 +94,7 @@ const isDeepDive = section === 'Deep Dive Articles'
 
   {/** SLOT: related-content */}
   <section
-    class="border-t border-trim pt-8 mt-12"
+    class="border-t border-trim pt-8 mt-12 print:hidden"
     aria-labelledby="article-related-title"
     slot="related-content"
   >

src/components/QrCode/__tests__/index.spec.ts

@@ -26,14 +26,16 @@ describe('QrCode (Astro)', () => {
     const renderedHtml = await renderQrCode()
     const document = new JSDOM(renderedHtml).window.document
 
-    const root = document.querySelector<HTMLElement>('[data-qr-code]')
+    const root = document.querySelector<HTMLElement>('figure[data-qr-code]')
     const svg = root?.querySelector('svg')
+    const caption = root?.querySelector('figcaption')
 
     expect(root).toBeTruthy()
     expect(root?.className).toContain('hidden')
     expect(root?.getAttribute('aria-label')).toContain('https://example.com/articles/demo')
     expect(svg).toBeTruthy()
     expect(svg?.querySelector('#logo-group')).toBeTruthy()
+    expect(caption?.textContent).toContain('https://example.com/articles/demo')
   })
 
   test('omits the hidden class when isHidden is false and respects a custom data prop', async () => {
@@ -43,10 +45,12 @@ describe('QrCode (Astro)', () => {
     })
     const document = new JSDOM(renderedHtml).window.document
 
-    const root = document.querySelector<HTMLElement>('[data-qr-code]')
+    const root = document.querySelector<HTMLElement>('figure[data-qr-code]')
+    const caption = root?.querySelector('figcaption')
 
     expect(root).toBeTruthy()
     expect(root?.className).not.toContain('hidden')
     expect(root?.getAttribute('aria-label')).toContain('https://example.com/contact')
+    expect(caption?.textContent).toContain('https://example.com/contact')
   })
 })

src/components/QrCode/index.astro

@@ -11,14 +11,18 @@ const qrData = data ?? new URL(Astro.url.pathname, Astro.site ?? Astro.url).toSt
 const qrSvg = await renderQrCodeSvg({ data: qrData })
 ---
 
-<div
+
+<figure
 	class:list={[
-		'not-prose mx-auto my-8 w-fit print:block print:break-inside-avoid',
+		'not-prose mx-auto my-8 flex w-fit flex-col items-center print:block print:break-inside-avoid',
 		isHidden && 'hidden',
 	]}
 	data-qr-code
 	role="img"
 	aria-label={`QR code for ${qrData}`}
 >
 	<Fragment set:html={qrSvg} />
-</div>
+	<figcaption class="mt-3 max-w-60 break-all text-center text-sm text-content">
+		{qrData}
+	</figcaption>
+</figure>

src/components/Social/Shares/index.astro

@@ -59,7 +59,7 @@ const shareHeadingId = `${iconBankId}-heading`
 </div>
 
 <section
-  class="rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6"
+  class="rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6 print:hidden"
 >
   <div class="h-full w-full sm:border-r sm:border-trim sm:w-auto sm:shrink-0 sm:pr-12">
     <h2

src/components/WebMentions/index.astro

@@ -34,6 +34,7 @@ const iconBankId = `webmentions-icon-bank-${Math.random().toString(36).slice(2)}
 </div>
 
 <web-mentions
+  class="print:hidden"
   url={url}
   show-facepile={showFacepile}
   facepile-limit={facepileLimit}