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.