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
  1. package/README.md +184 -0
  2. package/TEMPLATE_GUIDE.md +661 -0
  3. package/dist/TEMPLATE_GUIDE.md +661 -0
  4. package/dist/index.js +277058 -0
  5. package/dist/scripts/build.js +41 -0
  6. package/dist/scripts/download-fonts.js +123 -0
  7. package/dist/templates/bold-title/sample.json +57 -0
  8. package/dist/templates/bold-title/template.html +212 -0
  9. package/dist/templates/bold-title/template.json +76 -0
  10. package/dist/templates/bold-title-wide/sample.json +58 -0
  11. package/dist/templates/bold-title-wide/template.html +224 -0
  12. package/dist/templates/bold-title-wide/template.json +76 -0
  13. package/dist/templates/minimal/sample.json +53 -0
  14. package/dist/templates/minimal/template.html +183 -0
  15. package/dist/templates/minimal/template.json +76 -0
  16. package/dist/templates/minimal-wide/sample.json +53 -0
  17. package/dist/templates/minimal-wide/template.html +208 -0
  18. package/dist/templates/minimal-wide/template.json +76 -0
  19. package/dist/templates/quote-card/sample.json +57 -0
  20. package/dist/templates/quote-card/template.html +203 -0
  21. package/dist/templates/quote-card/template.json +76 -0
  22. package/dist/templates/quote-card-wide/sample.json +58 -0
  23. package/dist/templates/quote-card-wide/template.html +215 -0
  24. package/dist/templates/quote-card-wide/template.json +76 -0
  25. package/package.json +66 -0
  26. package/scripts/build.js +41 -0
  27. package/scripts/download-fonts.js +123 -0
  28. package/templates/bold-title/sample.json +57 -0
  29. package/templates/bold-title/template.html +212 -0
  30. package/templates/bold-title/template.json +76 -0
  31. package/templates/bold-title-wide/sample.json +58 -0
  32. package/templates/bold-title-wide/template.html +224 -0
  33. package/templates/bold-title-wide/template.json +76 -0
  34. package/templates/minimal/sample.json +53 -0
  35. package/templates/minimal/template.html +183 -0
  36. package/templates/minimal/template.json +76 -0
  37. package/templates/minimal-wide/sample.json +53 -0
  38. package/templates/minimal-wide/template.html +208 -0
  39. package/templates/minimal-wide/template.json +76 -0
  40. package/templates/quote-card/sample.json +57 -0
  41. package/templates/quote-card/template.html +203 -0
  42. package/templates/quote-card/template.json +76 -0
  43. package/templates/quote-card-wide/sample.json +58 -0
  44. package/templates/quote-card-wide/template.html +215 -0
  45. package/templates/quote-card-wide/template.json +76 -0
