npm - @dustfeather/deckrun - Versions diffs - 2.0.0 - Mend

@dustfeather/deckrun 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/LICENSE +21 -0
package/README.md +1073 -0
package/THIRD-PARTY-NOTICES.md +38 -0
package/dist/editor-content.js +485 -0
package/dist/editor.js +3916 -0
package/dist/fragments.js +71 -0
package/dist/generate.js +3488 -0
package/dist/highlights.js +833 -0
package/dist/index.js +1020 -0
package/dist/lint.js +330 -0
package/dist/parser.js +221 -0
package/dist/pdf.js +200 -0
package/dist/presentation-options.js +289 -0
package/dist/preview.js +400 -0
package/dist/rich-content.js +195 -0
package/dist/safe-fetch.js +173 -0
package/dist/sanitize.js +102 -0
package/dist/themes.js +1041 -0
package/dist/titles.js +30 -0
package/package.json +64 -0

package/dist/preview.js ADDED Viewed

@@ -0,0 +1,400 @@
+import { RESET_CSS, SLIDE_CSS, DECOR_CSS } from "./generate.js";
+import { findFont, FONT_IDS, fontOverrideCss, DEFAULT_THEME, decorMapJson, decorOf, googleFontsHref, hljsHref, hljsIntegrity, hljsMapJson, HLJS_SCRIPT, themeSwitchableCss, } from "./themes.js";
+import { DEFAULT_TEMPLATE, DEFAULT_TRANSITION, resolveTemplateName, resolveTransitionName, TEMPLATE_CSS, TRANSITION_CSS, } from "./presentation-options.js";
+import { RICH_CONTENT_CSS, RICH_CONTENT_RUNTIME, richContentHead, } from "./rich-content.js";
+import { FRAGMENT_CSS, FRAGMENT_RUNTIME } from "./fragments.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, fonts = {}, initialTemplate = DEFAULT_TEMPLATE, initialTransition = DEFAULT_TRANSITION) {
+    const template = resolveTemplateName(initialTemplate);
+    const transition = resolveTransitionName(initialTransition);
+    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-template="${template}" data-transition="${transition}"${fontAttrs}>
+<head>
+  <meta charset="UTF-8">
+  <title>preview · deckrun</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)}" integrity="${hljsIntegrity(initialTheme)}" crossorigin="anonymous">
+  <script src="${HLJS_SCRIPT.href}" integrity="${HLJS_SCRIPT.integrity}" crossorigin="anonymous"></script>
+  ${richContentHead({ math: true, mermaid: true }, "local")}
+  <style>
+${RESET_CSS}
+${themeSwitchableCss()}
+${fontOverrideCss()}
+${SLIDE_CSS}
+${TEMPLATE_CSS}
+${TRANSITION_CSS}
+${FRAGMENT_CSS}
+${RICH_CONTENT_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>
+${FRAGMENT_RUNTIME}
+${RICH_CONTENT_RUNTIME}
+</script>
+<script>
+(function () {
+  'use strict';
+  var VW = ${PREVIEW_WIDTH};
+  var HLJS = ${hljsMapJson()};
+  var DECOR = ${decorMapJson()};
+  var FONTS = ${JSON.stringify(FONT_IDS)};
+  var stage = document.getElementById('presentation');
+  var slides = [];
+  var mode = 'single';
+  var index = 0;
+  function send(msg) {
+    // Targeted rather than '*': with a wildcard, a document that navigates
+    // this frame off-origin keeps receiving every later payload, which
+    // includes the whole deck.
+    if (window.parent !== window) window.parent.postMessage(msg, location.origin);
+  }
+  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:not(.language-mermaid):not(.lang-mermaid)');
+    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 ||
+        content.scrollWidth - content.clientWidth > 6;
+      // KaTeX display equations and Mermaid hosts deliberately hide their own
+      // overflow to keep a projected slide tidy. Inspect them separately so a
+      // clipped formula or diagram still triggers the editor's overflow nudge.
+      var rich = content.querySelectorAll('.katex-display, .mermaid');
+      for (var i = 0; !over && i < rich.length; i++) {
+        over = rich[i].scrollHeight - rich[i].clientHeight > 6 ||
+          rich[i].scrollWidth - rich[i].clientWidth > 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');
+    if (window.deckrunPrepareFragments) window.deckrunPrepareFragments(stage, true);
+    highlight(stage);
+    var rich = window.deckrunRenderRichContent ? window.deckrunRenderRichContent(stage) : Promise.resolve();
+    rich.then(function () { 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();
+    if (window.deckrunPrepareFragments) window.deckrunPrepareFragments(stage, true);
+    highlight(stage);
+    var rich = window.deckrunRenderRichContent ? window.deckrunRenderRichContent(stage) : Promise.resolve();
+    rich.then(scaleThumbs);
+  }
+  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('keydown', function (e) {
+    var mod = e.metaKey || e.ctrlKey;
+    if (mod) {
+      var k = e.key.toLowerCase();
+      if (k === 'enter') { e.preventDefault(); send({ type: 'action', action: 'present' }); }
+      else if (k === 'k' && !e.shiftKey) { e.preventDefault(); send({ type: 'action', action: 'palette' }); }
+      else if (k === 'g') { e.preventDefault(); send({ type: 'action', action: 'grid' }); }
+      else if (k === 'o') { e.preventDefault(); send({ type: 'action', action: 'decks' }); }
+      else if (k === '/') { e.preventDefault(); send({ type: 'action', action: 'guide' }); }
+      else if (k === 'p' || (k === 's' && e.shiftKey)) { e.preventDefault(); send({ type: 'action', action: 'pdf' }); }
+      else if (k === 's') { e.preventDefault(); send({ type: 'action', action: 'download' }); }
+      else if (k === 'l' && e.shiftKey) { e.preventDefault(); send({ type: 'action', action: 'theme' }); }
+      return;
+    }
+    if (mode === 'grid') {
+      var thumbs = stage.querySelectorAll('.pv-thumb');
+      if (!thumbs.length) return;
+      var cols = 1;
+      if (thumbs.length > 1) {
+        var firstTop = thumbs[0].offsetTop;
+        for (var c = 1; c < thumbs.length; c++) {
+          if (thumbs[c].offsetTop !== firstTop) { cols = c; break; }
+        }
+        if (cols === 1 && thumbs.length > 1 && thumbs[1].offsetTop === firstTop) {
+          cols = thumbs.length;
+        }
+      }
+      var step = 0;
+      if (e.key === 'ArrowRight') step = 1;
+      else if (e.key === 'ArrowLeft') step = -1;
+      else if (e.key === 'ArrowDown') step = cols;
+      else if (e.key === 'ArrowUp') step = -cols;
+      else if (e.key === 'Home') { e.preventDefault(); send({ type: 'goto', index: 0 }); return; }
+      else if (e.key === 'End') { e.preventDefault(); send({ type: 'goto', index: slides.length - 1 }); return; }
+      else if (e.key === 'Enter') { e.preventDefault(); send({ type: 'goto', index: index }); return; }
+      else if (e.key === 'Escape') { e.preventDefault(); send({ type: 'goto', index: index }); return; }
+      else return;
+      e.preventDefault();
+      var next = Math.max(0, Math.min(slides.length - 1, index + step));
+      index = next;
+      var cur = stage.querySelector('.pv-thumb.is-current');
+      if (cur) cur.classList.remove('is-current');
+      var nextThumb = stage.querySelector('.pv-thumb[data-index="' + index + '"]');
+      if (nextThumb) {
+        nextThumb.classList.add('is-current');
+        nextThumb.scrollIntoView({ block: 'nearest' });
+      }
+      send({ type: 'index-select', index: index });
+      return;
+    }
+    // Single mode: Alt navigation or standard keys
+    if (e.altKey) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === 'PageDown') {
+        e.preventDefault();
+        send({ type: 'nav', delta: 1 });
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'PageUp') {
+        e.preventDefault();
+        send({ type: 'nav', delta: -1 });
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown') {
+      e.preventDefault();
+      send({ type: 'nav', delta: 1 });
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
+      e.preventDefault();
+      send({ type: 'nav', delta: -1 });
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      send({ type: 'goto', index: 0 });
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      send({ type: 'goto', index: slides.length - 1 });
+    }
+  });
+  window.addEventListener('resize', function () {
+    if (mode === 'grid') scaleThumbs();
+  });
+  window.addEventListener('message', function (e) {
+    // Only the editor that served this frame may drive it. Without this, any
+    // page could frame /__preview and post its own render payload, which
+    // goes straight to innerHTML.
+    if (e.origin !== location.origin) return;
+    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) {
+          // Digest first, so the swapped-in sheet is verified as well.
+          link.integrity = HLJS[m.theme].integrity || '';
+          link.crossOrigin = 'anonymous';
+          link.href = HLJS[m.theme].href;
+        }
+      }
+      // 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);
+      if (m.template) document.documentElement.dataset.template = m.template;
+      if (m.transition) document.documentElement.dataset.transition = m.transition;
+      // A different face changes how tall a slide's content runs, so the
+      // editor's overflow warning has to be re-measured against it.
+      render();
+    } 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>`;
+}

package/dist/rich-content.js ADDED Viewed

@@ -0,0 +1,195 @@
+export function richContentFeatures(slides) {
+    let math = false;
+    let mermaid = false;
+    for (const slide of slides) {
+        if (!math && (slide.html.includes('class="math-source"') || slide.html.includes("math-source"))) {
+            math = true;
+        }
+        if (!mermaid &&
+            (slide.html.includes("language-mermaid") ||
+                slide.html.includes("lang-mermaid") ||
+                slide.html.includes('class="mermaid"'))) {
+            mermaid = true;
+        }
+    }
+    return { math, mermaid };
+}
+/**
+ * The head tags for math and diagram rendering.
+ *
+ * The CDN variants carry Subresource Integrity digests. A standalone export
+ * runs third-party JavaScript on whatever machine it is opened on, including
+ * the machines of everyone the deck is sent to, so the bytes are pinned.
+ */
+export function richContentHead(features, source = "local") {
+    const parts = [];
+    if (features.math) {
+        if (source === "cdn") {
+            parts.push('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.4/dist/katex.min.css"' +
+                ' integrity="sha384-u1zONI5gPXUx0UKI62c75/zww972y0v2rSK5ZYlVdS6xEuWDeZWUI66v6t1gvlXJ"' +
+                ' crossorigin="anonymous">');
+            parts.push('<script src="https://cdn.jsdelivr.net/npm/katex@0.18.4/dist/katex.min.js"' +
+                ' integrity="sha384-ykMNcWQhhTUb0YV9SPpPUFURHZ+tWmubkakGBP+OgNK/UXdO2gtzglWx0Rj9hnO3"' +
+                ' crossorigin="anonymous"></script>');
+        }
+        else {
+            parts.push('<link rel="stylesheet" href="/__vendor/katex.min.css">');
+            parts.push('<script src="/__vendor/katex.min.js"></script>');
+        }
+    }
+    if (features.mermaid) {
+        if (source === "cdn") {
+            parts.push('<script src="https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.min.js"' +
+                ' integrity="sha384-EOXBFmc3gx5mb+vn0vPvvGqACToJD24hhacX5Yx+8NUUQrHIle/Qi5Bg9o3zKwW2"' +
+                ' crossorigin="anonymous"></script>');
+        }
+        else {
+            parts.push('<script src="/__vendor/mermaid.min.js"></script>');
+        }
+    }
+    return parts.join("\n  ");
+}
+export const RICH_CONTENT_CSS = `/* ── Rich Content (Math & Diagrams) ─────────────────────────────────────── */
+.math-source {
+  font-family: inherit;
+}
+div.math-source {
+  display: flex;
+  justify-content: center;
+  margin: 1.2em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+span.math-source {
+  display: inline;
+}
+.katex-display {
+  margin: 0.8em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.katex {
+  font-size: 1.15em;
+  text-rendering: auto;
+}
+.math-error {
+  color: var(--maroon, #f38ba8);
+  background: var(--surface0, rgba(255, 0, 0, 0.1));
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.85em;
+}
+.mermaid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 1.2em auto;
+  max-width: 100%;
+  overflow: hidden;
+}
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+.mermaid-error {
+  color: var(--maroon, #f38ba8);
+  background: var(--surface0, rgba(255, 0, 0, 0.1));
+  border: 1px solid var(--maroon, #f38ba8);
+  border-radius: 6px;
+  padding: 12px 16px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.9em;
+  white-space: pre-wrap;
+  margin: 1em 0;
+}
+`;
+export const RICH_CONTENT_RUNTIME = `(function () {
+  window.deckrunRenderRichContent = function (root) {
+    if (!root) return Promise.resolve();
+    // 1. Render KaTeX math
+    if (window.katex) {
+      var mathNodes = root.querySelectorAll('.math-source:not([data-rendered])');
+      for (var i = 0; i < mathNodes.length; i++) {
+        var el = mathNodes[i];
+        var tex = el.textContent || '';
+        var isDisplay = el.dataset.display === 'true';
+        try {
+          window.katex.render(tex, el, {
+            displayMode: isDisplay,
+            throwOnError: false,
+            output: 'htmlAndMathml'
+          });
+          el.setAttribute('data-rendered', 'true');
+        } catch (err) {
+          // The message derives from the deck's own TeX, so it is written as
+          // text rather than parsed as markup.
+          var errSpan = document.createElement('span');
+          errSpan.className = 'math-error';
+          errSpan.textContent = (err && err.message) ? String(err.message) : 'Math rendering error';
+          el.textContent = '';
+          el.appendChild(errSpan);
+          el.setAttribute('data-rendered', 'true');
+        }
+      }
+    }
+    // 2. Render Mermaid diagrams
+    var mermaidPromises = [];
+    var codeBlocks = root.querySelectorAll('pre code.language-mermaid, pre code.lang-mermaid');
+    if (codeBlocks.length > 0 && window.mermaid) {
+      try {
+        // 'strict' is Mermaid's default and the only level that runs its
+        // DOMPurify pass over the generated SVG. Under 'loose' that pass is
+        // skipped entirely and click directives are live, so a mermaid
+        // block in someone else's deck injects raw markup and event
+        // handlers into the page — an injection path of its own, since
+        // the SVG is produced after any sanitizing of the Markdown output.
+        window.mermaid.initialize({
+          startOnLoad: false,
+          theme: 'dark',
+          securityLevel: 'strict'
+        });
+      } catch (e) {}
+      for (var j = 0; j < codeBlocks.length; j++) {
+        (function (codeEl) {
+          var preEl = codeEl.closest('pre');
+          if (!preEl || preEl.dataset.rendered) return;
+          preEl.dataset.rendered = 'true';
+          var code = codeEl.textContent || '';
+          var container = document.createElement('div');
+          container.className = 'mermaid';
+          preEl.parentNode.insertBefore(container, preEl);
+          preEl.style.display = 'none';
+          var id = 'mermaid-' + Math.random().toString(36).slice(2, 10);
+          var p = window.mermaid.render(id, code)
+            .then(function (res) {
+              container.innerHTML = res.svg;
+              preEl.remove();
+            })
+            .catch(function (err) {
+              container.className = 'mermaid-error';
+              container.textContent = 'Mermaid Error: ' + (err && err.message ? err.message : String(err));
+              preEl.remove();
+            });
+          mermaidPromises.push(p);
+        })(codeBlocks[j]);
+      }
+    }
+    return Promise.all(mermaidPromises).then(function () {});
+  };
+})();
+`;