# Astro Routing Mapping

This document specifies the mapping from downloaded HTML files in `research/www.enchun.tw/` to Astro routing files in `frontend/src/pages/`. The purpose is to recreate the Astro pages by converting the HTML content into Astro components.

## Static Routes

| Route | Astro File | Source HTML |
|-------|------------|-------------|
| `/` | `src/pages/index.astro` | `research/www.enchun.tw/index.html` |
| `/about-enchun` | `src/pages/about-enchun.astro` | `research/www.enchun.tw/about-enchun.html` |
| `/contact-us` | `src/pages/contact-us.astro` | `research/www.enchun.tw/contact-us.html` |
| `/marketing-solutions` | `src/pages/marketing-solutions.astro` | `research/www.enchun.tw/marketing-solutions.html` |
| `/news` | `src/pages/news.astro` | `research/www.enchun.tw/news.html` |
| `/website-portfolio` | `src/pages/website-portfolio.astro` | `research/www.enchun.tw/website-portfolio.html` |
| `/teams` | `src/pages/teams.astro` | `research/www.enchun.tw/teams.html` |

## Dynamic Routes

### Blog Posts (`/xing-xiao-fang-da-jing/[slug]`)

- Astro File: `src/pages/xing-xiao-fang-da-jing/[slug].astro`
- Source Folder: `research/www.enchun.tw/xing-xiao-fang-da-jing/`
- Description: Dynamic individual blog post pages. Posts are managed in Payload CMS and can be added/removed.
- Implementation: Use Astro's `getStaticPaths` to fetch post slugs dynamically from Payload CMS API.
- Files: Existing `.html` files for initial migration; future paths generated from CMS.

### Blog Categories (`/wen-zhang-fen-lei/[slug]`)

- Astro File: `src/pages/wen-zhang-fen-lei/[slug].astro`
- Source Folder: `research/www.enchun.tw/wen-zhang-fen-lei/`
- Description: Dynamic category listing pages for blog posts. Categories are managed in Payload CMS and can be added/removed dynamically.
- Current categories in Payload CMS (subject to change):
  - 恩群數位最新公告 (slug: en-qun-shu-wei-zui-xin-gong-gao)
  - 行銷時事最前線 (slug: xing-xiao-shi-shi-zui-qian-xian)
  - Meta小學堂 (slug: meta-xiao-xue-tang)
  - Google小學堂 (slug: google-xiao-xue-tang)
- Implementation: Use Astro's `getStaticPaths` to fetch category slugs dynamically from Payload CMS API.
- Files: Existing `.html` files for initial migration; future paths generated from CMS.

### Portfolio Projects (`/webdesign-profolio/[slug]`)

- Astro File: `src/pages/webdesign-profolio/[slug].astro`
- Source Folder: Not directly available; portfolio items are managed in Payload CMS.
- Description: Dynamic individual portfolio project pages. Projects are managed in Payload CMS and can be added/removed.
- Implementation: Use Astro's `getStaticPaths` to fetch project slugs dynamically from Payload CMS API.
- Example mappings: `web-design-project-2` → `/webdesign-profolio/web-design-project-2` (based on current sitemap)

## Conversion Process

1. For static routes: Convert HTML files directly to Astro pages by extracting content, converting styles to Tailwind, and breaking into components.
2. For dynamic routes: Create Astro files with `getStaticPaths` to fetch slugs from Payload CMS API. For initial migration, use existing HTML files as placeholders; replace with CMS data integration.
3. Ensure SEO meta tags are preserved or dynamically set from CMS fields.
4. Categories and content are editable in Payload CMS, so routes will be generated dynamically post-migration.

## Blog Post Structure (from DevTools Inspection)

Based on inspecting a sample post (e.g., `/xing-xiao-fang-da-jing/2-zhao-yao-kong-xiao-fei-zhe-de-xin`):

- **Header/Navigation**: Top nav with links to main sections; includes "回到文章列表" (back to list) link.
- **Title**: `<h1>` and `<h2>` with post title.
- **Publish Date**: "文章發布日期：" + date (e.g., "January 20, 2022").
- **Content**: Text paragraphs separated by `<br>` tags; no images or rich media in sample.
- **Footer**: Company info, contact details, links to services and categories.

Map to Payload CMS: title, publish_date, content (rich text), category.

## Notes

- All HTML files are in Chinese; ensure proper encoding and localization if needed.
- Images and assets referenced in HTML may need to be downloaded and placed in `frontend/public/`.
- Scripts and external dependencies should be migrated to Astro's script handling.
- For dynamic routes, implement `getStaticPaths` to pull slugs from CMS; use existing HTML for initial static generation.