slide-cli 1.0.0

package/dist/scripts/build.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+// Cross-platform build script (works on Windows, macOS, Linux)
+// Run with: bun scripts/build.js   OR   node scripts/build.js
+
+import { cpSync, mkdirSync, copyFileSync, rmSync, existsSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, "..");
+const dist = join(root, "dist");
+
+// Clean dist
+if (existsSync(dist)) {
+  rmSync(dist, { recursive: true, force: true });
+  console.log("🗑  Cleaned dist/");
+}
+mkdirSync(dist, { recursive: true });
+
+// Bundle TypeScript entry point
+console.log("⚙️  Bundling src/index.ts …");
+execSync(
+  "bun build ./src/index.ts --outdir ./dist --target node --format esm",
+  { cwd: root, stdio: "inherit" }
+);
+
+// Copy static assets
+const copies = [
+  ["templates", "dist/templates"],
+  ["scripts",   "dist/scripts"],
+];
+for (const [src, dest] of copies) {
+  cpSync(join(root, src), join(root, dest), { recursive: true });
+  console.log(`📁  Copied ${src}/ → ${dest}/`);
+}
+
+copyFileSync(join(root, "TEMPLATE_GUIDE.md"), join(root, "dist", "TEMPLATE_GUIDE.md"));
+console.log("📄  Copied TEMPLATE_GUIDE.md → dist/");
+
+console.log("\n✅  Build complete → dist/");

package/dist/scripts/download-fonts.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+/**
+ * scripts/download-fonts.js
+ *
+ * Downloads Noto CJK fonts for unicode support (CJK, Korean, Japanese, French, etc.)
+ * These fonts are too large for npm packages (~20MB each) so we fetch them directly
+ * from the Noto project's GitHub releases.
+ *
+ * Fonts are stored in ./fonts/ and are gitignored.
+ * Re-run manually with: node scripts/download-fonts.js
+ */
+
+import { createWriteStream, mkdirSync, existsSync, statSync } from "fs";
+import { get as httpsGet } from "https";
+import { get as httpGet } from "http";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const FONTS_DIR = join(__dirname, "..", "fonts");
+
+const FONTS = [
+  {
+    name: "NotoSansCJK-Bold",
+    filename: "NotoSansCJK-Bold.ttc",
+    // Google Fonts CDN via GitHub Noto CJK releases
+    url: "https://github.com/notofonts/noto-cjk/raw/main/Sans/OTC/NotoSansCJK-Bold.ttc",
+    minSize: 15_000_000, // ~20MB — if smaller, download failed
+    description: "Noto Sans CJK Bold (Latin, French, CJK, Korean, Japanese)",
+  },
+  {
+    name: "NotoSansCJK-Black",
+    filename: "NotoSansCJK-Black.ttc",
+    url: "https://github.com/notofonts/noto-cjk/raw/main/Sans/OTC/NotoSansCJK-Black.ttc",
+    minSize: 15_000_000,
+    description: "Noto Sans CJK Black (display titles, weight 900)",
+  },
+  {
+    name: "NotoSerifCJK-Bold",
+    filename: "NotoSerifCJK-Bold.ttc",
+    url: "https://github.com/notofonts/noto-cjk/raw/main/Serif/OTC/NotoSerifCJK-Bold.ttc",
+    minSize: 15_000_000,
+    description: "Noto Serif CJK Bold (serif quotes, headings)",
+  },
+];
+
+mkdirSync(FONTS_DIR, { recursive: true });
+
+function download(url, destPath, description) {
+  return new Promise((resolve, reject) => {
+    // Skip if already present and large enough
+    if (existsSync(destPath)) {
+      const size = statSync(destPath).size;
+      const font = FONTS.find((f) => destPath.endsWith(f.filename));
+      if (font && size >= font.minSize) {
+        console.log(`  ✓ ${description} (already downloaded)`);
+        resolve();
+        return;
+      }
+    }
+
+    console.log(`  ↓ Downloading ${description}...`);
+    const file = createWriteStream(destPath);
+    const getter = url.startsWith("https") ? httpsGet : httpGet;
+
+    const request = getter(url, { headers: { "User-Agent": "slide-cli/1.0" } }, (res) => {
+      // Follow redirects (GitHub uses 302)
+      if (res.statusCode === 301 || res.statusCode === 302 || res.statusCode === 307) {
+        file.close();
+        download(res.headers.location, destPath, description).then(resolve).catch(reject);
+        return;
+      }
+      if (res.statusCode !== 200) {
+        file.close();
+        reject(new Error(`HTTP ${res.statusCode} for ${url}`));
+        return;
+      }
+      res.pipe(file);
+      file.on("finish", () => {
+        file.close();
+        const size = statSync(destPath).size;
+        console.log(`  ✓ ${description} (${(size / 1_000_000).toFixed(1)}MB)`);
+        resolve();
+      });
+    });
+
+    request.on("error", (err) => {
+      file.close();
+      reject(err);
+    });
+  });
+}
+
+async function main() {
+  console.log("\nslide-cli: Setting up unicode fonts (Noto CJK)...");
+  console.log(`  Destination: ${FONTS_DIR}\n`);
+
+  const failures = [];
+
+  for (const font of FONTS) {
+    const destPath = join(FONTS_DIR, font.filename);
+    try {
+      await download(font.url, destPath, font.description);
+    } catch (err) {
+      failures.push({ font, err });
+      console.warn(`  ⚠ Could not download ${font.name}: ${err.message}`);
+      console.warn(`    Slides with CJK/accented text will fall back to system fonts.`);
+    }
+  }
+
+  if (failures.length === 0) {
+    console.log("\n  ✓ All unicode fonts ready.\n");
+  } else {
+    console.log(`\n  ⚠ ${failures.length} font(s) could not be downloaded.`);
+    console.log(`    Re-run: node scripts/download-fonts.js\n`);
+  }
+}
+
+main().catch((err) => {
+  console.error("Font setup failed:", err.message);
+  // Non-zero exit would break bun install, so we warn and continue
+  process.exit(0);
+});

