feat: implement card-group mdx renderer

Author: LeadcodeDev

content/docs/documentation/foundamentals/components/card.mdx

@@ -5,7 +5,9 @@ permalink: card
 icon: lucide:bell
 ---
 
-:::card-group{col="2"}
+# Card
+
+:::card-group{cols=4, test="test"}
 :::card{label="Test", icon="lucide:bell"}
 test
 :::

src/lib/components/content/card-group/card-group.astro

@@ -1,7 +1,25 @@
 ---
-const props = Astro.props;
+type Props = {
+  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+
+const { cols } = Astro.props;
+const gridCols = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12",
+};
 ---
 
-<div class="grid grid-cols-2 gap-3">
+<div class:list={["grid gap-5", gridCols[cols ?? 2]]}>
   <slot />
 </div>

src/lib/components/content/card-group/card.astro

@@ -1,6 +1,31 @@
 ---
+import { Icon } from "@iconify/react";
+
+type props = {
+  label: string;
+  icon?: string;
+};
+
 const props = Astro.props;
 console.log("Card", props);
 ---
 
-<div class="border p-5 rounded-lg">Card</div>
+<div
+  class="flex flex-col p-6 border rounded-xl group hover:bg-secondary w-full"
+>
+  <div
+    class="flex items-center justify-center w-8 h-8 rounded-full bg-secondary border group-hover:bg-primary/10 group-hover:border-primary/60 duration-150"
+  >
+    <Icon
+      client:load
+      icon={props.icon}
+      className="group-hover:text-primary duration-150"
+    />
+  </div>
+  <div class="mt-4">
+    <p class="font-semibold text-gray-900 !mt-0 !p-0">{props.label}</p>
+    <p class="text-sm text-gray-500 !mt-0 !p-0">
+      <slot />
+    </p>
+  </div>
+</div>

src/lib/plugins/card-group/plugin.ts

@@ -0,0 +1,126 @@
+import type { Root } from "unist";
+import { visit } from "unist-util-visit";
+import { CodeBlockSelector } from "./selector";
+
+// Exemple de mapping startTag -> composant Astro
+const mdx: Record<string, any> = {
+  "card-group": "CardGroup",
+  card: "Card",
+  codeblock: "Codeblock",
+};
+
+interface Block {
+  delimiter: string;
+  startTag: string;
+  attributes: Record<string, string>;
+  children: Array<Block | { type: "text"; value: string }>;
+}
+
+const parseAttributes = (str: string): Record<string, any> => {
+  const regex = /(\w+)\s*=\s*(?:"([^"]*)"|(\S+))/g;
+  const attrs: Record<string, any> = {};
+  let match;
+
+  while ((match = regex.exec(str)) !== null) {
+    const key = match[1];
+    let value: any;
+
+    // Valeur entre guillemets
+    if (match[2] !== undefined) {
+      const raw = match[2];
+
+      // Essayer de parser JSON (array, object, number, boolean)
+      try {
+        value = JSON.parse(raw);
+      } catch {
+        value = raw; // fallback string
+      }
+    } else if (match[3] !== undefined) {
+      // Valeur non-quoted (true, false, number, etc.)
+      const raw = match[3];
+      if (raw === "true") value = true;
+      else if (raw === "false") value = false;
+      else if (!isNaN(Number(raw))) value = Number(raw);
+      else value = raw;
+    }
+
+    attrs[key] = value;
+  }
+
+  return attrs;
+};
+
+const parseSingleNode = (node: { type: string; children?: any[] }): Block[] => {
+  const parseChildren = (children: any[]): Block[] => {
+    const blocks: Block[] = [];
+    const stack: Block[] = [];
+
+    for (const child of children) {
+      if (child.type === "text" || child.type === "mdxTextExpression") {
+        const lines = child.value.split(/\r?\n/);
+        for (const line of lines) {
+          const startMatch = line.match(/^:::(\w[\w-]*)\s*(.*)$/);
+          const endMatch = line.match(/^:::/);
+
+          if (startMatch) {
+            const block: Block = {
+              delimiter: ":::",
+              startTag: startMatch[1],
+              attributes: parseAttributes(startMatch[2] || ""),
+              children: [],
+            };
+            stack.push(block);
+          } else if (endMatch) {
+            const finished = stack.pop();
+            if (!finished) continue;
+            if (stack.length > 0) {
+              stack[stack.length - 1].children.push(finished);
+            } else {
+              blocks.push(finished);
+            }
+          } else {
+            if (stack.length > 0) {
+              stack[stack.length - 1].children.push({
+                type: "text",
+                value: line,
+              });
+            }
+          }
+        }
+      } else if (child.type === "element") {
+        const availableBlock = [CodeBlockSelector];
+        const selector = availableBlock.find((selector) =>
+          selector.filter(child),
+        );
+
+        if (selector) {
+          if (stack.length > 0) {
+            stack[stack.length - 1].children.push(selector.render(child));
+          } else {
+            blocks.push(selector.render(child));
+          }
+        }
+      }
+    }
+
+    return blocks;
+  };
+
+  return parseChildren(node.children || []);
+};
+
+// Usage dans rehypeComponents
+export default function rehypeComponents(): Plugin<[], Root> {
+  return (tree: Root) => {
+    visit(tree, "element", (node, index, parent) => {
+      const parsedBlocks = parseSingleNode(node);
+
+      parent.children[index] = {
+        type: "element",
+        tagName: "BlockRenderer",
+        properties: { ast: JSON.stringify(parsedBlocks) },
+        children: [], // ou des enfants si nécessaire
+      };
+    });
+  };
+}

