I'm really sick of not making any progress

components/ttcmd/index.tsx

@@ -2,31 +2,185 @@
 
 import { Accordion, AccordionContent } from "@/lib/accordion";
 import { Poppable } from "@/lib/poppables/components/poppable";
-import { createElements } from "@/lib/tcmd";
+import { buildAbstractSyntaxTree, createElements } from "@/lib/tcmd";
 import Link from "next/link";
 import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
 
 import { sanitize } from "isomorphic-dompurify";
+import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/components/static-generation-searchparams-bailout-provider";
 
 export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
   const text = use(body);
-  const elements = useMemo(() => createElements(text), [text]);
+  const [elements, tabSpacing] = useMemo(() => createElements(text), [text]);
   return (
-    // <div className="grid grid-cols-2">
-    //   <pre>{JSON.stringify(elements,null,2)}</pre>
-    // </div>
-    <div className="flex flex-col gap-6 my-6">
-      {elements.map((e, i) => <Fragment key={e.uuid}>{renderBlock(e)}
-      </Fragment>)}
+    <div className="text-lg col-span-2">
+      <div>
+        <button
+          className="btn-primary"
+          onClick={() =>
+            navigator.clipboard.writeText(JSON.stringify(elements, null, 2))}
+        >
+          copy ast
+        </button>
+      </div>
+      {/* {elements.map((e, i) => <Fragment key={e.uuid}>{render(e)}</Fragment>)} */}
+      {renderer(elements, tabSpacing)}
     </div>
+    // <div className="grid grid-cols-3">
+    //   {/* <pre suppressHydrationWarning>{JSON.stringify(elements,null,2)}</pre> */}
+    // </div>
   );
 };
 
