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>
32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import type { FeedItem } from "@/lib/types";
|
|
import { relativeTime } from "@/lib/github";
|
|
|
|
export function Ticker({ items }: { items: FeedItem[] }) {
|
|
if (!items.length) return null;
|
|
const doubled = [...items, ...items]; // seamless loop
|
|
return (
|
|
<div className="hairline-t hairline-b bg-paper-deep overflow-hidden">
|
|
<div className="mx-auto max-w-[1400px] flex items-stretch">
|
|
<div className="bg-ink text-paper px-4 py-2 flex items-center shrink-0 gap-2">
|
|
<span className="w-1.5 h-1.5 bg-indigo rounded-full inline-block animate-pulse" />
|
|
<span className="font-cjk text-sm font-semibold tracking-wider">实 时</span>
|
|
<span className="font-mono text-[0.7rem] uppercase tracking-widest text-paper-deep">LIVE</span>
|
|
</div>
|
|
<div className="flex-1 overflow-hidden relative">
|
|
<div className="ticker-track py-2 font-mono text-[0.78rem]">
|
|
{doubled.map((item, i) => (
|
|
<span key={`${item.url}-${i}`} className="inline-flex items-center gap-2">
|
|
<span className="text-indigo uppercase tracking-wider">{item.kind === "pull" ? "PR" : "ISS"}</span>
|
|
<span className="tabular text-ink-mute">#{item.number}</span>
|
|
<span className="text-ink">{item.title.slice(0, 78)}{item.title.length > 78 ? "…" : ""}</span>
|
|
<span className="text-ink-mute tabular">· {relativeTime(item.updatedAt)}</span>
|
|
<span className="text-paper-line">◆</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|