247 lines
7.6 KiB
Markdown
247 lines
7.6 KiB
Markdown
# 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
|
|
`<head>` requirements. Shell:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="site-root" content="/">
|
|
<title>{{seo_title}}</title>
|
|
<meta name="description" content="{{seo_description}}">
|
|
<link rel="canonical" href="{{canonical}}">
|
|
<!-- og, twitter, schema — see 06-seo-meta.md -->
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
<link rel="stylesheet" href="/assets/css/components.css">
|
|
</head>
|
|
<body>
|
|
<div id="header-placeholder"></div>
|
|
|
|
<main>
|
|
<!-- page sections go here -->
|
|
</main>
|
|
|
|
<div id="footer-placeholder"></div>
|
|
<script src="/assets/js/components.js"></script>
|
|
<script src="/assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Section HTML patterns
|
|
|
|
Map each `content/{slug}.json` section to one of these AM patterns:
|
|
|
|
### Hero (role: "hero")
|
|
|
|
```html
|
|
<section class="hero hero--dark">
|
|
<div class="container">
|
|
<div class="hero__content">
|
|
<h1 class="hero__title">Move With Intention</h1>
|
|
<p class="hero__lead">Discover yoga classes for all levels in [City].</p>
|
|
<div class="hero__actions">
|
|
<a href="/classes/" class="btn btn--primary">Explore Classes</a>
|
|
<a href="/contact/" class="btn btn--outline">Book a Session</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### Feature grid (4-col blurb modules)
|
|
|
|
```html
|
|
<section class="section section--light">
|
|
<div class="container">
|
|
<h2 class="section__title text-center">Why VibrantYou Yoga</h2>
|
|
<div class="grid grid--4">
|
|
<div class="feature-card">
|
|
<div class="feature-card__icon"><!-- SVG icon --></div>
|
|
<h3 class="feature-card__title">All Levels Welcome</h3>
|
|
<p class="feature-card__body">From first-timers to advanced practitioners.</p>
|
|
</div>
|
|
<!-- repeat -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### Testimonials (3-col)
|
|
|
|
```html
|
|
<section class="section section--white">
|
|
<div class="container">
|
|
<h2 class="section__title text-center">What Students Say</h2>
|
|
<div class="grid grid--3">
|
|
<blockquote class="testimonial">
|
|
<p class="testimonial__quote">"..."</p>
|
|
<footer class="testimonial__author">
|
|
<strong>Jane D.</strong>
|
|
<span>Student since 2024</span>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### CTA section
|
|
|
|
```html
|
|
<section class="section section--brand">
|
|
<div class="container text-center">
|
|
<h2 class="section__title">Ready to Begin?</h2>
|
|
<p class="section__lead">Your first class is on us.</p>
|
|
<a href="/contact/" class="btn btn--white btn--lg">Book a Free Class</a>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
## 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": "<p>...</p>",
|
|
"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 `<img src="...">` 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: `<img src="/assets/images/image.webp" alt="..." loading="lazy" width="800" height="600">`
|
|
|
|
Always include `width`, `height`, `loading="lazy"`, and `alt` on every `<img>`.
|
|
|
|
## 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 '<img' src/**/*.html | grep -v 'alt="[^"]'
|
|
|
|
# Protection check (after deploy)
|
|
bash /home/sirdrez/arisingmedia-websites/.am-webdesign-sops/tools/verify-protection.sh https://{domain}
|
|
```
|
|
|
|
## Next step
|
|
|
|
Proceed to `06-media-assets.md` for image migration and WebP conversion,
|
|
then `07-seo-preservation.md` for redirect map and meta tag audit.
|