Files

T

2026-06-09 18:31:59 +02:00

7.6 KiB

Raw Blame History

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:

src/assets/css/main.css — design tokens, reset, typography, layout grid
src/assets/css/components.css — header, footer, hero, cards, forms, nav
src/components/header.html — navigation
src/components/footer.html — footer links, contact info
src/assets/js/components.js — fetch + inject header/footer
src/assets/js/main.js — scroll animations, intersection observer
src/index.html — home page (this IS the design system in working form)
src/about/index.html
src/classes/index.html + individual class pages (from JSON template if 4+)
src/contact/index.html + AM form
src/blog/index.html + individual posts
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:

<!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")

<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)

<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)

<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

<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:

[
  {
    "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

# 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.

7.6 KiB Raw Blame History