2267daadd4
All checks were successful
Deploy to Production / deploy (push) Successful in 52s
PageSpeed Insights mobile reported LCP element render delay of 2.3s on the hero — the largest visible element is the build.log <pre> with "> Generating spec... OK ..." text. TTFB is 0ms (CF cache hit), so the delay was pure client-side: Lighthouse waited for the JS bundle to parse and the 'use client' CodeBlock boundary to hydrate before it considered the element "rendered." CodeBlock pulls in lucide-react (Copy/Check icons) plus a useState boundary just for the copy button. Above the fold on marketing, none of that is needed — the user just needs to see the snippet. Split: - New `static-code-block.tsx`: server component, no 'use client', no icons, no copy button. Pure SSR markup that paints with the HTML. - Marketing landing now uses StaticCodeBlock for all three hero snippets (prompt.txt / build.log / claude_desktop_config.json). - Interactive CodeBlock stays in use for dashboard pages where users actually want to copy snippets. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { cn } from '@/lib/cn';
|
|
|
|
export interface StaticCodeBlockProps {
|
|
code: string;
|
|
language?: string;
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Server-only variant of CodeBlock — no copy button, no client hydration.
|
|
*
|
|
* Use this for above-the-fold marketing content where every kilobyte of
|
|
* JS hurts LCP. The interactive CodeBlock pulls in lucide-react icons and
|
|
* a useState boundary that forces an entire client chunk to load before
|
|
* Lighthouse considers the element "rendered". This static variant is
|
|
* pure SSR markup and lets the browser paint as soon as the HTML arrives.
|
|
*
|
|
* CodeBlock (with copy button) stays in use for dashboard pages where
|
|
* users actually want to copy snippets.
|
|
*/
|
|
export function StaticCodeBlock({ code, language, label, className }: StaticCodeBlockProps) {
|
|
return (
|
|
<div className={cn('panel-subtle relative overflow-hidden', className)}>
|
|
{(label || language) && (
|
|
<div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
|
|
<span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
|
|
{label ?? language}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
|
|
<code>{code}</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|