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

fix(blog): restore table of contents, fix list item styling, resolve dynamic og image generation

Browse Source
This commit is contained in:
Marc Mintel
2026-03-01 13:12:07 +01:00
parent 437dd35c9c
commit 56cd1fb1ba
5 changed files with 154 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/PayloadRichText.tsx
View File

@@ -51,27 +51,74 @@ const jsxConverters: JSXConverters = {
heading: ({ node, nodesToJSX }: any) => {
const children = nodesToJSX({ nodes: node.children });
const tag = node?.tag;
// Extract text to generate an ID for the TOC
// Lexical children might contain various nodes; we need a plain text representation
const textContent = node.children ? node.children.map((c: any) => c.text || '').join('') : '';
const id = textContent
? textContent
.toLowerCase()
.replace(/ä/g, 'ae')
.replace(/ö/g, 'oe')
.replace(/ü/g, 'ue')
.replace(/ß/g, 'ss')
.replace(/[*_`]/g, '')
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.replace(/^-+|-+$/g, '')
: undefined;
if (tag === 'h1')
return (
<h2 className="text-3xl md:text-4xl font-bold mt-12 mb-6 text-text-primary">{children}</h2>
<h2
id={id}
className="text-3xl md:text-4xl font-bold mt-12 mb-6 text-text-primary scroll-mt-24"
>
{children}
</h2>
);
if (tag === 'h2')
return (
<h3 className="text-2xl md:text-3xl font-bold mt-10 mb-5 text-text-primary">{children}</h3>
<h3
id={id}
className="text-2xl md:text-3xl font-bold mt-10 mb-5 text-text-primary scroll-mt-24"
>
{children}
</h3>
);
if (tag === 'h3')
return (
<h4 className="text-xl md:text-2xl font-bold mt-8 mb-4 text-text-primary">{children}</h4>
<h4
id={id}
className="text-xl md:text-2xl font-bold mt-8 mb-4 text-text-primary scroll-mt-24"
>
{children}
</h4>
);
if (tag === 'h4')
return (
<h5 className="text-lg md:text-xl font-bold mt-6 mb-4 text-text-primary">{children}</h5>
<h5
id={id}
className="text-lg md:text-xl font-bold mt-6 mb-4 text-text-primary scroll-mt-24"
>
{children}
</h5>
);
if (tag === 'h5')
return (
<h6 className="text-base md:text-lg font-bold mt-6 mb-4 text-text-primary">{children}</h6>
<h6
id={id}
className="text-base md:text-lg font-bold mt-6 mb-4 text-text-primary scroll-mt-24"
>
{children}
</h6>
);
return <h6 className="text-base font-bold mt-6 mb-4 text-text-primary">{children}</h6>;
return (
<h6 id={id} className="text-base font-bold mt-6 mb-4 text-text-primary scroll-mt-24">
{children}
</h6>
);
},
list: ({ node, nodesToJSX }: any) => {
const children = nodesToJSX({ nodes: node.children });
@@ -95,18 +142,18 @@ const jsxConverters: JSXConverters = {
const children = nodesToJSX({ nodes: node.children });
if (node?.checked != null) {
return (
<li className="flex items-center gap-3 mb-2 leading-relaxed">
<li className="flex items-start gap-3 mb-2 leading-relaxed">
<input
type="checkbox"
checked={node.checked}
readOnly
className="mt-1 w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded"
className="mt-1.5 w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded shrink-0"
/>
<span>{children}</span>
<div className="flex-1">{children}</div>
</li>
);
}
return <li className="mb-2 leading-relaxed">{children}</li>;
return <li className="mb-2 leading-relaxed block">{children}</li>;
},
quote: ({ node, nodesToJSX }: any) => {
const children = nodesToJSX({ nodes: node.children });