1b434fe23e
- lib/payload.ts: getLegalPage(type) alongside the existing
getBlogPosts/getProducts fetchers
- New RichText component: small dependency-free Lexical JSON → JSX
renderer for Payload's richText fields (headings get stable
"section-N" ids for anchor/TOC linking)
- New SectionTOC: generalized from VersandTOC into a reusable
scroll-spy sidebar driven by any {id, title}[] — Datenschutz needs one
built from CMS-authored headings, not a hardcoded array. VersandTOC is
now a thin wrapper around it. Sticky positioning moved from the nav
itself to each page's sidebar wrapper, so a TOC and an extra card
(Impressum/Datenschutz both have one) scroll together as one unit
instead of the card drifting away independently
- TOC clicks set the active item immediately and hold it for ~1s over
the scroll-spy observer, covering both "target already fully visible,
nothing to scroll" and "an unrelated section flickers through the
intersection band mid-scroll"
- Both pages follow the same breadcrumb+H1+TOC-sidebar+content layout
established for /versand
150 lines
4.0 KiB
TypeScript
150 lines
4.0 KiB
TypeScript
const PAYLOAD_URL = process.env.PAYLOAD_URL || "https://payload.mk360.de";
|
|
const TENANT_SLUG = "einfach-produktiv";
|
|
|
|
export type BlogPost = {
|
|
id: number;
|
|
title: string;
|
|
slug: string;
|
|
category: string;
|
|
readTime: number;
|
|
excerpt: string;
|
|
thumbnail: string | null;
|
|
};
|
|
|
|
type PayloadPost = {
|
|
id: number;
|
|
title: string;
|
|
slug: string;
|
|
category: { name: string } | number | null;
|
|
readTime: number;
|
|
excerpt: string;
|
|
thumbnail: { url: string } | number | null;
|
|
};
|
|
|
|
export async function getBlogPosts(limit = 3): Promise<BlogPost[]> {
|
|
const params = new URLSearchParams({
|
|
"where[tenant.slug][equals]": TENANT_SLUG,
|
|
sort: "-publishedAt",
|
|
depth: "2",
|
|
limit: String(limit),
|
|
});
|
|
|
|
const res = await fetch(`${PAYLOAD_URL}/api/posts?${params}`, {
|
|
next: { revalidate: 60 },
|
|
});
|
|
if (!res.ok) {
|
|
console.error(`getBlogPosts: Payload returned ${res.status} ${res.statusText}`);
|
|
return [];
|
|
}
|
|
|
|
const data: { docs?: PayloadPost[] } = await res.json();
|
|
const docs = Array.isArray(data.docs) ? data.docs : [];
|
|
return docs.map((post) => ({
|
|
id: post.id,
|
|
title: post.title,
|
|
slug: post.slug,
|
|
category:
|
|
typeof post.category === "object" && post.category
|
|
? post.category.name
|
|
: "",
|
|
readTime: post.readTime,
|
|
excerpt: post.excerpt,
|
|
thumbnail:
|
|
typeof post.thumbnail === "object" && post.thumbnail
|
|
? post.thumbnail.url
|
|
: null,
|
|
}));
|
|
}
|
|
|
|
// Frontend-facing shape — `id` is Payload's `slug` field, not its numeric
|
|
// row id. Cart items are stored in localStorage keyed by this string (see
|
|
// lib/cart.ts), so slugs were chosen in the Products collection to match
|
|
// the ids the old hardcoded catalog used ("todo-karten" etc.) — switching
|
|
// to numeric ids here would silently orphan every existing shopper's cart.
|
|
export type Product = {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
price: number;
|
|
image: string;
|
|
href: string | null;
|
|
};
|
|
|
|
type PayloadProduct = {
|
|
id: number;
|
|
name: string;
|
|
slug: string;
|
|
description: string | null;
|
|
price: number;
|
|
image: { url: string } | number | null;
|
|
detailHref: string | null;
|
|
};
|
|
|
|
export async function getProducts(): Promise<Product[]> {
|
|
const params = new URLSearchParams({
|
|
"where[tenant.slug][equals]": TENANT_SLUG,
|
|
sort: "sortOrder",
|
|
depth: "2",
|
|
limit: "100",
|
|
});
|
|
|
|
const res = await fetch(`${PAYLOAD_URL}/api/products?${params}`, {
|
|
next: { revalidate: 60 },
|
|
});
|
|
if (!res.ok) {
|
|
console.error(`getProducts: Payload returned ${res.status} ${res.statusText}`);
|
|
return [];
|
|
}
|
|
|
|
const data: { docs?: PayloadProduct[] } = await res.json();
|
|
const docs = Array.isArray(data.docs) ? data.docs : [];
|
|
return docs.map((product) => ({
|
|
id: product.slug,
|
|
name: product.name,
|
|
description: product.description ?? "",
|
|
price: product.price,
|
|
image: typeof product.image === "object" && product.image ? product.image.url : "",
|
|
href: product.detailHref || null,
|
|
}));
|
|
}
|
|
|
|
export async function getProductBySlug(slug: string): Promise<Product | null> {
|
|
const products = await getProducts();
|
|
return products.find((p) => p.id === slug) ?? null;
|
|
}
|
|
|
|
export type LegalPageType = "impressum" | "datenschutz" | "agb" | "widerruf";
|
|
|
|
export type LegalPage = {
|
|
type: LegalPageType;
|
|
title: string;
|
|
content: unknown;
|
|
};
|
|
|
|
type PayloadLegalPage = {
|
|
type: LegalPageType;
|
|
title: string;
|
|
content: unknown;
|
|
};
|
|
|
|
export async function getLegalPage(type: LegalPageType): Promise<LegalPage | null> {
|
|
const params = new URLSearchParams({
|
|
"where[tenant.slug][equals]": TENANT_SLUG,
|
|
"where[type][equals]": type,
|
|
limit: "1",
|
|
});
|
|
|
|
const res = await fetch(`${PAYLOAD_URL}/api/legal-pages?${params}`, {
|
|
next: { revalidate: 60 },
|
|
});
|
|
if (!res.ok) {
|
|
console.error(`getLegalPage: Payload returned ${res.status} ${res.statusText}`);
|
|
return null;
|
|
}
|
|
|
|
const data: { docs?: PayloadLegalPage[] } = await res.json();
|
|
const doc = data.docs?.[0];
|
|
if (!doc) return null;
|
|
return { type: doc.type, title: doc.title, content: doc.content };
|
|
}
|