pukpuklouis/website-enchun-mgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fdde6d802033762f67026bb72442696d6f3e8522
website-enchun-mgr/PRD.md

6.1 KiB
Raw Blame History

Product Requirements Document: enchun.tw Website Migration to Astro (v2)

1. Introduction

This document outlines the requirements for migrating the existing enchun.tw website to a new, modern web application built with the Astro framework and managed by Payload CMS. The primary goal is to create a faster, more secure, and more maintainable website, complete with a secure authentication system and a user-friendly editing experience for copywriters. The project will preserve all existing content, functionality, and SEO value while implementing a more logical site structure.

2. Goals & Objectives

  • Performance: Achieve Lighthouse scores of 95+ on public-facing pages.
  • Maintainability: Provide a user-friendly, web-based interface for content editors via Payload CMS, protected by a robust authentication system.
  • Developer Experience: Leverage Astro's modern features for a fast frontend build process and easier component management.
  • Security: Implement role-based access control (RBAC) to secure the CMS and dashboard areas.
  • Future-Proofing: Build on a modern, flexible stack that can easily integrate with other services and APIs.

3. Target Audience

  • Public Users: Potential and existing clients, industry peers.
  • Authenticated Users:
    • Content Editors/Copywriters: Internal team members who will manage website content.
    • Administrators: Technical staff responsible for managing users and site settings.

4. Functional Requirements

4.1. Redesigned Page Structure & Routing

The application will feature a clear separation between public and protected routes.

  • Public Routes:

    • / (Homepage)
    • /about
    • /contact
    • /solutions
    • /blog (Blog listing page)
    • /blog/[slug] (Individual blog posts)
    • /blog/category/[category-slug] (Blog category pages)
    • /portfolio (Portfolio listing page)
    • /portfolio/[slug] (Individual portfolio projects)
    • /teams
    • /marketing-class

  • Protected Routes (Require Authentication):

    • /admin/login (Login page)
    • /admin/dashboard (A general dashboard for authenticated users)
    • /admin/cms (The embedded Payload CMS admin interface)

4.2. Authentication & Authorization

  • Authentication Provider: The site will use Auth.js (astro-auth) to handle user authentication.
  • Login: A dedicated login page will be available at /admin/login.
  • Access Control: All routes under /admin/* will be protected. Unauthenticated users attempting to access these routes will be redirected to the login page.
  • Role-Based Access Control (RBAC):
    • Administrator (admin): Full access to the Payload CMS, including content creation/editing, user management, and system settings.
    • Editor (editor): Can create, edit, and manage content (blog posts, portfolio items) but cannot access system settings or manage users.
    • The CMS and dashboard will restrict visibility and actions based on the logged-in user's role.

4.3. Key Features

  • Content Management: All public content will be managed via a self-hosted Payload CMS instance. The CMS admin panel will be accessible only to authenticated users at /admin/cms.
  • Contact Form: The public /contact page will feature a functional contact form. Submissions will be handled securely by a Cloudflare Worker.
  • SEO:
    • A dynamic sitemap.xml will be automatically generated.
    • Payload CMS will include dedicated SEO fields (meta title, description, Open Graph tags) for all pages and collections.
    • Redirects: A 301 redirect map will be implemented to permanently redirect all old URLs from enchun-sitemap.md to their new, redesigned equivalents to preserve SEO equity.

5. Non-Functional Requirements

  • Styling: The project will use Tailwind CSS.
  • Accessibility: The site must adhere to WCAG 2.1 AA standards.
  • Deployment: The Astro frontend will be deployed on Cloudflare Pages in SSR (Server-Side Rendering) mode to support the authentication layer. The Payload CMS backend and serverless functions will run on Cloudflare Workers.
  • Workspace Layout: Monorepo managed with pnpm workspaces. Packages include frontend/ (Astro), backend/ (Payload CMS), and packages/shared/ for cross-cutting TypeScript utilities.

6. Technology Stack

  • Framework: Astro (in SSR mode)
  • Authentication: Auth.js (astro-auth)
  • UI Components: Astro components
  • Styling: Tailwind CSS
  • CMS: Payload CMS
  • Deployment: Cloudflare Pages & Cloudflare Workers

7. Migration Plan (High-Level)

  1. Phase 1: Project Setup
    • Initialize a pnpm workspace monorepo with frontend/, backend/, and packages/shared/.
    • Initialize a new Astro project configured for SSR inside frontend/.
    • Set up Payload CMS for Cloudflare Workers inside backend/.
    • Configure Tailwind CSS and shared TypeScript utilities in packages/shared/.
  2. Phase 2: Authentication & CMS Setup
    • Integrate astro-auth and configure the login flow.
    • Define the collections and user roles (admin, editor) within Payload.
  3. Phase 3: Content Migration
    • Write a script to import content from the CSV files into the Payload CMS via its API.
  4. Phase 4: Page & Template Implementation
    • Build all public pages and templates, fetching data from the Payload API.
    • Build the protected /admin area, including the dashboard and the embedded CMS panel.
  5. Phase 5: Functionality & SEO
    • Implement the contact form with its Cloudflare Worker backend.
    • Implement the 301 redirect map and all other SEO requirements.
  6. Phase 6: Testing & Deployment
    • Thoroughly test all public pages, protected routes, user roles, and functionality.
    • Deploy the full stack to Cloudflare.
    • Configure DNS and go live.

8. Out of Scope

  • Frontend user accounts or public-facing login capabilities.
  • A complete visual redesign. The project aims to migrate the existing design to the new framework.