Migrate from React SPA to Astro for SSR/SSG

[chriscarrollsmith]

Summary

Migrate the site from a client-side rendered React SPA (Vite + HashRouter) to Astro with static site generation for improved SEO and indexability.

Problem

• HashRouter (/#/ URLs) prevents search engines from treating routes as distinct pages
• Client-side rendering serves an empty <div id="root"> — crawlers that don't execute JS see no content
• No sitemap.xml exists

Proposed Solution

• Framework: Astro with React islands for interactive components
• Static pages: Convert Home, Legal, Store, and 404 to .astro files with pre-rendered HTML
• Interactive islands: Wrap FullCalendar, FormSpree contact form, ConvertKit subscribe form, and Calendly widget as React client:load / client:visible islands
• Comic book design: Port SVG filters (turbulence, displacement, Ben-Day dots), Tailwind CSS, and custom CSS directly — these are framework-agnostic
• Routing: Replace HashRouter with Astro's file-based routing (/legal, /store instead of /#/Legal, /#/Store)
• SEO: Add @astrojs/sitemap, proper meta tags per page, and Open Graph tags
• Deployment: Continue deploying to GitHub Pages via CI/CD

Key Components to Migrate

Component	Strategy
ComicTitle, ComicPanel, ComicNarration, ScallopedOval	Convert to Astro components (no JS)
ThreePanelBlock, ThreePanelRow, FivePanelBlock	Convert to Astro components (no JS)
Hero, Nav, Story, Credits, Footer	Convert to Astro components (no JS)
FullCalendar (Events)	React island (client:visible)
ContactForm (FormSpree)	React island (client:load)
SubscribeForm (ConvertKit)	React island (client:load)
Bookings (Calendly)	React island (client:visible)
Products (Zazzle feed)	Astro component with static data
ComicTitle responsive sizing	Replace @react-hook/window-size with CSS clamp()

JSON Content Files

Keep existing JSON files in src/customizations/ or migrate to Astro content collections.

Out of Scope

• Visual redesign — the comic book aesthetic stays
• Content changes
• New features

🤖 Generated with Claude Code