Ombouwen MOZa site naar Hugo

.claude/CLAUDE.md

@@ -0,0 +1,91 @@
+# MijnOverheid Zakelijk Site
+
+## Project Overview
+
+- **Type**: Hugo static site (v0.153.5)
+- **Taal**: Nederlands (NL)
+- **Doel**: Site voor MijnOverheid Zakelijk
+- **Design**: Rijkshuisstijl
+
+## Projectstructuur
+
+- `content/` - Markdown content (pagina's, weekly updates)
+- `content/presentaties/` - Reveal.js presentaties (HTML page bundles)
+- `layouts/` - Go templates, partials, shortcodes
+- `assets/css/` - CSS met design tokens in `tokens.css`
+- `static/` - Statische bestanden (fonts, favicon)
+- `hugo.yaml` - Hoofdconfiguratie
+
+## Veelvoorkomende Taken
+
+### Weekly Update Maken
+
+1. Run: `hugo new content weekly/YYYY/YYYY-MM-DD.md` (vervang jaar en datum)
+2. Bewerk het nieuw aangemaakte bestand in `content/weekly/YYYY/`
+3. Vraag naar input voor de Weekly en vul op basis daarvan de sectie Algemeen en eventueel andere secties in
+
+### Nieuwe Presentatie Maken
+
+Presentaties gebruiken Reveal.js en wijken af van andere pagina's:
+
+1. Run: `hugo new content presentaties/naam-van-presentatie` (gebruik kebab-case)
+2. Bewerk `index.html` met Reveal.js slides (geen Markdown)
+3. Plaats afbeeldingen in `images/` submap
+
+## Project Commands
+
+Dit project heeft Claude commands voor veelvoorkomende taken:
+
+- `/check` - Voer een volledige kwaliteitscheck uit
+- `/new-weekly` - Maak een nieuwe weekly update aan
+- `/new-presentatie` - Maak een nieuwe Reveal.js presentatie
+
+## Agents
+
+Gespecialiseerde agents voor specifieke taken:
+
+- `content-reviewer` - Controleer content op spelling, leesbaarheid en B1 taalniveau
+- `seo-checker` - Analyseer SEO-aspecten (meta tags, headings, alt-teksten)
+- `a11y-reviewer` - Controleer toegankelijkheid (WCAG 2.1 AA)
+- `hugo-helper` - Help met Hugo templates, shortcodes en debugging
+
+Gebruik agents door ernaar te verwijzen in je prompt, bijv.: "Gebruik de content-reviewer agent om deze pagina te controleren."
+
+## Rules
+
+Gedragsregels in `.claude/rules/`:
+
+- `taal-en-stijl.md` - Nederlands, B1 taalniveau, Rijkshuisstijl
+- `code-conventies.md` - Hugo templates, CSS, content structuur
+- `documentatie.md` - Links naar Hugo en Reveal.js documentatie
+
+## Code Conventies
+
+- CSS: Pure CSS met variabelen (geen preprocessor)
+- Design tokens staan in `assets/css/tokens.css`
+- Nederlands voor alle content en UI teksten
+- Gebruik bestaande components waar mogelijk
+
+### Hugo Layouts Structuur (v0.146.0+)
+
+Dit project gebruikt de nieuwe Hugo template structuur.
+
+- Templates direct in `layouts/` plaatsen (niet in `_default/`)
+- Partials in `layouts/_partials/` (met underscore)
+- Shortcodes in `layouts/_shortcodes/` (met underscore)
+- Homepage template: `layouts/home.html` (niet `index.html`)
+- Baseof templates: `layouts/baseof.html`
+
+Zie [Hugo template system overview](https://gohugo.io/templates/new-templatesystem-overview/) voor details.
+
+## Verificatie
+
+- Test lokaal: `hugo server`
+- Build: `rm -rf public && hugo --minify --gc --logLevel warn`
+- Check broken links: `rm -rf .htmltest && hugo --minify --quiet --destination .htmltest/public && htmltest && rm -rf .htmltest`
+- Pre-commit hook (Lefthook): draait beide checks automatisch bij elke commit
+- Screenshots: Playwright MCP kan worden gebruikt voor het maken van screenshots van pagina's
+
+## Onderhoud
+
+Bij het aanpassen van instructies in dit bestand: check ook `.claude/commands/` of de bijbehorende command files moeten worden bijgewerkt (en vice versa).

.claude/agents/a11y-reviewer.md

@@ -0,0 +1,37 @@
+Je bent een toegankelijkheidsexpert voor webprojecten.
+
+## Taak
+
+Controleer templates, CSS en content op toegankelijkheid conform WCAG 2.1 niveau AA.
+
+## Checklist
+
+### HTML/Templates
+- Semantische HTML elementen (nav, main, article, aside, etc.)
+- Correcte heading hierarchie
+- ARIA labels waar nodig (en niet overbodig)
+- Skip links aanwezig
+- Taalattribuut op html element
+
+### Interactie
+- Focus states zichtbaar
+- Keyboard navigatie mogelijk
+- Touch targets minimaal 44x44px
+
+### Visueel
+- Kleurcontrast minimaal 4.5:1 (tekst) en 3:1 (grote tekst)
+- Informatie niet alleen via kleur overgebracht
+- Tekst schaalbaar zonder verlies van functionaliteit
+
+### Media
+- Alt-teksten bij afbeeldingen (beschrijvend, niet "afbeelding van...")
+- Captions bij video's
+- Geen autoplay met geluid
+
+## Output
+
+Rapporteer in het Nederlands met:
+- WCAG succescriterium referentie (bijv. 1.4.3)
+- Ernst (kritiek/belangrijk/advies)
+- Locatie in code
+- Suggestie voor oplossing

.claude/agents/content-reviewer.md

@@ -0,0 +1,21 @@
+Je bent een content reviewer voor een Nederlandse overheidswebsite (MijnOverheid Zakelijk).
+
+## Taak
+
+Controleer de aangeleverde content op kwaliteit en leesbaarheid.
+
+## Checklist
+
+- Spelling en grammatica (Nederlands)
+- Heldere en begrijpelijke teksten (streef naar B1 taalniveau)
+- Consistentie in terminologie
+- Actieve schrijfstijl (vermijd lijdende vorm)
+- Korte zinnen en alinea's
+- Correcte opmaak (headings, lijsten, links)
+
+## Output
+
+Rapporteer in het Nederlands met:
+- Gevonden problemen per bestand
+- Concrete suggesties voor verbetering
+- Bied aan om de aanpassingen door te voeren

.claude/agents/hugo-helper.md

@@ -0,0 +1,36 @@
+Je bent een Hugo expert met diepgaande kennis van het Hugo static site framework.
+
+## Expertise
+
+- Hugo templating (Go templates)
+- Content management en taxonomieen
+- Shortcodes en partials
+- Asset pipeline (Hugo Pipes)
+- Performance optimalisatie
+- Hugo modules
+
+## Context
+
+Dit project gebruikt:
+- Hugo v0.153.5+
+- Nieuwe template structuur (layouts/ zonder _default/)
+- Partials in layouts/_partials/
+- Shortcodes in layouts/_shortcodes/
+- Pure CSS met design tokens
+
+## Taak
+
+Help met Hugo-gerelateerde vragen en problemen:
+- Debug template issues
+- Schrijf of verbeter shortcodes
+- Optimaliseer build performance
+- Implementeer nieuwe features
+- Leg Hugo concepten uit
+
+## Aanpak
+
+1. Begrijp het probleem of de vraag
+2. Onderzoek relevante bestanden in het project
+3. Geef duidelijke uitleg in het Nederlands
+4. Bied werkende code voorbeelden
+5. Wijs op best practices en mogelijke valkuilen

.claude/agents/seo-checker.md

@@ -0,0 +1,30 @@
+Je bent een SEO specialist voor een Hugo website.
+
+## Taak
+
+Analyseer content en templates op SEO-aspecten.
+
+## Checklist
+
+### Front matter
+- `title` aanwezig en juiste lengte (50-60 karakters)
+- `description` aanwezig en juiste lengte (150-160 karakters)
+- `keywords` waar relevant
+
+### Content
+- Heading hierarchie correct (H1 -> H2 -> H3, geen niveaus overslaan)
+- Alt-teksten bij alle afbeeldingen
+- Interne links waar relevant
+- URL structuur (slugs in kebab-case)
+
+### Technisch
+- Canonical URLs
+- Open Graph tags
+- Structured data waar relevant
+
+## Output
+
+Rapporteer in het Nederlands met:
+- Score per gecontroleerd item
+- Concrete verbeterpunten
+- Prioriteit (hoog/midden/laag)

.claude/commands/check.md

@@ -0,0 +1,22 @@
+Voer een volledige kwaliteitscheck uit op de Hugo site.
+
+## Technische checks
+
+1. Run: `rm -rf public && hugo --minify --logLevel warn`
+2. Run: `rm -rf .htmltest && hugo --minify --quiet --destination .htmltest/public && htmltest && rm -rf .htmltest`
+3. Rapporteer eventuele problemen in begrijpelijke taal
+
+## Optionele vervolgchecks
+
+Na de technische checks, vraag of de gebruiker ook wil:
+- **Content review**: Gebruik de `content-reviewer` agent om recente of gewijzigde content te controleren op spelling en leesbaarheid
+- **Toegankelijkheid**: Gebruik de `a11y-reviewer` agent om templates te controleren op WCAG 2.1 compliance
+- **SEO**: Gebruik de `seo-checker` agent om meta descriptions en heading structuur te controleren
+
+## Bij fouten
+
+- Leg uit wat het probleem is
+- Geef suggesties voor hoe het opgelost kan worden
+- Bied aan om te helpen met de fix
+
+Dit is dezelfde check die ook automatisch draait via de pre-commit hook (Lefthook).

.claude/commands/new-presentatie.md

@@ -0,0 +1,31 @@
+Help bij het maken van een nieuwe Reveal.js presentatie.
+
+Dit type content wijkt af van normale pagina's:
+- Presentaties zijn HTML, geen Markdown
+- Ze staan in een page bundle (map met index.html)
+- Afbeeldingen komen in een images/ submap
+
+## Stappen
+
+1. Vraag naar de naam/slug van de presentatie (gebruik kebab-case, bijv. "moza-pulse-januari")
+2. Run: `hugo new content presentaties/<naam>`
+3. Dit maakt de basisstructuur aan via het archetype
+4. Open het index.html bestand en toon de structuur
+5. Leg uit hoe slides werken:
+   - Elke slide is een `<section>` element
+   - Geneste sections maken verticale slides
+   - Afbeeldingen in de images/ submap plaatsen
+
+Voorbeeld slide structuur:
+```html
+<section>
+  <h2>Slide titel</h2>
+  <p>Inhoud van de slide</p>
+</section>
+```
+
+## Na het maken
+
+Wanneer de presentatie is gemaakt:
+- Gebruik de `a11y-reviewer` agent om de slides te controleren op toegankelijkheid (heading hierarchie, alt-teksten, contrast)
+- Controleer of afbeeldingen in de `images/` submap staan en alt-teksten hebben

.claude/commands/new-weekly.md

@@ -0,0 +1,17 @@
+Maak een nieuwe weekly update aan.
+
+## Stappen
+
+1. Bepaal de datum (vandaag of vraag welke datum de gebruiker wil)
+2. Run: `hugo new content weekly/YYYY/YYYY-MM-DD.md` (gebruik het juiste jaar en datum)
+3. Open het aangemaakte bestand en toon de inhoud
+4. Help de gebruiker met het invullen van de content
+
+Het bestand wordt automatisch aangemaakt met de juiste template uit archetypes/weekly.md.
+De weekly updates staan in `content/weekly/` georganiseerd per jaar.
+
+## Na het schrijven
+
+Wanneer de content is ingevuld:
+- Gebruik de `content-reviewer` agent om de tekst te controleren op spelling, leesbaarheid en B1 taalniveau
+- Pas suggesties toe in overleg met de gebruiker

.claude/rules/code-conventies.md

@@ -0,0 +1,21 @@
+# Code Conventies
+
+## Hugo Templates
+
+- Gebruik de nieuwe Hugo template structuur (v0.146.0+)
+- Templates direct in `layouts/` (niet in `_default/`)
+- Partials in `layouts/_partials/`
+- Shortcodes in `layouts/_shortcodes/`
+
+## CSS
+
+- Pure CSS, geen preprocessor
+- Gebruik variabelen uit `tokens.css`
+- Geen inline styles in templates
+- Mobile-first approach
+
+## Content
+
+- Front matter altijd in YAML formaat
+- Slugs in kebab-case
+- Afbeeldingen in page bundles waar mogelijk

.claude/rules/documentatie.md

@@ -0,0 +1,27 @@
+# Documentatie
+
+Raadpleeg bij twijfel altijd de officiële documentatie.
+
+## Hugo
+
+- **Documentatie**: https://gohugo.io/documentation/
+- **Templates**: https://gohugo.io/templates/
+- **Functies**: https://gohugo.io/functions/
+- **Nieuwe template structuur**: https://gohugo.io/templates/new-templatesystem-overview/
+
+Dit project gebruikt Hugo v0.153.5+ met de nieuwe template structuur.
+
+## Reveal.js
+
+- **Documentatie**: https://revealjs.com/
+- **Markup**: https://revealjs.com/markup/
+- **Configuratie**: https://revealjs.com/config/
+
+Presentaties staan in `content/presentaties/` als HTML page bundles.
+
+## Aanpak
+
+Bij Hugo of Reveal.js vragen:
+1. Raadpleeg eerst de officiële documentatie via WebFetch
+2. Controleer of de oplossing past bij de projectconventies
+3. Test lokaal met `hugo server`

.claude/rules/taal-en-stijl.md

@@ -0,0 +1,23 @@
+# Taal en Stijl
+
+Deze regels gelden voor alle content en communicatie.
+
+## Taal
+
+- Schrijf altijd in het Nederlands
+- Gebruik formeel maar toegankelijk taalgebruik
+- Streef naar B1 taalniveau voor publiekscontent
+- Vermijd jargon en afkortingen zonder uitleg
+
+## Schrijfstijl
+
+- Gebruik actieve zinnen (niet: "wordt gedaan", wel: "wij doen")
+- Houd zinnen kort (max 15-20 woorden)
+- Houd alinea's kort (max 3-4 zinnen)
+- Spreek de lezer aan met "u" (formeel)
+
+## Rijkshuisstijl
+
+- Volg de Rijkshuisstijl voor overheidswebsites
+- Gebruik de design tokens uit `assets/css/tokens.css`
+- Geen onnodige decoratie of afbeeldingen

.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+line_length = 120
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{css,html,js,yml,yaml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"