Landing site
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>.mdwith frontmattertitle,description,publishDateand optionalupdatedDate,author,tags,draft,ogImage. Setdraft: trueto keep a post out of the production build. - Docs: add
src/content/docs/<slug>.mdwith frontmattertitle,description,sectionandorder. Pages are grouped bysectionand sorted byorder; a section appears in the sidebar at the position of its lowest-ordered page (these Landing site pages sit in theLanding sitesection).
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/orsrc/content/docs/with the right frontmatter. - Re-run
scripts/capture-screenshots.mjsafter UI changes; do not hand-edit the screenshots. - Run
pnpm buildto produce the static site and regenerate every Open Graph image.