# Implementation Plan: Website Migration to Astro (v2)

**Branch**: `001-users-pukpuk-dev` | **Date**: 2025-09-19 | **Spec**: [spec.md](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
- [X] Phase 0: Research complete
- [X] Phase 1: Design complete
- [X] Phase 2: Task planning complete (approach described)
- [ ] Phase 3: Tasks generated
- [ ] Phase 4: Implementation complete
- [ ] Phase 5: Validation passed