migration wip
This commit is contained in:
213
app/[locale]/example/components-demo/page.tsx
Normal file
213
app/[locale]/example/components-demo/page.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { ContentRenderer } from '@/components/content/ContentRenderer';
|
||||
import { Section } from '@/components/content/Section';
|
||||
import { Container } from '@/components/ui/Container';
|
||||
|
||||
// Test content with various WordPress shortcodes and images
|
||||
const testContent = `
|
||||
<div class="vc-row" style="background-color: #f8f9fa; padding-top: 4rem; padding-bottom: 4rem;">
|
||||
<div class="vc-column">
|
||||
<div class="vc-column-text">
|
||||
<h2>WordPress Shortcode Test</h2>
|
||||
<p>This page demonstrates the enhanced ContentRenderer handling various WordPress shortcodes and image formats.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row">
|
||||
<div class="vc-column" style="width: 50%;">
|
||||
<div class="vc-column-text">
|
||||
<h3>Left Column</h3>
|
||||
<p>This column uses vc_col-md-6 shortcode converted to Tailwind classes.</p>
|
||||
<a href="/contact" class="btn btn-primary">Contact Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vc-column" style="width: 50%;">
|
||||
<div class="vc-column-text">
|
||||
<h3>Right Column</h3>
|
||||
<p>Content in the right column with proper spacing and styling.</p>
|
||||
<img data-wp-image-id="6517" alt="Medium Voltage Cable" class="alignnone size-medium" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row" style="background-image: url(/media/45524-5.webp); background-size: cover; background-position: center;">
|
||||
<div class="vc-column">
|
||||
<div class="vc-column-text" style="color: white; text-align: center;">
|
||||
<h2 style="color: white;">Background Image Section</h2>
|
||||
<p style="color: white;">This section has a background image from WordPress media library.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<div class="vc-column-text">
|
||||
<h3>Image Gallery</h3>
|
||||
<p>Multiple images with different alignments:</p>
|
||||
<img data-wp-image-id="6521" alt="Low Voltage Cable" class="alignleft size-thumbnail" style="margin-right: 1rem; margin-bottom: 1rem;" />
|
||||
<img data-wp-image-id="47052" alt="NA2XSF2X Cable" class="alignright size-thumbnail" style="margin-left: 1rem; margin-bottom: 1rem;" />
|
||||
<p>Images should display correctly with proper Next.js Image optimization and alignment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row" style="background-color: #0a0a0a; color: white; padding-top: 3rem; padding-bottom: 3rem;">
|
||||
<div class="vc-column">
|
||||
<div class="vc-column-text" style="color: white;">
|
||||
<h3 style="color: white;">Dark Section with Buttons</h3>
|
||||
<p style="color: white;">Various button styles should work correctly:</p>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<a href="#" class="btn btn-primary">Primary Button</a>
|
||||
<a href="#" class="btn btn-secondary">Secondary Button</a>
|
||||
<a href="#" class="btn btn-outline">Outline Button</a>
|
||||
<a href="#" class="btn btn-primary btn-large">Large Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<div class="vc-column-text">
|
||||
<h3>Typography Test</h3>
|
||||
<p>Regular paragraph text with <strong>bold text</strong>, <em>italic text</em>, and <a href="https://example.com">external links</a>.</p>
|
||||
<ul>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2</li>
|
||||
<li>List item 3</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>This is a blockquote with proper styling.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row" style="background-color: #e9ecef; padding-top: 2rem; padding-bottom: 2rem;">
|
||||
<div class="vc-column" style="width: 33.33%;">
|
||||
<div class="vc-column-text">
|
||||
<h4>Column 1</h4>
|
||||
<p>One-third width column.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vc-column" style="width: 33.33%;">
|
||||
<div class="vc-column-text">
|
||||
<h4>Column 2</h4>
|
||||
<p>One-third width column.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vc-column" style="width: 33.33%;">
|
||||
<div class="vc-column-text">
|
||||
<h4>Column 3</h4>
|
||||
<p>One-third width column.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vc-row">
|
||||
<div class="vc-column">
|
||||
<div class="vc-column-text">
|
||||
<h3>Direct Image References</h3>
|
||||
<p>Images referenced by ID should be converted to Next.js Image components:</p>
|
||||
<img data-wp-image-id="10797" alt="Medium Voltage Cables" class="aligncenter size-large" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const testContentWithShortcodes = `
|
||||
[vc_row bg_color="#f8f9fa" top_padding="4%" bottom_padding="4%"]
|
||||
[vc_column width="12"]
|
||||
[vc_column_text]
|
||||
<h2>Raw Shortcode Test</h2>
|
||||
<p>This content uses raw WordPress shortcodes that should be processed by html-compat.ts</p>
|
||||
[/vc_column_text]
|
||||
[/vc_column]
|
||||
[/vc_row]
|
||||
|
||||
[vc_row]
|
||||
[vc_column width="6"]
|
||||
[vc_column_text]
|
||||
<h3>Left Side</h3>
|
||||
<p>Content with [vc_btn color="primary" title="Click Here" link="#"] embedded.</p>
|
||||
[/vc_column_text]
|
||||
[/vc_column]
|
||||
[vc_column width="6"]
|
||||
[vc_column_text]
|
||||
<h3>Right Side</h3>
|
||||
<p>Another column with [vc_single_image src="6521" align="right"] embedded.</p>
|
||||
[/vc_column_text]
|
||||
[/vc_column]
|
||||
[/vc_row]
|
||||
|
||||
[vc_row bg_image="45528" top_padding="15%" bottom_padding="15%" color_overlay="#000000" overlay_strength="0.7"]
|
||||
[vc_column]
|
||||
[vc_column_text text_color="light" text_align="center"]
|
||||
<h2>Background Image with Overlay</h2>
|
||||
<p>This should show an image with dark overlay and white text.</p>
|
||||
[/vc_column_text]
|
||||
[/vc_column]
|
||||
[/vc_row]
|
||||
|
||||
[vc_row enable_gradient="true" gradient_direction="left_to_right"]
|
||||
[vc_column]
|
||||
[vc_column_text text_align="center"]
|
||||
<h3>Gradient Background</h3>
|
||||
<p>This row should have a gradient background.</p>
|
||||
[/vc_column_text]
|
||||
[/vc_column]
|
||||
[/vc_row]
|
||||
`;
|
||||
|
||||
export default function ComponentsDemoPage() {
|
||||
return (
|
||||
<Container>
|
||||
<Section>
|
||||
<div className="space-y-8">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold">ContentRenderer Test Page</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Testing WordPress shortcode conversion and image handling
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Processed HTML Content</h2>
|
||||
<ContentRenderer
|
||||
content={testContent}
|
||||
sanitize={true}
|
||||
processAssets={true}
|
||||
convertClasses={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Raw Shortcode Content</h2>
|
||||
<ContentRenderer
|
||||
content={testContentWithShortcodes}
|
||||
sanitize={true}
|
||||
processAssets={true}
|
||||
convertClasses={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 rounded-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-3">What This Tests:</h3>
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
<li>✅ [vc_row] → flex containers with background support</li>
|
||||
<li>✅ [vc_column] → responsive width classes</li>
|
||||
<li>✅ [vc_column_text] → prose styling</li>
|
||||
<li>✅ [vc_btn] → styled buttons</li>
|
||||
<li>✅ [vc_single_image] → Next.js Image components</li>
|
||||
<li>✅ Background images from WordPress IDs</li>
|
||||
<li>✅ Color overlays and gradients</li>
|
||||
<li>✅ Image alignment and sizing</li>
|
||||
<li>✅ URL replacement from data layer</li>
|
||||
<li>✅ Inline styles and attributes</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user