package/dist/templates/bold-title/sample.json

@@ -0,0 +1,57 @@
+{
+  "_template": "bold-title",
+  "_description": "High-impact editorial card with a gradient background, subtle grid overlay, and a giant Bebas Neue display title. Best for short punchy titles (1–3 words). Each slide can have its own gradient colors and highlight accent.",
+  "_slots": {
+    "title":     "REQUIRED — the bold display title. Shown at 192px. Use text naturally — text-wrap:balance distributes lines evenly so any length looks intentional. Put context or explanation in subtitle, not in the title itself.",
+    "subtitle":  "optional — one sentence of supporting text below the title",
+    "eyebrow":   "optional — small uppercase label with a decorative line shown above the title",
+    "colorA":    "optional — hex color for top of the gradient background (default: #1a0533)",
+    "colorB":    "optional — hex color for bottom of the gradient background (default: #0d1f3c)",
+    "highlight": "optional — hex accent color used for the eyebrow text, dot, and rule (default: #ff6b35)",
+    "image":     "optional — path or https:// URL. Used as a full-bleed background image behind the gradient. Dark, atmospheric photos work best (landscapes, textures, cityscapes)."
+  },
+  "title": "The Future Deck",
+  "slides": [
+    {
+      "layout": "bold-title",
+      "eyebrow": "The future is",
+      "title": "NOW",
+      "subtitle": "Everything you thought would take a decade is happening this year.",
+      "colorA": "#0d0221",
+      "colorB": "#1a0f2e",
+      "highlight": "#ff6b35",
+      "cta": "Stay curious →"
+    },
+    {
+      "layout": "bold-title",
+      "eyebrow": "Rule No. 2",
+      "title": "SHIP FAST",
+      "subtitle": "A good product shipped today beats a perfect product shipped never.",
+      "colorA": "#0a1628",
+      "colorB": "#051020",
+      "highlight": "#00d4ff",
+      "cta": "Move fast, learn faster"
+    },
+    {
+      "layout": "bold-title",
+      "eyebrow": "The bottom line",
+      "title": "BUILD",
+      "subtitle": "Ideas are worthless without execution. Start before you're ready.",
+      "colorA": "#1a0a00",
+      "colorB": "#0d1a00",
+      "highlight": "#f5c400",
+      "cta": "Start today"
+    },
+    {
+      "layout": "bold-title",
+      "eyebrow": "With image",
+      "title": "RISE",
+      "subtitle": "Great things are built one day at a time.",
+      "colorA": "#0a0a14",
+      "colorB": "#141428",
+      "highlight": "#a78bfa",
+      "image": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1080",
+      "cta": "Keep climbing"
+    }
+  ]
+}

