Files
Epicnabbo-Catalogus-Updated…/src/app/(site)/news/page.tsx
T
openhands dc8fb8a6ed feat: speed up admin clone import and enable Cache Components
- Clone import: defer FurnitureData.json writes and append all entries in a
  single batched write instead of one read-modify-write per item, removing
  the main serialization bottleneck for large batches.
- Clone import: raise SSE batch concurrency cap from 5 to 10 and bump the
  clone client/route default from 2 to 6.
- Add a flush hook to runSseBatch so callers can batch deferred work before
  batch_complete is emitted, and surface flush errors as an error event.
- Enable Next.js Cache Components (instant: false opt-out) and silence the
  related build warnings in next.config.ts.
- Switch isomorphic-dompurify to dompurify and refresh dependencies.
2026-08-05 11:10:16 +02:00

124 lines
3.1 KiB
TypeScript

import { desc } from "drizzle-orm";
import Image from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { db, WebsiteArticles } from "@/lib/db";
import { excerpt } from "@/lib/format";
import { formatDate } from "@/lib/format-date";
// TODO: Cache Components adoption. Refactor this route so this opt-out can be removed.
// See: https://nextjs.org/docs/app/guides/migrating-to-cache-components
export const instant = false;
export const metadata = { title: "News" };
export default async function NewsPage() {
const t = await getTranslations("pages.news");
let articles: (typeof WebsiteArticles.$inferSelect)[] = [];
try {
articles = await db
.select()
.from(WebsiteArticles)
.orderBy(desc(WebsiteArticles.createdAt))
.limit(30);
} catch {
// DB unavailable — render the empty state rather than a 500.
articles = [];
}
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard icon="📰" title={t("title")} subtitle={t("subtitle")} />
<ContentCard padded={articles.length === 0}>
{articles.length === 0 ? (
<EmptyState icon="📰">{t("noArticles")}</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{articles.map((a) => (
<Link
key={a.slug}
href={`/news/${a.slug}`}
className="card hover"
style={{
display: "flex",
flexDirection: "column",
textDecoration: "none",
padding: 0,
overflow: "hidden",
}}
>
{a.image ? (
<div
style={{
position: "relative",
width: "100%",
aspectRatio: "16/9",
}}
>
<Image
src={a.image}
alt=""
fill
style={{ objectFit: "cover" }}
unoptimized
/>
</div>
) : (
<div
style={{
width: "100%",
aspectRatio: "16/9",
backgroundColor:
"color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar))",
}}
/>
)}
<div
style={{
padding: "1rem 1.1rem",
flex: 1,
display: "flex",
flexDirection: "column",
}}
>
<h3
style={{
margin: 0,
fontSize: "1.05rem",
color:
"var(--color-navbar-text-readable, var(--color-navbar-text))",
lineHeight: 1.4,
}}
>
{a.title}
</h3>
<p
className="muted"
style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}
>
{formatDate(a.createdAt, "date", "")}
</p>
<p
style={{
margin: 0,
color:
"var(--color-navbar-text-readable, var(--color-navbar-text))",
fontSize: "0.88rem",
lineHeight: 1.55,
}}
>
{excerpt(a.shortStory, 150)}
</p>
</div>
</Link>
))}
</div>
)}
</ContentCard>
</main>
);
}