Initial commit: Astro scaffold, review template, voorstelformulier, screenshot/AI-automatisering

2026-07-24 08:54:47 +02:00
commit 0913c99b9b
23 changed files with 6027 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,4 @@
+# Kopieer naar .env en vul in. .env zelf staat in .gitignore, wordt nooit gecommit.
+
+# Nodig voor `npm run new-review` / `make review`
+ANTHROPIC_API_KEY=
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.astro/
+.env
+__pycache__/
+*.pyc
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
--- a/10
+++ b/10
@@ -0,0 +1,10 @@
+.PHONY: review
+
+# Screenshot + AI-conceptreview maken en meteen in vim openen om verder te schrijven.
+# Gebruik: make review URL=https://voorbeeld.nl [SLUG=voorbeeld]
+review:
+	@if [ -z "$(URL)" ]; then \
+		echo "Gebruik: make review URL=https://voorbeeld.nl [SLUG=voorbeeld]"; \
+		exit 1; \
+	fi
+	@FILE=$$(node --env-file-if-exists=.env scripts/new-review.mjs "$(URL)" $(SLUG)) && vim "$$FILE"
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,6 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  site: "https://aitestbank.nl",
+  output: "static",
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "aitestbank",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "screenshot": "node scripts/screenshot.mjs",
+    "new-review": "node --env-file-if-exists=.env scripts/new-review.mjs"
+  },
+  "dependencies": {
+    "astro": "^7.0.0"
+  },
+  "devDependencies": {
+    "playwright": "^1.48.0",
+    "@anthropic-ai/sdk": "^0.32.0"
+  }
+}
--- a/public/logos/.gitkeep
+++ b/public/logos/.gitkeep
--- a/scripts/new-review.mjs
+++ b/scripts/new-review.mjs
@@ -0,0 +1,212 @@
+#!/usr/bin/env node
+/**
+ * Zet een nieuw review-conceptbestand + screenshot klaar op basis van alleen een URL.
+ *
+ * Gebruik:
+ *   ANTHROPIC_API_KEY=... npm run new-review -- <url> [slug]
+ *   (of: ANTHROPIC_API_KEY in .env zetten — zie .env.example — en dan gewoon
+ *    `npm run new-review -- <url> [slug]`, of `make review URL=<url> [SLUG=slug]`
+ *    om na afloop meteen vim te openen op het net aangemaakte bestand)
+ *
+ * Wat het doet:
+ *   1. Screenshot van de site (Playwright) -> src/assets/reviews/<slug>/screenshot.png
+ *   2. Titel/meta/zichtbare tekst van de site scrapen
+ *   3. Claude (Haiku) laten samenvatten tot titel/bedrijfsnaam/categorie/doelgroep/prijsindicatie
+ *      — met expliciete instructie om niets te verzinnen, onbekend = leeg veld
+ *   4. Nieuw src/content/reviews/<slug>.md wegschrijven vanuit _template.md, met die velden ingevuld
+ *
+ * Wat het BEWUST NIET automatisch invult:
+ *   score, verdict, hands-on indruk — dat is jouw eigen testervaring na het zelf proberen,
+ *   niet iets wat een script (of AI die de website leest) kan beoordelen.
+ *   Alle AI-ingevulde velden krijgen een "# AI-concept, controleren!"-comment: check ze na.
+ */
+import { chromium } from "playwright";
+import Anthropic from "@anthropic-ai/sdk";
+import { mkdir, readFile, writeFile, access } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+
+function slugify(hostname) {
+  return hostname
+    .replace(/^www\./, "")
+    .replace(/\.(com|nl|ai|io|app|co)$/i, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+}
+
+function fillField(template, field, value) {
+  // Laat de regel (met het voorbeeld in de comment) ongewijzigd als er niets gevonden is,
+  // zodat de gebruiker nog steeds ziet wat er verwacht wordt en het zelf kan invullen.
+  if (!value) return template;
+  const re = new RegExp(`^${field}: ""(\\s*#.*)?$`, "m");
+  return template.replace(re, `${field}: ${JSON.stringify(value)}  # AI-concept, controleren!`);
+}
+
+async function main() {
+  const [, , urlArg, slugArg] = process.argv;
+  if (!urlArg) {
+    console.error("Gebruik: npm run new-review -- <url> [slug]");
+    process.exit(1);
+  }
+
+  let url;
+  try {
+    url = new URL(urlArg).toString();
+  } catch {
+    console.error(`Ongeldige URL: ${urlArg}`);
+    process.exit(1);
+  }
+
+  const slug = slugArg || slugify(new URL(url).hostname);
+  const contentPath = path.join(projectRoot, "src", "content", "reviews", `${slug}.md`);
+
+  try {
+    await access(contentPath);
+    console.error(
+      `Bestaat al: ${path.relative(projectRoot, contentPath)} — kies een andere slug of verwijder 'm eerst.`,
+    );
+    process.exit(1);
+  } catch {
+    // bestaat nog niet, prima
+  }
+
+  if (!process.env.ANTHROPIC_API_KEY) {
+    console.error("ANTHROPIC_API_KEY niet gezet. Voorbeeld:");
+    console.error(`  ANTHROPIC_API_KEY=sk-ant-... npm run new-review -- ${urlArg}`);
+    process.exit(1);
+  }
+
+  console.error(`Site laden: ${url}`);
+  const browser = await chromium.launch();
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+
+  try {
+    await page.goto(url, { waitUntil: "networkidle", timeout: 30_000 });
+  } catch {
+    await page.goto(url, { waitUntil: "load", timeout: 30_000 });
+  }
+
+  const outDir = path.join(projectRoot, "src", "assets", "reviews", slug);
+  await mkdir(outDir, { recursive: true });
+  const screenshotPath = path.join(outDir, "screenshot.png");
+  await page.screenshot({ path: screenshotPath });
+  console.error(`Screenshot: ${path.relative(projectRoot, screenshotPath)}`);
+
+  const pageTitle = await page.title();
+  const metaDescription = await page
+    .locator('meta[name="description"]')
+    .first()
+    .getAttribute("content")
+    .catch(() => null);
+  const bodyText = (await page.locator("body").innerText()).slice(0, 8000);
+
+  await browser.close();
+
+  console.error("Claude laten meekijken voor de basisinfo...");
+  const anthropic = new Anthropic();
+
+  const extraction = await anthropic.messages.create({
+    model: "claude-haiku-4-5-20251001",
+    max_tokens: 1024,
+    tools: [
+      {
+        name: "record_tool_info",
+        description: "Leg de basisinformatie van deze tool vast voor een reviewtemplate.",
+        input_schema: {
+          type: "object",
+          properties: {
+            title: {
+              type: "string",
+              description: "Nederlandse review-titel in de stijl 'Bedrijfsnaam: wat het doet in één zin'",
+            },
+            company: { type: "string", description: "Naam van het bedrijf/product" },
+            location: {
+              type: "string",
+              description: "Vestigingsplaats, ALLEEN als die letterlijk ergens op de site staat, anders lege string",
+            },
+            category: {
+              type: "string",
+              description: "Korte Nederlandse categorie, bv. 'Klantenservice', 'Boekhouding', 'Marketing'",
+            },
+            for_who: { type: "string", description: "Korte typering van de doelgroep, gebaseerd op de site-tekst" },
+            price_from: {
+              type: "string",
+              description:
+                "Laagste genoemde prijs incl. periode, bv. '€39 /maand', ALLEEN als een bedrag op de site staat, anders lege string",
+            },
+            hosting: {
+              type: "string",
+              description:
+                "Korte typering van hosting/privacy ALLEEN als expliciet vermeld (bv. 'EU, GDPR-verklaring'), anders lege string",
+            },
+          },
+          required: ["title", "company", "location", "category", "for_who", "price_from", "hosting"],
+        },
+      },
+    ],
+    tool_choice: { type: "tool", name: "record_tool_info" },
+    messages: [
+      {
+        role: "user",
+        content:
+          "Hier is de inhoud van een bedrijfswebsite. Haal er alleen op wat er ECHT letterlijk staat, " +
+          "verzin nooit iets. Onbekende/niet-vermelde velden: lege string, niet gokken.\n\n" +
+          `Paginatitel: ${pageTitle}\n` +
+          `Meta-omschrijving: ${metaDescription ?? ""}\n\n` +
+          `Zichtbare tekst van de pagina:\n${bodyText}`,
+      },
+    ],
+  });
+
+  const toolUse = extraction.content.find((block) => block.type === "tool_use");
+  if (!toolUse) {
+    console.error("Kon geen structured info uit het Claude-antwoord halen.");
+    process.exit(1);
+  }
+  const info = toolUse.input;
+
+  const templatePath = path.join(projectRoot, "src", "content", "reviews", "_template.md");
+  let content = await readFile(templatePath, "utf-8");
+
+  // instructie-comment bovenaan het template hoort niet in een echt reviewbestand
+  content = content.replace(/# Kopieer dit bestand[\s\S]*?koppeltekens\.\n\n/, "");
+
+  // date/score horen pas een echte waarde te krijgen bij het publiceren. Het
+  // template zet ze op respectievelijk "" en 0 als leesbaar voorbeeld voor de
+  // handmatige workflow, maar allebei zijn dat *ongeldige* waarden voor het
+  // Zod-schema (date: "" faalt de date-coercion, score: 0 faalt min(1)) — dus
+  // hier de regels helemaal weghalen, zodat het veld echt afwezig is en de
+  // .optional() in het schema z'n werk kan doen.
+  content = content.replace(/^date: ""\s*#.*\n/m, "");
+  content = content.replace(/^score: 0\s*#.*\n/m, "");
+
+  content = content.replace(/^website: ""(\s*#.*)?$/m, `website: ${JSON.stringify(url)}`);
+  content = fillField(content, "title", info.title);
+  content = fillField(content, "company", info.company);
+  content = fillField(content, "location", info.location);
+  content = fillField(content, "category", info.category);
+  content = fillField(content, "for_who", info.for_who);
+  content = fillField(content, "price_from", info.price_from);
+  content = fillField(content, "hosting", info.hosting);
+
+  const companyForAlt = info.company || slug;
+  content = content.replace(
+    "## Wat is het\n\n<!--",
+    `## Wat is het\n\n![Screenshot van ${companyForAlt}](../../assets/reviews/${slug}/screenshot.png)\n\n<!--`,
+  );
+
+  await writeFile(contentPath, content, "utf-8");
+  console.error(`Concept aangemaakt: ${path.relative(projectRoot, contentPath)}`);
+  console.error(
+    "Nog met de hand te doen: elk 'AI-concept, controleren!'-veld naast lezen, en zelf score/verdict/hands-on indruk schrijven na het testen.",
+  );
+
+  // enige stdout-regel, bedoeld om door scripts (bv. de Makefile) opgepakt te worden
+  console.log(contentPath);
+}
+
+main();
--- a/scripts/screenshot.mjs
+++ b/scripts/screenshot.mjs
@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * Maakt een screenshot van een tool-website voor gebruik in een review.
+ *
+ * Gebruik:
+ *   npm run screenshot -- <url> <slug> [--full-page]
+ *
+ * Voorbeeld:
+ *   npm run screenshot -- https://watermelon.ai watermelon
+ *
+ * Zet het resultaat in src/assets/reviews/<slug>/screenshot.png
+ */
+import { chromium } from "playwright";
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+
+const args = process.argv.slice(2);
+const fullPage = args.includes("--full-page");
+const positional = args.filter((a) => !a.startsWith("--"));
+const [url, slug] = positional;
+
+if (!url || !slug) {
+  console.error("Gebruik: npm run screenshot -- <url> <slug> [--full-page]");
+  process.exit(1);
+}
+
+const outDir = path.join(projectRoot, "src", "assets", "reviews", slug);
+const outFile = path.join(outDir, "screenshot.png");
+
+await mkdir(outDir, { recursive: true });
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+
+try {
+  await page.goto(url, { waitUntil: "networkidle", timeout: 30_000 });
+} catch {
+  // sommige sites (chat-widgets, analytics) worden nooit helemaal "idle" —
+  // val dan terug op gewoon "load" zodat de screenshot toch doorgaat
+  await page.goto(url, { waitUntil: "load", timeout: 30_000 });
+}
+
+await page.screenshot({ path: outFile, fullPage });
+await browser.close();
+
+console.log(`Screenshot opgeslagen: ${path.relative(projectRoot, outFile)}`);
--- a/server/cgi-bin/submit-tool.py
+++ b/server/cgi-bin/submit-tool.py
@@ -0,0 +1,87 @@
+#!/usr/bin/env python3
+"""CGI-handler voor het tool-voorstelformulier op aitestbank.nl.
+
+Ontvangt een gewone (niet-JS) form-POST, mailt de inzending via de lokale
+Postfix (localhost:25) en redirect naar /bedankt. Stdlib-only, bewust geen
+`cgi`-module (die is deprecated/verwijderd vanaf Python 3.13).
+"""
+import html
+import os
+import smtplib
+import sys
+from email.message import EmailMessage
+from urllib.parse import parse_qs
+
+# TODO: zet hier het gewenste ontvangstadres
+TO_ADDR = "mjblom@gmail.com"
+FROM_ADDR = "aitestbank@b10m.net"
+MAX_BODY_BYTES = 20_000
+
+
+def redirect(location: str) -> None:
+    sys.stdout.write(f"Status: 303 See Other\r\nLocation: {location}\r\n\r\n")
+
+
+def bad_request(message: str) -> None:
+    sys.stdout.write("Status: 400 Bad Request\r\nContent-Type: text/html; charset=utf-8\r\n\r\n")
+    sys.stdout.write(
+        f'<!doctype html><html lang="nl"><body>'
+        f"<p>{html.escape(message)}</p>"
+        f'<p><a href="/voorstellen">Terug naar het formulier</a></p>'
+        f"</body></html>"
+    )
+
+
+def main() -> None:
+    length = int(os.environ.get("CONTENT_LENGTH", 0) or 0)
+    if length <= 0 or length > MAX_BODY_BYTES:
+        bad_request("Ongeldige of te grote inzending.")
+        return
+
+    raw = sys.stdin.buffer.read(length).decode("utf-8", errors="replace")
+    fields = parse_qs(raw)
+
+    def field(name: str) -> str:
+        return fields.get(name, [""])[0].strip()
+
+    # Honeypot: onzichtbaar veld voor mensen, bots vullen het vaak wel in.
+    if field("website"):
+        redirect("/bedankt")
+        return
+
+    tool_naam = field("tool_naam")
+    tool_url = field("tool_url")
+    naam = field("naam")
+    email = field("email")
+    toelichting = field("toelichting")
+
+    if not tool_naam or not tool_url:
+        bad_request("Tool-naam en tool-URL zijn verplicht.")
+        return
+
+    body = (
+        "Nieuwe tool-suggestie via aitestbank.nl/voorstellen\n\n"
+        f"Tool: {tool_naam}\n"
+        f"URL: {tool_url}\n"
+        f"Naam indiener: {naam or '(niet opgegeven)'}\n"
+        f"E-mail indiener: {email or '(niet opgegeven)'}\n\n"
+        "Toelichting:\n"
+        f"{toelichting or '(geen)'}\n"
+    )
+
+    msg = EmailMessage()
+    msg["Subject"] = f"Tool-suggestie: {tool_naam}"
+    msg["From"] = FROM_ADDR
+    msg["To"] = TO_ADDR
+    if email:
+        msg["Reply-To"] = email
+    msg.set_content(body)
+
+    with smtplib.SMTP("localhost", 25) as smtp:
+        smtp.send_message(msg)
+
+    redirect("/bedankt")
+
+
+if __name__ == "__main__":
+    main()
--- a/src/assets/reviews/.gitkeep
+++ b/src/assets/reviews/.gitkeep
--- a/src/components/Cover.astro
+++ b/src/components/Cover.astro
@@ -0,0 +1,64 @@
+---
+interface Props {
+  hue: "teal" | "amber" | "rust" | "slate" | "olive";
+  logo?: string;
+  company: string;
+  size?: "thumb" | "hero";
+}
+const { hue, logo, company, size = "thumb" } = Astro.props;
+---
+
+<div class={`cover ${size} hue-${hue}`}>
+  {
+    logo ? (
+      <img src={logo} alt={`${company} logo`} class="logo" />
+    ) : (
+      <svg class="mark" viewBox="0 0 24 24" aria-hidden="true">
+        <use href="#robot-icon" />
+      </svg>
+    )
+  }
+</div>
+
+<style>
+  .cover {
+    --ink-c: var(--hue-teal-ink);
+    --wash-c: var(--hue-teal-wash);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    background:
+      radial-gradient(var(--ink-c) 1px, transparent 1.6px) 0 0 / 12px 12px,
+      var(--wash-c);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .cover.hue-amber { --ink-c: var(--hue-amber-ink); --wash-c: var(--hue-amber-wash); }
+  .cover.hue-rust { --ink-c: var(--hue-rust-ink); --wash-c: var(--hue-rust-wash); }
+  .cover.hue-slate { --ink-c: var(--hue-slate-ink); --wash-c: var(--hue-slate-wash); }
+  .cover.hue-olive { --ink-c: var(--hue-olive-ink); --wash-c: var(--hue-olive-wash); }
+
+  .cover .mark {
+    position: absolute;
+    fill: var(--ink-c);
+    opacity: 0.5;
+  }
+  .cover .logo {
+    position: relative;
+    max-width: 60%;
+    max-height: 60%;
+    object-fit: contain;
+  }
+
+  .cover.thumb { width: 88px; height: 88px; }
+  .cover.thumb .mark { width: 52px; height: 52px; right: -8px; bottom: -8px; }
+  .cover.hero { width: 100%; height: 168px; margin-bottom: 26px; }
+  .cover.hero .mark { width: 110px; height: 110px; right: 18px; bottom: -20px; }
+
+  @media (max-width: 620px) {
+    .cover.thumb { width: 64px; height: 64px; }
+    .cover.thumb .mark { width: 38px; height: 38px; }
+  }
+</style>
--- a/src/components/RobotScore.astro
+++ b/src/components/RobotScore.astro
@@ -0,0 +1,41 @@
+---
+interface Props {
+  score?: number;
+  size?: "md" | "lg";
+  showNumber?: boolean;
+}
+// score is optioneel voor een nog-niet-gepubliceerd concept (draft: true) —
+// dan tonen we gewoon 0/5 in plaats van te crashen.
+const { score = 0, size = "md", showNumber = true } = Astro.props;
+const cells = Array.from({ length: 5 }, (_, i) => i < score);
+---
+
+<span class={`robots ${size === "lg" ? "lg" : ""}`} aria-label={`${score} van de 5 robots`}>
+  {
+    cells.map((filled) => (
+      <svg class={filled ? "robot-fill" : "robot-off"} aria-hidden="true">
+        <use href="#robot-icon" />
+      </svg>
+    ))
+  }
+  {showNumber && <span class="score-num tabnum">{score}/5</span>}
+</span>
+
+<style>
+  .robots {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    vertical-align: middle;
+  }
+  .robots svg { width: 17px; height: 17px; display: block; }
+  .robots.lg svg { width: 24px; height: 24px; }
+  .robot-fill { fill: var(--accent); }
+  .robot-off { fill: var(--robot-off); }
+  .score-num {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--muted);
+    margin-left: 4px;
+  }
+</style>
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -0,0 +1,54 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const reviews = defineCollection({
+  loader: glob({
+    pattern: ["*.md", "!_template.md"],
+    base: "./src/content/reviews",
+  }),
+  schema: z
+    .object({
+      title: z.string(),
+      company: z.string(),
+      website: z.string().url(),
+      location: z.string(),
+      category: z.string(),
+      date: z.coerce.date().optional(),
+      draft: z.boolean().default(true),
+
+      for_who: z.string(),
+      price_from: z.string(),
+      hosting: z.string(),
+
+      // Optioneel zolang draft: true — een concept mag nog geen score/oordeel
+      // hebben. Zodra draft: false wordt gezet, dwingt de refine hieronder af
+      // dat beide echt ingevuld zijn (voorkomt een leeg/0-sterren oordeel dat
+      // per ongeluk gepubliceerd wordt).
+      score: z.number().int().min(1).max(5).optional(),
+      verdict: z.string().optional().default(""),
+
+      logo: z.string().optional().default(""),
+      coverHue: z
+        .enum(["teal", "amber", "rust", "slate", "olive"])
+        .default("teal"),
+    })
+    .superRefine((data, ctx) => {
+      if (data.draft) return;
+      if (data.score === undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["score"],
+          message: "score (1-5) is verplicht zodra draft: false staat",
+        });
+      }
+      if (!data.verdict) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["verdict"],
+          message: "verdict mag niet leeg zijn zodra draft: false staat",
+        });
+      }
+    }),
+});
+
+export const collections = { reviews };
--- a/src/content/reviews/_template.md
+++ b/src/content/reviews/_template.md
@@ -0,0 +1,45 @@
+---
+# Kopieer dit bestand naar <slug>.md (bv. watermelon.md) en vul in.
+# Bestandsnaam = URL-slug, dus alleen kleine letters/cijfers/koppeltekens.
+
+title: ""              # bv. "Watermelon: AI-klantenservice die je zelf binnen een uur opzet"
+company: ""             # bv. "Watermelon"
+website: ""             # bv. "https://watermelon.ai"
+location: ""            # bv. "Utrecht"
+category: ""            # bv. "Klantenservice" — 1 hoofdcategorie, wordt ook gebruikt voor de coverkleur
+date: ""                # publicatiedatum, bv. 2026-07-23 — leeg laten zolang draft: true
+draft: true             # false zetten bij publiceren (bepaalt "gepubliceerd"/"binnenkort" op de homepage)
+
+# --- Specs-balkje bovenaan de review ---
+for_who: ""             # korte typering, bv. "MKB met veel herhalende vragen"
+price_from: ""          # bv. "€39 /maand" — "Gratis" of "Op aanvraag" mag ook
+hosting: ""             # bv. "EU, GDPR-verklaring"
+
+# --- Eindoordeel ---
+score: 0                # geheel getal 1-5 (aantal robots)
+verdict: ""             # één zin, komt in het verdict-kader bovenaan
+
+# --- Cover ---
+logo: ""                # bv. "/logos/watermelon.svg" — bestand in public/logos/ zetten, anders leeg laten
+coverHue: "teal"        # teal | amber | rust | slate | olive — alleen gebruikt zolang er geen logo is
+---
+
+## Wat is het
+
+<!-- Wat doet de tool, in gewone-mensen-taal. Eén tot twee alinea's. -->
+
+## Voor wie
+
+<!-- Voor welk type gebruiker/bedrijf is dit relevant, en voor wie juist niet. -->
+
+## Wie zit erachter
+
+<!-- Team, locatie, funding/omzet indien bekend. Onbekend? Dat gewoon zo benoemen. -->
+
+## Prijs
+
+<!-- Prijsmodel iets uitgebreider dan het specs-balkje: tiers, gratis laag, addertjes onder het gras. -->
+
+## Hands-on indruk
+
+<!-- De eigen ervaring: wat werkte goed, wat viel tegen. Dit is de kern van de review. -->
--- a/src/content/reviews/watermelon.md
+++ b/src/content/reviews/watermelon.md
@@ -0,0 +1,39 @@
+---
+title: "Watermelon: AI-klantenservice die je zelf binnen een uur opzet"
+company: "Watermelon"
+website: "https://watermelon.ai"
+location: "Utrecht"
+category: "Klantenservice"
+date: 2026-07-23
+draft: false
+
+for_who: "MKB met veel herhalende vragen"
+price_from: "€39 /maand"
+hosting: "EU, GDPR-verklaring"
+
+score: 4
+verdict: "Sterk, zelfstandig te testen product met een geloofwaardig GDPR-verhaal — mist alleen wat diepgang in de rapportages."
+
+logo: ""
+coverHue: "teal"
+---
+
+## Wat is het
+
+Watermelon is een AI-klantenservice-agent die vragen via chat, WhatsApp, e-mail en telefoon beantwoordt, getraind op de kennisbank van het eigen bedrijf. Geen los gesprek met sales nodig: je maakt een account, wijst een paar pagina's of documenten aan, en de bot beantwoordt daarna zelfstandig binnenkomende vragen.
+
+## Voor wie
+
+Vooral relevant voor MKB-bedrijven met een voorspelbare stroom herhalende vragen (verzendstatus, openingstijden, retourbeleid) die nu telefoon of mailbox belasten.
+
+## Wie zit erachter
+
+Opgericht in Utrecht. GDPR/EU-hosted, ISO-gecertificeerd — verdere teamdetails nog na te trekken voor publicatie.
+
+## Prijs
+
+Instapplan vanaf €39 per maand, oplopend met volume en kanalen. Geen gratis laag, wel een proefperiode zonder creditcard.
+
+## Hands-on indruk
+
+<!-- TODO: eigen testervaring invullen zodra getest -->
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -0,0 +1,188 @@
+---
+interface Props {
+  title: string;
+  description: string;
+}
+const { title, description } = Astro.props;
+const path = Astro.url.pathname;
+const isHome = path === "/";
+const isVoorstellen = path.startsWith("/voorstellen");
+---
+
+<!doctype html>
+<html lang="nl">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title} · AITestBank</title>
+    <meta name="description" content={description} />
+    <link rel="icon" href="data:," />
+  </head>
+  <body>
+    <svg width="0" height="0" style="position:absolute">
+      <symbol id="robot-icon" viewBox="0 0 24 24">
+        <rect x="4" y="7" width="16" height="14" rx="3"></rect>
+        <rect x="10" y="2" width="4" height="4" rx="1"></rect>
+        <circle class="robot-eye" cx="9" cy="14" r="1.6"></circle>
+        <circle class="robot-eye" cx="15" cy="14" r="1.6"></circle>
+        <rect class="robot-eye" x="9" y="17.5" width="6" height="1.6" rx="0.8"></rect>
+      </symbol>
+    </svg>
+
+    <div class="shell">
+      <header class="site">
+        <a class="wordmark" href="/">
+          <span class="name">AITestBank</span>
+          <span class="tag">aitestbank.nl</span>
+        </a>
+        <nav class="site">
+          <a href="/" aria-current={isHome ? "page" : undefined}>Reviews</a>
+          <a href="/voorstellen" aria-current={isVoorstellen ? "page" : undefined}>Tool voorstellen</a>
+        </nav>
+      </header>
+      <slot />
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --paper: #faf9f6;
+    --paper-raised: #f2f0ea;
+    --ink: #1c1b19;
+    --muted: #6b6a64;
+    --line: #dedcd5;
+    --accent: #3c6e63;
+    --accent-soft: #e4ece9;
+    --robot-off: #d6d4cc;
+    --radius: 4px;
+    --sans: ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+
+    --hue-teal-ink: #3c6e63;
+    --hue-teal-wash: #e4ece9;
+    --hue-amber-ink: #9c6b23;
+    --hue-amber-wash: #f3e8d3;
+    --hue-rust-ink: #a85039;
+    --hue-rust-wash: #f5e0da;
+    --hue-slate-ink: #3f5a7d;
+    --hue-slate-wash: #dfe6ef;
+    --hue-olive-ink: #6b7a3a;
+    --hue-olive-wash: #e9edd9;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --paper: #17181a;
+      --paper-raised: #1e2022;
+      --ink: #eae8e2;
+      --muted: #94928a;
+      --line: #2b2d2d;
+      --accent: #74ab9d;
+      --accent-soft: #1c2926;
+      --robot-off: #35373a;
+
+      --hue-teal-ink: #74ab9d;
+      --hue-teal-wash: #1c2926;
+      --hue-amber-ink: #d9a75c;
+      --hue-amber-wash: #2e2617;
+      --hue-rust-ink: #d98267;
+      --hue-rust-wash: #33211c;
+      --hue-slate-ink: #7fa0c4;
+      --hue-slate-wash: #1c2530;
+      --hue-olive-ink: #a3b56a;
+      --hue-olive-wash: #262c18;
+    }
+  }
+  :root[data-theme="dark"] {
+    --paper: #17181a;
+    --paper-raised: #1e2022;
+    --ink: #eae8e2;
+    --muted: #94928a;
+    --line: #2b2d2d;
+    --accent: #74ab9d;
+    --accent-soft: #1c2926;
+    --robot-off: #35373a;
+    --hue-teal-ink: #74ab9d;
+    --hue-teal-wash: #1c2926;
+    --hue-amber-ink: #d9a75c;
+    --hue-amber-wash: #2e2617;
+    --hue-rust-ink: #d98267;
+    --hue-rust-wash: #33211c;
+    --hue-slate-ink: #7fa0c4;
+    --hue-slate-wash: #1c2530;
+    --hue-olive-ink: #a3b56a;
+    --hue-olive-wash: #262c18;
+  }
+  :root[data-theme="light"] {
+    --paper: #faf9f6;
+    --paper-raised: #f2f0ea;
+    --ink: #1c1b19;
+    --muted: #6b6a64;
+    --line: #dedcd5;
+    --accent: #3c6e63;
+    --accent-soft: #e4ece9;
+    --robot-off: #d6d4cc;
+    --hue-teal-ink: #3c6e63;
+    --hue-teal-wash: #e4ece9;
+    --hue-amber-ink: #9c6b23;
+    --hue-amber-wash: #f3e8d3;
+    --hue-rust-ink: #a85039;
+    --hue-rust-wash: #f5e0da;
+    --hue-slate-ink: #3f5a7d;
+    --hue-slate-wash: #dfe6ef;
+    --hue-olive-ink: #6b7a3a;
+    --hue-olive-wash: #e9edd9;
+  }
+
+  * { box-sizing: border-box; }
+  html,
+  body {
+    margin: 0;
+    background: var(--paper);
+    color: var(--ink);
+    font-family: var(--sans);
+    font-size: 18px;
+    line-height: 1.6;
+  }
+  a {
+    color: var(--accent);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  .tabnum { font-variant-numeric: tabular-nums; }
+
+  .shell { max-width: 820px; margin: 0 auto; padding: 0 24px 100px; }
+
+  header.site {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 30px 0 24px;
+    border-bottom: 1px solid var(--line);
+    flex-wrap: wrap;
+  }
+  .wordmark {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    text-decoration: none;
+    color: var(--ink);
+  }
+  .wordmark .name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
+  .wordmark .tag { font-family: var(--mono); font-size: 13px; color: var(--muted); }
+  nav.site { display: flex; gap: 22px; }
+  nav.site a { color: var(--muted); text-decoration: none; font-size: 15px; }
+  nav.site a:hover,
+  nav.site a[aria-current="page"] { color: var(--ink); }
+
+  /* shared by RobotScore and Cover: the eyes of the #robot-icon symbol
+     always need to punch through to the page background */
+  .robot-eye { fill: var(--paper); }
+</style>
--- a/src/pages/bedankt.astro
+++ b/src/pages/bedankt.astro
@@ -0,0 +1,17 @@
+---
+import Base from "../layouts/Base.astro";
+---
+
+<Base title="Bedankt" description="Je tool-suggestie is ontvangen.">
+  <section class="intro">
+    <h1>Bedankt!</h1>
+    <p>Je suggestie is binnen. Ik lees alles, maar kan niet beloven dat elke tool een review krijgt.</p>
+    <p><a href="/">← Terug naar de reviews</a></p>
+  </section>
+</Base>
+
+<style>
+  section.intro { padding: 44px 0 10px; margin-bottom: 8px; }
+  section.intro h1 { font-size: 34px; margin: 0 0 12px; text-wrap: balance; letter-spacing: -0.01em; }
+  section.intro p { margin: 0 0 16px; color: var(--muted); max-width: 58ch; font-size: 18px; }
+</style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,138 @@
+---
+import { getCollection } from "astro:content";
+import Base from "../layouts/Base.astro";
+import Cover from "../components/Cover.astro";
+import RobotScore from "../components/RobotScore.astro";
+
+const all = await getCollection("reviews");
+const published = all
+  .filter((r) => !r.data.draft)
+  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
+const upcoming = all.filter((r) => r.data.draft);
+const posts = [...published, ...upcoming];
+
+const dateFormatter = new Intl.DateTimeFormat("nl-NL", {
+  day: "numeric",
+  month: "short",
+  year: "numeric",
+});
+---
+
+<Base
+  title="Reviews"
+  description="Wekelijkse, eerlijke tests van Nederlandse AI-tools. Score van 1 tot 5 robots."
+>
+  <section class="intro">
+    <h1>Nederlandse AI-tools, eerlijk getest.</h1>
+    <p>
+      Elke week (of vaker) een AI-tool onder de loep: hoe het werkt, voor wie
+      het is, wat het kost. Score van 1 tot 5 robots, geen sponsored fluff.
+    </p>
+  </section>
+
+  <ul class="postlist">
+    {
+      posts.map((post) => (
+        <li class="post-row">
+          <Cover
+            hue={post.data.coverHue}
+            logo={post.data.logo}
+            company={post.data.company}
+            size="thumb"
+          />
+          <div class="meta">
+            <span class="tabnum">
+              {post.data.draft ? "—" : dateFormatter.format(post.data.date)}
+            </span>
+            <span>·</span>
+            <span>{post.data.category}</span>
+            <span class={`status ${post.data.draft ? "pending" : ""}`}>
+              {post.data.draft ? "binnenkort" : "gepubliceerd"}
+            </span>
+          </div>
+          <h2>
+            <a href={post.data.draft ? undefined : `/reviews/${post.id}`}>
+              {post.data.title}
+            </a>
+          </h2>
+          <p class="dek">
+            {post.data.location} · {post.data.verdict}
+          </p>
+          <div class="score">
+            {!post.data.draft && <RobotScore score={post.data.score} />}
+          </div>
+        </li>
+      ))
+    }
+  </ul>
+</Base>
+
+<style>
+  section.intro {
+    padding: 44px 0 10px;
+    border-bottom: 1px solid var(--line);
+    margin-bottom: 8px;
+  }
+  section.intro h1 {
+    font-size: 34px;
+    margin: 0 0 12px;
+    text-wrap: balance;
+    letter-spacing: -0.01em;
+  }
+  section.intro p {
+    margin: 0 0 30px;
+    color: var(--muted);
+    max-width: 58ch;
+    font-size: 18px;
+  }
+
+  ul.postlist { list-style: none; margin: 0; padding: 0; }
+  .post-row {
+    display: grid;
+    grid-template-columns: 88px 1fr auto;
+    gap: 6px 20px;
+    padding: 28px 0;
+    border-bottom: 1px solid var(--line);
+    align-items: start;
+  }
+  .post-row :global(.cover) { grid-row: 1 / 3; }
+  .post-row .meta {
+    grid-column: 2 / 3;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .post-row .meta .status {
+    padding: 1px 7px;
+    border-radius: var(--radius);
+    background: var(--accent-soft);
+    color: var(--accent);
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  .post-row .meta .status.pending {
+    background: transparent;
+    border: 1px solid var(--line);
+    color: var(--muted);
+  }
+  .post-row h2 { grid-column: 2 / 3; margin: 0; font-size: 20px; line-height: 1.35; }
+  .post-row h2 a { color: var(--ink); text-decoration: none; }
+  .post-row h2 a:hover { color: var(--accent); }
+  .post-row p.dek {
+    grid-column: 2 / 3;
+    margin: 4px 0 0;
+    color: var(--muted);
+    font-size: 15.5px;
+    max-width: 54ch;
+  }
+  .post-row .score { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; white-space: nowrap; }
+
+  @media (max-width: 620px) {
+    .post-row { grid-template-columns: 64px 1fr auto; }
+  }
+</style>
--- a/src/pages/reviews/[slug].astro
+++ b/src/pages/reviews/[slug].astro
@@ -0,0 +1,157 @@
+---
+import { getCollection, render } from "astro:content";
+import Base from "../../layouts/Base.astro";
+import Cover from "../../components/Cover.astro";
+import RobotScore from "../../components/RobotScore.astro";
+
+export async function getStaticPaths() {
+  const all = await getCollection("reviews");
+  return all.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+const d = entry.data;
+
+const dateFormatter = new Intl.DateTimeFormat("nl-NL", {
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+});
+---
+
+<Base title={d.title} description={d.verdict}>
+  <article class="review">
+    <p class="breadcrumb"><a href="/">← Alle reviews</a></p>
+
+    <Cover hue={d.coverHue} logo={d.logo} company={d.company} size="hero" />
+
+    <h1>{d.title}</h1>
+    <div class="review-meta">
+      {d.date && <span class="tabnum">{dateFormatter.format(d.date)}</span>}
+      {d.date && <span>·</span>}
+      <span>{d.category}</span>
+      <span>·</span>
+      <span>{d.location}</span>
+      <span>·</span>
+      <a href={d.website} target="_blank" rel="noopener">{d.company} →</a>
+    </div>
+
+    <div class="verdict">
+      <div>
+        <div class="label">Eindoordeel</div>
+        <p class="oneliner">{d.verdict}</p>
+      </div>
+      <div class="score-block">
+        <RobotScore score={d.score} size="lg" showNumber={false} />
+        <span class="score-num tabnum">{d.score} / 5</span>
+      </div>
+    </div>
+
+    <dl class="specs">
+      <div>
+        <dt>Voor wie</dt>
+        <dd>{d.for_who}</dd>
+      </div>
+      <div>
+        <dt>Vanaf</dt>
+        <dd class="tabnum">{d.price_from}</dd>
+      </div>
+      <div>
+        <dt>Hosting</dt>
+        <dd>{d.hosting}</dd>
+      </div>
+    </dl>
+
+    <div class="body">
+      <Content />
+    </div>
+  </article>
+</Base>
+
+<style>
+  .breadcrumb {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--muted);
+    margin: 30px 0 20px;
+  }
+  .breadcrumb a { color: var(--muted); }
+
+  article.review h1 {
+    font-size: 40px;
+    margin: 0 0 10px;
+    text-wrap: balance;
+    letter-spacing: -0.01em;
+  }
+  .review-meta {
+    font-family: var(--mono);
+    font-size: 13.5px;
+    color: var(--muted);
+    margin-bottom: 22px;
+    display: flex;
+    gap: 14px;
+    flex-wrap: wrap;
+  }
+
+  .verdict {
+    background: var(--paper-raised);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 22px 24px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 12px 24px;
+    align-items: center;
+    margin-bottom: 36px;
+  }
+  .verdict .label {
+    font-family: var(--mono);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    margin-bottom: 6px;
+  }
+  .verdict .oneliner { margin: 0; font-size: 17px; max-width: 46ch; }
+  .verdict .score-block { text-align: right; }
+  .verdict .score-block .score-num {
+    font-family: var(--mono);
+    font-size: 16px;
+    color: var(--muted);
+    display: block;
+    margin: 6px 0 0;
+  }
+
+  .specs {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 18px;
+    margin: 0 0 36px;
+    padding: 18px 0;
+    border-top: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+  }
+  .specs dt {
+    font-family: var(--mono);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted);
+    margin: 0 0 4px;
+  }
+  .specs dd { margin: 0; font-size: 16px; }
+
+  .body { max-width: 64ch; }
+  .body :global(h2) { font-size: 22px; margin: 42px 0 12px; letter-spacing: -0.005em; }
+  .body :global(p) { margin: 0 0 17px; }
+
+  @media (max-width: 620px) {
+    .specs { grid-template-columns: 1fr 1fr; }
+    .verdict { grid-template-columns: 1fr; }
+    .verdict .score-block { text-align: left; }
+  }
+</style>
--- a/src/pages/voorstellen.astro
+++ b/src/pages/voorstellen.astro
@@ -0,0 +1,130 @@
+---
+import Base from "../layouts/Base.astro";
+---
+
+<Base
+  title="Tool voorstellen"
+  description="Stel een Nederlandse AI-tool voor om te reviewen op AITestBank."
+>
+  <section class="intro">
+    <h1>Stel een tool voor</h1>
+    <p>
+      Ken je een (bij voorkeur Nederlandse) AI-tool die een review verdient?
+      Laat het weten, ik lees alles.
+    </p>
+  </section>
+
+  <form method="post" action="/submit-tool" class="suggest-form">
+    <div class="field">
+      <label for="tool_naam">Naam van de tool <span class="req">*</span></label>
+      <input type="text" id="tool_naam" name="tool_naam" required maxlength="120" />
+    </div>
+
+    <div class="field">
+      <label for="tool_url">Website van de tool <span class="req">*</span></label>
+      <input type="url" id="tool_url" name="tool_url" required placeholder="https://" maxlength="300" />
+    </div>
+
+    <div class="field">
+      <label for="toelichting">Waarom deze tool?</label>
+      <textarea id="toelichting" name="toelichting" rows="4" maxlength="2000"></textarea>
+    </div>
+
+    <div class="field-row">
+      <div class="field">
+        <label for="naam">Je naam <span class="opt">(optioneel)</span></label>
+        <input type="text" id="naam" name="naam" maxlength="120" />
+      </div>
+      <div class="field">
+        <label for="email">Je e-mail <span class="opt">(optioneel, voor een reactie)</span></label>
+        <input type="email" id="email" name="email" maxlength="200" />
+      </div>
+    </div>
+
+    <!-- honeypot: verborgen voor mensen via CSS, bots vullen dit vaak automatisch in -->
+    <div class="hp" aria-hidden="true">
+      <label for="website">Website</label>
+      <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
+    </div>
+
+    <button type="submit">Versturen</button>
+  </form>
+</Base>
+
+<style>
+  section.intro {
+    padding: 44px 0 10px;
+    border-bottom: 1px solid var(--line);
+    margin-bottom: 32px;
+  }
+  section.intro h1 {
+    font-size: 34px;
+    margin: 0 0 12px;
+    text-wrap: balance;
+    letter-spacing: -0.01em;
+  }
+  section.intro p {
+    margin: 0 0 30px;
+    color: var(--muted);
+    max-width: 58ch;
+    font-size: 18px;
+  }
+
+  .suggest-form {
+    max-width: 56ch;
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+    margin-bottom: 80px;
+  }
+  .field-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+  }
+  .field { display: flex; flex-direction: column; gap: 6px; }
+  label {
+    font-family: var(--mono);
+    font-size: 12.5px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--muted);
+  }
+  .req { color: var(--accent); }
+  .opt { text-transform: none; letter-spacing: 0; }
+
+  input, textarea {
+    font: inherit;
+    font-size: 16px;
+    color: var(--ink);
+    background: var(--paper-raised);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 10px 12px;
+  }
+  textarea { resize: vertical; }
+  input:focus-visible, textarea:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+  }
+
+  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
+
+  button {
+    align-self: start;
+    font: inherit;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--paper);
+    background: var(--accent);
+    border: none;
+    border-radius: var(--radius);
+    padding: 12px 22px;
+    cursor: pointer;
+  }
+  button:hover { opacity: 0.9; }
+
+  @media (max-width: 560px) {
+    .field-row { grid-template-columns: 1fr; }
+  }
+</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}