Skip to content
Slicekit

Landing site

Content and assets

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

View .md
On this page

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.