mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

migration wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-29 18:18:48 +01:00
parent 292975299d
commit f86785bfb0
182 changed files with 30131 additions and 9321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
app/[locale]/example/components-demo/page.tsx Normal file
View 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>
);
}

217
app/[locale]/example/page.tsx Normal file
View File

@@ -0,0 +1,217 @@
import { Metadata } from 'next';
import { Container } from '@/components/ui/Container';
import { Button } from '@/components/ui/Button';
import { Card, CardHeader, CardBody, CardFooter } from '@/components/ui/Card';
import { Grid, GridItem } from '@/components/ui/Grid';
import { Badge } from '@/components/ui/Badge';
export const metadata: Metadata = {
title: 'Layout Example | KLZ Cables',
description: 'Example page demonstrating the new layout components',
};
export default function ExamplePage() {
return (
<div className="space-y-8">
{/* Hero Section */}
<section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16 rounded-xl">
<Container maxWidth="4xl" padding="lg" className="text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
Layout Components Demo
</h1>
<p className="text-xl text-blue-100 mb-6">
Showcasing the new Header, Footer, Layout, and MobileMenu components
</p>
<div className="flex gap-3 justify-center flex-wrap">
<Button variant="primary" size="lg">
Primary Action
</Button>
<Button variant="outline" size="lg">
Secondary Action
</Button>
</div>
</Container>
</section>
{/* Feature Cards */}
<section>
<Container maxWidth="6xl" padding="md">
<h2 className="text-3xl font-bold mb-6 text-center">Key Features</h2>
<Grid cols={3} gap="lg">
<GridItem>
<Card variant="elevated">
<CardHeader>
<div className="flex items-center gap-2 mb-2">
<Badge variant="primary">New</Badge>
<h3 className="text-xl font-semibold">Responsive Header</h3>
</div>
</CardHeader>
<CardBody>
<p className="text-gray-600">
Sticky header with mobile hamburger menu, locale switcher, and contact CTA.
Fully responsive with smooth animations.
</p>
</CardBody>
<CardFooter>
<Button variant="ghost" size="sm">Learn More</Button>
</CardFooter>
</Card>
</GridItem>
<GridItem>
<Card variant="elevated">
<CardHeader>
<div className="flex items-center gap-2 mb-2">
<Badge variant="secondary">Updated</Badge>
<h3 className="text-xl font-semibold">Smart Footer</h3>
</div>
</CardHeader>
<CardBody>
<p className="text-gray-600">
4-column responsive layout with company info, quick links,
product categories, and contact details.
</p>
</CardBody>
<CardFooter>
<Button variant="ghost" size="sm">View Details</Button>
</CardFooter>
</Card>
</GridItem>
<GridItem>
<Card variant="elevated">
<CardHeader>
<div className="flex items-center gap-2 mb-2">
<Badge variant="success">Enhanced</Badge>
<h3 className="text-xl font-semibold">Mobile Menu</h3>
</div>
</CardHeader>
<CardBody>
<p className="text-gray-600">
Slide-out drawer with smooth animations, full navigation,
language switcher, and contact information.
</p>
</CardBody>
<CardFooter>
<Button variant="ghost" size="sm">Try It</Button>
</CardFooter>
</Card>
</GridItem>
</Grid>
</Container>
</section>
{/* Component Showcase */}
<section className="bg-gray-50 py-12">
<Container maxWidth="6xl" padding="md">
<h2 className="text-3xl font-bold mb-6 text-center">UI Components</h2>
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<h3 className="text-xl font-semibold">Buttons</h3>
</CardHeader>
<CardBody>
<div className="flex flex-wrap gap-2">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</div>
<div className="flex flex-wrap gap-2 mt-3">
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Medium</Button>
<Button variant="primary" size="lg">Large</Button>
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
<h3 className="text-xl font-semibold">Badges</h3>
</CardHeader>
<CardBody>
<div className="flex flex-wrap gap-2">
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
</div>
</CardBody>
</Card>
</div>
<Card>
<CardHeader>
<h3 className="text-xl font-semibold">Container & Grid</h3>
</CardHeader>
<CardBody>
<p className="text-gray-600 mb-4">
The Container component provides responsive max-width and padding,
while Grid offers flexible column layouts.
</p>
<Grid cols={4} gap="md">
<div className="bg-blue-100 p-4 rounded text-center">1</div>
<div className="bg-blue-100 p-4 rounded text-center">2</div>
<div className="bg-blue-100 p-4 rounded text-center">3</div>
<div className="bg-blue-100 p-4 rounded text-center">4</div>
</Grid>
</CardBody>
</Card>
</div>
</Container>
</section>
{/* Integration Example */}
<section>
<Container maxWidth="6xl" padding="md">
<h2 className="text-3xl font-bold mb-6 text-center">Integration Example</h2>
<Card variant="elevated">
<CardHeader>
<h3 className="text-xl font-semibold">How to Use in Your Pages</h3>
</CardHeader>
<CardBody>
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
<code>{`// app/[locale]/my-page/page.tsx
import { Metadata } from 'next';
import { Container } from '@/components/ui/Container';
import { Layout } from '@/components/layout/Layout';
export const metadata: Metadata = {
title: 'My Page | KLZ Cables',
description: 'My custom page description',
};
export default function MyPage({ params: { locale } }: { params: { locale: string } }) {
return (
<Layout locale={locale} siteName="KLZ Cables">
<Container maxWidth="6xl" padding="md">
<h1>My Page Content</h1>
{/* Your content here */}
</Container>
</Layout>
);
}`}</code>
</pre>
</CardBody>
</Card>
</Container>
</section>
{/* Breadcrumb Demo */}
<section className="bg-gray-50 py-8">
<Container maxWidth="6xl" padding="md">
<h2 className="text-2xl font-bold mb-4">Breadcrumb Support</h2>
<p className="text-gray-600 mb-4">
The Layout component supports optional breadcrumbs. Check the URL bar
and try navigating to see the breadcrumb in action.
</p>
<a href="/en/example/subpage">
<Button>Go to Example Subpage (with Breadcrumb)</Button>
</a>
</Container>
</section>
</div>
);
}

