Creating & Adding Templates
Relevant source files
The following files were used as context for generating this wiki page:
This page outlines the architectural patterns and procedures for creating and integrating new landing page templates within the FusionOps system. FusionOps utilizes an Astro-based and React-based template architecture, allowing for modular generation and direct database imports via the API Worker. Templates are stored as structured JSON objects containing file mappings, metadata, and quality gate attributes.
The system supports multiple creation pathways, including programmatic generation using a generate(site) function, importing projects from external tools like Lovable/v0.dev, and manual uploads of local Astro project folders converted into JSON payloads. These templates are subsequently managed through the Template Manager dashboard for versioning, status updates, and deployment validation.
Template Architecture and Structures
Templates in FusionOps are represented as JSON entities containing a map of file paths to their string contents. This structure allows the system to remain framework-agnostic during storage while providing the necessary files for the build pipeline.
Core Data Structure
The template data model used by the API and stored in the D1 database follows a specific schema to ensure compatibility with the LP Wizard and deployers.
| Field | Type | Description |
|---|---|---|
templateId | String | Unique identifier (e.g., lov-loan-01). |
name | String | Human-readable display name. |
category | String | Niche category (e.g., loan, insurance). |
badge | String | UI label (e.g., New, Loveable). |
files | Object | Map of path: content_string for all project files. |
source_code | String | The JS logic (if applicable) used to generate the files. |
status | String | Deployment state: draft, active, deprecated, archived. |
Sources: lionfunds.template.json, apps/api-worker/src/handlers/templates.js:154-180
The generate(site) Pattern
Programmatic templates must export a generate function. This function acts as a factory, receiving a site configuration object and returning the required file set.
The site object provides fields for brand copy (h1, sub, cta), design preferences (colorId, fontId), and tracking parameters (aid, conversionId).
Sources: gen-lp.md:14-50, src/components/TemplateGenerator/steps/StepTemplateFromDir.jsx:167-248
Creation Workflows
1. Generating via AI Prompts
FusionOps provides specialized prompts for AI models (Claude, GPT) to output compatible JavaScript template files. These prompts enforce a "SYSTEM CONTRACT" including specific imports from the template-registry.js and mandatory tracking architectures.
Sources: gen-lp.md:1-125, templates/LionFunds/lovable-lp-template-prompt.md
2. Converting Local Folders
The scripts/folder-to-template-json.js utility allows developers to transform a local Astro project directory into the system's JSON format. This script filters out unnecessary directories (node_modules, .git, dist) and includes specific extensions (.astro, .js, .html, etc.).
Execution Example:
node scripts/folder-to-template-json.js ./my-template-folder --upload --api-url http://localhost:8787
Sources: scripts/folder-to-template-json.js:1-180
3. Cloning Existing Templates
Users can clone existing templates within the StepTemplateFromDir component. The system retrieves registered templates, allows for previewing their file structures, and generates a new template ID and source code snapshot based on the selection.
Sources: src/components/TemplateGenerator/steps/StepTemplateFromDir.jsx:11-135
Quality Gates and Validation
Every template must pass a quality gate before being published to the active status. This prevents build failures and ensures brand compliance.
Mandatory Quality Checks
The system performs static analysis on the template contents to verify:
- Presence of entry point: Detects
index.astro,index.html, or React entry files. - Viewport Tag: Ensures
<meta name="viewport">exists for mobile responsiveness. - Primary Color Tokens: Verifies usage of CSS variables like
--primaryor--color-primary. - Banned Copy: Rejects terms like "guaranteed approval" or "100% approval" for compliance.
- Niche Requirements: Templates in the
loancategory must contain a "Payment Calculator" and "Representative APR" section.
Tracking Architecture
Templates are required to implement a zero-GTM architecture where events are pushed to a window.dataLayer. The build pipeline automatically injects tracking pixels (first-party pixel via sendBeacon) and Google Ads scripts during the CI build process, so template creators should not hardcode these scripts.
Sources: src/components/TemplateManager.jsx:16-80, files/pre-import-checklist-prompt.md, gen-lp.md:66-90
Template Management and API
Management of templates is handled through the API Worker via the /api/templates routes.
API Endpoint Summary
| Method | Endpoint | Description |
|---|---|---|
GET | /api/templates | Lists all non-archived templates. |
POST | /api/templates | Creates a new template (40MB limit). |
POST | /api/mcp/templates | Upsert for MCP/Bolt imports using shared secret. |
PUT | /api/templates/:id | Updates fields or creates a new version snapshot. |
POST | /api/templates/:id/publish | Triggers quality gate and marks status as active. |
POST | /api/templates/:id/generate-thumb | Uses Puppeteer to take a mobile-view screenshot. |
Versioning Flow
The system maintains a template_versions table. When a template is updated with createVersion: true, a snapshot of the current state is stored. Users can roll back to previous versions or publish a specific historical version to the production status.
Conclusion
Creating and adding templates in FusionOps is a structured process involving JSON-based file mapping and rigorous validation. By utilizing the generate(site) pattern for programmatic templates or the folder-to-template-json.js utility for local projects, developers can rapidly expand the system's design library. The integration of quality gates ensures that all added templates are compliant, responsive, and ready for automated tracking injection during deployment.