TrademarkTrademark
Guides
Surfaces

Blog

An MDX blog with a lead story, featured posts, a dated archive, topic filters and an Aveiro newsletter.
The blog surface is an MDX blog at /blog. It requires no slices and runs on zero environment variables: posts are files in the repository. With the landing surface, the blog wears the marketing site's banner, header and footer, so it reads as part of the same site. On its own it gets a slim header and footer from src/app/(blog)/blog/components/BlogShell.tsx, and the manifest's rootRedirect sends / to /blog.

Routes

  • /blog — the newest post as a wide card, the next two side by side, then every older post in a dated list. Tags become filter chips above it all.
  • /blog/<slug> — one post, with a table of contents and three more posts.
  • /blog/sitemap.xml — the index and every post, listed in /robots.txt when the landing surface is there.
Titles, descriptions and canonical URLs are the blog object in src/resources/seo.js.

Posts

A post is an MDX file in src/content/blog/; the file name is the slug. Give every post an image (16:9) and a tag: the three newest posts show their covers, the archive shows a small thumbnail, and tags are the topics people filter by. A tag used by one post still gets a chip, so keep the list short. The archive row is src/components/posts/PostRow.tsx, shared with the Spotlight surface's essay list, so every list of posts in the app looks the same.

The newsletter

The row above the archive posts to an Aveiro embed form through src/lib/newsletter.ts. Set NEXT_PUBLIC_AVEIRO_SITE_ID to your site's ID from Audience → Embed in Aveiro. The ID is public and needs no secret. Without it, submitting shows "The newsletter is not configured yet." and nothing is sent.
Last updated November 1, 2026
Edit this page on GitHub