-const renderBlock = (block: BlockChildren): ReactNode => {
+const renderer = (tokens: Token[], tabSpacing: number) => {
+  const usedIds: string[] = [];
+  return tokens.map((t) => (
+    <Fragment key={t.uuid}>{render(t, usedIds, tabSpacing)}</Fragment>
+  ));
+};
+
+const render = (token: Token, usedIds: string[], tabSpacing: number) => {
+  switch (token.type) {
+    case "heading":
+      return (
+        <div
+          id={generateId(token.raw, usedIds)}
+          data-strength={token.metadata.strength}
+          className={`
+          font-bold
+          data-[strength="1"]:text-4xl
+          data-[strength="2"]:text-3xl
+          data-[strength="3"]:text-2xl
+          p
+          `}
+        >
+          {token.content}
+        </div>
+      );
+    case "grid":
+      return (
+        <div
+          style={{
+            "--grid-cols": token.metadata.columns,
+          } as React.CSSProperties}
+          className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
+        >
+          {token.children?.map((c, i) => (
+            <div key={c.uuid}>
+              {render(c, usedIds, tabSpacing)}
+            </div>
+          ))}
+        </div>
+      );
+    case "code":
+      return (
+        <pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
+          {token.content}
+        </pre>
+      );
+    case "card":
+      return (
+        <div className="card mb-6">
+          {token.children?.map((e) => (
+            <Fragment key={e.uuid}>
+              {render(e, usedIds, tabSpacing)}
+            </Fragment>
+          ))}
+        </div>
+      );
+    case "anchor":
+      return (
+        <Link
+          className={token.metadata.classes ||
+            "dark:text-primary-600 underline dark:no-underline"}
+          href={token.metadata.href}
+        >
+          {token.content}
+        </Link>
+      );
+    case "image": {
+      token.metadata.src = token.metadata.src as string;
+      if (token.metadata.src.startsWith("<svg")) {
+        return (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: sanitize(token.metadata.src, {
+                USE_PROFILES: { svg: true },
+              }),
+            }}
+          >
+          </div>
+        );
+      }
+      // eslint-disable-next-line @next/next/no-img-element
+      return <img src={token.metadata.src} alt={token.content} />;
+    }
+    case "inline-code":
+      return (
+        <span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-2">
+          {token.content}
+        </span>
+      );
+    case "popover":
+      return (
+        <Poppable
+          content={token.children?.map((c) => render(c, usedIds, tabSpacing)) ||
+            token.content}
+          preferredAlign="centered"
+          preferredEdge="bottom"
+          className="cursor-pointer mx-2"
+        >
+          <span className="border-b-2 border-dotted border-white">
+            {token.metadata.title}
+          </span>
+        </Poppable>
+      );
+    case "text":
+      return <span>{token.content}</span>;
+    case "p":
+      return (
+        <div className="p">
+          {token.children?.map((e, i) => (
+            <Fragment key={e.uuid}>
+              {render(e, usedIds, tabSpacing)}
+            </Fragment>
+          ))}
+        </div>
+      );
+    case "accordion":
+      return (
+        <div className="bg-black/20 p-1 rounded-md">
+          <Accordion
+            title={token.metadata.title || "Expand"}
+          >
+            <AccordionContent>
+              {token.children?.map((e, i) => (
+                <Fragment key={e.uuid}>
+                  {render(e, usedIds, tabSpacing)}
+                </Fragment>
+              ))}
+            </AccordionContent>
+          </Accordion>
+        </div>
+      );
+    default:
+      return (
+        <div className="p bg-red-600 text-white">
+          Block or paragraph missing implementation: {token.type}
+        </div>
+      );
+  }
+};
+
+const renderBlock = (
+  block: BlockChildren,
+  usedIds: string[] = [],
+): ReactNode => {
+  usedIds = usedIds || [];
   switch (block.type) {
     case "block":
       return block.children.map((e, i) => (
-        <Fragment key={e.uuid}>{renderBlock(e)}</Fragment>
+        <Fragment key={e.uuid}>{renderBlock(e, usedIds)}</Fragment>
       ));
     case "grid":
       return (
@@ -38,50 +192,52 @@ const renderBlock = (block: BlockChildren): ReactNode => {
         >
           {block.children.map((c, i) => (
             <div key={c.uuid}>
-              {renderBlock(c)}
+              {renderBlock(c, usedIds)}
             </div>
           ))}
         </div>
       );
     case "card":
       return (
-        <div className="card">
+        <div className="card mb-6">
           {block.children.map((e, i) => (
             <Fragment key={e.uuid}>
-              {renderBlock(e)}
+              {renderBlock(e, usedIds)}
             </Fragment>
           ))}
         </div>
       );
     case "accordion":
       return (
-        <Accordion
-          title={block.metadata.title || "Expand"}
-        >
-          <AccordionContent>
-            {block.children.map((e, i) => (
-              <Fragment key={e.uuid}>
-                {renderBlock(e)}
-              </Fragment>
-            ))}
-          </AccordionContent>
-        </Accordion>
+        <div className="bg-black/20 p-1 rounded-md">
+          <Accordion
+            title={block.metadata.title || "Expand"}
+          >
+            <AccordionContent>
+              {block.children.map((e, i) => (
+                <Fragment key={e.uuid}>
+                  {renderBlock(e, usedIds)}
+                </Fragment>
+              ))}
+            </AccordionContent>
+          </Accordion>
+        </div>
       );
     default:
       return (
-        renderParagraph(block as ParagraphToken)
+        renderParagraph(block as ParagraphToken, usedIds)
       );
   }
 };
 
-const renderParagraph = (p: ParagraphToken) => {
+const renderParagraph = (p: ParagraphToken, usedIds: string[]) => {
   switch (p.type) {
     case "p":
       return (
         <div className="p">
           {p.content.map((e, i) => (
             <Fragment key={e.uuid}>
-              {renderToken(e)}
+              {renderToken(e, usedIds)}
             </Fragment>
           ))}
         </div>
@@ -101,44 +257,52 @@ const renderParagraph = (p: ParagraphToken) => {
   }
 };
 
-const renderToken = (t: Token) => {
+const generateId = (t: string, usedIds: string[]) => {
+  let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+    " ",
+    "-",
+  );
+  let idNum = 1;
+  while (usedIds.includes(id)) {
+    id = id.replace(/-[0-9]+$/g, "");
+    id += "-" + idNum;
+    idNum++;
+  }
+  return id;
+};
+
+const renderToken = (t: Token, usedIds: string[]) => {
   switch (t.type) {
-    case "h1":
+    case "h1": {
       return (
         <div
-          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
-            " ",
-            "-",
-          )}
+          id={generateId(t.raw, usedIds)}
           className="font-bold text-2xl p"
         >
           {renderInlineToken(t.line)}
         </div>
       );
-    case "h2":
+    }
+    case "h2": {
       return (
         <div
-          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
-            " ",
-            "-",
-          )}
+          id={generateId(t.raw, usedIds)}
           className="font-bold text-xl p"
         >
           {renderInlineToken(t.line)}
         </div>
       );
-    case "h3":
+    }
+    case "h3": {
       return (
         <div
-          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
-            " ",
-            "-",
-          )}
+          id={generateId(t.raw, usedIds)}
           className="font-bold text-lg p"
         >
           {renderInlineToken(t.line)}
         </div>
       );
+    }
     case "p":
       return (
         <div className="p">
@@ -223,6 +387,12 @@ const renderInlineToken = (l: Line) => {
                 </span>
               </Poppable>
             );
+          case "inline-code":
+            return (
+              <span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-2">
+                {token.content}
+              </span>
+            );
           default:
             return (
               <span className="bg-red-500">