feat: docs v2 (#2460)

Co-authored-by: Catalin Pit <catalinpit@gmail.com>

apps/docs/src/components/mdx/mermaid.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { use, useEffect, useId, useState } from 'react';
+
+import { useTheme } from 'next-themes';
+
+export const Mermaid = ({ chart }: { chart: string }) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return <MermaidContent chart={chart} />;
+};
+
+const cache = new Map<string, Promise<unknown>>();
+
+const cachePromise = async <T,>(key: string, setPromise: () => Promise<T>): Promise<T> => {
+  const cached = cache.get(key);
+
+  if (cached) {
+    return cached as Promise<T>;
+  }
+
+  const promise = setPromise();
+  cache.set(key, promise);
+
+  return promise;
+};
+
+const MermaidContent = ({ chart }: { chart: string }) => {
+  const id = useId();
+  const { resolvedTheme } = useTheme();
+  const { default: mermaid } = use(cachePromise('mermaid', async () => import('mermaid')));
+
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: 'loose',
+    fontFamily: 'inherit',
+    themeCSS: 'margin: 1.5rem auto 0;',
+    theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+  });
+
+  const { svg, bindFunctions } = use(
+    cachePromise(`${chart}-${resolvedTheme}`, async () => {
+      return mermaid.render(id, chart.replaceAll('\\n', '\n'));
+    }),
+  );
+
+  return (
+    <div
+      ref={(container) => {
+        if (container) {
+          bindFunctions?.(container);
+        }
+      }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+};