Skip to content
Strata
announcementtemplateastro

Introducing Strata: a template that documents itself

Why we built Strata, a complete Astro 7 starter, what ships in the box, and how this site is generated from the template it describes.

Updated 3 min read

Every new website starts the same way. You reach for Astro, add Tailwind, wire up a content collection for the blog, remember that you need an Open Graph image endpoint, copy the security headers from the last project, and somewhere around day three you finally write the first real page. Strata exists so that day three becomes hour one.

What it is#

Strata is a Git repository you clone when a project begins. The name spells the stack, SQLite, Tailwind, React, Astro, Turso and Auth, and it is not a UI kit or an Astro theme: it is the complete skeleton of a modern site, with every cross-cutting concern already decided and wired together:

  • Astro 7.3 with static-first output and the new Rust compiler.
  • React 19 islands animated with Motion, hydrated only where a page needs interactivity.
  • Tailwind CSS 4 with OKLCH design tokens and a dark mode that never flashes.
  • Better Auth with email/password, GitHub, Google and magic-link sign-in, email verification, password reset, data export and account deletion.
  • Drizzle ORM + libSQL, using a local file in development and Turso in production.
  • A contact form with a honeypot and per-sender throttling that stores every message before the owner is notified.
  • An admin area with the contact inbox, user management and an audit log, authorised against the database on every request.
  • MDX documentation and blog collections, including tabs, callouts, steps and a table of contents.
  • SEO endpoints: sitemap, robots.txt, RSS, generated OG images, JSON-LD and llms.txt.
  • A hash-based Content Security Policy and hardened response headers.
  • Vitest and Playwright suites, with axe accessibility checks and Lighthouse budgets.
  • Four deploy targets behind one environment variable: Vercel, Cloudflare, Netlify and Node.

A site about itself#

The page you are reading is rendered from the template’s own blog collection. The header, footer and metadata come from src/site.config.ts; the stack table on the home page reads installed versions from pnpm-lock.yaml at build time; the search dialog queries a Pagefind index generated during the build. When the template changes, this site changes with it, which keeps the docs honest.

Try it

Clone the repository, run cp .env.example .env && pnpm install && pnpm db:migrate && pnpm dev, and you have this exact site running locally, including sign-up and the dashboard. pnpm db:seed adds an administrator account for the admin area.

Design decisions worth knowing#

Static first. Only the auth and account routes, the dashboard, the admin area, the API and form actions run on a server. Everything else is prerendered HTML served from a CDN, which is faster and cheaper on every host.

One database client everywhere. The libSQL client resolves to its HTTP build on Cloudflare Workers and edge runtimes and to the native build on Node, so the same src/db/client.ts works on all four targets without conditionals.

Security you can see. The Content Security Policy is generated by Astro with per-page hashes and, on platforms that support it, delivered as a real header for prerendered pages. An end-to-end test fails the build if any page logs a CSP violation.

No client router. Page transitions use the browser’s native cross-document View Transitions API, which keeps the CSP strict and removes a runtime dependency.

What is next#

The changelog tracks every release. Upcoming work includes an optional i18n layout, a newsletter action, and more first-party islands. If something you need is missing, open an issue or a pull request on GitHub.