mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-07-10 06:36:06 +00:00
MHSanaei
9b91f0f42e
Fold the standalone 3x-ui-docs project (Next.js 16 + Fumadocs, deployed to docs.sanaei.dev) into docs/ so the panel and its documentation share a single source of truth, the way sing-box keeps its docs in-tree. The old repo becomes redundant and can be retired. - Import the full site under docs/ (app, components, content, lib, public, scripts, config). The self-contained pnpm project sits alongside the existing engineering notes with no filename collisions. - Re-point "Edit on GitHub" links from MHSanaei/3x-ui-docs to this repo's docs/content/docs path (docs/lib/shared.ts, docs/app/.../page.tsx). - Add docs-ci.yml and docs-deploy.yml under .github/workflows/, scoped to docs/** and run with working-directory: docs, since GitHub only runs workflows from the repo-root .github/. deploy-static.yml's GitHub Pages publish (CNAME docs.sanaei.dev) carries over unchanged. Follow-up (outside this commit): attach the docs.sanaei.dev custom domain to this repository's Pages (or set the Vercel project's root directory to docs), confirm the site is live from the monorepo, then delete MHSanaei/3x-ui-docs.
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useId, useState } from 'react';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
// Client-side, theme-aware Mermaid renderer. Mermaid is imported dynamically so
|
|
// it stays out of the initial bundle and only loads on pages that use a diagram.
|
|
export function Mermaid({ chart }: { chart: string }) {
|
|
const rawId = useId();
|
|
const id = `mmd-${rawId.replace(/[^a-zA-Z0-9]/g, '')}`;
|
|
const { resolvedTheme } = useTheme();
|
|
const [svg, setSvg] = useState('');
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
void (async () => {
|
|
const mermaid = (await import('mermaid')).default;
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
securityLevel: 'strict',
|
|
theme: resolvedTheme === 'dark' ? 'dark' : 'default',
|
|
fontFamily: 'inherit',
|
|
});
|
|
try {
|
|
const { svg } = await mermaid.render(id, chart.trim());
|
|
if (active) setSvg(svg);
|
|
} catch {
|
|
if (active) setSvg('');
|
|
}
|
|
})();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [chart, resolvedTheme, id]);
|
|
|
|
return (
|
|
<div
|
|
className="my-6 flex justify-center overflow-x-auto rounded-xl border bg-fd-card p-4 [&_svg]:max-w-full"
|
|
role="img"
|
|
aria-label="Architecture diagram"
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
);
|
|
}
|