package/dist/templates/bold-title/template.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<style>
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  html, body {
+    width: 1080px;
+    height: 1920px;
+    overflow: hidden;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  /* ── Full-bleed background image (optional, behind everything) ── */
+  .bg-image {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+  }
+  .bg-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  /* Darken image so text always stays readable */
+  .bg-image::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.52);
+  }
+
+  /* ── Gradient layer (on top of image if present) ── */
+  .gradient-layer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(160deg, {{colorA}} 0%, {{colorB}} 100%);
+    z-index: 1;
+    /* When image is present, blend the gradient on top */
+    mix-blend-mode: multiply;
+  }
+  body.has-image .gradient-layer {
+    opacity: 0.82;
+  }
+
+  /* Grid overlay */
+  .grid-layer {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 80px 80px;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  /* Radial glow */
+  .glow-layer {
+    position: absolute;
+    top: -200px; left: -200px;
+    width: 900px; height: 900px;
+    background: radial-gradient(circle, {{highlight}}22 0%, transparent 70%);
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  /* All content sits above the background layers */
+  .top-bar, .main, .bottom { position: relative; z-index: 3; }
+
+  .top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 72px 88px 0;
+  }
+
+  .brand-dot {
+    width: 24px; height: 24px;
+    border-radius: 50%;
+    background: {{highlight}};
+  }
+
+  /* counter: bumped opacity for legibility */
+  .slide-counter {
+    font-size: 30px; font-weight: 300;
+    color: rgba(255,255,255,0.45);
+    letter-spacing: 0.12em;
+  }
+
+  .main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 88px;
+  }
+
+  .eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 52px;
+  }
+  .eyebrow-line { width: 60px; height: 3px; background: {{highlight}}; }
+  /* eyebrow: bigger and heavier for mobile legibility */
+  .eyebrow-text {
+    font-family: 'Outfit', 'Noto Sans CJK', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 36px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: {{highlight}};
+  }
+
+  .title {
+    font-family: 'Bebas Neue', 'Noto Sans CJK', Impact, 'Arial Narrow', sans-serif;
+    font-size: 176px;
+    font-weight: 900;
+    line-height: 1.0;
+    color: #ffffff;
+    margin-bottom: 60px;
+    text-wrap: pretty;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+  }
+
+  /* subtitle: higher opacity, slightly larger */
+  .subtitle {
+    font-family: 'Outfit', 'Noto Sans CJK', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 50px;
+    font-weight: 700;
+    line-height: 1.5;
+    color: rgba(255,255,255,0.72);
+    max-width: 840px;
+    text-wrap: balance;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+  }
+
+  .bottom { padding: 0 88px 80px; }
+
+  .bottom-rule {
+    width: 100%; height: 1px;
+    background: linear-gradient(90deg, {{highlight}}88, transparent);
+    margin-bottom: 48px;
+  }
+
+  /* cta: larger and full opacity */
+  .cta-text {
+    font-size: 40px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: rgba(255,255,255,0.92);
+  }
+
+  .bg-num {
+    position: absolute;
+    right: -20px; bottom: 100px;
+    font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
+    font-size: 600px; line-height: 1;
+    color: rgba(255,255,255,0.03);
+    pointer-events: none;
+    z-index: 3;
+    user-select: none;
+  }
+</style>
+</head>
+<body class="{{#if image}}has-image{{/if}}">
+
+  {{#if image}}
+  <div class="bg-image"><img src="{{image}}" alt=""></div>
+  {{/if}}
+
+  <div class="gradient-layer"></div>
+  <div class="grid-layer"></div>
+  <div class="glow-layer"></div>
+
+  <div class="top-bar">
+    <div class="brand-dot"></div>
+    <div class="slide-counter">{{slideIndex}} / {{totalSlides}}</div>
+  </div>
+
+  <div class="main">
+    {{#if eyebrow}}
+    <div class="eyebrow">
+      <div class="eyebrow-line"></div>
+      <span class="eyebrow-text">{{eyebrow}}</span>
+    </div>
+    {{/if}}
+
+    <h1 class="title">{{title}}</h1>
+
+    {{#if subtitle}}
+    <p class="subtitle">{{subtitle}}</p>
+    {{/if}}
+  </div>
+
+  <div class="bottom">
+    <div class="bottom-rule"></div>
+    {{#if cta}}<div class="cta-text">{{cta}}</div>{{/if}}
+  </div>
+
+  <div class="bg-num">{{slideIndex}}</div>
+</body>
+</html>

package/dist/templates/bold-title/template.json

@@ -0,0 +1,76 @@
+{
+  "name": "Bold Title",
+  "id": "bold-title",
+  "version": "1.1.0",
+  "description": "High-contrast editorial card with large bold title and gradient background",
+  "author": "slide-cli",
+  "aspectRatio": "9:16",
+  "width": 1080,
+  "height": 1920,
+  "tags": ["bold", "editorial", "gradient", "impact"],
+  "slots": [
+    {
+      "id": "title",
+      "type": "text",
+      "label": "Title",
+      "required": true,
+      "description": "Main bold display title at 192px. text-wrap:balance keeps multi-line titles visually even. Context and detail belong in subtitle, not here."
+    },
+    {
+      "id": "subtitle",
+      "type": "text",
+      "label": "Subtitle",
+      "required": false,
+      "default": "",
+      "description": "Supporting line below the title"
+    },
+    {
+      "id": "eyebrow",
+      "type": "text",
+      "label": "Eyebrow text",
+      "required": false,
+      "default": "",
+      "description": "Small text above the title"
+    },
+    {
+      "id": "colorA",
+      "type": "color",
+      "label": "Gradient start",
+      "required": false,
+      "default": "#1a0533",
+      "description": "Top gradient color"
+    },
+    {
+      "id": "colorB",
+      "type": "color",
+      "label": "Gradient end",
+      "required": false,
+      "default": "#0d1f3c",
+      "description": "Bottom gradient color"
+    },
+    {
+      "id": "highlight",
+      "type": "color",
+      "label": "Highlight color",
+      "required": false,
+      "default": "#ff6b35",
+      "description": "Accent color for eyebrow and decorations"
+    },
+    {
+      "id": "image",
+      "type": "image",
+      "label": "Background image",
+      "required": false,
+      "default": "",
+      "description": "Optional full-bleed background image layered behind the gradient. Dark atmospheric photos work best. File path or https:// URL."
+    },
+    {
+      "id": "cta",
+      "type": "text",
+      "label": "CTA / bottom text",
+      "required": false,
+      "default": "",
+      "description": "Call-to-action or bottom tagline"
+    }
+  ]
+}

package/dist/templates/bold-title-wide/sample.json

@@ -0,0 +1,58 @@
+{
+  "_template": "bold-title-wide",
+  "_description": "High-impact editorial card with a gradient background — 16:9 widescreen. Title sits on the left, subtitle on the right in a two-column layout. Best for short punchy titles (1–4 words).",
+  "_slots": {
+    "title":     "REQUIRED — the bold display title. Shown at 148px. Keep it punchy. Put context in subtitle.",
+    "subtitle":  "optional — one sentence of supporting text shown to the right of the title",
+    "eyebrow":   "optional — small uppercase label with a decorative line shown above the title",
+    "colorA":    "optional — hex color for left of the gradient background (default: #1a0533)",
+    "colorB":    "optional — hex color for right of the gradient background (default: #0d1f3c)",
+    "highlight": "optional — hex accent color used for the eyebrow text, dot, and rule (default: #ff6b35)",
+    "image":     "optional — path or https:// URL. Used as a full-bleed background image behind the gradient.",
+    "cta":       "optional — call-to-action text shown at the bottom"
+  },
+  "title": "The Future Deck",
+  "slides": [
+    {
+      "layout": "bold-title-wide",
+      "eyebrow": "The future is",
+      "title": "NOW",
+      "subtitle": "Everything you thought would take a decade is happening this year.",
+      "colorA": "#0d0221",
+      "colorB": "#1a0f2e",
+      "highlight": "#ff6b35",
+      "cta": "Stay curious →"
+    },
+    {
+      "layout": "bold-title-wide",
+      "eyebrow": "Rule No. 2",
+      "title": "SHIP FAST",
+      "subtitle": "A good product shipped today beats a perfect product shipped never.",
+      "colorA": "#0a1628",
+      "colorB": "#051020",
+      "highlight": "#00d4ff",
+      "cta": "Move fast, learn faster"
+    },
+    {
+      "layout": "bold-title-wide",
+      "eyebrow": "The bottom line",
+      "title": "BUILD",
+      "subtitle": "Ideas are worthless without execution. Start before you're ready.",
+      "colorA": "#1a0a00",
+      "colorB": "#0d1a00",
+      "highlight": "#f5c400",
+      "cta": "Start today"
+    },
+    {
+      "layout": "bold-title-wide",
+      "eyebrow": "With image",
+      "title": "RISE",
+      "subtitle": "Great things are built one day at a time.",
+      "colorA": "#0a0a14",
+      "colorB": "#141428",
+      "highlight": "#a78bfa",
+      "image": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920",
+      "cta": "Keep climbing"
+    }
+  ]
+}