ttcMD: adds additional formatting to card to make an unstyled block

ttcMD components: tweaked the look of accordions to stack together properly

app/globals.css

@@ -60,6 +60,19 @@
   .skeleton {
     @apply animate-pulse bg-black/20 rounded-md text-white/0;
   }
+
+  /* .accordion {
+    @apply first-of-type:rounded-t-md last-of-type:rounded-b-md;
+  } */
+  .accordion:not(.accordion + .accordion) {
+    @apply rounded-t-md;
+  }
+  .accordion:has(+ .accordion) {
+    @apply border-b border-black/20;
+  }
+  .accordion:not(:has(+ .accordion)) {
+    @apply rounded-b-md;
+  }
 }
 
 @keyframes identifier {

components/ttcmd/index.tsx

@@ -45,15 +45,13 @@ export const TTCMD: FC<
 
   return (
     <Suspense fallback={<MDSkeletonLoader />}>
-      {
-        /* <button
+      <button
         className="btn-primary"
         onClick={() =>
           navigator.clipboard.writeText(JSON.stringify(elements, null, 2))}
       >
         copy ast
-      </button> */
-      }
+      </button>
       {hasEscapedTOC !== undefined &&
         (
           <TTCMDRenderer
@@ -137,7 +135,10 @@ function render(token: Token, usedIds: string[]) {
       );
     case "card":
       return (
-        <div className="card mb-6">
+        <div
+          data-block={!!token.metadata.isBlock}
+          className="data-[block=false]:card mb-6"
+        >
           {token.children?.map((e) => (
             <Fragment key={e.uuid}>
               {render(e, usedIds)}
@@ -210,7 +211,7 @@ function render(token: Token, usedIds: string[]) {
       );
     case "accordion":
       return (
-        <div className="bg-black/20 p-1 rounded-md">
+        <div className="bg-black/20 p-1 accordion">
           <Accordion
             title={token.metadata.title || "Expand"}
           >
@@ -269,6 +270,8 @@ function render(token: Token, usedIds: string[]) {
       );
     case "hr":
       return <div className="w-full border-b border-mixed-500 my-3"></div>;
+    case "comment":
+      return <></>;
     default:
       return (
         <div className="p bg-red-600 text-white">

lib/accordion/index.tsx

@@ -24,7 +24,9 @@ export const Accordion: FC<PropsWithChildren<IProps>> = (
           className="flex justify-between cursor-pointer"
           onClick={() => !expandOnHover && setOpen(!open)}
         >
-          {title}
+          <div className="accordion-title">
+            {title}
+          </div>
           <div
             className={`
               group-hover/hover:-rotate-180

lib/tcmd/TokenIdentifiers.ts

@@ -56,20 +56,22 @@ TokenIdentifiers.set("grid", {
 });
 
 TokenIdentifiers.set("card", {
-  rx: /\[{2}\n+([\s\S]*?)\n+\]{2}/g,
+  rx: /\[{2}([\s\S]*?)\n+\]{2}/g,
   search(s, start, end) {
     const rx = /\[\[/g;
     const crx = /\]\]/g;
     return search(s, start, end, rx, crx);
   },
   parse(s) {
-    const rx = /\[{2}\n+([\s\S]*)\n+\]{2}/;
-    const [_, content] = s.match(rx) || ["", "Unable to parse card"];
+    const rx = /\[{2}(!?)\n+([\s\S]*)\n+\]{2}/;
+    const [_, isBlock, content] = s.match(rx) || ["", "Unable to parse card"];
 
     return {
       content: content.trim(),
       raw: s,
-      metadata: {},
+      metadata: {
+        isBlock,
+      },
       type: "card",
       uuid: crypto.randomUUID(),
     };