Files
codewhale/web/components/whale.tsx
T
Hunter Bown 9e45780ba0 feat(web): community site for deepseek-tui.com (mobile + color refresh) (#1108)
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>
2026-05-07 21:00:06 -05:00

26 lines
862 B
TypeScript

/**
* Stylized whale mark — a nod to DeepSeek's cetacean motif.
* Kept minimal and geometric so it reads as a wordmark accent, not an illustration.
*/
export function Whale({ size = 22, className = "" }: { size?: number; className?: string }) {
return (
<svg
viewBox="0 0 64 32"
width={size}
height={(size * 32) / 64}
className={className}
aria-hidden
fill="currentColor"
>
{/* body */}
<path d="M2 18 C 2 10, 14 4, 28 4 C 42 4, 50 10, 50 16 C 50 22, 42 28, 28 28 C 18 28, 8 24, 2 18 Z" />
{/* tail flukes */}
<path d="M48 12 L 62 4 L 58 16 L 62 28 L 48 20 Z" />
{/* eye */}
<circle cx="14" cy="14" r="1.4" fill="#FFFFFF" />
{/* spout */}
<path d="M22 4 L 22 0 M 26 4 L 28 0 M 18 4 L 16 0" stroke="currentColor" strokeWidth="1.2" fill="none" />
</svg>
);
}