Extract print stylesheets

README.md

@@ -11,18 +11,20 @@ bundle install
 ## Run
 
 ```sh
-bundle exec jekyll serve
+bin/run
 ```
 
-Visit `localhost:4000` to view the site.
+Builds the site and its article PDFs, then serves the result without rebuilding it.
+Visit `localhost:4000` to view the site. Additional arguments are passed to
+`jekyll serve`.
 
 ## Build
 
 ```sh
 bin/build
 ```
 
-Formats HTML and generates a PDF for each blog article with Chrome 131 or newer.
+Builds the site and generates a PDF for each blog article with Chrome 131 or newer.
 Set `BROWSER_PATH` if Chrome or Chromium is installed in a nonstandard location.
 
 ## License

_layouts/base.html

@@ -186,91 +186,12 @@
       }
       pre code { background: transparent; padding: 0; }
       main :is(h2,h3,h4,h5,h6)[id] > a { text-decoration: none; }
-      .print-description,
-      .print-date { display: none; }
       @media (prefers-color-scheme: dark) {
         html { color-scheme: dark; background: #000; }
         body { background: #000; color: #fff; }
         code { background: transparent; }
         thead { border-color: currentColor; }
       }
-
-      @media print {
-        @page {
-          size: A4;
-          margin: 19mm 18mm 22mm;
-          color: #666;
-          font: 7.5pt Arial, sans-serif;
-
-          @bottom-left { content: "Dani Bengl (it/its)"; }
-          @bottom-center { content: {{ current_url | jsonify }}; }
-          @bottom-right { content: counter(page) " / " counter(pages); }
-        }
-
-        html, body { background: #fff; color: #000; }
-        body { font-size: 10.5pt; line-height: 1.45; }
-        .wrapper { max-width: none; margin: 0; padding: 0; }
-
-        .article-title {
-          margin: 0 0 9mm;
-          padding: 0 0 7mm;
-          border-bottom: .4mm solid #1c1c1a;
-        }
-        .article-title h1 {
-          max-width: 15cm;
-          margin: 0;
-          font-size: 28pt;
-          line-height: 1.05;
-          letter-spacing: -.025em;
-        }
-        .print-description {
-          display: block;
-          margin: 4mm 0 0;
-          color: #444;
-          font-size: 12pt;
-        }
-        .print-date {
-          display: block;
-          margin: 3mm 0 0;
-          color: #666;
-          font-family: Arial, sans-serif;
-          font-size: 8pt;
-          letter-spacing: .04em;
-          text-transform: uppercase;
-        }
-
-        header[role="banner"],
-        footer[role="contentinfo"],
-        nav[aria-label="Post navigation"] { display: none; }
-
-        main a { color: #000; text-decoration: underline; }
-        h1, h2, h3, h4, h5, h6,
-        p:has(> strong:only-child) { break-after: avoid; break-inside: avoid; }
-        p:has(> strong:only-child) { margin-bottom: .35em; }
-        pre, table, figure, p:has(> img) { break-inside: avoid; }
-
-        /* Compact lists can use the last few lines without splitting an item. */
-        main > ul,
-        main > ol {
-          margin-block: .35em .8em;
-          line-height: 1.3;
-        }
-
-        img {
-          display: block;
-          max-width: 100%;
-          height: auto;
-          max-height: 150mm;
-          margin-inline: auto;
-          object-fit: contain;
-        }
-        p img { width: auto; }
-        img[src$=".svg"], img.pixelated-image { max-height: none; }
-
-        pre { border: 1px solid #ccc; line-height: 1.3; white-space: pre-wrap; }
-        code { background: transparent; }
-        thead { border-color: #000; }
-      }
     </style>
     {%- if page.math -%}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous">
@@ -337,19 +258,6 @@
       </footer>
     </div>
     <script>document.querySelectorAll('main :is(h2,h3,h4,h5,h6)[id]').forEach(h=>h.innerHTML=`<a href="#${h.id}">${h.innerHTML}</a>`);</script>
-    <script>
-      // A reader cannot expand a <details> on paper; CSS cannot open one either.
-      addEventListener('beforeprint', () =>
-        document.querySelectorAll('details:not([open])').forEach(d => {
-          d.open = true;
-          d.dataset.printOpened = '';
-        }));
-      addEventListener('afterprint', () =>
-        document.querySelectorAll('details[data-print-opened]').forEach(d => {
-          d.open = false;
-          delete d.dataset.printOpened;
-        }));
-    </script>
     <script>document.addEventListener('keydown',e=>{const as=[...document.querySelectorAll('[aria-label="Post navigation"] a')];if(e.key==='ArrowLeft'){const a=as.find(a=>a.textContent.includes('<'));if(a)location.href=a.href;}if(e.key==='ArrowRight'){const a=as.find(a=>a.textContent.includes('>'));if(a)location.href=a.href;}});</script>
   </body>
 </html>

_layouts/post.html

@@ -4,8 +4,8 @@
 
 <header class="article-title">
   <h1>{{ page.title }}</h1>
-  {% if page.description %}<p class="print-description">{{ page.description }}</p>{% endif %}
-  {% if page.date %}<p class="print-date">{{ page.date | date: site.date_format }}</p>{% endif %}
+  {% if page.description %}<p class="print-description" hidden>{{ page.description }}</p>{% endif %}
+  {% if page.date %}<p class="print-date" hidden>{{ page.date | date: site.date_format }}</p>{% endif %}
 </header>
 
 {{ content }}

_plugins/pdf_articles.rb

@@ -12,8 +12,6 @@ class Generator < Jekyll::Generator
     priority :lowest
 
     def generate(site)
-      return unless PdfArticles.enabled?
-
       site.posts.docs.each do |post|
         post.data["pdf_url"] = PdfArticles.url_for(post.url)
       end

bin/pdf.css

@@ -0,0 +1,79 @@
+.print-description,
+.print-date { display: none; }
+
+@media print {
+  @page {
+    size: A4;
+    margin: 19mm 18mm 22mm;
+    color: #666;
+    font: 7.5pt Arial, sans-serif;
+
+    @bottom-left { content: "Dani Bengl (it/its)"; }
+    @bottom-center { content: __CURRENT_URL__; }
+    @bottom-right { content: counter(page) " / " counter(pages); }
+  }
+
+  html, body { background: #fff; color: #000; }
+  body { font-size: 10.5pt; line-height: 1.45; }
+  .wrapper { max-width: none; margin: 0; padding: 0; }
+
+  .article-title {
+    margin: 0 0 9mm;
+    padding: 0 0 7mm;
+    border-bottom: .4mm solid #1c1c1a;
+  }
+  .article-title h1 {
+    max-width: 15cm;
+    margin: 0;
+    font-size: 28pt;
+    line-height: 1.05;
+    letter-spacing: -.025em;
+  }
+  .print-description {
+    display: block;
+    margin: 4mm 0 0;
+    color: #444;
+    font-size: 12pt;
+  }
+  .print-date {
+    display: block;
+    margin: 3mm 0 0;
+    color: #666;
+    font-family: Arial, sans-serif;
+    font-size: 8pt;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+  }
+
+  header[role="banner"],
+  footer[role="contentinfo"],
+  nav[aria-label="Post navigation"] { display: none; }
+
+  main a { color: #000; text-decoration: underline; }
+  h1, h2, h3, h4, h5, h6,
+  p:has(> strong:only-child) { break-after: avoid; break-inside: avoid; }
+  p:has(> strong:only-child) { margin-bottom: .35em; }
+  pre, table, figure, p:has(> img) { break-inside: avoid; }
+
+  /* Compact lists can use the last few lines without splitting an item. */
+  main > ul,
+  main > ol {
+    margin-block: .35em .8em;
+    line-height: 1.3;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    max-height: 150mm;
+    margin-inline: auto;
+    object-fit: contain;
+  }
+  p img { width: auto; }
+  img[src$=".svg"], img.pixelated-image { max-height: none; }
+
+  pre { border: 1px solid #ccc; line-height: 1.3; white-space: pre-wrap; }
+  code { background: transparent; }
+  thead { border-color: #000; }
+}

bin/prepare-pdf.js

@@ -1,7 +1,22 @@
 const siteUrl = arguments[0];
-const done = arguments[1];
+const pdfStyles = arguments[1];
+const done = arguments[2];
 const localOrigin = location.origin;
 
+const publicUrl = new URL(location.pathname, `${siteUrl}/`).href;
+const style = document.createElement("style");
+style.textContent = pdfStyles.replace("__CURRENT_URL__", JSON.stringify(publicUrl));
+document.head.append(style);
+
+document.querySelectorAll(".print-description, .print-date").forEach(element => {
+  element.hidden = false;
+});
+
+// A reader cannot expand a <details> on paper; open each one before rendering.
+document.querySelectorAll("details:not([open])").forEach(details => {
+  details.open = true;
+});
+
 document.querySelectorAll("a[href]").forEach(link => {
   const originalHref = link.getAttribute("href");
   if (!originalHref || originalHref.startsWith("#")) return;

bin/render-pdfs

@@ -12,6 +12,7 @@ abort "No article URLs given" if article_urls.empty?
 
 site_url = ENV.fetch("PDF_SITE_URL", "https://cb341.dev").sub(%r{/+\z}, "")
 prepare_page = File.read(File.join(__dir__, "prepare-pdf.js"))
+pdf_styles = File.read(File.join(__dir__, "pdf.css"))
 
 server = WEBrick::HTTPServer.new(
   DocumentRoot: site_dir,
@@ -47,7 +48,7 @@ begin
       abort "Could not render #{article_route}: HTTP #{page.network.status || "error"}"
     end
     page.network.wait_for_idle!(duration: 0.25, timeout: 15)
-    result = page.evaluate_async(prepare_page, 30, site_url)
+    result = page.evaluate_async(prepare_page, 30, site_url, pdf_styles)
     unless result["ok"]
       abort "Could not prepare #{article_route}: #{result["error"]}"
     end

bin/run

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+bin/build
+exec bundle exec jekyll serve --skip-initial-build --no-watch "$@"