npm - slide-cli - Versions diffs - 1.0.0 - Mend

slide-cli 1.0.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 (45) hide show

package/README.md +184 -0
package/TEMPLATE_GUIDE.md +661 -0
package/dist/TEMPLATE_GUIDE.md +661 -0
package/dist/index.js +277058 -0
package/dist/scripts/build.js +41 -0
package/dist/scripts/download-fonts.js +123 -0
package/dist/templates/bold-title/sample.json +57 -0
package/dist/templates/bold-title/template.html +212 -0
package/dist/templates/bold-title/template.json +76 -0
package/dist/templates/bold-title-wide/sample.json +58 -0
package/dist/templates/bold-title-wide/template.html +224 -0
package/dist/templates/bold-title-wide/template.json +76 -0
package/dist/templates/minimal/sample.json +53 -0
package/dist/templates/minimal/template.html +183 -0
package/dist/templates/minimal/template.json +76 -0
package/dist/templates/minimal-wide/sample.json +53 -0
package/dist/templates/minimal-wide/template.html +208 -0
package/dist/templates/minimal-wide/template.json +76 -0
package/dist/templates/quote-card/sample.json +57 -0
package/dist/templates/quote-card/template.html +203 -0
package/dist/templates/quote-card/template.json +76 -0
package/dist/templates/quote-card-wide/sample.json +58 -0
package/dist/templates/quote-card-wide/template.html +215 -0
package/dist/templates/quote-card-wide/template.json +76 -0
package/package.json +66 -0
package/scripts/build.js +41 -0
package/scripts/download-fonts.js +123 -0
package/templates/bold-title/sample.json +57 -0
package/templates/bold-title/template.html +212 -0
package/templates/bold-title/template.json +76 -0
package/templates/bold-title-wide/sample.json +58 -0
package/templates/bold-title-wide/template.html +224 -0
package/templates/bold-title-wide/template.json +76 -0
package/templates/minimal/sample.json +53 -0
package/templates/minimal/template.html +183 -0
package/templates/minimal/template.json +76 -0
package/templates/minimal-wide/sample.json +53 -0
package/templates/minimal-wide/template.html +208 -0
package/templates/minimal-wide/template.json +76 -0
package/templates/quote-card/sample.json +57 -0
package/templates/quote-card/template.html +203 -0
package/templates/quote-card/template.json +76 -0
package/templates/quote-card-wide/sample.json +58 -0
package/templates/quote-card-wide/template.html +215 -0
package/templates/quote-card-wide/template.json +76 -0

