# Content and assets

> Add blog posts and documentation pages through Astro content collections, refresh product screenshots, and regenerate Open Graph images.

## Content collections

Blog posts and documentation pages are Astro content collections defined in `src/content.config.ts`.
Adding a Markdown file to a collection is enough: the sidebar, search index, prev/next navigation and
the raw `/docs/<slug>.md` route are all derived from the collection.

- **Blog**: add `src/content/blog/<slug>.md` with frontmatter `title`, `description`, `publishDate` and
  optional `updatedDate`, `author`, `tags`, `draft`, `ogImage`. Set `draft: true` to keep a post out of
  the production build.
- **Docs**: add `src/content/docs/<slug>.md` with frontmatter `title`, `description`, `section` and
  `order`. Pages are grouped by `section` and sorted by `order`; a section appears in the sidebar at the
  position of its lowest-ordered page (these Landing site pages sit in the `Landing site` section).

## Screenshots and the product tour

The product screenshots in `public/screenshots/` are real captures from the running app, taken by
`scripts/capture-screenshots.mjs` (its header documents the seed and capture flow). Re-run that script
after a UI change rather than editing the images by hand. `ScreenshotFrame.astro` renders each capture
in both theme variants, and `ProductTour.astro` is the tabbed gallery that presents them.

## Open Graph images

Open Graph images are generated at build time. The `build:og` script (`scripts/generate-og.mjs`) runs
automatically before `astro build` when you run `pnpm build`, producing the default `public/og-image.png`
plus a per-page image under `public/og/...` for each page, blog post and docs page. There is no manual
step: build the site and the images are regenerated.

## Checklist

- [ ] Add content by dropping a Markdown file into `src/content/blog/` or `src/content/docs/` with the
  right frontmatter.
- [ ] Re-run `scripts/capture-screenshots.mjs` after UI changes; do not hand-edit the screenshots.
- [ ] Run `pnpm build` to produce the static site and regenerate every Open Graph image.