107 lines
6.1 KiB
Markdown
107 lines
6.1 KiB
Markdown
### **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. |