Hunter Bown
9e45780ba0
First commit of the Next.js community site that powers deepseek-tui.com, deployed via Cloudflare Workers / OpenNext. This commit lands the scaffold and applies the visual + correctness pass requested by community feedback: - Palette: drop the cream/Anthropic-feel paper (#F4F1E8) for a DeepSeek-aligned cool white + soft gray (#FFFFFF / #F4F6FB), with indigo accents kept. Soften default hairlines so a pure-white background reads clean instead of harsh. - Mobile: add a hamburger menu (mobile-menu.tsx) so phones can reach Install / Docs / Activity / Roadmap / Contribute — previously the link list was hidden on phones with no replacement. Tighter hero, flexible button row, viewport-safe code blocks, columnar grids collapse cleanly under 768px, and the printed-almanac center rule is desktop-only now (it sliced through narrow viewports). - "How it works" diagram: replace the hand-rolled ASCII art (which misaligned under CJK monospace because Han characters take 2 columns vs Latin's 1, per dhh's note in WeChat) with a real mermaid diagram rendered client-side via dynamic import. Uses the mermaid.live standard syntax 庄表伟 recommended. - Issue #1104: the docs listed a `deepseek-cn` provider that the v0.8.16 binary doesn't accept (`ProviderArg` in crates/cli only has 9 variants; the 10th lives only in the legacy tui/config.rs). derive-facts.mjs now omits `deepseek-cn` until that variant is wired through the shared ProviderKind, and the install page's China-network recipe uses `base_url` / `DEEPSEEK_BASE_URL` (which actually works on v0.8.16) instead of the unsupported provider. Auto-deploys via .github/workflows/deploy-web.yml on push to main. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
type Props = {
|
|
chart: string;
|
|
label?: string;
|
|
fallback?: React.ReactNode;
|
|
};
|
|
|
|
export function MermaidDiagram({ chart, label, fallback }: Props) {
|
|
const [svg, setSvg] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2, 9)}`);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
const mermaid = (await import("mermaid")).default;
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
securityLevel: "strict",
|
|
theme: "base",
|
|
fontFamily: '"JetBrains Mono", ui-monospace, Menlo, monospace',
|
|
flowchart: {
|
|
curve: "basis",
|
|
padding: 14,
|
|
htmlLabels: false,
|
|
useMaxWidth: true,
|
|
},
|
|
themeVariables: {
|
|
background: "#ffffff",
|
|
primaryColor: "#ffffff",
|
|
primaryTextColor: "#0e0e10",
|
|
primaryBorderColor: "#0e0e10",
|
|
lineColor: "#4d6bfe",
|
|
secondaryColor: "#e9eefe",
|
|
tertiaryColor: "#f4f6fb",
|
|
edgeLabelBackground: "#ffffff",
|
|
clusterBkg: "#f4f6fb",
|
|
clusterBorder: "#0e0e10",
|
|
nodeBorder: "#0e0e10",
|
|
mainBkg: "#ffffff",
|
|
},
|
|
});
|
|
const { svg: rendered } = await mermaid.render(idRef.current, chart);
|
|
if (!cancelled) setSvg(rendered);
|
|
} catch (e) {
|
|
if (!cancelled) setError(e instanceof Error ? e.message : String(e));
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [chart]);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="mermaid-frame" role="img" aria-label={label}>
|
|
<pre className="code-block text-[0.78rem]">{chart}</pre>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!svg) {
|
|
return (
|
|
<div className="mermaid-frame" role="img" aria-label={label} aria-busy="true">
|
|
{fallback ?? (
|
|
<pre className="code-block text-[0.78rem] opacity-70">{chart}</pre>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="mermaid-frame"
|
|
role="img"
|
|
aria-label={label}
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
);
|
|
}
|