fix(blog): restore TOC, list styling, and dynamic OG images

This commit reapplies fixes directly to main after reverting an accidental feature branch merge.

chore(release): bump version to 2.2.6

components/PayloadRichText.tsx

@@ -42,7 +42,7 @@ const jsxConverters: JSXConverters = {
   // Use div instead of p for paragraphs to allow nested block elements (like the lists above)
   paragraph: ({ node, nodesToJSX }: any) => {
     return (
-      <div className="mb-4 md:mb-6 leading-relaxed text-text-secondary last:mb-0">
+      <div className="mb-6 leading-relaxed text-text-secondary">
         {nodesToJSX({ nodes: node.children })}
       </div>
     );
@@ -51,33 +51,80 @@ 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 });
     if (node?.listType === 'number') {
       return (
-        <ol className="list-decimal pl-4 space-y-2 text-text-secondary marker:text-primary marker:font-bold prose-p:mb-0">
+        <ol className="list-decimal pl-6 my-6 space-y-2 text-text-secondary marker:text-primary marker:font-bold">
           {children}
         </ol>
       );
@@ -86,7 +133,7 @@ const jsxConverters: JSXConverters = {
       return <ul className="list-none pl-0 my-6 space-y-2 text-text-secondary">{children}</ul>;
     }
     return (
-      <ul className="list-disc pl-4 space-y-2 text-text-secondary marker:text-primary prose-p:mb-0">
+      <ul className="list-disc pl-6 my-6 space-y-2 text-text-secondary marker:text-primary">
         {children}
       </ul>
     );
@@ -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 });