feat: generate pdf for slides

.github/workflows/generate-pdf.yml

@@ -0,0 +1,28 @@
+name: Generate PDF Slides
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  pdf-generation:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '21'
+      - name: Setup and generate PDF
+        run: |
+          npm i
+          npx -y live-server docs --port=8080 --quiet --no-browser &
+          while ! curl -s http://localhost:8080 > /dev/null; do sleep 1; done
+          node gen-pdf.js
+      - uses: actions/upload-artifact@v3
+        with:
+          name: presentation-slides
+          path: slides.pdf

.gitignore

@@ -1 +1,3 @@
 *.pdf
+node_modules
+processed-slides.md

docs/app.css

@@ -3,6 +3,14 @@ body {
   font-family: #fff;
   font-size: 1rem;
 }
+
+/* Required to avoid Chromiium's lazy-loading of fonts */
+.space-mono {
+  font-family: "Space Mono";
+  position: absolute;
+  opacity: 0;
+}
+
 .remark-code,
 .remark-inline-code {
   font-family: "Space Mono";
@@ -15,25 +23,9 @@ body {
 .remark-slide-content {
   background-color: #000;
   font-size: 2rem;
-  background-image: radial-gradient(
-      circle at 100% 10%,
-      #ffffff11 10%,
-      #000000 60%
-    ),
-    repeating-linear-gradient(
-      0deg,
-      #ffffff22,
-      #ffffff22 0.5px,
-      #0000 1px,
-      #0000 27px
-    ),
-    repeating-linear-gradient(
-      90deg,
-      #ffffff22,
-      #ffffff22 0.5px,
-      #0000 1px,
-      #0000 70px
-    );
+  background-image: url(./img/bg.png);
+  background-size: cover;
+  background-position: center;
   height: 100%;
   color: #fff;
 
@@ -73,6 +65,23 @@ body {
   color: #000;
 }
 
+p.h1 {
+  display: block;
+  font-size: 55px;
+  font-weight: 700;
+  margin: 0;
+  padding: 0.6em 0;
+}
+
+p.h2 {
+  display: block;
+
+  font-size: 45px;
+  font-weight: 700;
+  margin: 0;
+  padding: 0.6em 0;
+}
+
 .font-size-6 {
   font-size: 6rem;
 }

docs/index.html

@@ -41,7 +41,7 @@
     <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
     <script>
       var slideshow = remark.create({
-        sourceUrl: "./slides.md",
+        sourceUrl: "./processed-slides.md",
         highlightStyle: "tomorrow-night",
         ratio: "16:9",
         navigation: {
@@ -51,5 +51,7 @@
         countIncrementalSlides: false,
       });
     </script>
+    <!-- Required to avoid Chromiium's lazy-loading of fonts -->
+    <div class="space-mono">a</div>
   </body>
 </html>

gen-pdf.js

@@ -0,0 +1,31 @@
+import puppeteer from "puppeteer";
+import util from "util";
+import { exec } from "child_process";
+
+const execPromise = util.promisify(exec);
+
+async function generatePDF() {
+  await execPromise("node preprocess-markdown.js");
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  await page.setViewport({
+    width: 1348,
+    height: 759,
+    deviceScaleFactor: 1,
+  });
+
+  await page.goto(`http://127.0.0.1:8080`, {
+    waitUntil: "networkidle0",
+  });
+
+  await page.pdf({
+    path: "slides.pdf",
+    preferCSSPageSize: true,
+    printBackground: true,
+  });
+
+  await browser.close();
+}
+
+generatePDF().catch(console.error);