Use light theme colors in pdf generation

Author: webstackdev

public/downloads/ci-pipeline-caching-docker-layers-dependency-cache.pdf

@@ -104,20 +104,23 @@ const generatePdf = async (browser, slug) => {
     await page.emulateMediaType('print')
 
     // Wait for all images to finish loading
-    await page.evaluate(() =>
-      Promise.all(
-        Array.from(document.images)
+    await page.evaluate(() => {
+      const doc = globalThis.document
+
+      return Promise.all(
+        Array.from(doc.images)
           .filter(img => !img.complete)
           .map(img => new Promise(r => { img.onload = r; img.onerror = r }))
       )
-    )
+    })
 
-    const title = await page.evaluate(() => document.title)
+    const title = await page.title()
 
     // Inject approximate page numbers into the ToC
     await page.evaluate((contentH) => {
-      const toc = document.querySelector('.print-toc')
-      const article = document.querySelector('.print-article')
+      const doc = globalThis.document
+      const toc = doc.querySelector('.print-toc')
+      const article = doc.querySelector('.print-article')
       if (!toc || !article) return
 
       // Cover always occupies 1 page (break-after: page)
@@ -133,7 +136,7 @@ const generatePdf = async (browser, slug) => {
         pageMap.set(h.id, pagesBeforeArticle + Math.floor(Math.max(0, offset) / contentH) + 1)
       }
 
-      for (const span of document.querySelectorAll('.print-toc__page')) {
+      for (const span of doc.querySelectorAll('.print-toc__page')) {
         const href = span.closest('a')?.getAttribute('href')?.replace('#', '')
         if (href && pageMap.has(href)) {
           span.textContent = String(pageMap.get(href))

scripts/generate-pdfs.mjs

@@ -16,18 +16,18 @@ const publishDateLabel = article.data.publishDate.toLocaleDateString(undefined,
 })
 ---
 
-<section class="print-cover">
-  <h1 class="print-cover__title">{article.data.title}</h1>
-  <div class="print-cover__image">
+<section class="flex min-h-[100vh] break-after-page flex-col items-center justify-center text-center">
+  <h1 class="mb-[1cm] text-[28pt] leading-[1.2] font-bold">{article.data.title}</h1>
+  <div class="mb-[1cm] max-w-[80%]">
     <Image
       src={article.data.cover}
       alt={article.data.coverAlt}
       loading="eager"
       variant="full"
     />
   </div>
-  <p class="print-cover__author">By {authorName}</p>
-  <p class="print-cover__date">
+  <p class="mb-[0.3cm] text-[14pt]">By {authorName}</p>
+  <p class="text-[11pt] text-(--color-content-offset)">
     Published on <time datetime={publishDateIso}>{publishDateLabel}</time>
   </p>
 </section>

src/components/Layout/Print/Cover/index.astro

@@ -18,19 +18,19 @@ const tocTree = buildTocTree(headings)
 ---
 
 {tocTree.length > 0 && (
-  <section class="print-toc">
-    <h2 class="print-toc__title">Table of Contents</h2>
+  <section class="print-toc break-after-page py-[1cm]">
+    <h2 class="mb-[1cm] text-[20pt] font-bold">Table of Contents</h2>
     <nav aria-label="Table of contents">
       {(() => {
         const renderNodes = (nodes: TocItem[], depth = 0): unknown =>
           nodes.map(node => (
             <div class:list={[
-              'print-toc__entry',
-              depth > 0 && 'print-toc__entry--nested',
+              'mb-[0.15cm]',
+              depth > 0 && 'pl-[1.5em]',
             ]}>
-              <a href={`#${node.slug}`} class="print-toc__link">
-                <span class="print-toc__text">{node.text}</span>
-                <span class="print-toc__leader" aria-hidden="true"></span>
+              <a href={`#${node.slug}`} class="flex items-baseline text-inherit no-underline">
+                <span class="shrink-0">{node.text}</span>
+                <span class="mx-[0.3em] min-w-[2em] grow border-b border-dotted border-[#999]" aria-hidden="true"></span>
                 <span class="print-toc__page"></span>
               </a>
               {node.children.length > 0 && renderNodes(node.children, depth + 1)}

src/components/Layout/Print/Toc/index.astro

@@ -93,5 +93,5 @@ const publishDate = article.data.publishDate
 </PrintLayout>
 
 <style is:global>
-  @import '@styles/pdf.css';
+  @import './index.css';
 </style>

src/pages/print/[...slug].astro

@@ -28,7 +28,7 @@
 * =============================================================================
 */
 @media print {
-  html[data-theme="light"] {
+  html[data-theme="light"][data-theme] {
     --theme-color-primary: #001A39;
     --theme-color-primary-offset: #003d86;
     --theme-color-primary-inverse: #FFF;