Website Astro Pages

This skill provides page creation patterns, layout props, content collections, and code conventions for AG product websites.

Project Overview

• Framework: Astro 5 with React 18 for interactive components
• Styling: SCSS with CSS Modules + shared design system
• Package Manager: Yarn
• Monorepo: Nx-managed
• Shared Components: external/ag-website-shared/src/components/

Sub-Documents

Load based on what you need:

Most Common Pattern: Full Custom Page with Layout

Most pages use this pattern — import Layout, add page content:

---
import Layout from '@layouts/Layout.astro';
import styles from '@pages-styles/my-page.module.scss';
---

<Layout
    title="Page Title | <Product Name>"
    description="SEO description for the page"
    showSearchBar={true}
    showDocsNav={false}
>
    <div class={styles.pageContainer}>
        <h1>My Page</h1>
        <p>Content goes here</p>
    </div>
</Layout>

Layout Component Props

Directory Structure

packages/<website-package>/src/
├── pages/                     # Astro page routes (*.astro files)
├── layouts/
│   └── Layout.astro           # Main page layout wrapper
├── components/                # Local React & Astro components
├── content/                   # Content collections (data, docs)
├── pages-styles/              # Page-specific SCSS modules
├── stores/                    # Nanostores (state management)
└── utils/                     # Utility functions

external/ag-website-shared/src/
├── components/                # Shared components across AG products
└── design-system/             # Design tokens and base styles

Code Style

Import Order

1. Astro imports (astro:content)
2. External packages
3. Shared components (@ag-website-shared/*)
4. Local components/utils (@components/*, @utils/*)
5. Styles

Naming Conventions

Common Tasks

Add a New Standard Page

1. Create src/pages/my-page.astro
2. Import Layout and any needed components
3. Use standard design system classes where possible
4. Create src/pages-styles/my-page.module.scss only if custom styles needed

Use a Shared Component

1. Check external/ag-website-shared/src/components/ for available components
2. Import with @ag-website-shared/components/...
3. Add client:load if it's a React component needing interactivity