Memoriaal — website

De website van Memoriaal Administratiekantoor & Belastingadviseurs, gebouwd met Astro en bewerkbaar via Decap CMS met login via Forgejo / Gitea. De site is een statische build en draait als kleine nginx-container, klaar om met een Dockerfile op Coolify te deployen.

---

Inhoud

• Techniek in het kort
• Lokaal ontwikkelen
• Projectstructuur
• Content bewerken (Decap CMS)
• Login instellen via Forgejo / Gitea
• Deployen op Coolify
• Omgevingsvariabelen
• Veelgestelde vragen

---

Techniek in het kort

Onderdeel	Keuze
Framework	Astro 6 (statische output)
Styling	Eigen CSS-designsysteem (merkkleur #a81815)
Content	Markdown + JSON in src/content en src/data
CMS	Decap CMS 3 met Gitea/Forgejo-backend (OAuth + PKCE)
Lettertype	Inter (self-hosted via @fontsource)
Webserver (prod)	nginx (alpine) in een multi-stage Docker-image
Hosting	Coolify (Dockerfile-applicatie, poort 80)

De content (diensten, vacatures, pagina­teksten) staat als bestanden in de Git-repo. Een redacteur logt in op /admin, bewerkt de teksten en Decap commit de wijziging naar Gitea/Forgejo. Coolify bouwt vervolgens automatisch een nieuwe versie van de site.

---

Lokaal ontwikkelen

Vereist Node.js 20 of hoger.

# 1. Dependencies installeren
npm install

# 2. Ontwikkelserver starten (http://localhost:4321)
npm run dev

# 3. Productiebuild maken in ./dist
npm run build

# 4. Build lokaal bekijken
npm run preview

# 5. Types & sjablonen controleren
npm run check

---

Projectstructuur

.
├── public/
│   ├── admin/                 # Decap CMS
│   │   ├── index.html         # laadt Decap vanaf CDN
│   │   └── config.yml         # CMS-config (backend + collecties)
│   ├── images/                # logo's, uploads, badges
│   ├── favicon-32.png ...     # favicons (uit het echte logo)
│   └── og-image.png           # social-share-afbeelding
├── src/
│   ├── components/            # Header, Footer, Logo, Icon, kaarten ...
│   ├── content/
│   │   ├── diensten/          # 5 diensten (Markdown)
│   │   └── vacatures/         # vacatures (Markdown)
│   ├── data/                  # site.json, home.json, overons.json, contact.json
│   ├── layouts/Base.astro     # HTML-skelet, SEO, Open Graph
│   ├── pages/                 # routes (home, diensten, vacatures, contact ...)
│   └── styles/global.css      # designsysteem / merkkleuren
├── Dockerfile                 # multi-stage build (node ➜ nginx)
├── nginx.conf                 # webserver-config
├── docker-entrypoint.sh       # zet CMS-backend + domein uit env-variabelen
└── astro.config.mjs

---

Content bewerken (Decap CMS)

Ga naar https://<jouw-domein>/admin/ en log in met Gitea/Forgejo. Je kunt beheren:

• Diensten — toevoegen, bewerken, volgorde en icoon kiezen, uitlichten op de home.
• Vacatures — plaatsen, op actief zetten of weghalen.
• Pagina's & instellingen — bedrijfsgegevens, openingstijden, de mededelingsbalk, en de teksten van de home-, over-ons- en contactpagina.

Geüploade afbeeldingen komen in public/images/uploads.

---

Login instellen via Forgejo / Gitea

Decap gebruikt de Gitea-backend met PKCE: de redacteur logt rechtstreeks bij jouw Gitea/Forgejo in. Er is geen aparte OAuth-/authenticatieserver nodig.

De backend in public/admin/config.yml is al ingevuld voor jouw situatie — je hoeft alleen nog je Client-ID te plakken:

backend:
  name: gitea
  repo: MemAdmBur/MemWebsite
  base_url: https://code.securityasaservice.org
  api_root: https://code.securityasaservice.org/api/v1
  branch: main
  app_id: PLAK-HIER-JE-CLIENT-ID   # <<< alleen dit nog invullen

1. OAuth-applicatie registreren in Forgejo

Ga in Forgejo (code.securityasaservice.org) naar Instellingen → Applicaties → OAuth2-toepassingen beheren:

1. Naam: bv. Memoriaal CMS
2. Redirect-URI: https://<jouw-site-domein>/admin/ ← let op de afsluitende /
3. Vink "Confidential Client" UIT (publieke client met PKCE)
4. Opslaan en de Client-ID kopiëren

2. Client-ID plakken

Plak de Client-ID in public/admin/config.yml bij app_id en commit het bestand. Dat is alles — repo, instantie en branch staan al goed.

4. CORS (alleen Forgejo)

Voor Forgejo is minimaal versie 1.21.4 nodig en moet CORS aanstaan. In app.ini:

[cors]
ENABLED = true
ALLOW_DOMAIN = https://www.memoriaal.com
METHODS = GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS

Gitea (1.20+) werkt doorgaans zonder extra CORS-configuratie.

---

Deployen op Coolify

De site draait als Dockerfile-applicatie. Coolify bouwt het image en serveert het op poort 80.

Stappen

1. New Resource → Application en kies je Gitea/Forgejo-repository.
2. Build Pack: Dockerfile (Coolify vindt de Dockerfile automatisch).
3. Port: 80. Healthcheck-pad: /healthz.
4. Domein instellen (bv. https://www.memoriaal.com); Coolify regelt TLS.
5. Omgevingsvariabelen instellen (zie tabel hieronder). Zet SITE_URL ook als build-variabele aan, zodat canonical-URL's, sitemap en Open Graph kloppen.
6. Deploy.

Automatisch opnieuw bouwen na een CMS-wijziging

Koppel in Coolify een webhook en voeg die toe in Gitea/Forgejo (Repo → Settings → Webhooks, push-events). Wanneer een redacteur via /admin iets opslaat, commit Decap naar de repo en bouwt Coolify automatisch een nieuwe versie.

Lokaal testen met Docker

docker build -t memoriaal --build-arg SITE_URL=https://www.memoriaal.com .
docker run --rm -p 8080:80 -e SITE_URL=https://www.memoriaal.com memoriaal
# open http://localhost:8080

---

Omgevingsvariabelen

De Forgejo-login staat vast in public/admin/config.yml (alleen de Client-ID invullen). Er is daarom nog maar één variabele:

Variabele	Wanneer	Betekenis
SITE_URL	build en run	Canonieke URL (sitemap, canonical, OG, robots.txt)

SITE_URL is optioneel; zonder deze variabele wordt https://www.memoriaal.com gebruikt. Stel hem in Coolify in als build- én runtime-variabele wanneer je een ander domein gebruikt.

---

Veelgestelde vragen

Werkt het contactformulier? Standaard opent het formulier de e-mailclient van de bezoeker. Wil je e-mails direct ontvangen, vul dan bij Algemene gegevens in het CMS (of in src/data/site.json) een endpoint in bij contactFormActie, bijvoorbeeld een Formspree- of Web3Forms-URL.

Hoe pas ik de algemene voorwaarden aan? Bewerk src/pages/algemene-voorwaarden.astro en vervang de voorbeeldtekst door de definitieve voorwaarden.

Waar staan de logo's? De echte merklogo's staan in public/images/ (logo-memoriaal-wit.png voor donkere vlakken, logo-memoriaal-donker.png voor lichte vlakken). De favicons zijn uit het honingraat-icoon van het logo gegenereerd.

---

Gemaakt met ❤️ en Astro. Vragen of aanpassingen? Pas de content aan via /admin of de bestanden in src/.