Landing Page Template System
Relevant source files
The following files were used as context for generating this wiki page:
The Landing Page (LP) Template System in FusionOps is a modular architecture designed to automate the generation, registration, and deployment of affiliate marketing landing pages. It leverages Astro for high-performance static generation and a JavaScript-based generation contract that allows templates to be dynamically built from a centralized configuration object.
The system serves as a bridge between high-level brand requirements and low-level source code, providing a "factory" approach where templates are registered in a global registry and instantiated with site-specific metadata, design tokens (colors and fonts), and tracking configurations.
Sources: CLAUDE.md:1, gen-lp.md:9-11
System Architecture and Components
The architecture is built on a central registry that manages the lifecycle of a template from generation to analysis.
Core Generation Flow
The core of the system is the generate(site) function. Every template must export this function, which receives a site configuration object and returns a files object. Each key in the returned object representing a file path and each value containing the file content as a string.
The diagram shows how the Template Registry loads modules which are then instantiated by the LP Wizard to produce a complete set of source files.
Sources: gen-lp.md:16-21, src/components/TemplateGenerator/steps/StepTemplateFromDir.jsx:136-160
Component Breakdown
| Component | Responsibility | Derived From |
|---|---|---|
| Template Registry | Central catalog of all available LP designs; handles registration and retrieval. | src/utils/template-registry.js |
| Generator Function | The functional core of a template; produces package.json, astro.config.mjs, and index.astro. | gen-lp.md:55-60 |
| Template Analyzer | Validates template structure, detects frameworks (Astro, React, Static), and identifies dependencies. | src/utils/__tests__/template-analyzer.test.js |
| Theme Registry | Provides standardized COLORS (HSL structures) and FONTS (Google Fonts imports) for templates. | gen-lp.md:38-51 |
The System Contract
Templates must adhere to a strict system contract to ensure compatibility with the FusionOps deployment pipeline.
The site Configuration Object
The site object acts as the primary data interface, containing brand copy, design choices, and tracking IDs.
- Brand & Copy: Includes
brand,domain,h1,sub, and product ranges (e.g.,amountMin,aprMax). - Design Tokens:
colorIdandfontIdare used to look up values from the globalCOLORSandFONTSregistries. - Tracking Data: Critical fields for affiliate attribution, including
aid(Affiliate ID),conversionId(Google Ads), and Voluum campaign IDs.
Sources: gen-lp.md:23-42, src/components/TemplateGenerator/steps/StepTemplateFromDir.jsx:15-26
Standard File Requirements
A template must output at least four critical files within its return object:
package.json: Configured for Astro ^5.2.0.astro.config.mjs: Set tostaticoutput with the site URL derived fromsite.domain.src/pages/index.astro: A self-contained Astro file containing inline CSS and vanilla JavaScript.README.md: Documentation for the specific template variant.
Sources: gen-lp.md:55-60, src/components/TemplateGenerator/steps/StepTemplateFromDir.jsx:165-200
Tracking Architecture
The system implements a "zero-GTM, zero-GA4" tracking architecture to maximize performance and minimize script blocking.
Tracking Layers
The architecture utilizes a three-layer approach injected into the <head> of the generated HTML:
- Layer 1 (DataLayer): Uses
window.dataLayer.pushfor standard events (page_view,form_start,form_submit). - Layer 2 (First-Party Pixel): Uses
sendBeaconto a custom endpoint (e.g.,t.{domain}/e). - Layer 3 (Voluum): A conditional script triggered only if
site.voluumIdis provided.
The sequence shows the interaction between the client-side tracking scripts and the backend workers.
Sources: gen-lp.md:62-80, CLAUDE.md:104-110, templates/LionFunds/lovable-lp-template-prompt.md:214-225
Template Generation and Cloning
FusionOps supports creating new templates by cloning existing ones through the StepTemplateFromDir component.
The Cloning Process
The system allows users to select a registered template as a base. It then executes the generate function with a SAMPLE_SITE object to produce a valid set of files for preview. Users can then modify the metadata (name, folder ID) to create a new template variant.
Template Identification
Templates follow a specific naming convention: {source}-{niche}-{number} (e.g., bolt-loan-01 or lov-loan-01). This allows the system to categorize templates by their origin and target market.
Sources: CLAUDE.md:144, src/components/TemplateGenerator/steps/StepTemplateFromDir.jsx:36-47, templates/LionFunds/lovable-lp-template-prompt.md:25-28
Design and Performance Standards
To maintain high scores in PageSpeed Insights (Target: 95+), templates are subject to strict design rules:
- Mobile-First: Design must be responsive and thumb-friendly.
- Pure HTML/CSS Above the Fold: Zero JS dependency for First Contentful Paint (FCP).
- No Frameworks: No external JS frameworks like React or Vue are allowed in the final output unless they are React islands for specific interactive components.
- Inline Styles: All styles must be contained within
<style>tags to prevent external CSS network requests.
Sources: gen-lp.md:82-95, CLAUDE.md:154, templates/LionFunds/lovable-lp-template-prompt.md:140-145
Conclusion
The FusionOps Landing Page Template System provides a highly structured environment for rapid LP development. By enforcing a strict functional contract (generate(site)) and a standardized tracking architecture, it enables automated deployment and scaling of marketing campaigns while ensuring high performance and consistent affiliate tracking. Unified design tokens and a centralized registry allow for easy maintenance and evolution of the project's visual identity across dozens of distinct templates.