feat: integrate D2 diagram support and update styles

- Added D2 installation script to package.json.
- Replaced mermaid diagrams with D2 diagrams in blog posts.
- Updated styles for D2 diagrams and removed old mermaid styles.
- Created TypeScript definitions for rehype-d2.
- Adjusted blog content to reflect changes in diagram syntax.

Author: AR10Dev

.devcontainer/devcontainer.json

@@ -5,7 +5,10 @@
     "BUN_INSTALL": "/home/node/.bun",
     "PATH": "/home/node/.bun/bin:${containerEnv:PATH}"
   },
-  "postCreateCommand": "bash -lc 'set -e; export BUN_INSTALL=\"$HOME/.bun\"; curl -fsSL https://bun.sh/install | bash; \"$BUN_INSTALL/bin/bun\" --version; \"$BUN_INSTALL/bin/bun\" install; grep -q \"BUN_INSTALL=\\\"$HOME/.bun\\\"\" ~/.bashrc || printf \"\\nexport BUN_INSTALL=\\\"$HOME/.bun\\\"\\nexport PATH=\\\"$BUN_INSTALL/bin:$PATH\\\"\\n\" >> ~/.bashrc; grep -q \"BUN_INSTALL=\\\"$HOME/.bun\\\"\" ~/.zshrc || printf \"\\nexport BUN_INSTALL=\\\"$HOME/.bun\\\"\\nexport PATH=\\\"$BUN_INSTALL/bin:$PATH\\\"\\n\" >> ~/.zshrc'",
+  "postCreateCommand": "bash -lc 'set -e; export BUN_INSTALL=\"$HOME/.bun\"; curl -fsSL https://bun.sh/install | bash; \"$BUN_INSTALL/bin/bun\" --version; \"$BUN_INSTALL/bin/bun\" install; curl -fsSL https://d2lang.com/install.sh | sh -s --; d2 --version; grep -q \"BUN_INSTALL=\\\"$HOME/.bun\\\"\" ~/.bashrc || printf \"\\nexport BUN_INSTALL=\\\"$HOME/.bun\\\"\\nexport PATH=\\\"$BUN_INSTALL/bin:$PATH\\\"\\n\" >> ~/.bashrc; grep -q \"BUN_INSTALL=\\\"$HOME/.bun\\\"\" ~/.zshrc || printf \"\\nexport BUN_INSTALL=\\\"$HOME/.bun\\\"\\nexport PATH=\\\"$BUN_INSTALL/bin:$PATH\\\"\\n\" >> ~/.zshrc'",
+  "features": {
+    "ghcr.io/devcontainer-community/devcontainer-features/astral.sh-uv:1": {}
+  },
   "customizations": {
     "vscode": {
       "extensions": ["astro-build.astro-vscode", "biomejs.biome"]

.github/workflows/ci.yml

@@ -17,6 +17,9 @@ jobs:
         with:
           bun-version: latest
 
+      - name: Install D2 CLI
+        run: curl -fsSL https://d2lang.com/install.sh | sh -s --
+
       - name: Install dependencies
         run: bun install
 

.github/workflows/pages-build-deployment.yml

@@ -21,6 +21,9 @@ jobs:
       - name: Checkout your repository using git
         uses: actions/checkout@v5
 
+      - name: Install D2 CLI
+        run: curl -fsSL https://d2lang.com/install.sh | sh -s --
+
       - name: Install, build, and upload your site
         uses: withastro/action@v5
 

.vscode/mcp.json

@@ -43,18 +43,22 @@
       "command": "bunx",
       "args": ["-y", "@modelcontextprotocol/server-memory"]
     },
-    // "github": {
-    //   "type": "stdio",
-    //   "command": "bunx",
-    //   "args": ["-y", "@modelcontextprotocol/server-github"],
-    //   "env": {
-    //     "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
-    //   }
-    // },
+    "github": {
+      "type": "http",
+      "url": "https://api.githubcopilot.com/mcp/"
+    },
     "playwright": {
       "type": "stdio",
       "command": "bunx",
       "args": ["@playwright/mcp@latest"]
+    },
+    "fetch": {
+      "command": "uvx",
+      "args": ["mcp-server-fetch"]
+    },
+    "time": {
+      "command": "uvx",
+      "args": ["mcp-server-time"]
     }
   }
 }

README.md

@@ -5,19 +5,25 @@
 ## Requirements
 
 - Bun
+- D2 CLI (for diagram rendering)
 
 ## Setup
 
 ```bash
+# Install D2 CLI (required for diagram rendering)
+bun run setup:d2
+
+# Install dependencies
 bun install
 ```
 
 ## Scripts
 
 ```bash
-bun run dev
-bun run build
-bun run preview
-bun run lint
-bun run format
+bun run dev       # Start development server
+bun run build     # Build for production
+bun run preview   # Preview production build
+bun run lint      # Lint codebase
+bun run format    # Format codebase
+bun run setup:d2  # Install D2 diagram CLI
 ```

astro.config.ts

@@ -5,60 +5,27 @@ import solid from "@astrojs/solid-js";
 import tailwindcss from "@tailwindcss/vite";
 import AstroPWA from "@vite-pwa/astro";
 import { defineConfig } from "astro/config";
-import rehypeMermaid from "rehype-mermaid";
+import rehypeD2 from "rehype-d2";
 import rehypeCopyCodeButton from "./src/lib/rehypeCopyCodeButton";
 
-type HastNode = {
-  type?: string;
-  tagName?: string;
-  properties?: Record<string, unknown>;
-  children?: HastNode[];
-};
-
-const rehypeMermaidAriaLabel = () => {
-  return (tree: HastNode) => {
-    const visit = (node: HastNode) => {
-      if (
-        node.type === "element" &&
-        node.tagName === "svg" &&
-        typeof node.properties?.id === "string" &&
-        node.properties.id.startsWith("mermaid-")
-      ) {
-        if (!node.properties) {
-          node.properties = {};
-        }
-
-        const properties = node.properties;
-        if (typeof properties["aria-label"] !== "string") {
-          properties["aria-label"] = "Mermaid diagram";
-        }
-      }
-
-      node.children?.forEach(visit);
-    };
-
-    visit(tree);
-  };
-};
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://avaabrazzaq.com", // Used to generate canonical URLs and sitemap entries.
   trailingSlash: "always", // Consistent URL format - all URLs end with /
   markdown: {
     syntaxHighlight: {
       type: "shiki",
-      excludeLangs: ["math", "mermaid"],
+      excludeLangs: ["math", "d2"],
     },
     rehypePlugins: [
       [
-        rehypeMermaid,
+        rehypeD2,
         {
-          strategy: "inline-svg",
-          dark: true,
+          theme: 0,
+          darkTheme: 200,
+          sketch: false,
         },
       ],
-      rehypeMermaidAriaLabel,
       rehypeCopyCodeButton,
     ],
   },
@@ -70,13 +37,13 @@ export default defineConfig({
     mdx({
       rehypePlugins: [
         [
-          rehypeMermaid,
+          rehypeD2,
           {
-            strategy: "inline-svg",
-            dark: true,
+            theme: 0,
+            darkTheme: 200,
+            sketch: false,
           },
         ],
-        rehypeMermaidAriaLabel,
         rehypeCopyCodeButton,
       ],
     }),

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
   "formatter": {
     "enabled": true,
     "indentStyle": "space",