deckrun 1.3.0

package/dist/pdf.js

@@ -0,0 +1,196 @@
+import { spawn } from "child_process";
+import { access, mkdtemp, readFile, rm, stat } from "fs/promises";
+import { constants } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+/**
+ * PDF export without the print dialog.
+ *
+ * The deck already prints correctly, but only if the person exporting picks
+ * landscape and turns on background graphics. Driving a headless browser
+ * ourselves removes that step: same renderer, same stylesheet, no choices.
+ *
+ * Nothing is installed for this. It uses a Chromium-family browser that is
+ * already on the machine, and the caller falls back to the print dialog when
+ * there is not one.
+ */
+const CANDIDATES = {
+    darwin: [
+        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+        "/Applications/Chromium.app/Contents/MacOS/Chromium",
+        "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
+        "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
+        "/Applications/Arc.app/Contents/MacOS/Arc",
+        "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
+    ],
+    linux: [
+        "/usr/bin/google-chrome",
+        "/usr/bin/google-chrome-stable",
+        "/usr/bin/chromium",
+        "/usr/bin/chromium-browser",
+        "/usr/bin/microsoft-edge",
+        "/usr/bin/brave-browser",
+        "/snap/bin/chromium",
+        "/opt/google/chrome/chrome",
+    ],
+    win32: [
+        "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
+        "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+        "C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe",
+        "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
+        "C:\\Program Files\\Chromium\\Application\\chrome.exe",
+    ],
+};
+/** Env overrides, checked before the well-known locations. */
+const ENV_KEYS = [
+    "DECKRUN_BROWSER",
+    "CHROME_PATH",
+    "PUPPETEER_EXECUTABLE_PATH",
+];
+let cached;
+async function isExecutable(path) {
+    try {
+        await access(path, constants.X_OK);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** Path to a usable browser, or null when the machine has none we recognise. */
+export async function findBrowser() {
+    if (cached !== undefined)
+        return cached;
+    for (const key of ENV_KEYS) {
+        const value = process.env[key];
+        if (value && (await isExecutable(value))) {
+            cached = value;
+            return cached;
+        }
+    }
+    for (const path of CANDIDATES[process.platform] ?? []) {
+        if (await isExecutable(path)) {
+            cached = path;
+            return cached;
+        }
+    }
+    cached = null;
+    return cached;
+}
+export class PdfError extends Error {
+}
+const RENDER_TIMEOUT_MS = 45_000;
+const POLL_MS = 150;
+function sleep(ms) {
+    return new Promise((done) => setTimeout(done, ms));
+}
+function killTree(child) {
+    try {
+        // Chrome leaves helper processes behind, so kill the whole group where the
+        // platform has them.
+        if (process.platform !== "win32" && child.pid)
+            process.kill(-child.pid, "SIGKILL");
+        else
+            child.kill("SIGKILL");
+    }
+    catch {
+        // Already gone.
+    }
+}
+/**
+ * Waits for the PDF itself rather than for the browser to exit.
+ *
+ * Chrome writes the file in about a second and then lingers, running update
+ * checks and other background work, so waiting on process exit would stall for
+ * as long as the timeout allows. A size that stops changing means the write is
+ * finished.
+ */
+async function waitForPdf(out, hasExited, spawnError) {
+    const deadline = Date.now() + RENDER_TIMEOUT_MS;
+    let lastSize = -1;
+    while (Date.now() < deadline) {
+        const failure = spawnError();
+        if (failure)
+            throw failure;
+        let size = -1;
+        try {
+            size = (await stat(out)).size;
+        }
+        catch {
+            // Not written yet.
+        }
+        if (size > 0 && size === lastSize)
+            return readFile(out);
+        lastSize = size;
+        if (hasExited() && size <= 0) {
+            // One last look, in case the write landed as the process was leaving.
+            try {
+                if ((await stat(out)).size > 0)
+                    return readFile(out);
+            }
+            catch {
+                // Nothing there.
+            }
+            throw new PdfError("the browser exited without producing a PDF");
+        }
+        await sleep(POLL_MS);
+    }
+    throw new PdfError("the browser took too long to render the deck");
+}
+/**
+ * Renders a served deck to PDF bytes.
+ *
+ * `--virtual-time-budget` matters: without it the browser prints before the
+ * webfont and the syntax highlighter have arrived, and the PDF comes out in a
+ * fallback font with plain code blocks.
+ */
+export async function renderPdf(url, browser) {
+    const dir = await mkdtemp(join(tmpdir(), "deckrun-pdf-"));
+    const out = join(dir, "deck.pdf");
+    const args = [
+        "--headless",
+        "--disable-gpu",
+        "--hide-scrollbars",
+        "--no-first-run",
+        "--no-default-browser-check",
+        "--disable-extensions",
+        "--disable-sync",
+        "--disable-default-apps",
+        "--disable-component-update",
+        "--no-service-autorun",
+        "--mute-audio",
+        // Never touch the browser profile the person is actually using.
+        `--user-data-dir=${join(dir, "profile")}`,
+        "--virtual-time-budget=5000",
+        // Header/footer flag names differ across versions; unknown switches are ignored.
+        "--no-pdf-header-footer",
+        "--print-to-pdf-no-header",
+        `--print-to-pdf=${out}`,
+        url,
+    ];
+    let exited = false;
+    let failure = null;
+    const child = spawn(browser, args, {
+        stdio: "ignore",
+        detached: process.platform !== "win32",
+    });
+    child.on("exit", () => { exited = true; });
+    child.on("error", (err) => {
+        failure = new PdfError(`could not run ${browser}: ${err.message}`);
+        exited = true;
+    });
+    try {
+        return await waitForPdf(out, () => exited, () => failure);
+    }
+    finally {
+        killTree(child);
+        await rm(dir, { recursive: true, force: true }).catch(() => { });
+    }
+}
+/** One render at a time, so a stuck or repeated request cannot spawn a fleet. */
+let queue = Promise.resolve();
+export function renderPdfSerial(url, browser) {
+    const run = queue.then(() => renderPdf(url, browser), () => renderPdf(url, browser));
+    queue = run.catch(() => { });
+    return run;
+}

package/dist/preview.js

@@ -0,0 +1,277 @@
+import { RESET_CSS, SLIDE_CSS, DECOR_CSS } from "./generate.js";
+import { findFont, FONT_IDS, fontOverrideCss, SIZE_IDS, DEFAULT_SIZE, DEFAULT_THEME, decorMapJson, decorOf, googleFontsHref, hljsHref, hljsMapJson, resolveSizeName, sizeSwitchableCss, themeSwitchableCss, } from "./themes.js";
+/** Virtual viewport the preview renders at, so `vw` sizing matches a projector. */
+export const PREVIEW_WIDTH = 1600;
+export const PREVIEW_HEIGHT = 900;
+/**
+ * The document loaded into the editor's preview iframe. It carries the deck's
+ * own stylesheet, so what the editor shows is what `deckrun file.md` renders.
+ * Slides arrive over postMessage; nothing is fetched or parsed in here.
+ */
+export function generatePreviewHtml(initialTheme = DEFAULT_THEME, initialSize = DEFAULT_SIZE, fonts = {}) {
+    const size = resolveSizeName(initialSize);
+    const head = findFont(fonts.head);
+    const body = findFont(fonts.body);
+    const fontAttrs = (head ? ` data-head="${head}"` : "") + (body ? ` data-body="${body}"` : "");
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="${initialTheme}" data-decor="${decorOf(initialTheme)}" data-size="${size}"${fontAttrs}>
+<head>
+  <meta charset="UTF-8">
+  <title>preview</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="${googleFontsHref()}" rel="stylesheet">
+  <link rel="stylesheet" id="hljs-theme" href="${hljsHref(initialTheme)}">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <style>
+${RESET_CSS}
+
+${themeSwitchableCss()}
+
+${sizeSwitchableCss()}
+
+${fontOverrideCss()}
+
+${SLIDE_CSS}
+
+${DECOR_CSS}
+
+/* ── Preview overrides ────────────────────────────────────────────────── */
+html, body { overflow: hidden; }
+body.is-grid, body.is-grid #presentation { overflow-y: auto; height: auto; min-height: 100%; }
+
+.slide {
+  transition: none !important;
+  transform: none !important;
+}
+
+/* The deck staggers each block in as a slide opens. Here the slide is rebuilt
+   on every keystroke, so the same animation would flicker while typing. */
+.slide.is-active .slide__content > * { animation: none !important; }
+
+#presentation { background: transparent; }
+
+/* Grid of every slide, laid out at the same virtual width as a single slide. */
+body.is-grid #presentation {
+  position: static;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
+  gap: 34px;
+  padding: 34px;
+  width: 100%;
+}
+
+.pv-thumb {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--surface0);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--base);
+  cursor: pointer;
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+.pv-thumb:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
+.pv-thumb.is-current { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
+
+.pv-thumb__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${PREVIEW_WIDTH}px;
+  height: ${PREVIEW_HEIGHT}px;
+  transform-origin: top left;
+  pointer-events: none;
+}
+
+.pv-thumb__num {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  z-index: 2;
+  font-family: var(--font-mono);
+  font-size: 15px;
+  color: var(--overlay1);
+  background: var(--crust-overlay);
+  border-radius: 5px;
+  padding: 2px 8px;
+}
+
+/* Empty state */
+#pv-empty {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 26px;
+  color: var(--overlay0);
+  letter-spacing: 0.04em;
+}
+
+body.is-empty #pv-empty { display: flex; }
+  </style>
+</head>
+<body>
+<div id="backdrop" aria-hidden="true"></div>
+<div id="presentation"></div>
+<div id="pv-empty">nothing to preview yet</div>
+<script>
+(function () {
+  'use strict';
+
+  var VW = ${PREVIEW_WIDTH};
+  var HLJS = ${hljsMapJson()};
+  var DECOR = ${decorMapJson()};
+  var SIZES = ${JSON.stringify(SIZE_IDS)};
+  var FONTS = ${JSON.stringify(FONT_IDS)};
+
+  var stage = document.getElementById('presentation');
+  var slides = [];
+  var mode = 'single';
+  var index = 0;
+
+  function send(msg) {
+    if (window.parent !== window) window.parent.postMessage(msg, '*');
+  }
+
+  function applyFont(slot, id) {
+    if (FONTS.indexOf(id) !== -1) document.documentElement.dataset[slot] = id;
+    else delete document.documentElement.dataset[slot];
+  }
+
+  function highlight(root) {
+    if (!window.hljs) return;
+    var blocks = root.querySelectorAll('pre code');
+    for (var i = 0; i < blocks.length; i++) {
+      if (!blocks[i].dataset.highlighted) {
+        try { window.hljs.highlightElement(blocks[i]); } catch (e) {}
+      }
+    }
+  }
+
+  /** Report whether the visible slide clips its own content. */
+  function reportOverflow() {
+    if (mode !== 'single') return;
+    var content = stage.querySelector('.slide__content');
+    var over = false;
+    if (content) over = content.scrollHeight - content.clientHeight > 6;
+    send({ type: 'overflow', index: index, overflow: over });
+  }
+
+  function renderSingle() {
+    document.body.classList.remove('is-grid');
+    stage.innerHTML = slides[index] || '';
+    var el = stage.querySelector('.slide');
+    if (el) el.classList.add('is-active');
+    highlight(stage);
+    requestAnimationFrame(reportOverflow);
+  }
+
+  function renderGrid() {
+    document.body.classList.add('is-grid');
+    stage.innerHTML = '';
+    var frag = document.createDocumentFragment();
+    slides.forEach(function (html, i) {
+      var thumb = document.createElement('div');
+      thumb.className = 'pv-thumb' + (i === index ? ' is-current' : '');
+      thumb.dataset.index = String(i);
+
+      var inner = document.createElement('div');
+      inner.className = 'pv-thumb__inner';
+      inner.innerHTML = html;
+      var el = inner.querySelector('.slide');
+      if (el) el.classList.add('is-active');
+
+      var num = document.createElement('span');
+      num.className = 'pv-thumb__num';
+      num.textContent = String(i + 1);
+
+      thumb.appendChild(inner);
+      thumb.appendChild(num);
+      frag.appendChild(thumb);
+    });
+    stage.appendChild(frag);
+    scaleThumbs();
+    highlight(stage);
+  }
+
+  function scaleThumbs() {
+    var thumbs = stage.querySelectorAll('.pv-thumb');
+    for (var i = 0; i < thumbs.length; i++) {
+      var inner = thumbs[i].querySelector('.pv-thumb__inner');
+      if (inner) inner.style.transform = 'scale(' + (thumbs[i].clientWidth / VW) + ')';
+    }
+  }
+
+  function render() {
+    document.body.classList.toggle('is-empty', slides.length === 0);
+    if (slides.length === 0) { stage.innerHTML = ''; return; }
+    if (index >= slides.length) index = slides.length - 1;
+    if (index < 0) index = 0;
+    if (mode === 'grid') renderGrid(); else renderSingle();
+  }
+
+  stage.addEventListener('click', function (e) {
+    if (mode !== 'grid') return;
+    var thumb = e.target.closest ? e.target.closest('.pv-thumb') : null;
+    if (thumb) send({ type: 'goto', index: parseInt(thumb.dataset.index, 10) });
+  });
+
+  window.addEventListener('resize', function () {
+    if (mode === 'grid') scaleThumbs();
+  });
+
+  window.addEventListener('message', function (e) {
+    var m = e.data || {};
+    if (m.type === 'render') {
+      var sameSet = m.slides && slides.length === m.slides.length &&
+        m.slides.every(function (h, i) { return h === slides[i]; });
+      slides = m.slides || [];
+      var modeChanged = m.mode !== mode;
+      var indexChanged = m.index !== index;
+      mode = m.mode || 'single';
+      index = typeof m.index === 'number' ? m.index : 0;
+      if (sameSet && !modeChanged && !indexChanged) { reportOverflow(); return; }
+      render();
+    } else if (m.type === 'theme') {
+      if (HLJS[m.theme]) {
+        document.documentElement.dataset.theme = m.theme;
+        document.documentElement.dataset.decor = DECOR[m.theme];
+        var link = document.getElementById('hljs-theme');
+        if (link) link.href = HLJS[m.theme];
+      }
+      if (SIZES.indexOf(m.size) !== -1) {
+        document.documentElement.dataset.size = m.size;
+      }
+      // An empty string clears the override and hands the slot back to the
+      // theme, which delete does and an assignment of '' would not.
+      applyFont('head', m.head);
+      applyFont('body', m.body);
+      // Type size and face both change how tall a slide's content runs, so the
+      // editor's overflow warning has to be re-measured against them.
+      requestAnimationFrame(reportOverflow);
+    } else if (m.type === 'index') {
+      index = m.index;
+      if (mode === 'grid') {
+        var cur = stage.querySelector('.pv-thumb.is-current');
+        if (cur) cur.classList.remove('is-current');
+        var next = stage.querySelector('.pv-thumb[data-index="' + index + '"]');
+        if (next) {
+          next.classList.add('is-current');
+          next.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+      } else {
+        render();
+      }
+    }
+  });
+
+  send({ type: 'ready' });
+})();
+</script>
+</body>
+</html>`;
+}