@pep/term-deck 1.0.32 → 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';
@@ -14,7 +14,7 @@ import figlet from 'figlet';
 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";
       }
     };
@@ -1403,7 +1403,7 @@ var init_main = __esm({
 init_esm_shims();
 
 // package.json
-var version = "1.0.32";
+var version = "1.1.0";
 
 // src/cli/commands/present.ts
 init_esm_shims();
@@ -1965,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() {
@@ -2008,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"));
@@ -2044,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);
   }
@@ -2058,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 {