From 6b1463fd5bf8265cd3d15c3b67d2ac7ea2fa6e85 Mon Sep 17 00:00:00 2001 From: James Russo Date: Tue, 31 Mar 2026 16:10:04 -0400 Subject: [PATCH] refactor(cli): move templates to templates/ for remote fetching (#161) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(cli): move templates to examples/ for remote fetching * refactor(cli): rename examples/ to templates/ for clarity Follows Remix/Vite convention — these are init scaffolds, not general examples. --- scripts/generate-template-previews.ts | 6 +- .../compositions/decision_tree.html | 0 .../decision-tree/index.html | 0 .../compositions/main-graphics.html | 0 .../kinetic-type/index.html | 0 .../nyt-graph/compositions/nyt-chart.html | 0 .../nyt-graph/index.html | 0 .../play-mode/compositions/captions.html | 0 .../play-mode/compositions/intro.html | 0 .../play-mode/compositions/stats.html | 0 .../play-mode/index.html | 0 .../product-promo/assets/figma-cursors.svg | 0 .../assets/figma-logo-pieces.svg | 0 .../product-promo/assets/figma-logo-pills.svg | 0 .../compositions/scene1-logo-intro.html | 0 .../compositions/scene2-4-canvas.html | 0 .../compositions/scene5-logo-outro.html | 0 .../product-promo/index.html | 0 .../swiss-grid/assets/swiss-grid.svg | 0 .../swiss-grid/compositions/captions.html | 0 .../swiss-grid/compositions/graphics.html | 0 .../swiss-grid/compositions/intro.html | 0 .../swiss-grid/index.html | 0 templates/templates.json | 58 +++++++++++++++++++ .../vignelli/compositions/captions.html | 0 .../vignelli/compositions/overlays.html | 0 .../vignelli/index.html | 0 .../warm-grain/compositions/captions.html | 0 .../warm-grain/compositions/graphics.html | 0 .../warm-grain/compositions/intro.html | 0 .../warm-grain/index.html | 0 31 files changed, 61 insertions(+), 3 deletions(-) rename {packages/cli/src/templates => templates}/decision-tree/compositions/decision_tree.html (100%) rename {packages/cli/src/templates => templates}/decision-tree/index.html (100%) rename {packages/cli/src/templates => templates}/kinetic-type/compositions/main-graphics.html (100%) rename {packages/cli/src/templates => templates}/kinetic-type/index.html (100%) rename {packages/cli/src/templates => templates}/nyt-graph/compositions/nyt-chart.html (100%) rename {packages/cli/src/templates => templates}/nyt-graph/index.html (100%) rename {packages/cli/src/templates => templates}/play-mode/compositions/captions.html (100%) rename {packages/cli/src/templates => templates}/play-mode/compositions/intro.html (100%) rename {packages/cli/src/templates => templates}/play-mode/compositions/stats.html (100%) rename {packages/cli/src/templates => templates}/play-mode/index.html (100%) rename {packages/cli/src/templates => templates}/product-promo/assets/figma-cursors.svg (100%) rename {packages/cli/src/templates => templates}/product-promo/assets/figma-logo-pieces.svg (100%) rename {packages/cli/src/templates => templates}/product-promo/assets/figma-logo-pills.svg (100%) rename {packages/cli/src/templates => templates}/product-promo/compositions/scene1-logo-intro.html (100%) rename {packages/cli/src/templates => templates}/product-promo/compositions/scene2-4-canvas.html (100%) rename {packages/cli/src/templates => templates}/product-promo/compositions/scene5-logo-outro.html (100%) rename {packages/cli/src/templates => templates}/product-promo/index.html (100%) rename {packages/cli/src/templates => templates}/swiss-grid/assets/swiss-grid.svg (100%) rename {packages/cli/src/templates => templates}/swiss-grid/compositions/captions.html (100%) rename {packages/cli/src/templates => templates}/swiss-grid/compositions/graphics.html (100%) rename {packages/cli/src/templates => templates}/swiss-grid/compositions/intro.html (100%) rename {packages/cli/src/templates => templates}/swiss-grid/index.html (100%) create mode 100644 templates/templates.json rename {packages/cli/src/templates => templates}/vignelli/compositions/captions.html (100%) rename {packages/cli/src/templates => templates}/vignelli/compositions/overlays.html (100%) rename {packages/cli/src/templates => templates}/vignelli/index.html (100%) rename {packages/cli/src/templates => templates}/warm-grain/compositions/captions.html (100%) rename {packages/cli/src/templates => templates}/warm-grain/compositions/graphics.html (100%) rename {packages/cli/src/templates => templates}/warm-grain/compositions/intro.html (100%) rename {packages/cli/src/templates => templates}/warm-grain/index.html (100%) diff --git a/scripts/generate-template-previews.ts b/scripts/generate-template-previews.ts index 5d88de6d6..0d65381c3 100644 --- a/scripts/generate-template-previews.ts +++ b/scripts/generate-template-previews.ts @@ -39,7 +39,7 @@ import { const scriptDir = dirname(fileURLToPath(import.meta.url)); const repoRoot = resolve(scriptDir, ".."); const bundledTemplatesDir = resolve(repoRoot, "packages/cli/src/templates"); -const examplesDir = resolve(repoRoot, "examples"); +const remoteTemplatesDir = resolve(repoRoot, "templates"); const outputDir = resolve(repoRoot, "docs/images/templates"); if (!process.env.PRODUCER_HYPERFRAME_MANIFEST_PATH) { @@ -86,7 +86,7 @@ function parseArgs(): { only: string | null; skipVideo: boolean } { } function resolveTemplateDir(templateId: string): string | null { - for (const base of [bundledTemplatesDir, examplesDir]) { + for (const base of [bundledTemplatesDir, remoteTemplatesDir]) { const dir = join(base, templateId); if (existsSync(join(dir, "index.html"))) return dir; } @@ -97,7 +97,7 @@ function discoverTemplates(only: string | null): string[] { const seen = new Set(); const all: string[] = []; - for (const dir of [bundledTemplatesDir, examplesDir]) { + for (const dir of [bundledTemplatesDir, remoteTemplatesDir]) { if (!existsSync(dir)) continue; for (const e of readdirSync(dir, { withFileTypes: true })) { if ( diff --git a/packages/cli/src/templates/decision-tree/compositions/decision_tree.html b/templates/decision-tree/compositions/decision_tree.html similarity index 100% rename from packages/cli/src/templates/decision-tree/compositions/decision_tree.html rename to templates/decision-tree/compositions/decision_tree.html diff --git a/packages/cli/src/templates/decision-tree/index.html b/templates/decision-tree/index.html similarity index 100% rename from packages/cli/src/templates/decision-tree/index.html rename to templates/decision-tree/index.html diff --git a/packages/cli/src/templates/kinetic-type/compositions/main-graphics.html b/templates/kinetic-type/compositions/main-graphics.html similarity index 100% rename from packages/cli/src/templates/kinetic-type/compositions/main-graphics.html rename to templates/kinetic-type/compositions/main-graphics.html diff --git a/packages/cli/src/templates/kinetic-type/index.html b/templates/kinetic-type/index.html similarity index 100% rename from packages/cli/src/templates/kinetic-type/index.html rename to templates/kinetic-type/index.html diff --git a/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html b/templates/nyt-graph/compositions/nyt-chart.html similarity index 100% rename from packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html rename to templates/nyt-graph/compositions/nyt-chart.html diff --git a/packages/cli/src/templates/nyt-graph/index.html b/templates/nyt-graph/index.html similarity index 100% rename from packages/cli/src/templates/nyt-graph/index.html rename to templates/nyt-graph/index.html diff --git a/packages/cli/src/templates/play-mode/compositions/captions.html b/templates/play-mode/compositions/captions.html similarity index 100% rename from packages/cli/src/templates/play-mode/compositions/captions.html rename to templates/play-mode/compositions/captions.html diff --git a/packages/cli/src/templates/play-mode/compositions/intro.html b/templates/play-mode/compositions/intro.html similarity index 100% rename from packages/cli/src/templates/play-mode/compositions/intro.html rename to templates/play-mode/compositions/intro.html diff --git a/packages/cli/src/templates/play-mode/compositions/stats.html b/templates/play-mode/compositions/stats.html similarity index 100% rename from packages/cli/src/templates/play-mode/compositions/stats.html rename to templates/play-mode/compositions/stats.html diff --git a/packages/cli/src/templates/play-mode/index.html b/templates/play-mode/index.html similarity index 100% rename from packages/cli/src/templates/play-mode/index.html rename to templates/play-mode/index.html diff --git a/packages/cli/src/templates/product-promo/assets/figma-cursors.svg b/templates/product-promo/assets/figma-cursors.svg similarity index 100% rename from packages/cli/src/templates/product-promo/assets/figma-cursors.svg rename to templates/product-promo/assets/figma-cursors.svg diff --git a/packages/cli/src/templates/product-promo/assets/figma-logo-pieces.svg b/templates/product-promo/assets/figma-logo-pieces.svg similarity index 100% rename from packages/cli/src/templates/product-promo/assets/figma-logo-pieces.svg rename to templates/product-promo/assets/figma-logo-pieces.svg diff --git a/packages/cli/src/templates/product-promo/assets/figma-logo-pills.svg b/templates/product-promo/assets/figma-logo-pills.svg similarity index 100% rename from packages/cli/src/templates/product-promo/assets/figma-logo-pills.svg rename to templates/product-promo/assets/figma-logo-pills.svg diff --git a/packages/cli/src/templates/product-promo/compositions/scene1-logo-intro.html b/templates/product-promo/compositions/scene1-logo-intro.html similarity index 100% rename from packages/cli/src/templates/product-promo/compositions/scene1-logo-intro.html rename to templates/product-promo/compositions/scene1-logo-intro.html diff --git a/packages/cli/src/templates/product-promo/compositions/scene2-4-canvas.html b/templates/product-promo/compositions/scene2-4-canvas.html similarity index 100% rename from packages/cli/src/templates/product-promo/compositions/scene2-4-canvas.html rename to templates/product-promo/compositions/scene2-4-canvas.html diff --git a/packages/cli/src/templates/product-promo/compositions/scene5-logo-outro.html b/templates/product-promo/compositions/scene5-logo-outro.html similarity index 100% rename from packages/cli/src/templates/product-promo/compositions/scene5-logo-outro.html rename to templates/product-promo/compositions/scene5-logo-outro.html diff --git a/packages/cli/src/templates/product-promo/index.html b/templates/product-promo/index.html similarity index 100% rename from packages/cli/src/templates/product-promo/index.html rename to templates/product-promo/index.html diff --git a/packages/cli/src/templates/swiss-grid/assets/swiss-grid.svg b/templates/swiss-grid/assets/swiss-grid.svg similarity index 100% rename from packages/cli/src/templates/swiss-grid/assets/swiss-grid.svg rename to templates/swiss-grid/assets/swiss-grid.svg diff --git a/packages/cli/src/templates/swiss-grid/compositions/captions.html b/templates/swiss-grid/compositions/captions.html similarity index 100% rename from packages/cli/src/templates/swiss-grid/compositions/captions.html rename to templates/swiss-grid/compositions/captions.html diff --git a/packages/cli/src/templates/swiss-grid/compositions/graphics.html b/templates/swiss-grid/compositions/graphics.html similarity index 100% rename from packages/cli/src/templates/swiss-grid/compositions/graphics.html rename to templates/swiss-grid/compositions/graphics.html diff --git a/packages/cli/src/templates/swiss-grid/compositions/intro.html b/templates/swiss-grid/compositions/intro.html similarity index 100% rename from packages/cli/src/templates/swiss-grid/compositions/intro.html rename to templates/swiss-grid/compositions/intro.html diff --git a/packages/cli/src/templates/swiss-grid/index.html b/templates/swiss-grid/index.html similarity index 100% rename from packages/cli/src/templates/swiss-grid/index.html rename to templates/swiss-grid/index.html diff --git a/templates/templates.json b/templates/templates.json new file mode 100644 index 000000000..9f32fb390 --- /dev/null +++ b/templates/templates.json @@ -0,0 +1,58 @@ +{ + "templates": [ + { + "id": "blank", + "label": "Blank", + "hint": "Empty composition — just the scaffolding", + "bundled": true + }, + { + "id": "warm-grain", + "label": "Warm Grain", + "hint": "Cream aesthetic with grain texture", + "bundled": false + }, + { + "id": "play-mode", + "label": "Play Mode", + "hint": "Playful elastic animations", + "bundled": false + }, + { + "id": "swiss-grid", + "label": "Swiss Grid", + "hint": "Structured grid layout", + "bundled": false + }, + { + "id": "vignelli", + "label": "Vignelli", + "hint": "Bold typography with red accents", + "bundled": false + }, + { + "id": "decision-tree", + "label": "Decision Tree", + "hint": "Animated flowchart with branching paths", + "bundled": false + }, + { + "id": "kinetic-type", + "label": "Kinetic Type", + "hint": "Bold kinetic typography promo", + "bundled": false + }, + { + "id": "product-promo", + "label": "Product Promo", + "hint": "Multi-scene product showcase with SVG assets", + "bundled": false + }, + { + "id": "nyt-graph", + "label": "NYT Graph", + "hint": "Animated data chart in print editorial style", + "bundled": false + } + ] +} diff --git a/packages/cli/src/templates/vignelli/compositions/captions.html b/templates/vignelli/compositions/captions.html similarity index 100% rename from packages/cli/src/templates/vignelli/compositions/captions.html rename to templates/vignelli/compositions/captions.html diff --git a/packages/cli/src/templates/vignelli/compositions/overlays.html b/templates/vignelli/compositions/overlays.html similarity index 100% rename from packages/cli/src/templates/vignelli/compositions/overlays.html rename to templates/vignelli/compositions/overlays.html diff --git a/packages/cli/src/templates/vignelli/index.html b/templates/vignelli/index.html similarity index 100% rename from packages/cli/src/templates/vignelli/index.html rename to templates/vignelli/index.html diff --git a/packages/cli/src/templates/warm-grain/compositions/captions.html b/templates/warm-grain/compositions/captions.html similarity index 100% rename from packages/cli/src/templates/warm-grain/compositions/captions.html rename to templates/warm-grain/compositions/captions.html diff --git a/packages/cli/src/templates/warm-grain/compositions/graphics.html b/templates/warm-grain/compositions/graphics.html similarity index 100% rename from packages/cli/src/templates/warm-grain/compositions/graphics.html rename to templates/warm-grain/compositions/graphics.html diff --git a/packages/cli/src/templates/warm-grain/compositions/intro.html b/templates/warm-grain/compositions/intro.html similarity index 100% rename from packages/cli/src/templates/warm-grain/compositions/intro.html rename to templates/warm-grain/compositions/intro.html diff --git a/packages/cli/src/templates/warm-grain/index.html b/templates/warm-grain/index.html similarity index 100% rename from packages/cli/src/templates/warm-grain/index.html rename to templates/warm-grain/index.html