Fix: Remove inline styles from Open Graph and Twitter image meta tags and simplify JSON-LD navigation data.
This commit is contained in:
@@ -209,7 +209,7 @@ export default function KLZCablesCaseStudy() {
|
||||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/index.html"
|
||||
src="/showcase/klz-cables.com/index.html"
|
||||
height="850px"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
@@ -252,7 +252,7 @@ export default function KLZCablesCaseStudy() {
|
||||
>
|
||||
<div className="relative w-full overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html"
|
||||
src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
|
||||
height="1000px"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
@@ -290,7 +290,7 @@ export default function KLZCablesCaseStudy() {
|
||||
className="relative h-[650px] w-full overflow-visible group"
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/power-cables.html"
|
||||
src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
|
||||
height="100%"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
@@ -321,9 +321,50 @@ export default function KLZCablesCaseStudy() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- SECTION 04: TEAM & TRUST --- */}
|
||||
{/* --- SECTION 04: CONTENT ENGINE --- */}
|
||||
<Section
|
||||
number="04"
|
||||
title="Content Strategy"
|
||||
variant="white"
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||||
<div className="lg:col-span-4 space-y-10 order-2 lg:order-1">
|
||||
<Reveal direction="left" blur>
|
||||
<div className="space-y-6">
|
||||
<Label className="text-slate-400">Knowledge Transfer</Label>
|
||||
<H3 className="text-4xl md:text-6xl tracking-tighter">Insights & News.</H3>
|
||||
<BodyText className="text-xl text-slate-500 font-serif italic">
|
||||
Die News-Engine dient als technischer Hub für Industrie-Standards. Durch die Implementierung eines performanten Blog-Systems wird Fachwissen direkt an die Zielgruppe kommuniziert.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
<div className="lg:col-span-8 order-1 lg:order-2">
|
||||
<Reveal width="100%" direction="right" scale={0.98} blur>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||||
className="relative h-[700px] w-full"
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/blog.html"
|
||||
height="100%"
|
||||
desktopWidth={1600}
|
||||
allowScroll
|
||||
browserFrame
|
||||
className="h-full w-full no-scrollbar"
|
||||
/>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- SECTION 05: TEAM & TRUST --- */}
|
||||
<Section
|
||||
number="05"
|
||||
title="Ergebnis"
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
@@ -340,7 +381,7 @@ export default function KLZCablesCaseStudy() {
|
||||
<div className="relative group w-full text-left">
|
||||
<div className="relative block w-full overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/team.html"
|
||||
src="/showcase/klz-cables.com/team.html"
|
||||
height="1100px"
|
||||
desktopWidth={1440}
|
||||
allowScroll
|
||||
@@ -353,6 +394,46 @@ export default function KLZCablesCaseStudy() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- SECTION 06: CONVERSION --- */}
|
||||
<Section
|
||||
number="06"
|
||||
title="Lead Engineering"
|
||||
variant="white"
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||||
<div className="lg:col-span-7">
|
||||
<Reveal direction="left" scale={0.98} blur>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||||
className="relative h-[800px] w-full"
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/contact.html"
|
||||
height="100%"
|
||||
desktopWidth={1200}
|
||||
allowScroll
|
||||
browserFrame
|
||||
className="h-full w-full no-scrollbar"
|
||||
/>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
</div>
|
||||
<div className="lg:col-span-5 space-y-10">
|
||||
<Reveal direction="right" blur>
|
||||
<div className="space-y-6">
|
||||
<Label className="text-slate-400">Conversion Layer</Label>
|
||||
<H3 className="text-4xl md:text-6xl tracking-tighter">Direkter Draht.</H3>
|
||||
<BodyText className="text-xl text-slate-500 font-serif italic">
|
||||
Das Kontakt-System wurde auf maximale Reduktion getrimmt. Keine unnötigen Hürden, sondern ein direkter Kommunikations-Kanal zwischen technischem Bedarf und individueller Beratung.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
|
||||
<section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
|
||||
<BackgroundGrid />
|
||||
|
||||
369
live_page.html
Normal file
369
live_page.html
Normal file
File diff suppressed because one or more lines are too long
1688
live_styles.css
Normal file
1688
live_styles.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -116,24 +116,45 @@ async function run() {
|
||||
});
|
||||
|
||||
try {
|
||||
console.log('🌐 Loading page...');
|
||||
await page.goto(targetUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
|
||||
console.log('🌐 Loading page (Waiting for Network Idle)...');
|
||||
await page.goto(targetUrl, { waitUntil: 'networkidle', timeout: 90000 });
|
||||
|
||||
console.log('<EFBFBD> Expanding Viewport to "Giant Mode" to force-trigger lazy loaders...');
|
||||
// Measure content height and resize viewport to display EVERYTHING at once
|
||||
console.log('🌊 Executing "Scroll Wave" to trigger all lazy loaders naturally...');
|
||||
await page.evaluate(async () => {
|
||||
await new Promise((resolve) => {
|
||||
let totalHeight = 0;
|
||||
const distance = 400;
|
||||
const timer = setInterval(() => {
|
||||
const scrollHeight = document.body.scrollHeight;
|
||||
window.scrollBy(0, distance);
|
||||
totalHeight += distance;
|
||||
|
||||
if (totalHeight >= scrollHeight) {
|
||||
clearInterval(timer);
|
||||
window.scrollTo(0, 0); // Reset to top
|
||||
resolve(true);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
console.log('📐 Expanding Viewport to "Giant Mode" for final asset capture...');
|
||||
const fullHeight = await page.evaluate(() => document.body.scrollHeight);
|
||||
await page.setViewportSize({ width: 1920, height: fullHeight + 2000 });
|
||||
await page.setViewportSize({ width: 1920, height: fullHeight + 1000 });
|
||||
|
||||
// Wait a moment for IntersectionObservers to fire
|
||||
await page.waitForTimeout(2000);
|
||||
// Final settlement wait
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
console.log('💧 Hydrating attributes and cleaning DOM...');
|
||||
console.log('💧 Final DOM Hydration & Sanitization...');
|
||||
await page.evaluate(() => {
|
||||
// A. Deterministic Attribute Hydration
|
||||
// A. Deterministic Attribute Hydration (Generic)
|
||||
// Scours every element for attributes that look like asset URLs and promotes them
|
||||
const assetPattern = /\.(jpg|jpeg|png|gif|svg|webp|mp4|webm|woff2?|ttf|otf)/i;
|
||||
|
||||
document.querySelectorAll('*').forEach(el => {
|
||||
// 0. Skip Meta/Head/Script/Style/SVG tags for attribute promotion
|
||||
if (['META', 'LINK', 'HEAD', 'SCRIPT', 'STYLE', 'SVG', 'PATH'].includes(el.tagName)) return;
|
||||
|
||||
// 1. Force Visibility (Anti-Flicker)
|
||||
const style = window.getComputedStyle(el);
|
||||
if (style.opacity === '0' || style.visibility === 'hidden') {
|
||||
@@ -160,7 +181,6 @@ async function run() {
|
||||
}
|
||||
|
||||
// Background Image Promotion
|
||||
// Common patterns: data-bg, data-image-src, style="...url(...)..."
|
||||
if (val.match(/^(https?:\/\/|\/\/|\/)/) && !name.includes('href')) {
|
||||
const bg = el.style.backgroundImage;
|
||||
if (!bg || bg === 'none') {
|
||||
@@ -170,11 +190,21 @@ async function run() {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// B. Ensure basic structural elements are visible post-scroll
|
||||
const body = document.body;
|
||||
if (body) {
|
||||
body.style.setProperty('opacity', '1', 'important');
|
||||
body.style.setProperty('visibility', 'visible', 'important');
|
||||
}
|
||||
});
|
||||
|
||||
console.log('⏳ Waiting for network idle...');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 1.5 FINAL SETTLEMENT: Let any scroll-triggered JS finish
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// 2. Static Snapshot
|
||||
let content = await page.content();
|
||||
|
||||
@@ -284,7 +314,7 @@ async function run() {
|
||||
if (headEnd > -1) {
|
||||
const stabilityCss = `
|
||||
<style>
|
||||
/* INDUSTRIAL CLONE STABILIZATION */
|
||||
/* UNIVERSAL CLONE STABILIZATION */
|
||||
* {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
@@ -296,6 +326,7 @@ async function run() {
|
||||
transform: none !important;
|
||||
clip-path: none !important;
|
||||
}
|
||||
|
||||
img, video, iframe {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
|
||||
Reference in New Issue
Block a user