@pep/term-deck 1.0.31 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # term-deck
 
-A terminal-based presentation tool with a cyberpunk aesthetic. Create beautiful slideshows in your terminal with matrix rain backgrounds, glitch effects, and ASCII art.
+A terminal-based presentation tool with a cyberpunk aesthetic. Create beautiful slideshows in your terminal with matrix rain backgrounds, glitch effects, and ASCII art. Share them on the web or play them anywhere.
 
 ![npm version](https://img.shields.io/npm/v/@pep/term-deck?color=green)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?logo=typescript)
@@ -12,6 +12,8 @@ A terminal-based presentation tool with a cyberpunk aesthetic. Create beautiful
 
 *Matrix rain backgrounds, glitch animations, and ASCII art in your terminal*
 
+**Try it online:** [term-deck-web.vercel.app](https://term-deck-web.vercel.app)
+
 ## Features
 
 - 🌊 **Matrix Rain Background** - Animated katakana/symbol rain effects
@@ -26,6 +28,7 @@ A terminal-based presentation tool with a cyberpunk aesthetic. Create beautiful
 - 🔧 **Fully Themeable** - Create custom themes
 - ⚡ **Beautiful CLI** - Colorful, styled terminal output
 - 📦 **Type-Safe** - Full TypeScript with Zod validation
+- 🌐 **Web Platform** - Share decks online and play from URLs
 
 ## Installation
 
@@ -52,6 +55,9 @@ term-deck present .
 
 # Export to video
 term-deck export . -o presentation.mp4
+
+# Play a shared deck from the web
+npx @pep/term-deck play https://term-deck-web.vercel.app/d/demo
 ```
 
 Output:
@@ -116,6 +122,11 @@ Run `term-deck --help` to see the styled help:
   init <name>          Create a new presentation deck
     -t, --theme <name>    Theme preset (default: matrix)
 
+  play <url>           Play a deck from term-deck web
+    -s, --start <n>       Start at slide number
+    -n, --notes           Show presenter notes
+    -l, --loop            Loop back after last slide
+
 ▶ HOTKEYS:
 
   Space / →   Next slide
@@ -264,6 +275,35 @@ term-deck record . -o presentation.cast
 asciinema play presentation.cast
 ```
 
+## Web Platform
+
+Share your presentations online at [term-deck-web.vercel.app](https://term-deck-web.vercel.app).
+
+### Upload & Share
+
+1. Go to [term-deck-web.vercel.app/upload](https://term-deck-web.vercel.app/upload)
+2. Drag and drop your markdown slides
+3. Get a shareable URL like `term-deck-web.vercel.app/d/abc123`
+
+### Play from URL
+
+Anyone can play a shared deck in their terminal:
+
+```bash
+# Play a shared presentation
+npx @pep/term-deck play https://term-deck-web.vercel.app/d/abc123
+
+# With options
+npx @pep/term-deck play https://term-deck-web.vercel.app/d/abc123 --notes --loop
+```
+
+The web viewer includes:
+- Matrix rain background
+- Keyboard navigation (arrows, space, numbers)
+- Fullscreen mode (F key)
+- Slide list (L key)
+- All transition effects (glitch, fade, typewriter)
+
 ## Themes
 
 term-deck includes built-in themes. Set via `themePreset` in config:

package/dist/bin/term-deck.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
-import { join } from 'path';
+import path2, { join } from 'path';
 import { pathToFileURL } from 'url';
 import { z } from 'zod';
 import matter from 'gray-matter';
-import { mkdir, writeFile, access, rm, readFile, unlink } from 'fs/promises';
+import fs, { mkdir, writeFile, access, rm, readFile, unlink } from 'fs/promises';
 import fg from 'fast-glob';
 import blessed from 'neo-blessed';
 import gradient2 from 'gradient-string';
@@ -11,10 +11,10 @@ import 'yaml';
 import 'deepmerge';
 import { mermaidToAscii as mermaidToAscii$1 } from 'mermaid-ascii';
 import figlet from 'figlet';
-import { createReadStream, createWriteStream } from 'fs';
+import { createWriteStream } from 'fs';
 import { Command } from 'commander';
 import { intro, log, outro, spinner } from '@clack/prompts';
-import { tmpdir } from 'os';
+import os, { tmpdir } from 'os';
 import { execa } from 'execa';
 import pc from 'picocolors';
 
@@ -181,8 +181,8 @@ var init_config = __esm({
 // src/schemas/validation.ts
 function formatZodError(error, context) {
   const issues = error.issues.map((issue) => {
-    const path2 = issue.path.join(".");
-    return `  - ${path2 ? `${path2}: ` : ""}${issue.message}`;
+    const path3 = issue.path.join(".");
+    return `  - ${path3 ? `${path3}: ` : ""}${issue.message}`;
   });
   return `Invalid ${context}:
 ${issues.join("\n")}`;
@@ -568,10 +568,10 @@ var init_theme_errors = __esm({
        * @param themeName - Optional name of the theme that caused the error
        * @param path - Optional path to the theme file or package
        */
-      constructor(message, themeName, path2) {
+      constructor(message, themeName, path3) {
         super(message);
         this.themeName = themeName;
-        this.path = path2;
+        this.path = path3;
         this.name = "ThemeError";
       }
     };
@@ -1055,7 +1055,6 @@ async function createNotesWindow(ttyPath) {
   if (!ttyPath) {
     throw new Error(getMissingTtyError());
   }
-  const blessed5 = (await import('neo-blessed')).default;
   try {
     await access(ttyPath);
   } catch {
@@ -1063,92 +1062,85 @@ async function createNotesWindow(ttyPath) {
 
 Make sure the path is correct and the terminal is open.`);
   }
-  const input = createReadStream(ttyPath);
   const output = createWriteStream(ttyPath);
   await new Promise((resolve, reject) => {
-    let ready = 0;
-    const checkReady = () => {
-      ready++;
-      if (ready === 2) resolve();
-    };
-    input.once("open", checkReady);
-    output.once("open", checkReady);
-    input.once("error", reject);
+    output.once("open", resolve);
     output.once("error", reject);
   });
-  const screen = blessed5.screen({
-    smartCSR: true,
-    title: "term-deck notes",
-    fullUnicode: true,
-    input,
-    output,
-    terminal: "xterm-256color",
-    forceUnicode: true
-  });
-  const contentBox = blessed5.box({
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    tags: true,
-    padding: 2,
-    style: {
-      fg: "#ffffff",
-      bg: "#1a1a1a"
-    }
-  });
-  screen.append(contentBox);
-  screen.render();
+  output.write(ANSI.CLEAR);
+  output.write(`${ANSI.BG_DARK}${ANSI.GREEN}${ANSI.BOLD}term-deck notes${ANSI.RESET}
+
+`);
+  output.write(`${ANSI.GRAY}Waiting for presentation to start...${ANSI.RESET}
+`);
   return {
-    screen,
-    contentBox,
+    output,
     tty: ttyPath
   };
 }
 function updateNotesWindow(notesWindow, currentSlide, nextSlide2, currentIndex, totalSlides) {
-  const { contentBox, screen } = notesWindow;
-  let content = "";
-  content += `{bold}Slide ${currentIndex + 1} of ${totalSlides}{/bold}
-`;
-  content += `{gray-fg}${currentSlide.frontmatter.title}{/}
-`;
-  content += "\n";
-  content += "\u2500".repeat(50) + "\n";
-  content += "\n";
+  const { output } = notesWindow;
+  const divider = "\u2500".repeat(50);
+  output.write(ANSI.CLEAR);
+  output.write(`${ANSI.GREEN}${ANSI.BOLD}term-deck notes${ANSI.RESET}
+
+`);
+  output.write(`${ANSI.CYAN}${ANSI.BOLD}Slide ${currentIndex + 1} of ${totalSlides}${ANSI.RESET}
+`);
+  output.write(`${ANSI.GRAY}${currentSlide.frontmatter.title}${ANSI.RESET}
+`);
+  output.write("\n");
+  output.write(`${ANSI.GRAY}${divider}${ANSI.RESET}
+`);
+  output.write("\n");
   if (currentSlide.notes) {
-    content += "{bold}PRESENTER NOTES:{/bold}\n\n";
-    content += currentSlide.notes + "\n";
+    output.write(`${ANSI.YELLOW}${ANSI.BOLD}PRESENTER NOTES:${ANSI.RESET}
+
+`);
+    output.write(`${ANSI.WHITE}${currentSlide.notes}${ANSI.RESET}
+`);
   } else {
-    content += "{gray-fg}No notes for this slide{/}\n";
+    output.write(`${ANSI.GRAY}No notes for this slide${ANSI.RESET}
+`);
   }
-  content += "\n";
-  content += "\u2500".repeat(50) + "\n";
-  content += "\n";
+  output.write("\n");
+  output.write(`${ANSI.GRAY}${divider}${ANSI.RESET}
+`);
+  output.write("\n");
   if (nextSlide2) {
-    content += `{bold}NEXT:{/bold} "${nextSlide2.frontmatter.title}"
-`;
+    output.write(`${ANSI.CYAN}${ANSI.BOLD}NEXT:${ANSI.RESET} ${ANSI.WHITE}"${nextSlide2.frontmatter.title}"${ANSI.RESET}
+`);
   } else {
-    content += "{gray-fg}Last slide{/}\n";
+    output.write(`${ANSI.GRAY}Last slide${ANSI.RESET}
+`);
   }
-  contentBox.setContent(content);
-  screen.render();
-}
-function toggleNotesVisibility(notesWindow) {
-  const { contentBox, screen } = notesWindow;
-  contentBox.toggle();
-  screen.render();
 }
 function destroyNotesWindow(notesWindow) {
   try {
-    if (notesWindow.screen && notesWindow.screen.program) {
-      notesWindow.screen.destroy();
-    }
+    notesWindow.output.write(ANSI.CLEAR);
+    notesWindow.output.write(`${ANSI.GRAY}Presentation ended.${ANSI.RESET}
+`);
+    notesWindow.output.end();
   } catch {
   }
 }
+var ANSI;
 var init_notes_window = __esm({
   "src/presenter/notes-window.ts"() {
     init_esm_shims();
+    ANSI = {
+      CLEAR: "\x1B[2J\x1B[H",
+      // Clear screen and move cursor to top
+      BOLD: "\x1B[1m",
+      DIM: "\x1B[2m",
+      RESET: "\x1B[0m",
+      GREEN: "\x1B[32m",
+      CYAN: "\x1B[36m",
+      YELLOW: "\x1B[33m",
+      WHITE: "\x1B[37m",
+      GRAY: "\x1B[90m",
+      BG_DARK: "\x1B[48;5;234m"
+    };
   }
 });
 
@@ -1267,11 +1259,6 @@ function setupControls(presenter) {
   screen.key(["l"], () => {
     showSlideList(presenter);
   });
-  screen.key(["N"], () => {
-    if (presenter.notesWindow) {
-      toggleNotesVisibility(presenter.notesWindow);
-    }
-  });
 }
 function showSlideList(presenter) {
   const { screen } = presenter.renderer;
@@ -1312,7 +1299,6 @@ var init_keyboard_controls = __esm({
   "src/presenter/keyboard-controls.ts"() {
     init_esm_shims();
     init_navigation();
-    init_notes_window();
   }
 });
 
@@ -1417,7 +1403,7 @@ var init_main = __esm({
 init_esm_shims();
 
 // package.json
-var version = "1.0.31";
+var version = "1.1.0";
 
 // src/cli/commands/present.ts
 init_esm_shims();
@@ -1979,6 +1965,103 @@ term-deck export . -o ${name}.gif
   await writeFile(join(deckDir, "README.md"), readme);
 }
 
+// src/cli/commands/play.ts
+init_esm_shims();
+init_main();
+async function fetchDeck(url) {
+  let apiUrl;
+  try {
+    const urlObj = new URL(url);
+    if (urlObj.pathname.startsWith("/d/")) {
+      const id = urlObj.pathname.split("/d/")[1];
+      apiUrl = `${urlObj.origin}/api/deck/${id}/raw`;
+    } else if (urlObj.pathname.startsWith("/api/deck/")) {
+      apiUrl = url;
+    } else {
+      throw new Error("Invalid deck URL format");
+    }
+  } catch {
+    apiUrl = `https://term-deck-web.vercel.app/api/deck/${url}/raw`;
+  }
+  const response = await fetch(apiUrl);
+  if (!response.ok) {
+    if (response.status === 404) {
+      throw new Error("Deck not found");
+    }
+    throw new Error(`Failed to fetch deck: ${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+async function writeTempSlides(deck) {
+  const tempDir = await fs.mkdtemp(path2.join(os.tmpdir(), "term-deck-"));
+  for (const slide of deck.slides) {
+    const frontmatter = Object.entries(slide.frontmatter).filter(([, value]) => value !== void 0).map(([key, value]) => {
+      if (typeof value === "string") {
+        return `${key}: ${value}`;
+      }
+      if (Array.isArray(value)) {
+        return `${key}:
+${value.map((v) => `  - ${v}`).join("\n")}`;
+      }
+      return `${key}: ${JSON.stringify(value)}`;
+    }).join("\n");
+    let content = `---
+${frontmatter}
+---
+
+${slide.body}`;
+    if (slide.notes) {
+      content += `
+
+<!-- notes -->
+${slide.notes}
+<!-- /notes -->`;
+    }
+    const filename = `${String(slide.index + 1).padStart(2, "0")}-${slide.frontmatter.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}.md`;
+    await fs.writeFile(path2.join(tempDir, filename), content, "utf-8");
+  }
+  if (deck.config.theme) {
+    const themeContent = `import { defineTheme } from '@pep/term-deck'
+
+export default defineTheme(${JSON.stringify(deck.config.theme, null, 2)})
+`;
+    await fs.writeFile(path2.join(tempDir, "theme.ts"), themeContent, "utf-8");
+  }
+  return tempDir;
+}
+async function cleanupTempDir(tempDir) {
+  try {
+    await fs.rm(tempDir, { recursive: true });
+  } catch {
+  }
+}
+var playCommand = new Command("play").description("Play a presentation from a term-deck web URL").argument("<url>", "Deck URL (e.g., https://termdeck.vercel.app/d/abc123 or just abc123)").option("-s, --start <n>", "Start at slide number", "0").option("-n, --notes", "Show presenter notes in separate terminal").option("--notes-tty <path>", "TTY device for notes window").option("-l, --loop", "Loop back to first slide after last").action(async (url, options) => {
+  let tempDir = null;
+  try {
+    console.log("Fetching deck...");
+    const deck = await fetchDeck(url);
+    console.log(`Playing: ${deck.config.title || "Untitled Deck"}`);
+    if (deck.config.author) {
+      console.log(`By: ${deck.config.author}`);
+    }
+    console.log(`Slides: ${deck.slides.length}
+`);
+    tempDir = await writeTempSlides(deck);
+    await present(tempDir, {
+      startSlide: Number.parseInt(options.start, 10),
+      showNotes: options.notes,
+      notesTty: options.notesTty,
+      loop: options.loop
+    });
+  } catch (error) {
+    handleError(error);
+  } finally {
+    if (tempDir) {
+      await cleanupTempDir(tempDir);
+    }
+  }
+});
+
 // src/cli/help.ts
 init_esm_shims();
 function showHelp() {
@@ -2022,6 +2105,11 @@ function showHelp() {
   console.log(pc.green("  init") + pc.dim(" <name>          ") + pc.white("Create a new presentation deck"));
   console.log(pc.dim("    -t, --theme <name>    ") + pc.white("Theme preset (default: matrix)"));
   console.log("");
+  console.log(pc.green("  play") + pc.dim(" <url>           ") + pc.white("Play a deck from term-deck web"));
+  console.log(pc.dim("    -s, --start <n>       ") + pc.white("Start at slide number"));
+  console.log(pc.dim("    -n, --notes           ") + pc.white("Show presenter notes"));
+  console.log(pc.dim("    -l, --loop            ") + pc.white("Loop back after last slide"));
+  console.log("");
   console.log(pc.bold(pc.cyan("\u25B6 HOTKEYS:")));
   console.log("");
   console.log(pc.dim("  Space / \u2192   ") + pc.white("Next slide"));
@@ -2058,7 +2146,7 @@ function showVersion(version2) {
 // bin/term-deck.ts
 var args = process.argv.slice(2);
 if (args.includes("-h") || args.includes("--help") || args.length === 0) {
-  if (!args.some((arg) => ["present", "export", "init"].includes(arg))) {
+  if (!args.some((arg) => ["present", "export", "init", "play"].includes(arg))) {
     showHelp();
     process.exit(0);
   }
@@ -2072,6 +2160,7 @@ program.name("term-deck").description("Terminal presentation tool with a cyberpu
 program.addCommand(presentCommand);
 program.addCommand(exportCommand);
 program.addCommand(initCommand);
+program.addCommand(playCommand);
 program.argument("[dir]", "Slides directory to present").action(async (dir) => {
   if (dir) {
     try {