111
app/[locale]/example/subpage/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
import { Metadata } from 'next';
import { Container } from '@/components/ui/Container';
import { Layout } from '@/components/layout/Layout';
import { Card, CardHeader, CardBody } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import Link from 'next/link';
export const metadata: Metadata = {
title: 'Subpage Example | KLZ Cables',
description: 'Example subpage demonstrating breadcrumb functionality',
};
export default function Subpage({ params: { locale } }: { params: { locale: string } }) {
// Breadcrumb configuration
const breadcrumb = [
{ title: 'Example', path: `/${locale}/example` },
{ title: 'Subpage', path: `/${locale}/example/subpage` }
];
return (
<Layout
locale={locale}
siteName="KLZ Cables"
breadcrumb={breadcrumb}
>
<Container maxWidth="6xl" padding="md">
<div className="space-y-6">
{/* Page Header */}
<div className="text-center space-y-3">
<h1 className="text-4xl font-bold text-gray-900">Subpage with Breadcrumb</h1>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
This page demonstrates the breadcrumb functionality in the Layout component.
Notice the breadcrumb navigation above this content area.
</p>
</div>
{/* Content */}
<Card variant="elevated">
<CardHeader>
<h2 className="text-2xl font-semibold">Breadcrumb Features</h2>
</CardHeader>
<CardBody>
<ul className="space-y-3 text-gray-700">
<li className="flex items-start gap-2">
<span className="text-primary font-bold">✓</span>
<span>Automatic breadcrumb generation based on current URL</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary font-bold">✓</span>
<span>Clickable links for all parent pages</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary font-bold">✓</span>
<span>Current page shown as non-clickable text</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary font-bold">✓</span>
<span>Responsive design that works on all screen sizes</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary font-bold">✓</span>
<span>Optional feature - only shown when breadcrumb prop is provided</span>
</li>
</ul>
</CardBody>
</Card>
{/* Navigation */}
<div className="flex justify-center gap-4">
<Link href={`/${locale}/example`}>
<Button variant="outline">← Back to Example</Button>
</Link>
<Link href={`/${locale}`}>
<Button variant="primary">Home</Button>
</Link>
</div>
{/* Code Example */}
<Card>
<CardHeader>
<h3 className="text-xl font-semibold">How to Use Breadcrumbs</h3>
</CardHeader>
<CardBody>
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
<code>{`// In your page component:
import { Layout } from '@/components/layout/Layout';
export default function MyPage({ params: { locale } }) {
const breadcrumb = [
{ title: 'Home', path: \`/\${locale}\` },
{ title: 'Products', path: \`/\${locale}/products\` },
{ title: 'Details', path: \`/\${locale}/products/123\` }
];
return (
<Layout
locale={locale}
breadcrumb={breadcrumb}
>
{/* Your content */}
</Layout>
);
}`}</code>
</pre>
</CardBody>
</Card>
</div>
</Container>
</Layout>
);
}