package/README.md ADDED
@@ -0,0 +1,184 @@
1
+ # slide-cli
2
+
3
+ A Bun/TypeScript CLI to create beautiful slide cards from JSON data + HTML templates.
4
+ Supports **9:16** (Stories/Reels), **16:9** (presentations/YouTube), and **1:1** (feed) aspect ratios.
5
+
6
+ ```
7
+ slide create --data data.json --template minimal --out ./output
8
+ slide list [--verbose]
9
+ slide add-template <path> [--force]
10
+ ```
11
+
12
+ ---
13
+
14
+ # To get started:
15
+
16
+ bash
17
+ unzip slide-cli.zip && cd slide-cli
18
+ bun install
19
+ bun src/index.ts list --verbose
20
+ bun src/index.ts create --data samples/sample-quotes.json --template quote-card
21
+ open output/index.html
22
+
23
+ ---
24
+
25
+ ## Installation
26
+
27
+ ```bash
28
+ cd slide-cli
29
+ bun install
30
+ bun src/index.ts --help # run directly
31
+ bun link # or link globally as `slide`
32
+ ```
33
+
34
+ > **Requires:** Bun ≥ 1.0 · Chrome or Chromium for screenshot rendering.
35
+
36
+ ---
37
+
38
+ ## Commands
39
+
40
+ ### `slide create`
41
+
42
+ ```bash
43
+ slide create --data my-deck.json --template minimal --out ./output
44
+ ```
45
+
46
+ | Flag | Default | Description |
47
+ |---|---|---|
48
+ | `-d, --data <file>` | *(required)* | Path to data JSON |
49
+ | `-t, --template <id>` | *(required)* | Template id or name |
50
+ | `-o, --out <dir>` | `./output` | Output directory |
51
+ | `-f, --format <png\|jpg>` | `jpg` | Screenshot format |
52
+ | `--no-images` | off | Skip screenshots (HTML only) |
53
+
54
+ **Output:**
55
+ ```
56
+ output/
57
+ ├── slide-1.html slide-1.jpg
58
+ ├── slide-2.html slide-2.jpg
59
+ │ …
60
+ ├── index.html ← presentation viewer
61
+ └── data.json ← copy of your input
62
+ ```
63
+
64
+ ### `slide list`
65
+ ```bash
66
+ slide list
67
+ slide list --verbose # full slot schema
68
+ ```
69
+
70
+ ### `slide add-template`
71
+ ```bash
72
+ slide add-template ./my-template/
73
+ slide add-template ./my-template/ --force
74
+ ```
75
+
76
+ ---
77
+
78
+ ## Data JSON format
79
+
80
+ ```json
81
+ {
82
+ "title": "My Presentation",
83
+ "slides": [
84
+ {
85
+ "layout": "minimal",
86
+ "heading": "Less is more",
87
+ "body": "Simplicity is the ultimate sophistication.",
88
+ "label": "Chapter 01",
89
+ "accent": "#c8b89a",
90
+ "bg": "#0f0e0c"
91
+ }
92
+ ]
93
+ }
94
+ ```
95
+
96
+ ---
97
+
98
+ ## Built-in templates
99
+
100
+ | id | Ratio | Required slots | Style |
101
+ |---|---|---|---|
102
+ | `minimal` | 9:16 | `heading` | Dark typographic, Fraunces serif |
103
+ | `bold-title` | 9:16 | `title` | Gradient editorial, Bebas Neue |
104
+ | `quote-card` | 9:16 | `quote` | Light serif pull-quote card |
105
+ | `minimal-wide` | 16:9 | `heading` | Dark typographic, two-column layout |
106
+ | `bold-title-wide` | 16:9 | `title` | Gradient editorial, title left / subtitle right |
107
+ | `quote-card-wide` | 16:9 | `quote` | Light serif pull-quote, quote left / attribution right |
108
+
109
+ ---
110
+
111
+ ## Creating a custom template
112
+
113
+ ```
114
+ my-template/
115
+ ├── template.json ← manifest + slot definitions
116
+ └── template.html ← Handlebars HTML at your chosen dimensions
117
+ ```
118
+
119
+ ### template.json
120
+
121
+ Set `aspectRatio`, `width`, and `height` to match your target format:
122
+
123
+ | `aspectRatio` | `width` | `height` | Use case |
124
+ |---|---|---|---|
125
+ | `"9:16"` | 1080 | 1920 | Instagram Stories, TikTok, Reels |
126
+ | `"16:9"` | 1920 | 1080 | YouTube thumbnails, presentations |
127
+ | `"1:1"` | 1080 | 1080 | Instagram feed, Twitter/X |
128
+
129
+ ```json
130
+ {
131
+ "name": "My Template",
132
+ "id": "my-template",
133
+ "version": "1.0.0",
134
+ "description": "Short description",
135
+ "aspectRatio": "16:9",
136
+ "width": 1920,
137
+ "height": 1080,
138
+ "slots": [
139
+ { "id": "headline", "type": "text", "label": "Headline", "required": true },
140
+ { "id": "bg", "type": "color", "label": "Background", "required": false, "default": "#fff" }
141
+ ]
142
+ }
143
+ ```
144
+
145
+ **Slot types:** `text` · `color` · `image` · `number` · `url`
146
+
147
+ ### template.html
148
+
149
+ Match `width` and `height` in CSS to the values in your manifest:
150
+
151
+ ```html
152
+ <!DOCTYPE html><html>
153
+ <head><style>
154
+ html, body { width: 1920px; height: 1080px; background: {{bg}}; }
155
+ </style></head>
156
+ <body>
157
+ <h1>{{headline}}</h1>
158
+ {{#if subtitle}}<p>{{subtitle}}</p>{{/if}}
159
+ <footer>{{slideIndex}} / {{totalSlides}}</footer>
160
+ </body></html>
161
+ ```
162
+
163
+ **Always available:** `{{slideIndex}}` · `{{totalSlides}}` · `{{title}}`
164
+ **Helpers:** `{{#if}}` · `{{upper val}}` · `{{lower val}}` · `{{default val "fallback"}}`
165
+
166
+ ---
167
+
168
+ ## Presentation viewer
169
+
170
+ The generated `index.html` has:
171
+ - ← → keys or buttons · Space = autoplay · F = fullscreen
172
+ - Home/End · touch/swipe support
173
+ - Speed selector · progress bar · dot nav
174
+
175
+ ---
176
+
177
+ ## Template storage
178
+
179
+ | Path | Purpose |
180
+ |---|---|
181
+ | `~/.slide-cli/templates/` | User templates (via `add-template`) |
182
+ | `<project>/templates/` | Built-in templates |
183
+
184
+ User templates take priority over built-ins on id collision.