refactor(web): remove MDX dependencies

Author: leonardcser

apps/web/package.json

@@ -22,8 +22,6 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@hookform/resolvers": "^5.0.1",
-    "@mdx-js/react": "^3.1.0",
-    "@mdx-js/rollup": "^3.1.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-alert-dialog": "^1.1.11",
     "@radix-ui/react-avatar": "^1.1.7",
@@ -41,15 +39,13 @@
     "@radix-ui/react-toggle": "^1.1.6",
     "@radix-ui/react-tooltip": "^1.2.4",
     "@tanstack/react-table": "^8.21.3",
-    "@types/mdx": "^2.0.13",
     "@xyflow/react": "^12.6.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.507.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.3",
     "react-router": "^7.6.0",
-    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.3",
     "swr": "^2.3.3",
     "zod": "^3.24.4"

apps/web/src/components/docs/callout.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/utils/utils";
+
+interface CalloutProps {
+  children: React.ReactNode;
+  type?: "note" | "warning" | "tip" | "danger";
+}
+
+export function Callout({ children, type = "note" }: CalloutProps) {
+  const variants = {
+    note: "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100",
+    warning:
+      "border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100",
+    tip: "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100",
+    danger:
+      "border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100",
+  };
+
+  return (
+    <div className={cn("border-l-4 p-4 my-6 rounded-r-lg", variants[type])}>
+      {children}
+    </div>
+  );
+}

apps/web/src/components/docs/code-block.tsx

@@ -0,0 +1,62 @@
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/utils";
+
+interface CodeBlockProps {
+  children: React.ReactNode;
+  className?: string;
+  language?: string;
+}
+
+export function CodeBlock({ children, className, language }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const isInline = !className && !language;
+
+  if (isInline) {
+    return (
+      <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+        {children}
+      </code>
+    );
+  }
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(children));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <div className="relative group">
+      <pre className="mb-4 mt-6 overflow-x-auto rounded-lg border bg-zinc-950 text-white p-4">
+        <Button
+          size="icon"
+          variant="ghost"
+          className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 text-zinc-400 hover:text-zinc-100 hover:bg-transparent"
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <Check className="h-4 w-4" />
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+        </Button>
+        <code
+          className={cn(
+            "text-sm",
+            className,
+            language && `language-${language}`
+          )}
+        >
+          {children}
+        </code>
+      </pre>
+    </div>
+  );
+}

apps/web/src/components/layouts/docs-layout.tsx

@@ -9,7 +9,6 @@ import {
 import React, { useEffect } from "react";
 import { Link, useLocation } from "react-router";
 
-import { MdxProvider } from "@/components/mdx-provider";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -266,8 +265,8 @@ export function DocsLayout({
             </div>
 
             {/* Content */}
-            <div className="prose prose-slate dark:prose-invert max-w-none">
-              <MdxProvider>{children}</MdxProvider>
+            <div className="prose prose-slate dark:prose-invert max-w-none docs-content">
+              {children}
             </div>
 
             {/* Navigation */}