wip

Author: LeadcodeDev

astro.config.mjs

@@ -18,6 +18,7 @@ import rehypeMermaid from "rehype-mermaid";
 import rehypeCodeGroupReact from "./src/lib/plugins/code-group/plugin";
 import rehypeReadMoreReact from "./src/lib/plugins/read-more/plugin";
 import rehypeBlogListReact from "./src/lib/plugins/blog-list/plugin";
+import rehypeBlock from "./src/lib/plugins/parser/plugin";
 import {
   default as remarkDirective,
   default as remarkReadMoreDirective,
@@ -51,6 +52,7 @@ export default defineConfig({
     },
     remarkPlugins: [remarkDirective, remarkReadMoreDirective],
     rehypePlugins: [
+      rehypeBlock,
       rehypeMermaid,
       [
         rehypeCallouts,

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

@@ -9,4 +9,5 @@ collection:
   - code-block
   - markdown
   - text
+  - card
 ---

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

@@ -0,0 +1,15 @@
+---
+title: Card
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+permalink: card
+icon: lucide:bell
+---
+
+:::card-group{col="2"}
+:::card{label="Test", icon="lucide:bell"}
+test
+:::
+:::card{label="Test", icon="lucide:bell"}
+d
+:::
+:::

content/docs/documentation/getting-started/getting-started.mdx

@@ -10,3 +10,6 @@ icon: lucide:info
 ## Introduction
 
 Explainer provides a rich set of components that can be used directly in your Markdown files. This documentation outlines the various markdown components available for creating beautiful, interactive documentation.
+
+:::card-group{cols=2}
+:::

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

@@ -0,0 +1,7 @@
+---
+const props = Astro.props;
+---
+
+<div class="grid grid-cols-2 gap-3">
+  <slot />
+</div>

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

@@ -0,0 +1,6 @@
+---
+const props = Astro.props;
+console.log("Card", props);
+---
+
+<div class="border p-5 rounded-lg">Card</div>

src/lib/components/content/codeblock.astro

@@ -0,0 +1,10 @@
+---
+const props = Astro.props;
+---
+
+<p>
+  <pre
+    class="astro-code astro-code-themes github-light catppuccin-frappe has-highlighted"
+    set:html={props.html}
+  />
+</p>

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

@@ -0,0 +1,72 @@
+---
+import CardGroup from "@/components/content/card-group/card-group.astro";
+import Card from "@/components/content/card-group/card.astro";
+import BlockDynamic from "./dynamic-block.astro";
+
+interface ASTNode {
+  delimiter?: string;
+  startTag?: string;
+  attributes?: Record<string, any>;
+  children?: Array<ASTNode | { type: "text"; value: string }>;
+  type?: string;
+}
+
+const mdx: Record<string, any> = {
+  "card-group": CardGroup,
+  card: Card,
+};
+
+const { ast } = Astro.props as { ast: string | undefined };
+if (!ast) return null;
+
+const node: ASTNode | ASTNode[] = JSON.parse(ast);
+
+const renderNodeData = (
+  block: ASTNode | { type: "text"; value: string } | undefined,
+): any => {
+  if (!block) return null;
+
+  if (Array.isArray(block)) {
+    return block.flatMap(renderNodeData).filter(Boolean);
+  }
+
+  if (typeof block !== "object") return block;
+
+  if ("type" in block && block.type === "text") return block.value;
+
+  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;
+  }
+
+  return {
+    component: Component,
+    props: block.attributes || {},
+    children: childrenRendered,
+  };
+};
+
+const treeData = Array.isArray(node)
+  ? node.flatMap(renderNodeData).filter(Boolean)
+  : renderNodeData(node);
+---
+
+{
+  treeData.map((node: any, i: number) => {
+    if (typeof node === "string") return node;
+    return (
+      <BlockDynamic
+        key={i}
+        component={node.component}
+        props={node.props}
+        children={node.children}
+      />
+    );
+  })
+}

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

@@ -0,0 +1,23 @@
+---
+import DynamicBlockRenderer from "./dynamic-block.astro";
+const { component: Component, props, children } = Astro.props;
+
+const childrenArray = Array.isArray(children)
+  ? children
+  : [children].filter(Boolean);
+---
+
+<Component {...props}>
+  {
+    childrenArray.map((child: any) => {
+      if (typeof child === "string") return child;
+      return (
+        <DynamicBlockRenderer
+          component={child.component}
+          props={child.props}
+          children={child.children}
+        />
+      );
+    })
+  }
+</Component>

src/lib/plugins/parser/plugin.ts

@@ -0,0 +1,135 @@
+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",
+};
+
+interface Block {
+  delimiter: string;
+  startTag: string;
+  attributes: Record<string, any>;
+  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 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
+      } 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;
+};
+
+// 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 || []) {
+    if (child.type === "text") {
+      combinedText += child.value;
+    } else if ((child as any).type === "mdxTextExpression") {
+      combinedText += " " + (child as any).value;
+    }
+  }
+
+  // Fonction récursive interne pour parser un texte complet
+  const parseBlockText = (text: string): Block[] => {
+    const blocks: Block[] = [];
+    const lines = text.split(/\r?\n/);
+    const stack: Block[] = [];
+
+    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: [],
+        };
+
+        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
+      } else if (endMatch) {
+        stack.pop(); // on ferme le bloc courant
+      } 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) {
+        stack[stack.length - 1].children.push(remaining);
+      } else if (!blocks.includes(remaining)) {
+        blocks.push(remaining);
+      }
+    }
+
+    return blocks;
+  };
+
+  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);
+
+      console.log(JSON.stringify(parsedBlocks, null, 2));
+
+      parent.children[index] = {
+        type: "element",
+        tagName: "BlockRenderer",
+        properties: {
+          ast: JSON.stringify(parsedBlocks),
+        },
+        children: [],
+      } as Element;
+    });
+  };
+}