MijnOverheid Zakelijk Site

In deze repository beheren we de website en content van mijnoverheidzakelijk.nl. De site wordt gegenereerd met Hugo.

Lokaal ontwikkelen

Vereisten

Installeer Hugo, just, Node.js en uv:

# macOS
brew install hugo just node uv

Of volg de installatie-instructies voor Hugo, just, Node.js en uv. uv is nodig voor de Python-scripts die Mattermost-input voor de Weekly ophalen.

Installeer daarna de Node dependencies (eenmalig):

npm install

Development server starten

just up

Dit rendert eerst de Mermaid-diagrammen als SVG en start daarna de Hugo development server. De site is dan beschikbaar op http://localhost:1313/ (of de host zoals vermeld in de terminal).

Wil je dat diagrammen automatisch opnieuw worden gemaakt bij wijzigingen? Start dan in een aparte terminal:

just watch-mermaid

Content toevoegen

Weekly

Voeg een nieuwe weekly toe met:

hugo new content weekly/2026/2026-01-01.md

Of door een bestand in de juiste content > weekly > jjjj map te plaatsen.

Voor het ophalen van Mattermost-input als basis voor een Weekly, zie scripts/moza-weekly/README.md.

Presentatie

Presentaties gebruiken de layout nldd-deck, met componenten uit het NLDD Designsysteem. Ze openen in leesmodus; met P zet je de presentatiemodus aan, die dia's per klik opbouwt. De oudere MOZa Pulse-presentaties draaien nog op Reveal.js.

Maak een nieuwe presentatie:

hugo new content --kind presentaties documenten/presentaties/naam-van-presentatie

Dia's

Elke dia is een <section class="slide"> met een aria-label:

<section class="slide" aria-roledescription="dia" aria-label="Korte naam">
  <p class="overline">Onderwerp</p>
  <h2 class="title">Titel van de dia</h2>
  <p class="lead">Eén of twee korte zinnen.</p>
</section>

De bouwstenen en de opbouw per klik staan in .claude/skills/nieuwe-presentatie/SKILL.md.

Diagrammen

Gebruik een mermaid codeblock in Markdown voor diagrammen. Voeg altijd een accTitle en accDescr toe voor toegankelijkheid en als bestandsnaam voor de pre-gerenderde SVG:

```mermaid
graph LR
    accTitle: Mijn diagram
    accDescr: Beschrijving van het diagram voor screenreaders.
    A[Start] --> B[Einde]
```

Diagrammen worden vooraf gerenderd als SVG (light + dark variant) door scripts/render-mermaid.js. De kleuren volgen automatisch het lichte of donkere thema via design tokens. Eigen kleuren in een diagram (bijvoorbeeld in classDef) schrijf je daarom als var(--color-text) in plaats van een hexcode; het renderscript vult per variant de juiste waarde in. Als de SVGs ontbreken, faalt de Hugo build met een foutmelding.

Render de SVGs opnieuw na het wijzigen van een diagram:

just render-mermaid

Zie Mermaid voor de volledige syntax.

Kleuren

Kleuren, iconen, de favicon en het touch-icon komen uit het NLDD Designsysteem, uit het npm-pakket @nldd/design-system. De gegenereerde bestanden staan in git; na een upgrade van het pakket schrijf je ze opnieuw weg:

just nldd

npm test bewaakt dat die bestanden bij het geïnstalleerde pakket passen. De bestandstype-iconen voor ODT en PDF blijven handgemaakt, NLDD heeft die niet.

Elke pagina krijgt een eigen afbeelding voor een gedeelde link, met de paginatitel erop. Die komen uit just og-cards, dat na de Hugo-build draait op het manifest og.json en per pagina een JPEG in images/og/ schrijft. just build doet dat zelf al. De foto is de hero van de homepage.

Code kwaliteit

We gebruiken Lefthook voor pre-commit checks. Dit controleert automatisch of de site correct bouwt en of er geen broken links zijn.

Installatie

# macOS
brew install lefthook htmltest

# Activeer hooks in dit project
lefthook install

Handmatig uitvoeren

just pre-commit

Of direct met Lefthook:

lefthook run pre-commit

Bouwen

Lokaal bouwen

just build

Dit rendert eerst de Mermaid-diagrammen als SVG en bouwt daarna de site met Hugo.

De gegenereerde site staat in de public/ directory.

Container bouwen

Voor development (image wordt getagd met branch naam):

just cbuild   # Bouw container
just crun     # Start op localhost:8080
just cstop    # Stop container
just cclean   # Verwijder image en cache

Voor productie met specifieke baseURL:

podman build --build-arg BASE_URL=https://mijnoverheidzakelijk.nl -t moza-site .
podman run -p 8080:8080 moza-site

De site is dan beschikbaar op http://localhost:8080/.

Projectstructuur

.
├── archetypes/          # Archetype templates voor nieuwe content
├── assets/              # CSS, JavaScript en image bestanden (worden o.a. geminimaliseerd door Hugo)
├── content/             # Markdown en HTML content
│   ├── onderwerpen/     # Onderwerpen pagina's
│   ├── documenten/      # Rapportages en presentaties
│   └── weekly/          # Weekly updates
├── layouts/             # Templates voor pagina's en componenten
│   ├── _partials/       # Herbruikbare template onderdelen
│   └── _shortcodes/     # Shortcodes, ofwel componenten, voor in content
├── scripts/             # Build scripts (Mermaid SVG rendering)
├── static/              # Statische bestanden (worden 1-op-1 gekopieerd)
├── .claude/             # Claude Code configuratie
├── .github/             # GitHub Actions workflows
├── hugo.yaml            # Hugo configuratie
├── justfile             # Command runner (just up, just build, etc.)
└── README.md            # Deze documentatie

Credits

• Kleuren, font en iconen: NLDD Designsysteem (EUPL-1.2 licentie)
• Font: RijksSans is auteursrechtelijk beschermd door de Staat der Nederlanden en valt niet onder de licentie van deze repository. Het is uitsluitend bestemd voor publicaties van de Rijksoverheid of voor werk in opdracht van de Rijksoverheid; zie de gebruiksvoorwaarden typografie. RijksSans komt uit het NLDD-pakket, zie daar NOTICES.md.
• Diagrammen: Mermaid (MIT licentie)
• Zoeken: Fuse.js (Apache 2.0 licentie)