Summit Themes

Getting started with Summit's Themes

Theme Architecture

Every Summit theme is a complete contractor website built on Astro with static output (no client-side JavaScript framework) and Tailwind CSS v4. All themes follow the same consistent structure, so once you know one you know them all.

Single source of content: Your entire site — business name, phone, services, service areas, hours, reviews — is driven by one config file, src/data/business.json. Edit that one file (or rebrand it with an AI agent) and the change flows through every page.

The Structure

  • Data Directory: Holds business.json, the single config file that drives all site content. This is the file you edit to make a theme yours.
  • Components Directory: Houses all reusable UI components and sections that read from business.json and render the page.
  • Layouts Directory: Contains template files that define the overall page structure and are shared across multiple pages.
  • Pages Directory: Each file becomes a route in your site. Astro uses file-based routing, including the city × service local-SEO landing-page engine.
  • Content Directory: Stores markdown and content collections for content-driven pages such as the Q&A blog engine.
  • Styles Directory: Global CSS, including the Tailwind v4 import and the @theme tokens that define your brand colors and design system.

File Structure (Tailwind V4)

├── .cursor/
│ └── rules/ # Cursor rules (.mdc), scoped to this theme
├── public/ # Static assets if any
├── src/
│ ├── components/ # Reusable components
│ ├── layouts/ # Page layouts
│ ├── pages/ # Route pages
│ ├── content/ # Content collections
│ │ ├── folders/ # Collection folders
│ │ └── config.ts # Collection configuration
│ ├── data/ # Data files
│ ├── scripts/ # JavaScript utilities
│ ├── styles/
│ │ └── global.css # Global styles with Tailwind
│ └── env.d.ts # TypeScript definitions
├── astro.config.mjs # Astro configuration
├── AGENTS.md # Project guide for AI coding assistants
├── package.json
├── README.md
└── tsconfig.json

Styling: Tailwind v4 & @theme tokens

Themes use Tailwind CSS v4, configured entirely in CSS — there is no tailwind.config file. Your design system (brand colors, fonts, spacing) is defined with @theme tokens inside src/styles/global.css. To rebrand, change a single brand-color token and the new color flows through buttons, links, accents, and the rest of the UI.

The data model: business.json

The defining feature of a Summit theme is that one config file drives the entire site. src/data/business.json holds your business name, phone, services array, service areas, hours, reviews, and more. Sections and components import this object and render from it, so there is no content to hunt down across dozens of files. You can edit it directly, point an AI agent at it via the shipped llms.txt, or swap it for Sanity via the optional addon.

Local SEO engine

Each theme is a locally-ranking contractor site out of the box:

  • City × service landing pages: a file-based routing engine generates a local-SEO landing page for each combination of your service areas and services.
  • Complete JSON-LD schema: LocalBusiness, Service, FAQPage, AggregateRating, and BreadcrumbList structured data, generated from business.json.
  • Sitemap: an XML sitemap is generated at build time so search engines can discover every page.
  • GA4 lead tracking and a zip-code service-area checker wired into the relevant sections.
  • _headers / frame-ancestors: security headers ship with the build, including a content-security policy that controls framing for the chrome-less preview pages.

Plugins and Integrations

Each theme includes carefully selected plugins as needed. Check the astro.config.mjs or the global.css file for the complete list of plugins and integrations used in your specific theme.

Common:

  • tailwindcss/forms
  • tailwindcss/typography
  • tailwind-scrollbar-hide
  • @summitthemes/seo
  • @astrojs/mdx

Themes are kept lightweight with only the needed essentials to avoid bloat and give you control over additional features.

Theme philosophy

The themes are built with these principles in mind:

  • Complete, not generic: every page, section, and content model is already built — you make it yours, you do not assemble it
  • Consistency: all themes follow the same architectural patterns and the same business.json data model
  • Performance: static output, minimal dependencies, tuned for perfect Lighthouse
  • Future-proof: regular updates with the latest Astro and Tailwind best practices
  • AI-ready: a shipped llms.txt map plus a tuned AGENTS.md / CLAUDE.md and .cursor/rules let an AI coding agent rebrand and customize the whole site from a prompt
Getting Started