Astro Frontend UI

Astro Frontend UI

Overview

Implement a fast Astro public site that consumes WordPress via /graphql, keeps client JS minimal, and follows the repo’s UI style requirements. Focus on file outputs under frontend/ and a small GraphQL client.

Workflow

1. Inspect existing frontend/ files for Astro + Tailwind v4 setup and adjust only within that subtree.
2. Ensure frontend/Dockerfile, package.json, and astro.config.mjs align with Tailwind v4 via Vite and dev server on 0.0.0.0:4321.
3. Implement src/lib/cms.ts with endpoint resolution and two GraphQL queries.
4. Build pages (/, /blog, /blog/[slug]) in Astro with card-based UI and graceful empty states.
5. Use React islands only for interactive widgets, and keep everything else server-rendered.

Non-Negotiables

• Use Tailwind CSS v4 via the Vite plugin; do not use deprecated Astro Tailwind integration.
• Keep JS minimal and limit React to islands only.
• UI style: clean, card-based, generous spacing, 2xl radii, subtle shadows.

Default Stack

• Use react + react-dom only for islands.
• Use shadcn/ui components (Button/Card/Dialog/Dropdown) when interaction is needed.
• Use lucide-react icons as needed.
• Use sonner for toasts if useful.
• Use graphql-request or an equivalent tiny GraphQL client.

Required Outputs

• Create or update under frontend/:
  • Dockerfile
  • package.json
  • astro.config.mjs
  • src/lib/cms.ts
  • src/pages/index.astro
  • src/pages/blog/index.astro
  • src/pages/blog/[slug].astro
  • src/components/* (Header, Footer, PostCard, Hero, FeatureGrid, CTA)

Data Layer

• CMS endpoint is ${PUBLIC_CMS_URL || ASTRO_PUBLIC_CMS_URL}/graphql.
• Provide queries:
  • list posts: title, slug, excerpt, date
  • post by slug: title, content, date
• Handle empty states for no posts.

Acceptance Checklist

• http://localhost:8080/ renders home.
• /blog renders list or empty state.
• /blog/<slug> renders content when posts exist.
• No unnecessary client JS outside islands.