In Production

DealerClick.com: An Astro Islands Marketing Site

TL;DR: A fast, SEO-first marketing site built on Astro 5 with React islands — most of the page ships as static HTML and only the interactive bits hydrate. JSON-LD structured data, OpenGraph/Twitter cards, an auto-generated sitemap, and an oklch-based theme system with dark mode.

The marketing site for an automotive DMS platform, built to be fast by default and easy to find. It uses Astro 5’s islands architecture: the pages render as static HTML and only the genuinely interactive components — the header and top bar — ship as React islands and hydrate on the client. Everything else stays zero-JS.

Stack

Astro 5 · React 19 (via @astrojs/react, used only for islands) · TypeScript · Tailwind CSS v4 with an @theme directive (oklch color space, dark mode via a .dark class) · @astrojs/sitemap · compressHTML enabled.

What it does well

  • Islands, not a SPAHeaderIsland / TopBarIsland hydrate; the rest is static, so the JavaScript footprint stays small.
  • SEO baked in — OpenGraph and Twitter cards, JSON-LD structured data (BlogPosting, product schema), canonical URLs, and an auto-generated sitemap.
  • Theme system — CSS custom properties in oklch with first-class dark mode, configured via Tailwind v4’s @theme rather than a JS config.
  • Content structure — product, pricing, and blog pages organized as Astro routes.

The project’s README reports a typical Lighthouse score of 95+, all-green Core Web Vitals, an SEO score of 100 (with proper content), and WCAG 2.1 AA accessibility — the kind of numbers the islands-first approach is designed to hit.