# 05 — Content Migration Map extracted Divi content into AM HTML templates. This is the build phase. Follow `01-project-structure.md` for directory layout and `03-build-pipeline.md` for JSON + template stamping. ## Source files After running Phase 2-4 scripts, `.planning/data/` contains: ``` .planning/data/ ├── pages.json ← all published pages (from analyze_db.py) ├── site-info.json ← domain, plugin list, Divi version ├── design-system.json ← colors, fonts, spacing tokens └── content/ ├── home.json ← parsed sections for home page ├── about.json ← parsed sections for about page ├── services.json └── ... ← one file per published page ``` ## Information architecture for yoga sites Standard AM structure for a yoga studio / wellness site: ``` / home (hero, classes preview, testimonials, CTA) /about/ about / story / instructors /classes/ class schedule index /classes/{slug}.html one page per class type (hatha, vinyasa, yin, etc.) /private-sessions/ 1:1 session offerings /workshops/ workshops + retreats index /contact/ contact + booking form /blog/ optional blog index /blog/{slug}.html individual blog posts /404.html /500.html /robots.txt /sitemap.xml ``` Map every WP page slug to this structure first. Some WP slugs may need to be consolidated, renamed, or dropped. Document the redirect map in `.planning/redirect-map.txt` (old slug → new path). ## Build order Build in this sequence. Each page uses the previous as a reference: 1. `src/assets/css/main.css` — design tokens, reset, typography, layout grid 2. `src/assets/css/components.css` — header, footer, hero, cards, forms, nav 3. `src/components/header.html` — navigation 4. `src/components/footer.html` — footer links, contact info 5. `src/assets/js/components.js` — fetch + inject header/footer 6. `src/assets/js/main.js` — scroll animations, intersection observer 7. `src/index.html` — home page (this IS the design system in working form) 8. `src/about/index.html` 9. `src/classes/index.html` + individual class pages (from JSON template if 4+) 10. `src/contact/index.html` + AM form 11. `src/blog/index.html` + individual posts 12. `src/robots.txt`, `src/sitemap.xml`, `src/404.html`, `src/500.html` ## HTML page skeleton Every page uses the same skeleton. Copy from 06-seo-meta.md for the full `` requirements. Shell: ```html {{seo_title}}
``` ## Section HTML patterns Map each `content/{slug}.json` section to one of these AM patterns: ### Hero (role: "hero") ```html

Move With Intention

Discover yoga classes for all levels in [City].

Explore Classes Book a Session
``` ### Feature grid (4-col blurb modules) ```html

Why VibrantYou Yoga

All Levels Welcome

From first-timers to advanced practitioners.

``` ### Testimonials (3-col) ```html

What Students Say

"..."

``` ### CTA section ```html

Ready to Begin?

Your first class is on us.

Book a Free Class
``` ## Class pages — JSON template build If there are 4+ class types (Hatha, Vinyasa, Yin, Meditation, etc.), use the build pipeline: ``` src/classes/ ├── _template.html ← class detail page template ├── hatha.html ← generated from classes.json ├── vinyasa.html ├── yin.html └── meditation.html .planning/data/ └── classes.json ← array of class objects ``` `classes.json` schema: ```json [ { "slug": "hatha", "name": "Hatha Yoga", "title": "Hatha Yoga Classes | VibrantYou Yoga", "meta_description": "...", "canonical": "https://vibrantyou.yoga/classes/hatha.html", "hero_h1": "Hatha Yoga", "hero_lead": "A grounding practice for all experience levels.", "description": "

...

", "duration": "60 min", "level": "All levels", "schedule": "Mon, Wed, Fri — 9:00 AM", "instructor": "Sarah M.", "faqs": [ { "q": "Do I need prior experience?", "a": "No." } ] } ] ``` ## Events Manager → static schedule The site uses Events Manager plugin. For static migration: - Extract recurring class schedule from the database (`wp_em_events` table) - Convert to a static schedule table / cards in `src/classes/index.html` - Do NOT recreate a dynamic booking system unless explicitly requested - Link the "Book" button to the contact form or an external booking URL ## Image remapping Every `` extracted from Divi content will have a WordPress upload URL like `/wp-content/uploads/2026/03/image.jpg`. Remap to AM path: - Source: `wpress-extract/uploads/2026/03/image.jpg` - AM dest: `src/assets/images/image.webp` (after WebP conversion) - HTML: `...` Always include `width`, `height`, `loading="lazy"`, and `alt` on every ``. ## After build — verify ```bash # Zero unreplaced template placeholders grep -rn "{{" src/**/*.html # All pages have canonical grep -rL 'rel="canonical"' src/**/*.html # All images have alt text grep -rn '