SOP - Astro Theme Development

This document serves as the official guide for all developers working on our Astro themes. Following these standards ensures our themes are performant, maintainable, and easy to scale.

1. Core Development Standards & Best Practices

We prioritize Clean, Modular, and Accessible code. Every line of code should follow these foundational rules:

Semantic HTML Structure

Always use semantic tags to define the structure of your pages. This is vital for SEO and accessibility.

<html lang="en">
  <head> </head>
  <body>
    <header><nav></nav></header>
    <main>
      <section></section>
      <section></section>
    </main>
    <footer></footer>
  </body>
</html>

Layout & Component Rules

Reusability: Build every major UI block as a standalone Astro component.
Responsiveness: Use Tailwind CSS for mobile-first development. Test all sections across mobile, tablet, and desktop breakpoints.
Forms: For contact forms, you must integrate Preline UI components, specifically for standard dropdowns and search-enabled dropdowns.

Dynamic Spacing System

Do not hardcode random padding. Use our global utility classes to maintain visual consistency.

Class	Desktop Padding	Mobile Padding
`.has-section-spacing-md`	`pt-28`	`pt-20`
`.has-section-spacing-lg`	`pt-32`	`pt-16`

Note: Maintain a consistent gap between the Title Block and the Content Block within every section.

2. Workflow: Creating a New Reusable Section

Follow these three phases to integrate a new section into the theme.

Phase 1: Define the Data Schema

Define how the data looks in src/sections.schema.ts using Zod. This acts as a "contract" between your content and your code.

Create the schema (e.g., servicesSectionSchema).