Archived
krisf
1010f27f44
Next.js 14 + TypeScript + Tailwind + Prisma/SQLite. - LLM synthesis abstraction (OpenAI/Anthropic/Ollama) + admin settings UI - RSS ingestion pipeline (parser + cheerio content) + node-cron worker - AdSense AdUnit placements (header/in-feed/in-article/sidebar) - Sources analysis attribution, nofollow links, canonical/OG, sitemap/robots - Admin auth (ADMIN_API_KEY, timingSafeEqual, fail-closed 401) - Multi-cell lady-ga-ga marker, sitemap, robots, legal pages - Comprehensive README (setup, LLM config, AdSense, migrations, deploy)
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
import Link from 'next/link';
|
|
import type { ArticleCard as Card } from '@/lib/queries';
|
|
import { formatRelativeTime } from '@/lib/format';
|
|
|
|
export default function ArticleCard({ card }: { card: Card }) {
|
|
const href = `/article/${card.slug}`;
|
|
const title = card.headline ?? card.title;
|
|
return (
|
|
<article className="group flex flex-col overflow-hidden rounded-xl border border-ink-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
|
|
<Link
|
|
href={href}
|
|
className="relative block aspect-[16/9] overflow-hidden bg-ink-100"
|
|
>
|
|
{card.image ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={card.image}
|
|
alt=""
|
|
loading="lazy"
|
|
className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
|
|
/>
|
|
) : (
|
|
<span className="flex h-full items-center justify-center font-display text-4xl text-ink-300">
|
|
{card.siteName.charAt(0)}
|
|
</span>
|
|
)}
|
|
<span className="absolute left-3 top-3 rounded bg-ink-950/80 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">
|
|
{card.siteName}
|
|
</span>
|
|
</Link>
|
|
<div className="flex flex-1 flex-col p-4">
|
|
<h3 className="font-display text-lg font-bold leading-snug text-ink-900 group-hover:text-maple-700">
|
|
<Link href={href}>{title}</Link>
|
|
</h3>
|
|
<p className="mt-2 flex-1 text-sm leading-relaxed text-ink-600">
|
|
{card.excerpt}
|
|
</p>
|
|
<div className="mt-3 flex items-center justify-between text-xs text-ink-500">
|
|
<span>{card.publishedAt ? formatRelativeTime(card.publishedAt) : 'recent'}</span>
|
|
<span className="flex gap-1">
|
|
{card.tags.slice(0, 2).map((t) => (
|
|
<Link
|
|
key={t}
|
|
href={`/tag/${t}`}
|
|
className="rounded bg-ink-100 px-1.5 py-0.5 hover:bg-maple-100 hover:text-maple-800"
|
|
>
|
|
{t}
|
|
</Link>
|
|
))}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|