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

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

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">