Add content

Astromade themes use Astro content collections. Each theme defines its collections in src/content.config.ts with a Zod schema, and stores entries under src/content/.

File layout

A typical portfolio theme has two collections.

src/content/
├── work/
│   ├── client-a/
│   │   ├── index.mdx
│   │   ├── cover.png
│   │   └── gallery/
│   └── client-b/
│       ├── index.mdx
│       └── cover.png
└── posts/
    └── notes-on-craft.mdx

Marketing themes follow the same pattern with posts/ and changelog/.

Add a case study

Create a folder under src/content/work/your-slug/, add an index.mdx, and place the cover image alongside.

---
title: "A short, descriptive title"
client: "Acme"
year: 2026
role: "Lead designer"
summary: "One sentence on what shipped and why it mattered."
cover: "./cover.png"
coverAlt: "Acme dashboard showing the new reporting view."
gallery:
  - { src: "./gallery/01.png", alt: "Onboarding step one." }
  - { src: "./gallery/02.png", alt: "Onboarding step two." }
publishedAt: 2026-04-01
featured: true
---

Brief in two paragraphs. What the team had, what changed, and what the new state allows.

## Process

Set the constraints before the solution. Most readers want to know how a designer thinks, not how the final pixel landed.

The schema in src/content.config.ts rejects entries with missing fields at build time, so a typo here surfaces in the dev server console rather than reaching production.

Reference an entry from a page

Inside any Astro page, pull a collection through astro:content.

import { getCollection } from "astro:content";

const work = (await getCollection("work", ({ data }) => !data.draft))
  .sort((a, b) => +b.data.publishedAt - +a.data.publishedAt);

Do not import MDX files through relative paths. The glob loader owns discovery.

Drafts and dates

Set draft: true on a frontmatter field to keep an entry out of production. Dates use ISO 8601 (2026-04-22). The schema coerces strings to Date objects automatically.