Files
website-enchun-mgr/astro-routing-mapping.md
pukpuk c2d4c8d0a0 chore(workflow): add AI-assisted workflow commands and configurations
Add comprehensive workflow commands for AI-assisted development:
- Claude commands: analyze, clarify, plan
- Kilocode workflows: full feature development lifecycle
- Opencode commands: specification and implementation workflows
- Roo MCP configuration for tool integration

Update .gitignore to exclude .astro build cache directories.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-07 01:06:10 +08:00

4.3 KiB

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.