From 0bf807f9c08cd4311b1b8ec96da64c98be586ac1 Mon Sep 17 00:00:00 2001 From: Sluijsens Date: Tue, 4 Aug 2026 11:31:29 +0200 Subject: [PATCH] Toon leesbare slug in plaats van GUID-ID op pakketkaarten Nu de pakketten dynamisch uit de API komen is het id een GUID, wat niet leesbaar is op de pagina. Voeg een slug-veld toe aan PackageCardData en toon dat op de kaart; id blijft ongewijzigd gebruikt als React key en data-testid. Co-Authored-By: Claude Sonnet 5 --- .../react-frontend-app/functional-design/domain-entities.md | 3 ++- .../functional-design/packages-api-handoff.md | 4 +++- src/features/landing/components/PackageCard.tsx | 2 +- src/features/landing/data/content.ts | 4 ++++ 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/domain-entities.md b/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/domain-entities.md index 2c4ba58..9e942eb 100644 --- a/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/domain-entities.md +++ b/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/domain-entities.md @@ -66,7 +66,8 @@ Text alternative: A ThemePreference selects a set of ThemeTokens; SiteContent ag ### PackageCard | Field | Type | Required | Description | |---|---|---|---| -| `id` | `string` | Yes | e.g. `pakket_01` | +| `id` | `string` | Yes | Backend record identifier (GUID). Not shown on the page. | +| `slug` | `string` | Yes | Readable, URL-safe identifier derived from `title`, e.g. `landingspagina`. Shown on the card instead of `id`. | | `title` | `string` | Yes | e.g. "Landingspagina" | | `description` | `string` | Yes | Short description | | `price` | `string` | Yes | e.g. "€ 300" or "Op maat" | diff --git a/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/packages-api-handoff.md b/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/packages-api-handoff.md index 6c0b736..329ecfc 100644 --- a/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/packages-api-handoff.md +++ b/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/packages-api-handoff.md @@ -49,6 +49,7 @@ client-side sorting): [ { "id": "pakket_01", + "slug": "landingspagina", "title": "Landingspagina", "description": "Eén overtuigende pagina die je product of dienst helder neerzet.", "price": "€ 300", @@ -73,7 +74,8 @@ for a structured error body. | Field | Type | Required | Content type / description | Used for | |---|---|---|---|---| -| `id` | `string` | Yes | Stable slug-like identifier, e.g. `pakket_01`. Currently just an ordinal slug, not a business meaning — reuse as the CMS entry's own key/slug. | React list key + `data-testid` on the card, and referenced in tests. Must be unique and stable across edits (don't regenerate on every content change, or it'll be treated as a different card). | +| `id` | `string` | Yes | Stable record identifier (the CMS entry's own key, a GUID in practice). | React list key + `data-testid` on the card, and referenced in tests. Must be unique and stable across edits (don't regenerate on every content change, or it'll be treated as a different card). Not rendered on the page. | +| `slug` | `string` | Yes | Readable, URL-safe identifier derived from `title` (lowercase, hyphen-separated), e.g. `landingspagina`. Unique among offerings; regenerate it when `title` changes, keep it otherwise. | Displayed on the card in place of the raw `id`, so visitors see readable text instead of a GUID. | | `title` | `string` | Yes | Short package name (e.g. "Landingspagina"). Plain text, no markup. | Card heading. | | `description` | `string` | Yes | One-sentence pitch, plain text. | Subheading under the title. | | `price` | `string` | Yes | Pre-formatted price display string — e.g. `"€ 300"` or `"Op maat"` for the quote-based package. **Not a number**: it's rendered verbatim, so formatting (currency symbol, spacing, "Op maat") is the CMS editor's responsibility, not computed client-side. | Large price figure on the card. | diff --git a/src/features/landing/components/PackageCard.tsx b/src/features/landing/components/PackageCard.tsx index 26ac3e6..a624da8 100644 --- a/src/features/landing/components/PackageCard.tsx +++ b/src/features/landing/components/PackageCard.tsx @@ -16,7 +16,7 @@ export function PackageCard({ pkg }: { pkg: PackageCardData }) { Meest gekozen )} - {pkg.id} + {pkg.slug}

{pkg.title}

{pkg.description}

diff --git a/src/features/landing/data/content.ts b/src/features/landing/data/content.ts index 75442b4..0aca79c 100644 --- a/src/features/landing/data/content.ts +++ b/src/features/landing/data/content.ts @@ -27,6 +27,7 @@ export interface HeroContent { export interface PackageCardData { id: string; + slug: string; title: string; description: string; price: string; @@ -76,6 +77,7 @@ export const heroContent: HeroContent = { export const packages: PackageCardData[] = [ { id: 'pakket_01', + slug: 'landingspagina', title: 'Landingspagina', description: 'Eén overtuigende pagina die je product of dienst helder neerzet.', price: '€ 300', @@ -90,6 +92,7 @@ export const packages: PackageCardData[] = [ }, { id: 'pakket_02', + slug: 'website', title: 'Website', description: "Een complete website met meerdere pagina's, klaar om te groeien.", price: '€ 750', @@ -105,6 +108,7 @@ export const packages: PackageCardData[] = [ }, { id: 'pakket_03', + slug: 'maatwerk', title: 'Maatwerk', description: 'Grotere websites, een eigen back-end of andere .NET-projecten.', price: 'Op maat',