Drogisterij De Kruidnagel — website

Een nieuwe, snelle website voor Drogisterij De Kruidnagel in Deventer, gebouwd met Astro en beheerbaar via Decap CMS. De content (teksten, foto's, openingstijden, nieuws) staat in eenvoudige bestanden in deze repository en wordt via een gebruiks­vriendelijk beheerscherm op /admin bewerkt. Deployen kan met één Dockerfile, bijvoorbeeld op Coolify.

De CMS-login loopt via Forgejo/Gitea (OAuth2 met PKCE). Daardoor is alleen een Client-ID nodig die gewoon in public/admin/config.yml staat — géén client secret en géén aparte OAuth-server.

Waarom Astro? De site is inhoud-gedreven (geen webshop). Astro genereert kant-en-klare, supersnelle HTML en leest de content rechtstreeks uit de markdown/JSON die Decap wegschrijft. Dat geeft minder code, betere prestaties en een eenvoudige container dan een Next.js-opzet.

---

Inhoud

• Hoe het werkt
• Mappenstructuur
• Lokaal draaien
• Content bewerken (CMS)
• Forgejo OAuth-applicatie aanmaken
• Deployen op Coolify
• Environment variables
• Site aanpassen
• Opmerkingen

---

Hoe het werkt

Redacteur ──▶ /admin (Decap CMS, login via Forgejo) ──▶ commit naar Forgejo ──▶ Coolify herbouwt ──▶ live site

1. Een redacteur logt in op https://jouw-domein/admin/ (via Forgejo, OAuth2 + PKCE).
2. Decap CMS schrijft de wijziging als een commit naar de Forgejo-repository.
3. Coolify ziet de nieuwe commit (webhook) en herbouwt de container automatisch.
4. De vernieuwde, statische site staat binnen ~1 minuut live.

De meegeleverde server (server/index.mjs) is een kleine, dependency-vrije Node-server die puur de statische site uitserveert. Omdat de login via PKCE volledig in de browser tegen Forgejo verloopt, is er geen OAuth-proxy of secret nodig. Eén Dockerfile, één service.

---

Mappenstructuur

.
├── Dockerfile              # productie-image (Astro build + Node-server)
├── docker-compose.yml      # lokaal de productie-container testen
├── astro.config.mjs
├── package.json
├── server/
│   └── index.mjs           # statische bestandsserver
├── public/
│   ├── admin/
│   │   ├── index.html      # Decap CMS
│   │   └── config.yml      # CMS-configuratie (backend + collecties + velden)
│   ├── uploads/            # door het CMS beheerde afbeeldingen
│   ├── logo.png
│   └── favicon.svg
└── src/
    ├── content/            # ← ALLE CONTENT (door Decap beheerd)
    │   ├── config.ts       #   schema's (moeten matchen met admin/config.yml)
    │   ├── settings/site.json
    │   ├── home/index.md
    │   ├── contact/index.md
    │   ├── pages/*.md       #   homeopathie, supplementen, drogisterij, over-ons
    │   ├── nieuws/*.md
    │   ├── vacatures/*.md   #   losse vacatures (samen getoond op /vacature)
    │   └── vacaturePagina/index.json
    ├── components/         # Header, Footer, Hero, Card, OpeningHours, ContactCard
    ├── layouts/Base.astro
    ├── lib/                # site-instellingen + datumhulpjes
    ├── styles/global.css   # huisstijl (kleuren, lettertypes)
    └── pages/              # routes (index, [slug], nieuws, contact, 404)

---

Lokaal draaien

Vereist: Node 20+ (nvm: nvm install 20).

npm install          # dependencies installeren
npm run dev          # site op http://localhost:4321

De website draait nu, maar het beheerscherm (/admin) heeft een lokale backend nodig om te kunnen bewerken. Start beide tegelijk met:

npm run dev:cms      # Astro (4321) + Decap lokale backend (8081) tegelijk

Open daarna http://localhost:4321/admin/. Dankzij local_backend: true schrijft Decap je wijzigingen rechtstreeks naar de bestanden in src/content/ — geen Forgejo nodig om lokaal te oefenen.

Let op (iCloud): als deze map in iCloud Drive staat, kan node_modules synchroniseren traag/onbetrouwbaar zijn. Overweeg het project naar een gewone map te verplaatsen (bijv. ~/Projecten/). node_modules staat al in .gitignore.

Andere commando's:

npm run build        # productie-build naar ./dist
npm run preview      # de build lokaal bekijken
npm start            # de productieserver draaien (na build)

---

Content bewerken (CMS)

Alle teksten, foto's, openingstijden en nieuwsberichten worden via /admin beheerd. Er is een aparte, eenvoudige handleiding voor de winkel zelf: docs/BEHEER.md.

In het kort beheer je daar:

Sectie	Wat
Homepage	hero-tekst & foto, meldingsbalk, uitgelichte categorieën, introtekst
Pagina's	de inhoudspagina's (homeopathie, supplementen, drogisterij-artikelen, over ons)
Nieuws	nieuwsberichten & aanbiedingen
Vacatures	losse vacatures; verschijnen samen op de pagina /vacature
Webshop (optioneel)	aan/uit-knop; producten met foto, prijs, eenheid en voorraad. Bestellen = winkelmandje → WhatsApp/e-mail, afrekenen in de winkel
Contactpagina	introtekst, Google Maps-kaart, WhatsApp-/parkeerinfo
Site-instellingen	NAW-gegevens, telefoon, e-mail, openingstijden en het menu

---

Forgejo OAuth-applicatie aanmaken

Nodig zodat redacteuren met hun Forgejo-account op /admin kunnen inloggen. Decap gebruikt de PKCE-flow: je hebt alleen een Client-ID nodig (geen secret).

1. Ga in Forgejo naar Instellingen → Applicaties → OAuth2-applicaties beheren (voor één gebruiker), of via Site-administratie voor een organisatie/instance-breed.

2. Maak een nieuwe applicatie aan:

   • Naam: De Kruidnagel CMS
   • Redirect-URI: https://jouw-domein/admin/ (let op de slash op het eind)
   • Confidential Client: uitvinken (PKCE = publieke client, geen secret)

3. Kopieer de gegenereerde Client-ID.

4. Zet die Client-ID in public/admin/config.yml bij app_id:

   backend:
     name: gitea
     repo: DroDeKru/DroDeKruWeb
     branch: main
     base_url: https://code.securityasaservice.org
     api_root: https://code.securityasaservice.org/api/v1
     auth_endpoint: https://code.securityasaservice.org/login/oauth/authorize
     app_id: JOUW_CLIENT_ID
   

Belangrijk:

• Forgejo 1.21.4+ met CORS ingeschakeld is vereist (zodat de browser de Forgejo-API mag aanroepen). Zet in Forgejo's app.ini onder [cors] o.a. ENABLED = true.
• Redacteuren hebben schrijfrechten (collaborator) op de repository nodig om te publiceren.
• De Client-ID is niet geheim en mag in de repository staan.

---

Deployen op Coolify

1. Code naar Forgejo pushen (de remote is al ingesteld):

   git push origin main
   

2. In Coolify → New Resource → kies je server/project → Application → koppel de Forgejo-repository (Coolify ondersteunt Gitea/Forgejo via deploy keys/webhook).

3. Build pack: kies Dockerfile (Coolify detecteert de Dockerfile automatisch).

4. Port: zet de exposed port op 4321.

5. Domein: stel je domein in (Coolify regelt HTTPS via Let's Encrypt).

6. Environment variables / build-arg: zet PUBLIC_SITE_URL op je domein (zie tabel hieronder).

7. Auto-deploy: zet "Automatically deploy on push" aan, zodat elke wijziging vanuit het CMS de site automatisch opnieuw laat bouwen.

8. Deploy en bezoek daarna https://jouw-domein/admin/ om in te loggen.

Lokaal de container testen

cp .env.example .env     # en invullen
docker compose up --build
# → http://localhost:4321  en  http://localhost:4321/admin/

---

Environment variables

Variabele	Verplicht	Voorbeeld	Toelichting
PUBLIC_SITE_URL	✅	https://dekruidnagel.nl	Publieke URL. Ook als build-arg instellen.
PORT	–	4321	Poort van de server (standaard 4321).

De Forgejo Client-ID is géén env var — die staat in public/admin/config.yml (app_id).

---

Site aanpassen

• Kleuren & lettertypes: centraal in src/styles/global.css (de :root-variabelen). De huisstijl is groen (afgeleid van het logo), met de lettertypes Maven Pro (koppen) en Inter (tekst).
• Logo: vervang public/logo.png (en zie public/favicon.svg).
• Nieuwe pagina toevoegen: maak hem aan onder Pagina's in het CMS, of voeg een .md-bestand toe in src/content/pages/. Zet inMenu: true en voeg hem toe aan het menu onder Site-instellingen.
• Velden wijzigen: pas je een veld aan, doe dat dan op twee plekken die gelijk moeten blijven: het schema in src/content/config.ts én de CMS-definitie in public/admin/config.yml.

---

Opmerkingen

• Redactionele workflow (concepten/review): zet publish_mode: editorial_workflow in public/admin/config.yml als je met concepten en goedkeuring wilt werken (maakt PR's aan in plaats van directe commits).
• Afbeeldingen: door het CMS geüploade foto's komen in public/uploads/ en worden mee gecommit. Houd ze niet te groot; comprimeer grote foto's vóór upload.
• Git LFS wordt door de Gitea/Forgejo-backend van Decap niet ondersteund.

---

Gemaakt met Astro & Decap CMS.