@exor404/mdslides 0.1.0

package/app/src/themes/angular.css

@@ -0,0 +1,407 @@
+/* ─────────────────────────────────────────────
+   mdslides — angular theme (slide deck)
+   Palette inherited from mdstack's angular theme.
+   ───────────────────────────────────────────── */
+
+:root {
+  --grad: linear-gradient(135deg, #ff0080 0%, #ff4500 50%, #ffa500 100%);
+
+  /* Dark (default) */
+  --bg:            #0d0d0d;
+  --bg-2:          #131314;
+  --surface:       #1a1a1c;
+  --surface-2:     #1f1f22;
+  --border:        rgba(255,255,255,0.10);
+  --border-strong: rgba(255,255,255,0.18);
+  --text:          #ededed;
+  --text-muted:    #9ca3af;
+  --text-dim:      #6b7280;
+  --code-bg:       rgba(255,255,255,0.08);
+  --code-block-bg: #08080a;
+
+  --accent:        #ff7a3c;
+  --accent-2:      #ff4d6a;
+  --link:          #ff9248;
+  --mark-bg:       rgba(255,165,0,0.22);
+  --mark-text:     #ffd9a8;
+
+  --canvas-w: 1280px;
+  --canvas-h: 720px;
+
+  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
+  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
+}
+
+[data-theme="light"] {
+  --bg:            #ffffff;
+  --bg-2:          #fafafa;
+  --surface:       #f5f5f6;
+  --surface-2:     #ededf0;
+  --border:        rgba(0,0,0,0.10);
+  --border-strong: rgba(0,0,0,0.18);
+  --text:          #18181b;
+  --text-muted:    #52525b;
+  --text-dim:      #8a8a93;
+  --code-bg:       rgba(0,0,0,0.06);
+  --code-block-bg: #0f1115;
+  --mark-bg:       rgba(255,120,0,0.20);
+  --mark-text:     #7a3a00;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+body.blacked .deck { opacity: 0; }
+
+/* ── Deck / fixed-canvas framing ── */
+.deck {
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(1200px 600px at 80% -10%, rgba(255,69,0,0.10), transparent 60%),
+    var(--bg);
+  overflow: hidden;
+}
+.stage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--canvas-w);
+  height: var(--canvas-h);
+  transform: translate(-50%, -50%);
+  transform-origin: center center;
+}
+
+.slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  background: var(--slide-bg, transparent);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.slide.active { opacity: 1; visibility: visible; pointer-events: auto; }
+
+/* transitions */
+[data-transition="fade"] .slide { transition: opacity .35s ease; }
+[data-transition="slide"] .slide {
+  transition: opacity .35s ease, transform .35s ease;
+  transform: translateX(60px);
+}
+[data-transition="slide"] .slide.active { transform: translateX(0); }
+[data-transition="slide"] .slide[data-state="past"] { transform: translateX(-60px); }
+
+.slide-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 72px 92px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.7em;
+}
+.slide.is-center .slide-inner { align-items: center; text-align: center; }
+
+/* ── Title slide ── */
+.slide.is-title .slide-inner {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.35em;
+}
+.slide.is-title h1 { font-size: 96px; line-height: 1.12; }
+.slide.is-title h2 {
+  font-size: 34px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: var(--text-muted);
+  max-width: 22ch;
+}
+/* Last line = byline (presenters · date), pinned to the bottom. */
+.slide.is-title .slide-inner > p:last-child {
+  position: absolute;
+  left: 92px;
+  right: 92px;
+  bottom: 64px;
+  margin: 0;
+  font-size: 24px;
+  color: var(--text-dim);
+}
+.slide.is-title .slide-inner > p:last-child strong { color: var(--text-muted); }
+
+/* ── Content slide: fixed top-left title, text left / media right ── */
+.slide.is-content .slide-inner { justify-content: flex-start; gap: 0; }
+.slide-head { flex: 0 0 auto; margin-bottom: 44px; }
+.slide-head h1 { font-size: 56px; text-align: left; }
+.slide-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 56px;
+  align-items: center;
+}
+.slide-body.no-media { grid-template-columns: 1fr; }
+.slide-body.media-only { grid-template-columns: 1fr; justify-items: center; }
+.col-left { align-self: center; display: flex; flex-direction: column; gap: 0.7em; min-width: 0; }
+.col-right {
+  align-self: center;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 20px;
+  min-width: 0; max-height: 100%;
+}
+.slide-body.no-media .col-left { max-width: 60ch; }
+.slide-body h2 { font-size: 34px; }
+.slide-body h3 { font-size: 27px; }
+.col-right :is(img, pre, table) { width: 100%; }
+.col-right img { max-height: 540px; object-fit: contain; }
+.col-right pre { font-size: 20px; }
+.col-right .katex-display { margin: 0; }
+
+/* ── Prose ── */
+.slide-inner > :first-child { margin-top: 0; }
+h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
+h1 {
+  font-size: 72px;
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  /* Solid fallback so the title is never invisible if clip-to-text is
+     unsupported (notably some print/PDF engines). */
+  color: var(--accent);
+  -webkit-text-fill-color: transparent;
+  /* clip-to-text crops the gradient to the line box, so a tight line-height
+     shears off descenders (the tail of g/y/p). Give the box headroom. */
+  line-height: 1.18;
+  padding-bottom: 0.08em;
+}
+h2 { font-size: 52px; }
+h3 { font-size: 38px; color: var(--text-muted); font-weight: 600; }
+p, li { font-size: 30px; line-height: 1.45; color: var(--text); }
+.slide-inner > p { color: var(--text-muted); }
+
+strong { color: #fff; font-weight: 700; }
+[data-theme="light"] strong { color: #000; }
+em { font-style: italic; }
+del { color: var(--text-dim); }
+a { color: var(--link); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--link) 40%, transparent); }
+mark { background: var(--mark-bg); color: var(--mark-text); padding: 0 .18em; border-radius: 4px; }
+
+ul, ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: .45em; }
+li { padding-left: .2em; }
+li::marker { color: var(--accent); }
+
+blockquote {
+  border-left: 4px solid var(--accent);
+  padding: .2em 0 .2em 1em;
+  color: var(--text-muted);
+  font-style: italic;
+  font-size: 32px;
+}
+
+code {
+  font-family: var(--mono);
+  font-size: .9em;
+  background: var(--code-bg);
+  padding: .12em .35em;
+  border-radius: 6px;
+}
+pre {
+  position: relative;
+  background: var(--code-block-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 28px 32px;
+  overflow: auto;
+  font-size: 24px;
+  line-height: 1.5;
+}
+pre code { background: none; padding: 0; font-size: 1em; color: #e6e6e6; }
+
+table { border-collapse: collapse; font-size: 26px; }
+th, td { border: 1px solid var(--border); padding: 10px 18px; text-align: left; }
+th { background: var(--surface); font-weight: 700; }
+
+img { max-width: 100%; max-height: 460px; border-radius: 12px; display: block; }
+.slide.is-center img { margin-inline: auto; }
+hr { border: none; border-top: 1px solid var(--border); width: 100%; }
+
+.katex { font-size: 1.05em; }
+
+/* ── Fragments ── */
+.fragment { opacity: 0; transition: opacity .3s ease, transform .3s ease; transform: translateY(6px); }
+.fragment.revealed { opacity: 1; transform: none; }
+.deck.overview .fragment, html.print .fragment { opacity: 1; transform: none; }
+
+/* ── Auto fade-in on slide open ──
+   Every block of content fades up when its slide becomes active — except
+   lists (ul/ol), which stay put, and manual-reveal `.fragment`s, which keep
+   their own step-by-step timing. A light stagger makes it read as intentional.
+   The animation re-runs each time you land on the slide (class toggles off
+   and back on), and is skipped in overview / print where everything shows at
+   once. */
+@keyframes mds-enter {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: none; }
+}
+.slide.active :is(.slide-inner, .slide-head, .col-left, .col-right)
+  > :is(h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, figure, img, hr, .katex-display):not(.fragment) {
+  animation: mds-enter .5s cubic-bezier(.21, .6, .35, 1) both;
+}
+/* Light stagger across the first several blocks in each container. */
+.slide.active :is(.slide-inner, .slide-head, .col-left, .col-right) > :nth-child(2) { animation-delay: .06s; }
+.slide.active :is(.slide-inner, .slide-head, .col-left, .col-right) > :nth-child(3) { animation-delay: .12s; }
+.slide.active :is(.slide-inner, .slide-head, .col-left, .col-right) > :nth-child(4) { animation-delay: .18s; }
+.slide.active :is(.slide-inner, .slide-head, .col-left, .col-right) > :nth-child(5) { animation-delay: .24s; }
+.slide.active :is(.slide-inner, .slide-head, .col-left, .col-right) > :nth-child(n+6) { animation-delay: .3s; }
+
+.deck.overview .slide :is(.slide-inner, .slide-head, .col-left, .col-right) > * { animation: none !important; }
+@media (prefers-reduced-motion: reduce) {
+  .slide.active :is(.slide-inner, .slide-head, .col-left, .col-right) > * { animation: none !important; }
+}
+
+/* ── Chrome (progress + controls) ── */
+.progress {
+  position: fixed; left: 0; right: 0; bottom: 0; height: 3px;
+  background: var(--border);
+  z-index: 30;
+}
+.progress-bar { display: block; height: 100%; width: 0; background: var(--grad); transition: width .3s ease; }
+.chrome-bar {
+  position: fixed; left: 0; right: 0; bottom: 0; height: 0;
+  display: flex; align-items: flex-end; justify-content: space-between;
+  padding: 18px 24px; z-index: 31;
+  pointer-events: none;
+}
+.chrome-bar .brand, .chrome-bar .controls { pointer-events: auto; }
+.brand { font-size: 14px; font-weight: 600; color: var(--text-dim); letter-spacing: .02em; }
+/* Bottom-right: only the slide count shows by default; the buttons fan out
+   when you hover the cluster. */
+.controls { display: flex; align-items: center; gap: 10px; }
+.ctl-group {
+  display: flex; align-items: center; gap: 6px;
+  max-width: 0; overflow: hidden; opacity: 0;
+  transform: translateX(8px);
+  transition: max-width .25s ease, opacity .2s ease, transform .25s ease;
+  pointer-events: none;
+}
+.controls:hover .ctl-group { max-width: 280px; opacity: 1; transform: none; pointer-events: auto; }
+.ctl {
+  width: 32px; height: 32px;
+  display: grid; place-items: center;
+  font-size: 18px; line-height: 1;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--surface) 80%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+}
+.ctl:hover { color: var(--text); border-color: var(--border-strong); }
+.ctl.busy { opacity: .5; pointer-events: none; animation: ctl-pulse 1s ease-in-out infinite; }
+@keyframes ctl-pulse { 50% { opacity: .25; } }
+.counter { font: 600 14px var(--mono); color: var(--text-muted); padding: 0 8px; }
+
+.help {
+  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 10px; padding: 10px 16px; font-size: 14px; color: var(--text-muted);
+  z-index: 40;
+}
+.help kbd {
+  font: 600 12px var(--mono); background: var(--surface-2);
+  border: 1px solid var(--border); border-bottom-width: 2px;
+  border-radius: 5px; padding: 1px 6px; margin: 0 2px; color: var(--text);
+}
+
+/* ── Overview / grid ── */
+.deck.overview { overflow: auto; }
+.deck.overview .stage {
+  position: static; transform: none !important;
+  width: 100%; height: 100%;
+  display: flex; flex-wrap: wrap; gap: 22px;
+  align-content: flex-start; justify-content: center;
+  padding: 44px;
+}
+.deck.overview .slide {
+  display: block;               /* drop the flex context so the inner can't shrink */
+  position: relative; inset: auto;
+  flex: 0 0 auto;
+  width: 320px; height: 180px;
+  opacity: 1 !important; visibility: visible !important; pointer-events: auto;
+  transform: none !important;   /* override transition transforms */
+  overflow: hidden; cursor: pointer;
+  border: 2px solid var(--border);
+  border-radius: 10px;
+  transition: border-color .15s;
+}
+.deck.overview .slide:hover { border-color: var(--border-strong); }
+.deck.overview .slide.active { border-color: var(--accent); }
+.deck.overview .slide-inner {
+  flex: none; flex-shrink: 0;
+  width: var(--canvas-w); height: var(--canvas-h);
+  transform: scale(0.25); transform-origin: top left;
+}
+
+/* ── Print / PDF: one page per slide ── */
+html.print, html.print body {
+  overflow: visible;
+  background: #000;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+.print-deck { display: block; }
+.print-deck .slide { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+/* Gradient clip-to-text (-webkit-background-clip: text) doesn't survive PDF /
+   print rendering — the gradient paints as a filled box, so titles show up as
+   black/orange bars. Render headings as a clean solid color when printing. */
+html.print h1 {
+  background: none;
+  -webkit-background-clip: border-box;
+  background-clip: border-box;
+  color: var(--accent);
+  -webkit-text-fill-color: var(--accent);
+}
+.print-bar {
+  position: fixed; top: 16px; right: 16px; z-index: 100;
+  display: flex; gap: 10px; align-items: center;
+}
+.print-bar a, .print-bar button {
+  font: 600 14px var(--font);
+  border-radius: 9px; padding: 9px 16px; cursor: pointer;
+  border: 1px solid var(--border-strong); text-decoration: none;
+  color: var(--text); background: var(--surface);
+}
+.print-bar button { background: var(--accent); color: #fff; border-color: transparent; }
+.print-bar a:hover { border-color: var(--text-dim); }
+.print-bar button:hover { filter: brightness(1.08); }
+@media print { .print-bar { display: none !important; } }
+.print-deck .slide {
+  position: relative; inset: auto;
+  width: var(--canvas-w); height: var(--canvas-h);
+  opacity: 1; visibility: visible;
+  page-break-after: always; break-after: page;
+  background: var(--slide-bg, var(--bg));
+}
+@page { size: 1280px 720px; margin: 0; }
+@media print {
+  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+  html, body { background: #000 !important; }
+  h1 {
+    background: none !important;
+    -webkit-background-clip: border-box !important;
+    background-clip: border-box !important;
+    color: var(--accent) !important;
+    -webkit-text-fill-color: var(--accent) !important;
+  }
+  .chrome, .progress, .help, .print-bar { display: none !important; }
+}

package/bin/cli.js

@@ -0,0 +1,274 @@
+#!/usr/bin/env node
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { dirname, resolve, isAbsolute, relative, basename, extname } from 'node:path';
+import { existsSync, statSync, writeFileSync, readFileSync, mkdirSync, readdirSync } from 'node:fs';
+import { createInterface } from 'node:readline';
+import { findChrome, printUrlToPdf } from '../app/integrations/pdf-export.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const APP_ROOT = resolve(__dirname, '..', 'app');
+
+const VALID_COMMANDS = new Set(['dev', 'build', 'preview', 'export']);
+const VALID_THEMES = new Set(['angular']);
+const DEFAULT_THEME = 'angular';
+const CONFIG_FILENAME = 'mdslides.config.js';
+
+const DEFAULT_CONFIG = `// mdslides deck config — edit to customize the look of your deck.
+// Re-run mdslides after saving to apply changes.
+
+export default {
+  brand: {
+    // Wordmark shown in the bottom-left corner. Set to '' to hide.
+    text: 'mdslides',
+  },
+
+  // Theme. Built-in: 'angular' (default).
+  theme: 'angular',
+
+  // Slide transition: 'fade' | 'slide' | 'none'.
+  transition: 'fade',
+};
+`;
+
+function fail(msg) {
+  console.error(`mdslides: ${msg}`);
+  process.exit(1);
+}
+
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  let cmd = 'dev';
+  let theme = null;
+  let file;
+
+  if (args[0] && VALID_COMMANDS.has(args[0])) {
+    cmd = args.shift();
+  }
+
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === '--theme' || a === '-t') {
+      theme = args[++i];
+      if (!theme) fail('--theme requires a value');
+    } else if (a.startsWith('--theme=')) {
+      theme = a.slice('--theme='.length);
+    } else if (!file) {
+      file = a;
+    } else {
+      fail(`Unexpected argument: ${a}`);
+    }
+  }
+
+  if (!file) {
+    fail('Missing target.\nUsage: mdslides [dev|build|preview|export] [--theme <name>] <folder|file.md>');
+  }
+
+  return { cmd, theme, file };
+}
+
+// The primary model: point at a folder. mdslides looks for an existing deck
+// (slides.md / index.md / any .md), and otherwise scaffolds a new project —
+// asking for a name and dropping a `<name>.md` starter (3 sample slides) you
+// then edit. A direct path to a .md file is also accepted (scaffolded as-is).
+async function resolveDeck(input) {
+  let abs = isAbsolute(input) ? input : resolve(process.cwd(), input);
+
+  if (existsSync(abs) && statSync(abs).isDirectory()) {
+    abs = findDeckInDir(abs) ?? (await scaffoldProject(abs));
+  } else if (!existsSync(abs)) {
+    // A non-existent path: a `.md` file gets scaffolded under that exact name;
+    // anything else is treated as a new project folder to create a deck in.
+    abs = extname(abs).toLowerCase() === '.md'
+      ? scaffoldDeck(abs)
+      : await scaffoldProject(abs);
+  }
+
+  if (!existsSync(abs) || !statSync(abs).isFile()) {
+    fail(`Deck not found: ${abs}`);
+  }
+  return abs;
+}
+
+// Find an existing deck in a folder: prefer slides.md / index.md, then fall
+// back to the first .md file present (so a `chemistry.md` is picked up too).
+function findDeckInDir(dir) {
+  for (const name of ['slides.md', 'index.md']) {
+    const p = resolve(dir, name);
+    if (existsSync(p)) return p;
+  }
+  const md = readdirSync(dir).filter((f) => f.toLowerCase().endsWith('.md')).sort();
+  return md.length ? resolve(dir, md[0]) : null;
+}
+
+// Turn a free-text presentation name into a safe filename stem.
+function slugify(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
+// Ask a question on the terminal, returning the trimmed answer (or `def` if
+// there's no answer / no interactive TTY, e.g. when run in CI).
+function ask(question, def) {
+  if (!process.stdin.isTTY) return Promise.resolve(def);
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((res) => {
+    let done = false;
+    const finish = (val) => { if (!done) { done = true; rl.close(); res(val); } };
+    rl.question(question, (ans) => finish(ans.trim() || def));
+    // EOF (piped/closed stdin) → fall back to the default instead of hanging.
+    rl.on('close', () => finish(def));
+  });
+}
+
+// Scaffold a new project inside `dir`: prompt for a presentation name and
+// write `<name>.md` with the starter deck. The folder's own name is the
+// default, so `mdslides ./chemistry` + Enter → chemistry/chemistry.md.
+async function scaffoldProject(dir) {
+  const fallback = slugify(basename(dir)) || 'slides';
+  const answer = await ask(`Name your presentation (${fallback}): `, fallback);
+  const stem = slugify(answer.replace(/\.md$/i, '')) || fallback;
+  return scaffoldDeck(resolve(dir, `${stem}.md`));
+}
+
+function scaffoldDeck(deckPath) {
+  const templatePath = resolve(__dirname, 'templates', 'slides.md');
+  try {
+    mkdirSync(dirname(deckPath), { recursive: true });
+    const content = readFileSync(templatePath, 'utf8');
+    writeFileSync(deckPath, content, 'utf8');
+    const rel = relative(process.cwd(), deckPath) || deckPath;
+    console.log(`mdslides: created ${rel} (3 sample slides) — edit it and the deck live-reloads`);
+    return deckPath;
+  } catch (err) {
+    fail(`couldn't create a starter deck: ${err.message}`);
+  }
+}
+
+function ensureDefaultConfig(source) {
+  const configPath = resolve(source, CONFIG_FILENAME);
+  if (existsSync(configPath)) return;
+  try {
+    writeFileSync(configPath, DEFAULT_CONFIG, 'utf8');
+    const rel = relative(process.cwd(), configPath) || configPath;
+    console.log(`mdslides: created ${rel} with defaults — edit it to customize`);
+  } catch (err) {
+    console.warn(`mdslides: couldn't write default config: ${err.message}`);
+  }
+}
+
+async function loadUserConfig(source) {
+  const configPath = resolve(source, CONFIG_FILENAME);
+  if (!existsSync(configPath)) return {};
+  try {
+    const mod = await import(pathToFileURL(configPath).href);
+    return mod.default ?? {};
+  } catch (err) {
+    console.warn(`mdslides: couldn't load ${CONFIG_FILENAME}: ${err.message}`);
+    return {};
+  }
+}
+
+const { cmd, theme: cliTheme, file } = parseArgs(process.argv);
+const deckFile = await resolveDeck(file);
+const source = dirname(deckFile);
+
+ensureDefaultConfig(source);
+const userConfig = await loadUserConfig(source);
+
+const theme = cliTheme || userConfig.theme || DEFAULT_THEME;
+if (!VALID_THEMES.has(theme)) fail(`Unknown theme: ${theme}. Available: ${[...VALID_THEMES].join(', ')}`);
+
+process.env.MD_SOURCE = source;
+process.env.MD_FILE = deckFile;
+process.env.MD_THEME = theme;
+
+const astro = await import('astro');
+const outDir = resolve(source, 'dist');
+
+try {
+  if (cmd === 'dev') {
+    await astro.dev({ root: APP_ROOT });
+  } else if (cmd === 'build') {
+    await astro.build({ root: APP_ROOT, outDir });
+    console.log(`\nmdslides: built to ${outDir}`);
+  } else if (cmd === 'preview') {
+    await astro.preview({ root: APP_ROOT, outDir });
+  } else if (cmd === 'export') {
+    await astro.build({ root: APP_ROOT, outDir });
+    await exportPdf({ outDir, deckFile });
+    process.exit(0);
+  }
+} catch (err) {
+  console.error(err);
+  process.exit(1);
+}
+
+// PDF export: serve the built deck on a throwaway local server and print the
+// /print route (one slide per page) to PDF with headless Chrome. Falls back to
+// Playwright if present, then to manual instructions.
+async function exportPdf({ outDir, deckFile }) {
+  const pdfPath = resolve(source, basename(deckFile).replace(/\.md$/i, '') + '.pdf');
+  const printHtml = resolve(outDir, 'print', 'index.html');
+  if (!existsSync(printHtml)) fail('print route was not built — cannot export.');
+
+  const chrome = findChrome();
+  const hasPlaywright = await canImport('playwright');
+
+  if (!chrome && !hasPlaywright) {
+    console.log(
+      '\nmdslides: no headless browser found — skipping automatic PDF.\n' +
+      '  Option A: install Google Chrome (or set CHROME_PATH to a Chromium binary), then re-run export.\n' +
+      '  Option B: npm i -D playwright && npx playwright install chromium, then re-run export.\n' +
+      `  Option C: npx mdslides preview ${relative(process.cwd(), deckFile)}, open /print, and use the browser's "Save as PDF".`
+    );
+    return;
+  }
+
+  // Throwaway preview server on a random free port so /_astro, /images, and
+  // KaTeX fonts resolve over http (file:// would break absolute asset paths).
+  const server = await astro.preview({
+    root: APP_ROOT,
+    outDir,
+    logLevel: 'error',
+    server: { host: 'localhost', port: 0 },
+  });
+  const port = server.port ?? 4321;
+  const url = `http://localhost:${port}/print/`;
+
+  try {
+    if (chrome) {
+      await printUrlToPdf(chrome, url, pdfPath);
+    } else {
+      await playwrightPdf(url, pdfPath);
+    }
+    console.log(`\nmdslides: exported ${relative(process.cwd(), pdfPath)}`);
+  } catch (err) {
+    console.error(`\nmdslides: PDF export failed — ${err.message}`);
+  } finally {
+    // Fire-and-forget: the preview server can keep the event loop alive and
+    // its stop() may not settle, so don't await it — the caller's
+    // process.exit(0) tears everything down cleanly right after.
+    try { server.stop?.(); } catch {}
+  }
+}
+
+async function canImport(spec) {
+  try {
+    await import(spec);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function playwrightPdf(url, pdfPath) {
+  const { chromium } = await import('playwright');
+  const browser = await chromium.launch();
+  try {
+    const page = await browser.newPage();
+    await page.goto(url, { waitUntil: 'networkidle' });
+    await page.pdf({ path: pdfPath, width: '1280px', height: '720px', printBackground: true });
+  } finally {
+    await browser.close();
+  }
+}

package/bin/templates/slides.md

@@ -0,0 +1,22 @@
+# Your presentation title
+
+## A subtitle that frames the talk
+
+**Your Name** · {{date}}
+
+# Your first slide
+
+Every `#` heading starts a new slide — write plain markdown in between.
+
+- Bullets reveal one at a time
+- Press `space` or `→` to advance, `←` to go back
+- Mix in **bold**, *italic*, `code`, and ==highlights==
+
+# Need help?
+
+Drive the deck from the keyboard — `→` `space` next, `←` back, `O` overview,
+`F` fullscreen, `P` PDF, and `?` for the full key list.
+
+- Edit **slides.md** and the deck live-reloads
+- Set the theme, brand and transition in **mdslides.config.js**
+- Full docs → **github.com/eXor404/mdslides**