src/lib/plugins/parser/block-renderer.astro

@@ -21,9 +21,7 @@ if (!ast) return null;
 
 const node: ASTNode | ASTNode[] = JSON.parse(ast);
 
-const renderNodeData = (
-  block: ASTNode | { type: "text"; value: string } | undefined,
-): any => {
+const renderNodeData = (block: any): any => {
   if (!block) return null;
 
   if (Array.isArray(block)) {
@@ -34,14 +32,12 @@ const renderNodeData = (
 
   if ("type" in block && block.type === "text") return block.value;
 
-  const Component = mdx[block.startTag || ""];
+  const Component = mdx[block.startTag ?? ""];
 
-  // Si aucun composant trouvé, on rend les enfants directement (raw / code / span)
   const childrenRendered =
     block.children?.flatMap(renderNodeData).filter(Boolean) || [];
 
   if (!Component) {
-    // Rendu direct des enfants
     return childrenRendered;
   }
 

src/lib/plugins/parser/plugin.ts

@@ -1,7 +1,6 @@
 import type { Element, Root } from "unist";
 import { visit } from "unist-util-visit";
 
-// Exemple de mapping startTag -> composant Astro
 const mdx: Record<string, string> = {
   "card-group": "CardGroup",
   card: "Card",
@@ -14,27 +13,24 @@ interface Block {
   children: Array<Block | { type: "text"; value: string }>;
 }
 
-// Parse les attributs de la ligne :::tag key="value"
 const parseAttributes = (str: string): Record<string, any> => {
-  const regex = /(\w+)\s*=\s*(?:"([^"]*)"|(\S+))/g;
+  const regex = /(\w+)\s*=\s*(?:"([^"]*)"|([^,\s]+))/g;
   const attrs: Record<string, any> = {};
   let match: RegExpExecArray | null;
 
   while ((match = regex.exec(str)) !== null) {
     const key = match[1];
     let value: any;
-
     if (match[2] !== undefined) {
-      // Valeur entre guillemets
       const raw = match[2];
       try {
-        value = JSON.parse(raw); // Essayer de parser JSON
+        value = JSON.parse(raw);
       } catch {
-        value = raw; // fallback string
+        value = raw;
       }
     } else if (match[3] !== undefined) {
-      // Valeur non-quoted (true, false, number, etc.)
       const raw = match[3];
+
       if (raw === "true") value = true;
       else if (raw === "false") value = false;
       else if (!isNaN(Number(raw))) value = Number(raw);
@@ -47,9 +43,7 @@ const parseAttributes = (str: string): Record<string, any> => {
   return attrs;
 };
 
-// Fonction principale : parse un node et retourne un Block[]
 const parseSingleNode = (node: Element): Block[] => {
-  // On combine le node text + mdxTextExpression éventuel en un seul texte
   let combinedText = "";
 
   for (const child of node.children || []) {
@@ -60,7 +54,6 @@ const parseSingleNode = (node: Element): Block[] => {
     }
   }
 
-  // Fonction récursive interne pour parser un texte complet
   const parseBlockText = (text: string): Block[] => {
     const blocks: Block[] = [];
     const lines = text.split(/\r?\n/);
@@ -79,24 +72,21 @@ const parseSingleNode = (node: Element): Block[] => {
         };
 
         if (stack.length > 0) {
-          // Ajoute comme enfant du dernier parent
           stack[stack.length - 1].children.push(block);
         } else {
-          // Bloc racine
           blocks.push(block);
         }
 
-        stack.push(block); // push pour gérer la fermeture
+        stack.push(block);
       } else if (endMatch) {
-        stack.pop(); // on ferme le bloc courant
+        stack.pop();
       } else {
         if (stack.length > 0) {
           stack[stack.length - 1].children.push({ type: "text", value: line });
         }
       }
     }
 
-    // Pousser tout bloc restant dans stack (blocs non fermés)
     while (stack.length > 0) {
       const remaining = stack.pop()!;
       if (stack.length > 0) {
@@ -112,24 +102,26 @@ const parseSingleNode = (node: Element): Block[] => {
   return parseBlockText(combinedText);
 };
 
-// Plugin rehype
 export default function rehypeComponents() {
   return (tree: Root) => {
     visit(tree, "element", (node: Element, index, parent) => {
       if (!parent) return;
 
       const parsedBlocks = parseSingleNode(node);
+      const hasBlock = parsedBlocks.some((block) => block.startTag in mdx);
 
-      console.log(JSON.stringify(parsedBlocks, null, 2));
+      if (hasBlock) {
+        console.log(JSON.stringify(parsedBlocks, null, 2));
 
-      parent.children[index] = {
-        type: "element",
-        tagName: "BlockRenderer",
-        properties: {
-          ast: JSON.stringify(parsedBlocks),
-        },
-        children: [],
-      } as Element;
+        parent.children[index] = {
+          type: "element",
+          tagName: "BlockRenderer",
+          properties: {
+            ast: JSON.stringify(parsedBlocks),
+          },
+          children: [],
+        } as Element;
+      }
     });
   };
 }