Implementation Plan: Website Migration to Astro (v2)

Branch: 001-users-pukpuk-dev | Date: 2025-09-19 | Spec: spec.md Input: Feature specification from /Users/pukpuk/Dev/website-enchuntw-migr/specs/001-users-pukpuk-dev/spec.md and PRD.md.

Summary

This plan outlines the migration of enchun.tw to a modern stack using Astro (SSR mode) for the frontend and Payload CMS for the backend, deployed on Cloudflare. The project will create a fast, static website with a secure, role-based admin area for content management using Auth.js, styled with Tailwind CSS. E-commerce functionality is explicitly out of scope.

Technical Context

Language/Version: Astro (JavaScript/TypeScript) Primary Dependencies: Astro, Payload CMS, Auth.js (astro-auth), Tailwind CSS Storage: N/A (handled by Payload CMS) Testing: Vitest (unit), Playwright (e2e) Target Platform: Cloudflare Pages (SSR) & Cloudflare Workers Project Type: Monorepo (pnpm workspaces) Performance Goals: Google Lighthouse score of 95+ Constraints: Adherence to WCAG 2.1 AA standards. Scale/Scope: Migration of existing content (~50 blog posts, ~20 portfolio items).

Constitution Check

No specific constitutional requirements found as the constitution file is a template.

Project Structure

Structure Decision: Monorepo with frontend/, backend/, and packages/shared/ as per PRD.md.

Source Code (repository root)

/
├── backend/          # Payload CMS on Cloudflare Workers
├── frontend/         # Astro (SSR) on Cloudflare Pages
├── packages/
│   └── shared/       # Shared TypeScript utilities, Tailwind config
└── pnpm-workspace.yaml

Phase 0: Outline & Research

Completed. Decisions are reflected in the Technical Context.

Phase 1: Design & Contracts

Completed. Artifacts data-model.md, contracts/, and quickstart.md are still valid.

Phase 2: Task Planning Approach

Task Generation Strategy:

Workspace Setup: Initialize pnpm monorepo.
Backend Setup: Configure Payload CMS collections (Users, BlogPosts, etc.) for Cloudflare.
Frontend Setup: Configure Astro (SSR) with Tailwind CSS.
Authentication: Integrate Auth.js (astro-auth) for /admin/* routes.
Component & Page Creation: Build all pages and components as per the PRD.md and corrected route-structure.md.
Content Migration: Script the import of existing content into Payload.
SEO & Redirects: Implement the 301 redirect map.
Testing: Write contract, integration, and unit tests for the new structure.
Deployment: Configure Cloudflare Pages & Workers deployment.

Estimated Output: 30-40 numbered, ordered tasks in tasks.md.

Progress Tracking

Phase 0: Research complete
Phase 1: Design complete
Phase 2: Task planning complete (approach described)
Phase 3: Tasks generated
Phase 4: Implementation complete
Phase 5: Validation passed

2.9 KiB Raw Blame History