Pages — AGENTS.md

Package Identity

Astro file-based routing. Each .astro file in pages/ becomes a route.
Rendering: Server-side (SSR) by default. Use export const prerender = true for static pages.

Current Routes

Route	File	Prerendered
`/`	`index.astro`	✅ Yes
`/products/[id]`	`products/[id].astro`	✅ Yes
`/wreath-faq`	`wreath-faq.astro`	✅ Yes

Patterns & Conventions

✅ DO

Static Page Pattern — Copy from index.astro:

---
export const prerender = true;
import BaseLayout from "../layouts/BaseLayout.astro";
import { getCollection } from "astro:content";

const productEntries = await getCollection("products");
---

<BaseLayout>
  <!-- Content -->
</BaseLayout>

Dynamic Route with Static Paths — Copy from products/[id].astro:

---
export const prerender = true;
import BaseLayout from "../../layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import type { Product } from "../../types";

export async function getStaticPaths() {
  const productEntries = await getCollection("products");
  return productEntries.map((entry) => ({
    params: { id: entry.id },
    props: { product: { ...entry.data, id: entry.id } as Product }
  }));
}

const { id } = Astro.params;
const { product } = Astro.props;
---

<BaseLayout
  title={`${product.name} | Ash Mallows Studio`}
  description={product.description}
  ogImage={product.ogImage || product.image}
>
  <!-- Content -->
</BaseLayout>

SEO Props on BaseLayout — Always pass for product/article pages:

<BaseLayout
  title="Page Title | Ash Mallows Studio"
  description="Page description for search engines"
  ogImage="/images/og/page-image.jpg"
  canonicalUrl="https://ashmallowsstudio.com/page-slug"
>

❌ DON’T

Don’t forget export const prerender = true for static content pages
Don’t hardcode product data — use getCollection("products")
Don’t skip SEO props — always pass title, description, ogImage

Content Collections

Products are managed via Astro Content Collections:

Schema: src/content.config.ts
Data: src/data/products.json

// Fetching products
import { getCollection } from "astro:content";
const products = await getCollection("products");

Page Structure

All pages should follow this structure:

---
export const prerender = true; // For static pages

import BaseLayout from "../layouts/BaseLayout.astro";
// Other imports...

// Data fetching...
---

<BaseLayout title="..." description="...">
  <main>
    <!-- Main content -->
  </main>
  <Footer />
</BaseLayout>

Touch Points / Key Files

Purpose	File
Base layout	`../layouts/BaseLayout.astro`
SEO component	`../components/astro/SEO.astro`
Default SEO data	`../data/seo.ts`
Content collection config	`../content.config.ts`

JIT Index Hints

# List all page routes
find src/pages -name "*.astro" | sed 's|src/pages||' | sed 's|\.astro$||' | sed 's|/index$|/|'

# Find pages using content collections
rg "getCollection" src/pages

# Find pages with prerendering
rg "prerender.*=.*true" src/pages

# Find dynamic routes
find src/pages -name "\[*\].astro"

Adding New Pages

Create .astro file in src/pages/
Add export const prerender = true if static content
Wrap content in <BaseLayout> with SEO props
For dynamic routes, implement getStaticPaths()
Update sitemap if needed (auto-generated via @astrojs/sitemap)

Common Gotchas

Missing prerender: Page will be SSR’d on every request (slower, uses Vercel functions)
Dynamic routes without getStaticPaths: Build will fail for prerendered pages
Image paths in SEO: ogImage must be absolute URL or public path

Pre-PR Checks

bun build && bun preview

Then verify:

Page loads correctly at the expected route
SEO meta tags render in <head>
No console errors in browser