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>
60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import Link from "next/link";
|
|
import type { FeedItem } from "@/lib/types";
|
|
import { relativeTime } from "@/lib/github";
|
|
|
|
const KIND_LABEL: Record<FeedItem["kind"], { label: string; cn: string }> = {
|
|
issue: { label: "Issue", cn: "议题" },
|
|
pull: { label: "Pull", cn: "合并" },
|
|
release: { label: "Release", cn: "发布" },
|
|
discussion: { label: "Talk", cn: "讨论" },
|
|
};
|
|
|
|
function statePill(state: FeedItem["state"]) {
|
|
const map: Record<FeedItem["state"], string> = {
|
|
open: "pill pill-jade",
|
|
closed: "pill pill-ghost",
|
|
merged: "pill pill-hot",
|
|
draft: "pill pill-ghost",
|
|
published: "pill pill-ochre",
|
|
};
|
|
return <span className={map[state]}>{state}</span>;
|
|
}
|
|
|
|
export function FeedCard({ item, dense = false }: { item: FeedItem; dense?: boolean }) {
|
|
const k = KIND_LABEL[item.kind];
|
|
return (
|
|
<article className={`hairline-b py-4 ${dense ? "" : "px-1"}`}>
|
|
<div className="flex items-baseline gap-3 mb-1.5">
|
|
<span className="font-mono text-[0.66rem] uppercase tracking-widest text-indigo">
|
|
{k.label} <span className="font-cjk text-ink-mute normal-case tracking-normal ml-1">{k.cn}</span>
|
|
</span>
|
|
<span className="font-mono text-[0.7rem] text-ink-mute tabular">#{item.number}</span>
|
|
<span className="ml-auto font-mono text-[0.7rem] text-ink-mute tabular">{relativeTime(item.updatedAt)}</span>
|
|
</div>
|
|
|
|
<h3 className="font-display text-base leading-snug">
|
|
<Link href={item.url} className="hover:text-indigo transition-colors">
|
|
{item.title}
|
|
</Link>
|
|
</h3>
|
|
|
|
<div className="flex items-center gap-3 mt-2 flex-wrap">
|
|
{statePill(item.state)}
|
|
{item.labels.slice(0, 3).map((l) => (
|
|
<span
|
|
key={l.name}
|
|
className="pill pill-ghost"
|
|
style={{ borderColor: `#${l.color}`, color: `#${l.color}` }}
|
|
>
|
|
{l.name}
|
|
</span>
|
|
))}
|
|
<span className="ml-auto flex items-center gap-2 font-mono text-[0.7rem] text-ink-mute">
|
|
<span>@{item.author}</span>
|
|
{item.comments > 0 && <span className="tabular">· {item.comments} reply{item.comments === 1 ? "" : "s"}</span>}
|
|
</span>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|