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>
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
type MobileLink = { href: string; label: string; cn?: string };
|
|
|
|
export function MobileMenu({
|
|
links,
|
|
installHref,
|
|
installLabel,
|
|
}: {
|
|
links: MobileLink[];
|
|
installHref: string;
|
|
installLabel: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const prev = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setOpen(false);
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => {
|
|
document.body.style.overflow = prev;
|
|
window.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [open]);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((o) => !o)}
|
|
className="md:hidden inline-flex items-center justify-center w-9 h-9 hairline-t hairline-b hairline-l hairline-r hover:bg-paper-deep transition-colors"
|
|
aria-label={open ? "Close menu" : "Open menu"}
|
|
aria-expanded={open}
|
|
aria-controls="mobile-menu"
|
|
>
|
|
{open ? (
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden>
|
|
<path d="M2 2L12 12M12 2L2 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
|
|
</svg>
|
|
) : (
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" aria-hidden>
|
|
<path d="M0 1H16M0 6H16M0 11H16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
id="mobile-menu"
|
|
className="md:hidden fixed inset-x-0 top-[5.7rem] bottom-0 z-40 bg-paper hairline-t overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<nav className="px-6 py-4">
|
|
<ul className="divide-y divide-[rgba(14,14,16,0.18)]">
|
|
{links.map((l) => (
|
|
<li key={l.href}>
|
|
<Link
|
|
href={l.href}
|
|
onClick={() => setOpen(false)}
|
|
className="flex items-baseline gap-3 py-4 hover:text-indigo transition-colors"
|
|
>
|
|
<span className="font-display text-lg">{l.label}</span>
|
|
{l.cn && (
|
|
<span className="font-cjk text-sm text-ink-mute">{l.cn}</span>
|
|
)}
|
|
<span className="ml-auto font-mono text-xs text-ink-mute">→</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Link
|
|
href={installHref}
|
|
onClick={() => setOpen(false)}
|
|
className="mt-6 block w-full text-center px-5 py-3 bg-indigo text-paper font-mono text-sm uppercase tracking-wider hover:bg-indigo-deep transition-colors"
|
|
>
|
|
{installLabel}
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|