tcmd: image element, heading links

components/tcmd/index.tsx

@@ -2,7 +2,7 @@
 
 import { createElements } from "@/lib/tcmd";
 import Link from "next/link";
-import React, { FC, ReactNode, use, useMemo } from "react";
+import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
 
 export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
   const text = use(body);
@@ -27,10 +27,12 @@ const renderBlock = (block: BlockChildren): ReactNode => {
           style={{
             "--grid-cols": block.metadata.columns,
           } as React.CSSProperties}
-          className="grid grid-cols-dynamic gap-x-8 gap-y-6"
+          className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
         >
           {block.children.map((c, i) => (
-            <div key={"block-grid" + c.type + i}>{renderBlock(c)}</div>
+            <Fragment key={"block-grid" + c.type + i}>
+              {renderBlock(c)}
+            </Fragment>
           ))}
         </div>
       );
@@ -66,19 +68,37 @@ const renderToken = (t: Token) => {
   switch (t.type) {
     case "h1":
       return (
-        <p className="font-bold text-2xl">
+        <p
+          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+            " ",
+            "-",
+          )}
+          className="font-bold text-2xl"
+        >
           {renderInlineToken(t.line)}
         </p>
       );
     case "h2":
       return (
-        <p className="font-bold text-xl">
+        <p
+          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+            " ",
+            "-",
+          )}
+          className="font-bold text-xl"
+        >
           {renderInlineToken(t.line)}
         </p>
       );
     case "h3":
       return (
-        <p className="font-bold text-lg">
+        <p
+          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+            " ",
+            "-",
+          )}
+          className="font-bold text-lg"
+        >
           {renderInlineToken(t.line)}
         </p>
       );
@@ -124,6 +144,9 @@ const renderInlineToken = (l: Line) => {
             {token.content}
           </Link>
         );
+      case "image":
+        // eslint-disable-next-line @next/next/no-img-element
+        return <img src={token.data.src} alt={token.content} />;
       default:
         return (
           <span className="bg-red-500">