npm - @exor404/mdslides - Versions diffs - 0.1.0 - Mend

@exor404/mdslides 0.1.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 (17) hide show

package/LICENSE +21 -0
package/README.md +184 -0
package/app/astro.config.mjs +27 -0
package/app/integrations/mdslides-assets.js +167 -0
package/app/integrations/pdf-export.js +86 -0
package/app/integrations/rehype-shiki.js +59 -0
package/app/integrations/remark-highlight.js +45 -0
package/app/package.json +6 -0
package/app/public/favicon.svg +17 -0
package/app/src/layouts/Deck.astro +281 -0
package/app/src/lib/deck.js +272 -0
package/app/src/pages/index.astro +14 -0
package/app/src/pages/print.astro +11 -0
package/app/src/themes/angular.css +407 -0
package/bin/cli.js +274 -0
package/bin/templates/slides.md +22 -0
package/package.json +63 -0

package/app/src/layouts/Deck.astro ADDED Viewed

@@ -0,0 +1,281 @@
+---
+import '~theme';
+import 'katex/dist/katex.min.css';
+interface Slide {
+  html: string;
+  center?: boolean;
+  bg?: string | null;
+  classes?: string[];
+  title?: boolean;
+  content?: boolean;
+}
+interface Props {
+  title: string;
+  slides: Slide[];
+  transition?: string;
+  brand?: string;
+  print?: boolean;
+}
+const { title, slides, transition = 'fade', brand = '', print = false } = Astro.props;
+function slideClass(s: Slide) {
+  return [
+    'slide',
+    s.title ? 'is-title' : '',
+    s.content ? 'is-content' : '',
+    s.center ? 'is-center' : '',
+    ...(s.classes ?? []),
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+function slideStyle(s: Slide) {
+  return s.bg ? `--slide-bg:${s.bg}` : undefined;
+}
+---
+<!doctype html>
+<html lang="en" data-transition={transition} class={print ? 'print' : undefined}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body>
+    {print ? (
+      <>
+        <div class="print-bar" id="print-bar">
+          <a class="print-back" href="/">‹ Back to deck</a>
+          <button class="print-do" id="print-do">Save as PDF</button>
+        </div>
+        <div class="print-deck">
+          {slides.map((s) => (
+            <div class={slideClass(s)} style={slideStyle(s)}>
+              <div class="slide-inner" set:html={s.html} />
+            </div>
+          ))}
+        </div>
+        <script is:inline>
+          (() => {
+            const go = () => window.print();
+            document.getElementById('print-do')?.addEventListener('click', go);
+            // Opened from the deck's PDF button (#print) → auto-open the dialog
+            // once layout/fonts settle. A manual visit to /print just shows the
+            // slides plus the button.
+            if (location.hash === '#print') {
+              window.addEventListener('load', () => setTimeout(go, 450));
+            }
+          })();
+        </script>
+      </>
+    ) : (
+      <>
+        <div class="deck" id="deck">
+          <div class="stage" id="stage">
+            {slides.map((s, i) => (
+              <section
+                class={slideClass(s)}
+                style={slideStyle(s)}
+                data-index={i}
+                aria-hidden={i === 0 ? 'false' : 'true'}
+              >
+                <div class="slide-inner" set:html={s.html} />
+              </section>
+            ))}
+          </div>
+        </div>
+        <div class="chrome">
+          <div class="progress" id="progress"><span class="progress-bar" id="progress-bar"></span></div>
+          <div class="chrome-bar">
+            {brand && <span class="brand">{brand}</span>}
+            <div class="controls">
+              <div class="ctl-group">
+                <button class="ctl" id="prev" aria-label="Previous slide" title="Previous (←)">‹</button>
+                <button class="ctl" id="next" aria-label="Next slide" title="Next (→)">›</button>
+                <button class="ctl" id="overview-btn" aria-label="Overview" title="Overview (O)">▦</button>
+                <button class="ctl" id="print-btn" aria-label="Print to PDF" title="Print / Save as PDF (P)">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
+                </button>
+                <button class="ctl" id="fullscreen-btn" aria-label="Fullscreen" title="Fullscreen (F)">⤢</button>
+                <button class="ctl" id="theme-btn" aria-label="Toggle theme" title="Theme">◐</button>
+              </div>
+              <span class="counter" id="counter">1 / {slides.length}</span>
+            </div>
+          </div>
+        </div>
+        <div class="help" id="help" hidden>
+          <kbd>←</kbd><kbd>→</kbd> navigate · <kbd>O</kbd> overview · <kbd>F</kbd> fullscreen · <kbd>P</kbd> pdf · <kbd>.</kbd> black · <kbd>?</kbd> help
+        </div>
+        <script is:inline>
+          (() => {
+            const stage = document.getElementById('stage');
+            const slides = [...document.querySelectorAll('.slide')];
+            const total = slides.length;
+            const counter = document.getElementById('counter');
+            const bar = document.getElementById('progress-bar');
+            const deck = document.getElementById('deck');
+            const help = document.getElementById('help');
+            if (!stage || total === 0) return;
+            const BASE_W = 1280, BASE_H = 720;
+            let cur = 0;       // current slide index
+            let frag = 0;      // fragments revealed on current slide
+            let overview = false;
+            const fragmentsOf = (i) => [...slides[i].querySelectorAll('.fragment')];
+            // ── Fit the fixed canvas into the viewport ──
+            function fit() {
+              const scale = Math.min(window.innerWidth / BASE_W, window.innerHeight / BASE_H);
+              stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
+            }
+            // ── Render current state ──
+            function show() {
+              slides.forEach((s, i) => {
+                s.classList.toggle('active', i === cur);
+                s.setAttribute('aria-hidden', i === cur ? 'false' : 'true');
+                const dir = i < cur ? 'past' : i > cur ? 'future' : 'present';
+                s.dataset.state = dir;
+              });
+              const frags = fragmentsOf(cur);
+              frags.forEach((f, i) => f.classList.toggle('revealed', i < frag));
+              counter.textContent = `${cur + 1} / ${total}`;
+              bar.style.width = `${((cur + 1) / total) * 100}%`;
+              const hash = `#/${cur}`;
+              if (location.hash !== hash) history.replaceState(null, '', hash);
+              if (overview) slides[cur].scrollIntoView({ block: 'nearest' });
+            }
+            function goto(i, opts = {}) {
+              cur = Math.max(0, Math.min(total - 1, i));
+              frag = opts.endFragments ? fragmentsOf(cur).length : 0;
+              show();
+            }
+            function next() {
+              const frags = fragmentsOf(cur);
+              if (frag < frags.length) { frag++; show(); return; }
+              if (cur < total - 1) goto(cur + 1);
+            }
+            function prev() {
+              if (frag > 0) { frag--; show(); return; }
+              if (cur > 0) goto(cur - 1, { endFragments: true });
+            }
+            // ── Overview / grid ──
+            // Selection happens in the single stage click handler below — no
+            // per-slide onclick (which used to flip `overview` mid-bubble and
+            // make the stage handler advance an extra slide).
+            function setOverview(on) {
+              overview = on;
+              deck.classList.toggle('overview', on);
+              show();
+            }
+            // ── Black / pause ──
+            function toggleBlack() { document.body.classList.toggle('blacked'); }
+            // ── Keyboard ──
+            window.addEventListener('keydown', (e) => {
+              if (e.metaKey || e.ctrlKey || e.altKey) return;
+              switch (e.key) {
+                case 'ArrowRight': case ' ': case 'PageDown':
+                  e.preventDefault(); overview ? goto(cur + 1) : next(); break;
+                case 'ArrowLeft': case 'PageUp':
+                  e.preventDefault(); overview ? goto(cur - 1) : prev(); break;
+                case 'Home': e.preventDefault(); goto(0); break;
+                case 'End': e.preventDefault(); goto(total - 1); break;
+                case 'o': case 'O': setOverview(!overview); break;
+                case 'p': case 'P': openPrint(); break;
+                case 'Enter': if (overview) { e.preventDefault(); setOverview(false); } break;
+                case 'Escape': if (overview) setOverview(false); break;
+                case 'f': case 'F':
+                  if (document.fullscreenElement) document.exitFullscreen();
+                  else document.documentElement.requestFullscreen?.(); break;
+                case '.': toggleBlack(); break;
+                case '?': help.hidden = !help.hidden; break;
+              }
+            });
+            // ── Click zones (ignore links/buttons) ──
+            stage.addEventListener('click', (e) => {
+              if (overview) {
+                const sec = e.target.closest('.slide');
+                const i = sec ? slides.indexOf(sec) : -1;
+                if (i >= 0) { setOverview(false); goto(i); }
+                return;
+              }
+              if (e.target.closest('a, button')) return;
+              if (e.clientX < window.innerWidth * 0.25) prev(); else next();
+            });
+            // ── Print / PDF ──
+            // Under the mdslides dev server, generate a pixel-accurate PDF with
+            // headless Chrome (works identically in every browser). On a static
+            // deploy that endpoint is absent, so fall back to the browser's own
+            // Save-as-PDF on the /print route.
+            async function openPrint() {
+              const btn = document.getElementById('print-btn');
+              btn?.classList.add('busy');
+              try {
+                const res = await fetch('/__export.pdf');
+                if (res.ok && (res.headers.get('content-type') || '').includes('pdf')) {
+                  const url = URL.createObjectURL(await res.blob());
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = (document.title || 'slides') + '.pdf';
+                  document.body.appendChild(a);
+                  a.click();
+                  a.remove();
+                  setTimeout(() => URL.revokeObjectURL(url), 1000);
+                  return;
+                }
+              } catch {} finally {
+                btn?.classList.remove('busy');
+              }
+              window.open('/print/#print', '_blank');
+            }
+            // ── Chrome buttons ──
+            document.getElementById('next')?.addEventListener('click', next);
+            document.getElementById('prev')?.addEventListener('click', prev);
+            document.getElementById('overview-btn')?.addEventListener('click', () => setOverview(!overview));
+            document.getElementById('print-btn')?.addEventListener('click', openPrint);
+            document.getElementById('fullscreen-btn')?.addEventListener('click', () => {
+              if (document.fullscreenElement) document.exitFullscreen();
+              else document.documentElement.requestFullscreen?.();
+            });
+            // ── Theme toggle (light / dark) ──
+            (() => {
+              const root = document.documentElement;
+              if (localStorage.getItem('mdslides-theme') === 'light') root.setAttribute('data-theme', 'light');
+              document.getElementById('theme-btn')?.addEventListener('click', () => {
+                const light = root.getAttribute('data-theme') === 'light';
+                if (light) { root.removeAttribute('data-theme'); localStorage.setItem('mdslides-theme', 'dark'); }
+                else { root.setAttribute('data-theme', 'light'); localStorage.setItem('mdslides-theme', 'light'); }
+              });
+            })();
+            // ── Init: honor deep-link hash ──
+            const fromHash = () => {
+              const m = location.hash.match(/^#\/(\d+)/);
+              return m ? parseInt(m[1], 10) : 0;
+            };
+            window.addEventListener('resize', fit);
+            window.addEventListener('hashchange', () => { const i = fromHash(); if (i !== cur) goto(i); });
+            fit();
+            goto(fromHash());
+          })();
+        </script>
+      </>
+    )}
+  </body>
+</html>

package/app/src/lib/deck.js ADDED Viewed

@@ -0,0 +1,272 @@
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve, relative, sep } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkRehype from 'remark-rehype';
+import rehypeKatex from 'rehype-katex';
+import rehypeStringify from 'rehype-stringify';
+import remarkHighlight from '../../integrations/remark-highlight.js';
+import rehypeShiki from '../../integrations/rehype-shiki.js';
+const DEFAULT_CONFIG = {
+  brand: { text: 'mdslides' },
+  theme: 'angular',
+  transition: 'fade',
+};
+export async function loadDeckConfig() {
+  const source = process.env.MD_SOURCE;
+  if (!source) return DEFAULT_CONFIG;
+  const cfgPath = resolve(source, 'mdslides.config.js');
+  if (!existsSync(cfgPath)) return DEFAULT_CONFIG;
+  try {
+    const mod = await import(pathToFileURL(cfgPath).href);
+    const user = mod.default ?? {};
+    return {
+      ...DEFAULT_CONFIG,
+      ...user,
+      brand: { ...DEFAULT_CONFIG.brand, ...(user.brand ?? {}) },
+    };
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+}
+// Rewrite relative image URLs to absolute-from-source-root, so they resolve
+// through the asset middleware / build copy. The deck file sits at the source
+// root, so a relative URL resolves against `source`.
+function remarkImagePaths() {
+  const source = process.env.MD_SOURCE;
+  const ABSOLUTE_OR_PROTOCOL = /^(?:[a-z][a-z0-9+\-.]*:|\/\/|\/|#|data:)/i;
+  const rewrite = (url) => {
+    if (!url || ABSOLUTE_OR_PROTOCOL.test(url)) return url;
+    const cleaned = url.replace(/[?#].*$/, '');
+    const trailing = url.slice(cleaned.length);
+    const abs = resolve(source, cleaned);
+    const withSep = source.endsWith(sep) ? source : source + sep;
+    if (abs !== source && !abs.startsWith(withSep)) return url;
+    return '/' + relative(source, abs).split(sep).join('/') + trailing;
+  };
+  const visit = (node) => {
+    if (node.type === 'image') node.url = rewrite(node.url);
+    if (Array.isArray(node.children)) node.children.forEach(visit);
+  };
+  return (tree) => visit(tree);
+}
+// `Text {.fragment}` → add class `fragment` to the containing element and
+// strip the marker. Fragments reveal one step at a time during the talk.
+function rehypeFragments() {
+  const walk = (node, parent) => {
+    if (node.type === 'text' && node.value.includes('{.fragment}')) {
+      node.value = node.value.replace(/\s*\{\.fragment\}/g, '');
+      if (parent && parent.type === 'element') {
+        const props = (parent.properties ||= {});
+        const cls = props.className;
+        props.className = Array.isArray(cls) ? [...cls, 'fragment'] : cls ? [cls, 'fragment'] : ['fragment'];
+      }
+    }
+    if (Array.isArray(node.children)) node.children.forEach((c) => walk(c, node));
+  };
+  return (tree) => walk(tree, null);
+}
+// Every list item is a fragment by default: lists start hidden when the slide
+// opens and reveal one bullet at a time on Space / →, reusing the same
+// `.fragment` machinery as manual `{.fragment}` markers.
+function addClass(node, name) {
+  const props = (node.properties ||= {});
+  const cls = props.className;
+  if (Array.isArray(cls)) { if (!cls.includes(name)) cls.push(name); }
+  else if (cls) { if (cls !== name) props.className = [cls, name]; }
+  else props.className = [name];
+}
+function rehypeListFragments() {
+  const walk = (node) => {
+    if (node.type === 'element' && node.tagName === 'li') addClass(node, 'fragment');
+    if (Array.isArray(node.children)) node.children.forEach(walk);
+  };
+  return (tree) => walk(tree);
+}
+// Content-slide layout: pull the heading into a fixed top-left header, then
+// split the body into a left column (prose / bullets) and a right column
+// (media — images, fenced code, tables, block math). Only runs when the
+// vfile is tagged `slideLayout: 'content'` (title / centered slides skip it).
+function hasClass(node, name) {
+  const c = node.properties?.className;
+  if (Array.isArray(c)) return c.includes(name);
+  if (typeof c === 'string') return c.split(/\s+/).includes(name);
+  return false;
+}
+function realChildren(node) {
+  return (node.children ?? []).filter((k) => !(k.type === 'text' && !k.value.trim()));
+}
+function isMedia(node) {
+  if (node.type !== 'element') return false;
+  const t = node.tagName;
+  if (t === 'img' || t === 'pre' || t === 'table' || t === 'figure') return true;
+  if (hasClass(node, 'math-display') || hasClass(node, 'katex-display')) return true;
+  // A paragraph whose sole content is an image or a block of display math.
+  if (t === 'p') {
+    const kids = realChildren(node);
+    if (kids.length === 1 && kids[0].type === 'element') {
+      const k = kids[0];
+      if (k.tagName === 'img') return true;
+      if (hasClass(k, 'math-display') || hasClass(k, 'katex-display')) return true;
+    }
+  }
+  return false;
+}
+function el(tagName, className, children) {
+  return { type: 'element', tagName, properties: { className }, children };
+}
+function rehypeSlideLayout() {
+  return (tree, file) => {
+    if (file?.data?.slideLayout !== 'content') return;
+    const kids = realChildren(tree);
+    let head = null;
+    const rest = [];
+    for (const n of kids) {
+      if (!head && n.type === 'element' && /^h[1-6]$/.test(n.tagName)) head = n;
+      else rest.push(n);
+    }
+    const left = [];
+    const right = [];
+    for (const n of rest) (isMedia(n) ? right : left).push(n);
+    const hasLeft = left.length > 0;
+    const hasRight = right.length > 0;
+    const variant = hasLeft && hasRight ? 'has-media' : hasRight ? 'media-only' : 'no-media';
+    const cols = [];
+    if (hasLeft || !hasRight) cols.push(el('div', ['col-left'], left));
+    if (hasRight) cols.push(el('div', ['col-right'], right));
+    const body = el('div', ['slide-body', variant], cols);
+    tree.children = head ? [el('header', ['slide-head'], [head]), body] : [body];
+  };
+}
+const processor = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkMath)
+  .use(remarkHighlight)
+  .use(remarkImagePaths)
+  .use(remarkRehype)
+  .use(rehypeKatex)
+  .use(rehypeShiki)
+  .use(rehypeFragments)
+  .use(rehypeListFragments)
+  .use(rehypeSlideLayout)
+  .use(rehypeStringify);
+async function renderMarkdown(md, layout) {
+  const file = await processor.process({ value: md, data: { slideLayout: layout } });
+  return String(file);
+}
+// Per-slide directive: `<!-- slide: center bg=#0d0d0d -->`.
+// Supported tokens: `title`, `plain`, `center`, `bg=<color|url(...)>`,
+// `class=<name>`.
+function extractDirectives(chunk) {
+  const directives = { center: false, bg: null, classes: [], title: false, plain: false };
+  const stripped = chunk.replace(/<!--\s*slide:([^>]*?)-->\s*/i, (_m, body) => {
+    for (const tok of body.trim().split(/\s+/)) {
+      if (!tok) continue;
+      if (tok === 'center') directives.center = true;
+      else if (tok === 'title') directives.title = true;
+      else if (tok === 'plain') directives.plain = true;
+      else if (tok.startsWith('bg=')) directives.bg = tok.slice(3);
+      else if (tok.startsWith('class=')) directives.classes.push(tok.slice(6));
+    }
+    return '';
+  });
+  return { directives, body: stripped };
+}
+// Today's date, e.g. "June 10, 2026". Computed per run (dev reloads pick up
+// the current day; a static build freezes it at build time).
+function todayLong() {
+  return new Date().toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+// Split the deck into slides. A new slide starts at every `#` (H1) heading.
+// A standalone `---` line is also an explicit break (escape hatch for a
+// title slide with no heading, or splitting one section across slides).
+function splitSlides(src) {
+  // Drop a leading YAML frontmatter block, if any.
+  let text = src.replace(/^/, '');
+  text = text.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, '');
+  const lines = text.split(/\r?\n/);
+  const chunks = [];
+  let current = [];
+  let inFence = false;
+  const flush = () => {
+    const joined = current.join('\n').trim();
+    if (joined) chunks.push(joined);
+    current = [];
+  };
+  for (const line of lines) {
+    if (/^```/.test(line)) inFence = !inFence;
+    const isH1 = !inFence && /^#\s+/.test(line);
+    const isBreak = !inFence && /^---\s*$/.test(line);
+    if (isH1 && current.some((l) => l.trim())) {
+      flush();
+    } else if (isBreak) {
+      flush();
+      continue; // the rule itself is not content
+    }
+    current.push(line);
+  }
+  flush();
+  return chunks;
+}
+export async function loadSlides() {
+  const deckFile = process.env.MD_FILE;
+  if (!deckFile) {
+    throw new Error('MD_FILE not set — run mdslides via the CLI (e.g. `npx mdslides ./slides.md`).');
+  }
+  const src = readFileSync(deckFile, 'utf8');
+  const today = todayLong();
+  const chunks = splitSlides(src);
+  const slides = [];
+  for (let i = 0; i < chunks.length; i++) {
+    const { directives, body } = extractDirectives(chunks[i]);
+    // `{{date}}` → today's date (any slide).
+    const withDate = body.replace(/\{\{\s*date\s*\}\}/g, today);
+    // The first slide is the presentation title slide by default; opt out
+    // with `<!-- slide: plain -->`, or force elsewhere with `title`.
+    const isTitle = directives.title || (i === 0 && !directives.plain);
+    // Everything that isn't a title or an explicitly centered slide gets the
+    // structured content layout (top-left title + text-left / media-right).
+    const isContent = !isTitle && !directives.center;
+    const html = await renderMarkdown(withDate, isContent ? 'content' : 'plain');
+    slides.push({ html, ...directives, title: isTitle, content: isContent });
+  }
+  return slides;
+}
+// Deck title = text of the first H1, else the filename.
+export function deckTitle(slides) {
+  for (const s of slides) {
+    const m = s.html.match(/<h1[^>]*>(.*?)<\/h1>/is);
+    if (m) return m[1].replace(/<[^>]+>/g, '').trim();
+  }
+  return 'mdslides';
+}

package/app/src/pages/index.astro ADDED Viewed

@@ -0,0 +1,14 @@
+---
+import Deck from '../layouts/Deck.astro';
+import { loadSlides, loadDeckConfig, deckTitle } from '../lib/deck.js';
+const slides = await loadSlides();
+const config = await loadDeckConfig();
+const title = deckTitle(slides);
+---
+<Deck
+  title={title}
+  slides={slides}
+  transition={config.transition}
+  brand={config.brand?.text ?? ''}
+/>

package/app/src/pages/print.astro ADDED Viewed

@@ -0,0 +1,11 @@
+---
+import Deck from '../layouts/Deck.astro';
+import { loadSlides, loadDeckConfig, deckTitle } from '../lib/deck.js';
+// One page per slide, all fragments shown — used by `mdslides export` (PDF)
+// and the browser's own "Save as PDF".
+const slides = await loadSlides();
+const config = await loadDeckConfig();
+const title = deckTitle(slides);
+---
+<Deck title={title} slides={slides} transition="none" brand={config.brand?.text ?? ''} print />