Olympia Schaarbeek — website

Drupal 11 website voor Gymclub Olympia Schaarbeek, een turnclub in Schaarbeek (Brussel). De site toont het lesaanbod, het weekrooster, locaties, het team, nieuws en de agenda, met een contactformulier en inschrijflinks naar Gymfed.

Lokale ontwikkeling via DDEV; staging en productie via Woodpecker CI → Docker-image → docker compose achter Traefik.

Stack

Onderdeel	Keuze
CMS	Drupal 11.3 (drupal/core-recommended ^11.3)
Runtime	PHP 8.4, nginx-fpm, MariaDB 11.8
Admin-thema	Gin (+ gin_toolbar)
Front-thema	web/themes/custom/olympia — Bootstrap5-subthema, eigen CSS in css/olympia.css
Custom module	web/modules/custom/olympia_core — eigen hooks/helpers
Talen	Nederlands (standaard) + Engels, URL-prefixes /nl en /en
Front page	/aanbod (de Aanbod-view)
Mail	SMTP + HTML Mail + Mail System (postfix-relay → Brevo)
CI/CD	Woodpecker → Docker-image → docker compose up op de host
Proxy	Traefik op het externe pangolin-netwerk, Let's Encrypt

Belangrijke contrib-modules: Paragraphs, Smart Date + FullCalendar, Pathauto + Redirect, Webform + Honeypot, Media (+ Focal Point, PhotoSwipe), Content Moderation, Trash, Linkit, Simple Sitemap, Metatag, Address.

Lokale ontwikkeling (DDEV)

ddev start
ddev composer install
ddev import-db --file=dump.sql.gz   # of bouw vers op (zie "Verse installatie")
ddev drush cr
ddev launch                         # opent https://olympia-website.ddev.site

Handig:

ddev drush uli         # eenmalige login-link
ddev drush cr          # cache rebuild
ddev ssh               # shell in de web-container

Configuratie vs. content

Deze splitsing is centraal in het project:

• Config (content types, velden, displays, views, talen, …) leeft in config/sync/ en wordt versioneerd. Synchroniseer met:

  ddev drush cex -y   # actieve config → config/sync/
  ddev drush cim -y   # config/sync/ → actieve config
  

• Content (paragraphs, menu-links, redirects, het hero-blok, demo-nodes) is géén config en wordt niet door cim aangemaakt. Die wordt geseed via idempotente scripts in .setup/ (zie hieronder). Op een bestaande database draaien die seeds bewust niet opnieuw — zie "Deployment".

Content­model

Bundle	Pad	Kern
Les (lestype)	/aanbod/<titel>	Emoji, leeftijd van–tot, omschrijving, hoofdfoto, prijs (€/jaar), inschrijfstatus (open/bijna volzet/volzet/wachtlijst), globale status (actief/tijdelijk inactief)
Lesmoment (roostermoment)	/uurrooster/<les>-<dag>	Koppelt een Les aan locatie, dag, begin-/eindtijd en seizoen. Prijs/inschrijfstatus erven van de Les
Locatie	/locaties/<titel>	Adres (Address), parkeerinfo, OpenStreetMap-embed
Teamlid	/team/<titel>	Bestuur + trainers, met rol-taxonomie
Nieuws	/nieuws/<jaar>/<titel>	Nieuwsberichten, met categorie-taxonomie
Evenement	/agenda/<titel>	Smart Date events, FullCalendar
Vacature	/vrijwilligers/<titel>	Vrijwilligersoproepen
Pagina	/info/<titel>	Info-pagina's opgebouwd uit Paragraphs-secties (tekstblok, links_lijst)
Landingpage	(handmatige alias)	Paragraph-gebaseerde paginabouwer

