← Back to Blog

Analytics, visual regression checks, and system diagrams

Added PostHog analytics, wired Chromatic visual regression checks into CI, and documented the site architecture with D2.

2026-01-02

Updates

  • Added PostHog analytics for both the site and docs, injected via layout/head.
  • Moved PostHog configuration to .env using PUBLIC_POSTHOG_KEY and optional PUBLIC_POSTHOG_HOST.
  • Added Chromatic and a GitHub Actions workflow for Storybook visual regression checks.
  • Added D2 (diagrams as code) and generated a site architecture diagram as an SVG.

Notes

Less UI today, more infrastructure. I added analytics, visual regression checks, and a diagram so future changes are easier to track and harder to break. These additions support long-term maintainability.

PostHog gives me visibility into what’s being used and what’s being ignored, which helps me prioritize documentation and improvements based on real behavior instead of guesses.

Chromatic adds a safety net for UI changes. As the component library grows, visual regression checks make it easier to review updates confidently and catch accidental drift early.

D2 is the same idea, but for architecture. Having a diagram keeps the system easy to reason about as more pieces get added.


Site architecture diagram

Site architecture overview: the portfolio and docs ship together, while Storybook is published separately for component review and visual regression testing.