package/dist/templates/quote-card-wide/template.html ADDED Viewed

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    width: 1920px;
+    height: 1080px;
+    overflow: hidden;
+    background: {{bg}};
+  }
+  body {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
+  }
+  /* Paper texture */
+  body::before {
+    content: '';
+    position: absolute; inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+    pointer-events: none; mix-blend-mode: multiply;
+  }
+  .header {
+    padding: 52px 96px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative; z-index: 1;
+  }
+  .topic {
+    font-size: 22px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: {{accent}};
+  }
+  .header-num {
+    font-size: 22px; font-weight: 300;
+    color: {{ink}}; opacity: 0.35; letter-spacing: 0.1em;
+  }
+  .top-rule {
+    margin: 36px 96px 0;
+    height: 1px;
+    background: linear-gradient(90deg, {{accent}}, transparent);
+    opacity: 0.4;
+  }
+  /* ── Main: two-column layout for wide ── */
+  .main {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    padding: 0 96px;
+    position: relative; z-index: 1;
+    gap: 80px;
+  }
+  /* Left column: the quote itself */
+  .quote-col {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+  }
+  /* Right column: attribution */
+  .attr-col {
+    flex: 0 0 480px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-left: 1px solid {{ink}};
+    border-left-color: {{ink}};
+    opacity-reference: 0.08;
+    padding-left: 64px;
+  }
+  /* SVG quotation mark */
+  .open-quote {
+    position: absolute;
+    top: -10px; left: -24px;
+    pointer-events: none;
+    opacity: 0.10;
+    width: 200px; height: 170px;
+  }
+  .quote-text {
+    font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
+    font-size: 64px; font-weight: 700; font-style: italic;
+    line-height: 1.3; letter-spacing: -0.01em;
+    color: {{ink}};
+    position: relative; z-index: 1;
+    text-wrap: balance;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+  }
+  /* ── Attribution ── */
+  .portrait {
+    flex: 0 0 110px;
+    width: 110px; height: 110px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid {{accent}};
+    opacity: 0.92;
+    margin-bottom: 28px;
+  }
+  .portrait img {
+    width: 100%; height: 100%;
+    object-fit: cover; object-position: center top;
+    display: block;
+  }
+  .attribution-text { display: flex; flex-direction: column; gap: 10px; }
+  .attr-rule { width: 52px; height: 3px; background: {{accent}}; margin-bottom: 4px; }
+  .author-name {
+    font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
+    font-size: 36px; font-weight: 700;
+    color: {{ink}}; letter-spacing: 0.01em;
+  }
+  .author-role {
+    font-size: 26px; font-weight: 400;
+    color: {{ink}}; opacity: 0.6; letter-spacing: 0.04em;
+  }
+  .footer {
+    padding: 0 96px 44px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    position: relative; z-index: 1;
+  }
+  .bottom-rule {
+    flex: 1; height: 1px;
+    background: {{ink}}; opacity: 0.1;
+    margin-right: 40px; margin-bottom: 8px;
+  }
+  .slide-info {
+    font-size: 22px; font-weight: 400;
+    color: {{ink}}; opacity: 0.38;
+    letter-spacing: 0.1em; white-space: nowrap;
+  }
+  .corner-br {
+    position: absolute; bottom: 52px; right: 80px;
+    width: 48px; height: 48px;
+    border-right: 2px solid {{accent}};
+    border-bottom: 2px solid {{accent}};
+    opacity: 0.25;
+  }
+  .corner-tl {
+    position: absolute; top: 52px; left: 80px;
+    width: 48px; height: 48px;
+    border-left: 2px solid {{accent}};
+    border-top: 2px solid {{accent}};
+    opacity: 0.25;
+  }
+</style>
+</head>
+<body>
+  <div class="corner-tl"></div>
+  <div class="corner-br"></div>
+  <div class="header">
+    {{#if topic}}<span class="topic">{{topic}}</span>{{else}}<span></span>{{/if}}
+    <span class="header-num">{{slideIndex}}</span>
+  </div>
+  <div class="top-rule"></div>
+  <div class="main">
+    <div class="quote-col">
+      <svg class="open-quote" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 130 C20 90 45 55 80 30 L70 15 C25 42 0 82 0 130 C0 148 12 160 28 160 C44 160 55 148 55 132 C55 116 44 104 28 104 C24 104 22 104 20 105 Z" fill="{{accent}}"/>
+        <path d="M110 130 C110 90 135 55 170 30 L160 15 C115 42 90 82 90 130 C90 148 102 160 118 160 C134 160 145 148 145 132 C145 116 134 104 118 104 C114 104 112 104 110 105 Z" fill="{{accent}}"/>
+      </svg>
+      <blockquote class="quote-text">{{quote}}</blockquote>
+    </div>
+    {{#if author}}
+    <div class="attr-col">
+      {{#if image}}
+      <div class="portrait"><img src="{{image}}" alt="{{author}}"></div>
+      {{/if}}
+      <div class="attribution-text">
+        <div class="attr-rule"></div>
+        <div class="author-name">{{author}}</div>
+        {{#if role}}<div class="author-role">{{role}}</div>{{/if}}
+      </div>
+    </div>
+    {{/if}}
+  </div>
+  <div class="footer">
+    <div class="bottom-rule"></div>
+    <div class="slide-info">{{slideIndex}} / {{totalSlides}}</div>
+  </div>
+</body>
+</html>

package/dist/templates/quote-card-wide/template.json ADDED Viewed

@@ -0,0 +1,76 @@
+{
+  "name": "Quote Card Wide",
+  "id": "quote-card-wide",
+  "version": "1.0.0",
+  "description": "Elegant pull-quote card with large quotation marks and attribution — 16:9 widescreen",
+  "author": "slide-cli",
+  "aspectRatio": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "tags": ["quote", "elegant", "serif", "wide", "16:9"],
+  "slots": [
+    {
+      "id": "quote",
+      "type": "text",
+      "label": "Quote text",
+      "required": true,
+      "description": "The main quote (without quotation marks)"
+    },
+    {
+      "id": "author",
+      "type": "text",
+      "label": "Author name",
+      "required": false,
+      "default": "",
+      "description": "Who said it"
+    },
+    {
+      "id": "role",
+      "type": "text",
+      "label": "Author role / context",
+      "required": false,
+      "default": "",
+      "description": "e.g. CEO, Philosopher, 1984"
+    },
+    {
+      "id": "image",
+      "type": "image",
+      "label": "Author portrait",
+      "required": false,
+      "default": "",
+      "description": "Optional author portrait. Shown as a circle beside the author name. File path or https:// URL."
+    },
+    {
+      "id": "topic",
+      "type": "text",
+      "label": "Topic tag",
+      "required": false,
+      "default": "",
+      "description": "Short category label shown at top"
+    },
+    {
+      "id": "bg",
+      "type": "color",
+      "label": "Background",
+      "required": false,
+      "default": "#faf7f2",
+      "description": "Card background"
+    },
+    {
+      "id": "ink",
+      "type": "color",
+      "label": "Text color",
+      "required": false,
+      "default": "#1a1714",
+      "description": "Main text color"
+    },
+    {
+      "id": "accent",
+      "type": "color",
+      "label": "Accent color",
+      "required": false,
+      "default": "#c0392b",
+      "description": "Color for quotation marks and rule"
+    }
+  ]
+}

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "slide-cli",
+  "version": "1.0.0",
+  "description": "CLI to create beautiful slide cards (9:16, 16:9, 1:1) from JSON + HTML templates",
+  "module": "index.ts",
+  "type": "module",
+  "bin": { "slide": "./dist/index.js" },
+  "scripts": {
+    "postinstall": "node scripts/download-fonts.js",
+    "start": "bun src/index.ts",
+    "dev": "bun --watch src/index.ts",
+    "build": "bun scripts/build.js",
+    "prepublishOnly": "bun scripts/build.js",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "test:coverage": "bun test --coverage"
+  },
+  "keywords": [
+    "slides",
+    "presentation",
+    "cli",
+    "card",
+    "template",
+    "instagram",
+    "stories",
+    "reels",
+    "youtube",
+    "thumbnail",
+    "json",
+    "html",
+    "puppeteer",
+    "bun"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "templates/",
+    "scripts/",
+    "TEMPLATE_GUIDE.md",
+    "README.md"
+  ],
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@fontsource-variable/fraunces": "^5.2.9",
+    "@fontsource-variable/outfit": "^5.2.8",
+    "@fontsource/bebas-neue": "^5.2.7",
+    "@fontsource/dm-mono": "^5.2.7",
+    "@fontsource/lato": "^5.2.7",
+    "@fontsource/playfair-display": "^5.2.8",
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "handlebars": "^4.7.8",
+    "ora": "^9.3.0",
+    "puppeteer": "^24.40.0",
+    "zod": "^4.3.6"
+  }
+}

package/scripts/build.js ADDED Viewed

@@ -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/scripts/download-fonts.js ADDED Viewed

@@ -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/templates/bold-title/sample.json ADDED Viewed

@@ -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"
+    }
+  ]
+}