homepage: typography upgrade + ArticleFeed polish

- layout.tsx: load Lora (serif) + Inter (sans) via next/font/google,
  self-hosted at build time, exposed as --font-serif / --font-sans
  CSS variables on <html>. No CDN fetch, no FOIT, no GDPR concern.
- tailwind.css: --font-heading and --font-body now reference the
  next/font variables with Georgia / -apple-system fallbacks for the
  brief window before the self-hosted face is ready. --font-mono
  upgraded to IBM Plex Mono → ui-monospace → Courier New fallback
  (DoubleTicker chips already specify IBM Plex Mono directly).
- ArticleFeed: drop the FEATURED filter chip (duplicates the
  Staff Editorial section above), add publish date alongside the
  byline on every card, lift the homepage feed cap from 200 → 5000.
- api/public/posts: lift MAX_LIMIT to 10000 so client-side
  pagination + infinite-scroll see the full archive.
This commit is contained in:
Ryan Salazar
2026-05-21 01:51:29 +00:00
parent 567a45079f
commit 78c2ee656e
4 changed files with 42 additions and 9 deletions

View File

@@ -26,7 +26,7 @@ interface ArticleItem {
const ALL_CATEGORIES = ["All", "BROADCAST", "FEATURED", "POST PRODUCTION", "ANIMATION"];
const ALL_CATEGORIES = ["All", "BROADCAST", "POST PRODUCTION", "ANIMATION"];
const SOURCE_FILTERS = ["All", "Live", "Imported"] as const;
type SourceFilter = typeof SOURCE_FILTERS[number];
type FeedMode = "pagination" | "infinite";
@@ -94,7 +94,7 @@ export default function ArticleFeed() {
let cancelled = false;
(async () => {
try {
const res = await fetch("/api/public/posts?limit=200", { cache: "no-store" });
const res = await fetch("/api/public/posts?limit=5000", { cache: "no-store" });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const json = await res.json();
const items = Array.isArray(json?.items) ? (json.items as ArticleItem[]) : [];
@@ -613,11 +613,19 @@ export default function ArticleFeed() {
{article?.excerpt}
</p>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-1 hidden sm:flex">
<div className="hidden sm:flex items-center gap-2 text-xs text-[#666] min-w-0">
<PersonIcon size={11} className="text-[#666] flex-shrink-0" />
<span className="font-body text-xs text-[#666]">
<span className="font-body truncate">
By {article?.author}
</span>
{article?.date && (
<>
<span aria-hidden="true" className="text-[#333]">·</span>
<time className="font-body whitespace-nowrap" dateTime={article.date}>
{article.date}
</time>
</>
)}
</div>
<Link
href={articleHref}