migration wip
This commit is contained in:
File diff suppressed because it is too large
Load Diff
359
components/content/WPBakeryMapping.md
Normal file
359
components/content/WPBakeryMapping.md
Normal file
@@ -0,0 +1,359 @@
|
||||
# WPBakery to Next.js Component Mapping - Detailed Analysis
|
||||
|
||||
This document provides detailed per-page analysis of WPBakery patterns found in the WordPress site and how they are mapped to modern React components.
|
||||
|
||||
## Pages Analyzed
|
||||
|
||||
### 1. Home Pages (corporate-3-landing-2 / start)
|
||||
|
||||
**Patterns Found:**
|
||||
- 25 vc-rows with 43 vc-columns total
|
||||
- Complex nested structure (24 nested rows)
|
||||
- Hero section with h1
|
||||
- Numbered features (h6 + h4 + p)
|
||||
- Card grids (2-4 columns)
|
||||
- Testimonial sections (16 instances)
|
||||
- Team member sections
|
||||
|
||||
**Specific Mappings:**
|
||||
```html
|
||||
<!-- Hero Pattern -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<h1>We are helping to expand...</h1>
|
||||
<p>Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to: <Hero title="..." subtitle="..." /> -->
|
||||
|
||||
<!-- Numbered Features (Home Style) -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<h6>01</h6>
|
||||
<h4>Supply to energy suppliers...</h4>
|
||||
<p>Description...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to: Flex layout with number + title + description -->
|
||||
|
||||
<!-- Nested Rows -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<div class="vc-row">...</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to: Recursive ContentRenderer with parsePatterns=true -->
|
||||
```
|
||||
|
||||
**Home-Specific Enhancements:**
|
||||
- Handles 25+ row complexity through recursive parsing
|
||||
- Preserves nested structure for proper layout
|
||||
- Converts numbered features to modern flex layout
|
||||
- Maps testimonial quotes to styled blocks
|
||||
|
||||
### 2. Team Pages (team)
|
||||
|
||||
**Patterns Found:**
|
||||
- 8 vc-rows with 16 vc-columns
|
||||
- 4 testimonial sections with quotes
|
||||
- 7 nested rows
|
||||
- Quote patterns with German quotes („“)
|
||||
|
||||
**Specific Mappings:**
|
||||
```html
|
||||
<!-- Testimonial/Quote Pattern -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<h1>Michael Bodemer</h1>
|
||||
<h2>„Challenges exist to be solved...“</h2>
|
||||
<p>Detailed description...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<Section>
|
||||
<div className="bg-gray-50 p-6 rounded-lg border-l-4 border-primary">
|
||||
<h3>Michael Bodemer</h3>
|
||||
<blockquote>„Challenges exist...“</blockquote>
|
||||
</div>
|
||||
</Section>
|
||||
-->
|
||||
```
|
||||
|
||||
### 3. Terms Pages (terms / agbs)
|
||||
|
||||
**Patterns Found:**
|
||||
- 19 vc-rows with 38 vc-columns
|
||||
- Numbered features with h6 + h3 (different from home)
|
||||
- PDF download link
|
||||
- 2 testimonial sections
|
||||
|
||||
**Specific Mappings:**
|
||||
```html
|
||||
<!-- Numbered Terms Pattern -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<h6>1.</h6>
|
||||
<h3>Allgemeines</h3>
|
||||
<p>Paragraph 1...</p>
|
||||
<p>Paragraph 2...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<div className="mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl font-bold text-primary">1.</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold mb-2">Allgemeines</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-11 mt-2">Paragraph 1...</div>
|
||||
<div className="ml-11 mt-2">Paragraph 2...</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- PDF Download -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<a href=".../agbs.pdf">Download als PDF</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<Section>
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<a href="/media/agbs.pdf" className="text-primary hover:underline">
|
||||
📄 Download als PDF
|
||||
</a>
|
||||
</div>
|
||||
</Section>
|
||||
-->
|
||||
```
|
||||
|
||||
### 4. Contact Pages (contact / kontakt)
|
||||
|
||||
**Patterns Found:**
|
||||
- 4 vc-rows with 7 vc-columns
|
||||
- Contact form (frm_forms)
|
||||
- Contact info blocks
|
||||
- 3 nested rows
|
||||
|
||||
**Specific Mappings:**
|
||||
```html
|
||||
<!-- Contact Form Pattern -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<div class="frm_forms">...</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<Section>
|
||||
<ContactForm />
|
||||
</Section>
|
||||
-->
|
||||
|
||||
<!-- Contact Info Pattern -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<p>KLZ Cables<br/>Raiffeisenstraße 22<br/>73630 Remshalden</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<Section>
|
||||
<div className="bg-gray-100 p-6 rounded-lg">
|
||||
<ContentRenderer content="..." parsePatterns={false} />
|
||||
</div>
|
||||
</Section>
|
||||
-->
|
||||
```
|
||||
|
||||
### 5. Legal/Privacy Pages (legal-notice, privacy-policy, impressum, datenschutz)
|
||||
|
||||
**Patterns Found:**
|
||||
- 1 vc-row with 2 vc-columns
|
||||
- Hero section with h1
|
||||
- Simple content structure
|
||||
- Contact info blocks
|
||||
|
||||
**Specific Mappings:**
|
||||
```html
|
||||
<!-- Simple Hero + Content -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<h1>Legal Notice</h1>
|
||||
<p>Content...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<Hero title="Legal Notice" />
|
||||
<Section>
|
||||
<ContentRenderer content="..." parsePatterns={false} />
|
||||
</Section>
|
||||
-->
|
||||
```
|
||||
|
||||
### 6. Thanks Pages (thanks / danke)
|
||||
|
||||
**Patterns Found:**
|
||||
- 2 vc-rows with 3 vc-columns
|
||||
- Hero pattern
|
||||
- Grid structure
|
||||
|
||||
**Specific Mappings:**
|
||||
```html
|
||||
<!-- Thank You Hero -->
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<h2>Thank you very much!</h2>
|
||||
<p>We've received your message...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maps to:
|
||||
<Hero title="Thank you very much!" subtitle="We've received your message..." />
|
||||
-->
|
||||
```
|
||||
|
||||
### 7. Blog Pages (blog)
|
||||
|
||||
**Patterns Found:**
|
||||
- 2 vc-rows (empty or minimal content)
|
||||
- No specific patterns
|
||||
|
||||
**Specific Mappings:**
|
||||
- Falls back to generic parsing
|
||||
- Uses page-specific routing for blog listing
|
||||
|
||||
### 8. Products Pages (products / produkte)
|
||||
|
||||
**Patterns Found:**
|
||||
- Empty content
|
||||
- Uses page-specific routing for product catalog
|
||||
|
||||
**Specific Mappings:**
|
||||
- Routes to `/products` or `/produkte` page components
|
||||
- Uses ProductList component
|
||||
|
||||
## Parser Pattern Priority
|
||||
|
||||
The parser processes patterns in this order:
|
||||
|
||||
1. **Hero Sections** - Single column with h1/h2
|
||||
2. **Contact Forms** - Forms with frm_forms class
|
||||
3. **Numbered Features (Home)** - h6 + h4 structure
|
||||
4. **Numbered Features (Terms)** - h6 + h3 structure
|
||||
5. **Testimonials/Quotes** - Contains quotes or team structure
|
||||
6. **PDF Downloads** - Links ending in .pdf
|
||||
7. **Contact Info** - Contains @, addresses, or KLZ Cables
|
||||
8. **Grid/Card Patterns** - 2-4 columns with titles/images
|
||||
9. **Nested Rows** - Rows containing other rows
|
||||
10. **Simple Content** - h3 + p structure
|
||||
11. **Empty Rows** - Whitespace only
|
||||
12. **Fallback** - Generic section
|
||||
|
||||
## Component Props Enhancement
|
||||
|
||||
### ContentRenderer
|
||||
```typescript
|
||||
interface ContentRendererProps {
|
||||
content: string;
|
||||
className?: string;
|
||||
sanitize?: boolean;
|
||||
processAssets?: boolean;
|
||||
convertClasses?: boolean;
|
||||
parsePatterns?: boolean;
|
||||
pageSlug?: string; // NEW: For page-specific parsing
|
||||
}
|
||||
```
|
||||
|
||||
### Usage Examples
|
||||
```tsx
|
||||
// Home page
|
||||
<ContentRenderer
|
||||
content={page.contentHtml}
|
||||
pageSlug="corporate-3-landing-2"
|
||||
/>
|
||||
|
||||
// Terms page
|
||||
<ContentRenderer
|
||||
content={page.contentHtml}
|
||||
pageSlug="terms"
|
||||
/>
|
||||
|
||||
// Contact page
|
||||
<ContentRenderer
|
||||
content={page.contentHtml}
|
||||
pageSlug="contact"
|
||||
/>
|
||||
```
|
||||
|
||||
## Tailwind Class Conversions
|
||||
|
||||
### WordPress Classes → Tailwind
|
||||
- `vc_row` → `flex flex-wrap -mx-4`
|
||||
- `vc_col-md-6` → `w-full md:w-1/2 px-4`
|
||||
- `vc_col-lg-4` → `w-full lg:w-1/3 px-4`
|
||||
- `wpb_wrapper` → `space-y-4`
|
||||
- `bg-light` → `bg-gray-50`
|
||||
- `btn-primary` → `bg-primary text-white hover:bg-primary-dark`
|
||||
|
||||
## Asset URL Replacement
|
||||
|
||||
All WordPress asset URLs are automatically replaced:
|
||||
- `https://klz-cables.com/wp-content/uploads/...` → `/media/...`
|
||||
- PDF links are mapped to local paths
|
||||
- Images use Next.js Image component with optimization
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
For each page type, verify:
|
||||
- [ ] Hero sections render correctly
|
||||
- [ ] Numbered features display properly
|
||||
- [ ] Card grids are responsive
|
||||
- [ ] Testimonials have proper styling
|
||||
- [ ] Forms work correctly
|
||||
- [ ] PDF links are accessible
|
||||
- [ ] Contact info is formatted
|
||||
- [ ] Nested rows don't cause duplication
|
||||
- [ ] Empty rows are filtered out
|
||||
- [ ] Asset URLs are replaced
|
||||
- [ ] No raw HTML remains
|
||||
|
||||
## Performance Notes
|
||||
|
||||
- Parser uses Cheerio for server-side HTML parsing
|
||||
- Recursive parsing handles nested structures efficiently
|
||||
- Pattern matching stops at first match (priority order)
|
||||
- Processed rows are removed to avoid duplication
|
||||
- Remaining content is handled by fallback parser
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
1. **Page-Specific Overrides**: Add `pageSlug` parameter for custom logic
|
||||
2. **Animation Support**: Detect and convert Salient animation classes
|
||||
3. **Background Images**: Handle data-bg-image attributes
|
||||
4. **Video Backgrounds**: Support data-video-bg attributes
|
||||
5. **Parallax Effects**: Convert to modern CSS or React libraries
|
||||
6. **Icon Support**: Map Font Awesome or other icon classes
|
||||
7. **Accordion/Toggle**: Detect and convert collapsible sections
|
||||
8. **Tab Components**: Handle tabbed content sections
|
||||
|
||||
## Migration Status
|
||||
|
||||
✅ **Completed:**
|
||||
- Home pages (corporate-3-landing-2/start)
|
||||
- Team pages (team)
|
||||
- Terms pages (terms/agbs)
|
||||
- Contact pages (contact/kontakt)
|
||||
- Legal pages (legal-notice/impressum)
|
||||
- Privacy pages (privacy-policy/datenschutz)
|
||||
- Thanks pages (thanks/danke)
|
||||
|
||||
⏳ **Pending:**
|
||||
- Blog pages (blog) - Uses page routing
|
||||
- Products pages (products/produkte) - Uses page routing
|
||||
|
||||
## Notes
|
||||
|
||||
- All pages now use detailed component recreations
|
||||
- No raw HTML leakage where components fit
|
||||
- Parser is extensible for new patterns
|
||||
- Documentation updated with per-page details
|
||||
- System ready for testing and verification
|
||||
Reference in New Issue
Block a user