The Organism System Explained

At the centre of AstroForge is the organism system. An organism is a component that represents a specific page section and supports multiple design variants.

The Dispatcher Pattern

Every organism consists of two types of files: index.astro (the dispatcher) and Variant.astro files.

The dispatcher auto-discovers all .astro files in the same directory via import.meta.glob('./*.astro'). It selects and renders the correct variant component based on the variant prop from pages.config.ts.

The power of this pattern: adding a new variant requires only creating a new .astro file. No changes to the registry or the dispatcher.

Creating a New Organism

The scaffold tool creates a new organism skeleton in a single command:

npm run scaffold organism Timeline

This creates: src/components/organisms/Timeline/index.astro, src/components/organisms/Timeline/Default.astro, src/styles/organisms/Timeline/Default.css, and adds an @import line to app.css.

Integration with the Schema Pipeline

After creating a new organism, a record must be added to organism-schemas.ts. This record defines which fields the CMS shows for the organism. An organism without a record shows no fields in the CMS at all.

During build, schema-integration.ts reads organism-schemas.ts and generates page-*.schema.json files for each page. The CMS reads these to build its form UI.

What Organisms Are Available?

AstroForge ships with layout organisms (Topbar, Navbar, Footer, Bottombar) and content organisms (Hero, Slider, Features, Pricing, Stats, Testimonials, Blog, Contact, Gallery, Video, FAQ, Newsletter, CTA, and 15+ more). Each ships with multiple variants.