De homepage (/aanbod) toont een bewerkbaar hero-blok (eigen bloktype hero, enkel op <front>) gevolgd door de Aanbod-kaarten. Het hoofdmenu-item "Aanbod" scrollt via een anker (#ons-aanbod) voorbij de hero.

Front-end & custom code

• Thema olympia: Bootstrap5-subthema met eigen, handgeschreven css/olympia.css (geen globale Bootstrap-stijlen). Twig-templates onder templates/ per regio/bundle.
• olympia.theme preprocesst de les-/lesmoment-rendering: o.a. de statuspill-mapping (OLYMPIA_STATUS_*) en de weekdag-sortering van de lesmomenten op de les-detailpagina (_olympia_les_momenten()), en bubblet cache-tags van de gekoppelde Les zodat het rooster meteen meewijzigt.
• olympia_core (module) bevat een hook_views_query_alter die de Uurrooster-view in weekvolgorde (ma→zo) sorteert i.p.v. alfabetisch op de dagcode — op SQL-niveau, dus pagineringsveilig.

Verse installatie (vanaf nul)

De .setup/-map bevat genummerde scripts om de site van nul op te bouwen. Voor dit project:

# 1. Drupal core + install
bash .setup/install-1-base.sh
# 2. Modules + thema-stack (geconsolideerd voor Olympia)
bash .setup/install-olympia.sh
bash .setup/install-7-theme.sh        # Bootstrap5-subthema + tooling

# 3. Config importeren
ddev drush cim -y

# 4. Content seeden (idempotent — volgorde telt)
ddev drush php:script .setup/setup-pathauto-menu.php
ddev drush php:script .setup/seed-demo.php
ddev drush php:script .setup/seed-info-pages.php
ddev drush php:script .setup/seed-contact-page.php
ddev drush php:script .setup/seed-trooper-page.php
ddev drush php:script .setup/setup-hero-block.php
ddev drush php:script .setup/seed-redirects.php
ddev drush cr

De canonieke seed-volgorde staat in .woodpecker.yml (sectie deploy_*). De generieke install-2..install-9-scripts zijn de stap-voor-stap-variant van install-olympia.sh.

Deployment

Een push naar staging of main triggert Woodpecker:

1. Bouwt een Docker-image (olympia/drupal:staging of :prod).
2. Kopieert de juiste compose-file naar /opt/stacks/<project>/compose.yaml en doet docker compose up -d.
3. Eerste deploy op een lege DB: drush site:install --existing-config (profiel uit config/sync).
4. Elke deploy: drush updatedb + drush cim + drush cr.
5. Alleen op een verse DB: de content-seeds uit .setup/. Op een bestaande omgeving draaien die niet, zodat ze geen door redacteurs bewerkte content overschrijven of dupliceren (FRESH-DB-guard in .woodpecker.yml).

Omdat menu-links content zijn, deployen wijzigingen eraan (zoals het #ons-aanbod-anker op "Aanbod") niet mee — die pas je eenmalig aan in de UI of via een drush-eval op de betreffende omgeving.

Omgeving	URL	Branch
Staging	https://staging.olympiaschaarbeek.be	staging
Productie	https://olympiaschaarbeek.be (www → 301 apex)	main

Vereiste Woodpecker-secrets (per omgeving): OLYMPIA_{STAGING,PROD}_DB_NAME, …_DB_USER, …_DB_PASSWORD, …_HASH_SALT.

Projectstructuur

.setup/             install- en seed-scripts
config/sync/        Drupal-config (cex/cim)
deploy/             docker-compose per omgeving (prod, staging)
docker/             nginx, php.ini, supervisord, entrypoint, settings.docker.php
recipes/            Drupal-recipes
web/
  modules/custom/olympia_core/   eigen hooks (o.a. uurrooster-sortering)
  themes/custom/olympia/         Bootstrap5-subthema (CSS, Twig, preprocess)
  sites/default/                 settings.php (geen secrets; prod gebruikt docker/settings.docker.php)
.woodpecker.yml     CI/CD-pijplijn (build + deploy + seeds)
CLAUDE.md           werkinstructies voor Claude Code

Veelgebruikte commando's

ddev drush cr                 # cache rebuild
ddev drush cex -y / cim -y    # config export / import
ddev drush updatedb -y        # db-updates na module-/core-update
ddev drush uli                # login-link
ddev composer require drupal/<module>