From 0bf807f9c08cd4311b1b8ec96da64c98be586ac1 Mon Sep 17 00:00:00 2001 From: Sluijsens Date: Tue, 4 Aug 2026 11:31:29 +0200 Subject: [PATCH 1/2] 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', -- 2.39.5 From afa500eee64e812b54b3c69766402d3c06c9c2cd Mon Sep 17 00:00:00 2001 From: Sluijsens Date: Tue, 4 Aug 2026 16:09:10 +0200 Subject: [PATCH 2/2] Gebruik pnpm i.p.v. npm in README Het project gebruikt pnpm (pnpm-lock.yaml, CI draait pnpm install --frozen-lockfile), maar de README-instructies en scripts-tabel verwezen nog naar npm. Co-Authored-By: Claude Sonnet 5 --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 2988627..2765501 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,8 @@ reference designs in `References/` (`slp-software.html` = purple accent, ## Getting Started ```bash -npm install -npm run dev +pnpm install +pnpm dev ``` The app runs at `http://localhost:5173/` by default. @@ -27,13 +27,13 @@ The app runs at `http://localhost:5173/` by default. | Script | Description | |---|---| -| `npm run dev` | Start the Vite dev server | -| `npm run build` | Type-check and build a production bundle to `dist/` | -| `npm run preview` | Preview the production build locally | -| `npm run test` | Run the test suite once (Vitest) | -| `npm run test:watch` | Run the test suite in watch mode | -| `npm run lint` | Run ESLint | -| `npm run format` | Format the codebase with Prettier | +| `pnpm dev` | Start the Vite dev server | +| `pnpm build` | Type-check and build a production bundle to `dist/` | +| `pnpm preview` | Preview the production build locally | +| `pnpm test` | Run the test suite once (Vitest) | +| `pnpm test:watch` | Run the test suite in watch mode | +| `pnpm lint` | Run ESLint | +| `pnpm format` | Format the codebase with Prettier | ## Project Structure @@ -62,7 +62,7 @@ for the full theme business rules. ## Deployment Notes -This app builds to a plain static bundle (`npm run build` → `dist/`), intended for +This app builds to a plain static bundle (`pnpm build` → `dist/`), intended for upload to a traditional web host via FTP. TanStack Router uses hash-based history (`/#/route`) so that client-side routing keeps working even on hosts without server-side rewrite rules configured. See the feature's NFR Requirements/Design -- 2.39.5