Bus vol Bikes — website

De website van Bus vol Bikes (tweedehands e-bikes, Raalte). Statische site gebouwd met Astro, te beheren via Decap CMS, met een live fietsvoorraad uit het voorraadportaal. Draait als Docker-image (nginx) in Coolify.

• Framework: Astro (output: static HTML)
• CMS: Decap CMS op /admin (Forgejo/Gitea-backend, PKCE — geen aparte OAuth-server). Volledig self-hosted, geen CDN: de bundle is lokaal gevendord en een strikte Content-Security-Policy blokkeert alle externe bronnen behalve de Forgejo-backend.
• Voorraad: client-side opgehaald uit https://portaal.busvolbikes.nl/api/fietsen
• AI-assistent: chat-widget rechtsonder die vragen beantwoordt over de voorraad, e-bikes en service (Claude, via de backend op /api/chat) — zie AI-chatassistent
• Hosting: Docker (multi-stage build → nginx) op Coolify
• Fonts: Red Hat Display + DM Sans, lokaal gehost (geen externe trackers)

Deployment-handleiding (Forgejo OAuth, CORS, Coolify): zie DEPLOY.md.

Lokaal draaien

Vereist Node.js 22+.

npm install
npm run dev        # http://localhost:4321

Bouwen en de productie-build lokaal bekijken:

npm run build      # genereert dist/
npm run preview    # serveert dist/ op http://localhost:4321
npm run check      # type- en templatecontrole (astro check)

Content bewerken

Alle teksten, nieuws en instellingen zijn bewerkbaar via Decap CMS.

• In productie: ga naar https://busvolbikes.nl/admin/ en log in met je Forgejo-account. Opslaan = een commit naar de content-repo; Coolify bouwt de site daarna automatisch opnieuw.

• Lokaal testen (zonder Forgejo) met de meegeleverde proxy:

  npx decap-server      # in een aparte terminal (proxy op poort 8081)
  npm run dev           # en open http://localhost:4321/admin/
  

  Dankzij local_backend: true in public/admin/config.yml schrijft Decap dan naar je lokale git-repo in plaats van naar Forgejo.

Waar staat de content?

Inhoud	Locatie	Decap-collectie
Contactgegevens, openingstijden, koppelingen	src/data/site.json	Instellingen
Pagina-teksten (home, over ons, service, reparatie, …)	src/data/*.json	Pagina's
Nieuwsberichten	src/content/nieuws/*.md	Nieuws
Fietsinformatie-artikelen	src/content/fietsinformatie/*.md	Fietsinformatie
Afbeeldingen (uploads)	public/images/	(mediabibliotheek)

Fietsvoorraad

De pagina Aanbod fietsen (/aanbod-fietsen/) haalt de voorraad live op uit het portaal via GET /api/fietsen. Filteren, sorteren en zoeken gebeurt in de browser. De knop Bekijken linkt naar de detailpagina op het portaal (/fiets/:id) met een return-parameter terug naar de site.

De basis-URL van het portaal staat in src/data/site.json → inventoryApiBase (standaard https://portaal.busvolbikes.nl) en is aanpasbaar via Decap.

AI-chatassistent

De chat-widget rechtsonder (src/components/ChatbotWidget.astro) praat met de backend op /api/chat. Die service (in altcha-server/) laat Claude antwoorden op basis van:

• de live voorraad uit het portaal (per vraag opgehaald — altijd actueel);
• een kennisbank met de vaste site-teksten (altcha-server/knowledge.md, gegenereerd uit src/data + src/content met npm run build:knowledge);
• een samenvatting van de partnersite ebike-tips.nl.

Aanzetten = één env-variabele (ANTHROPIC_API_KEY) op de backend. Zonder sleutel werkt de site gewoon en geeft de chat een nette foutmelding. Model en voorraad-URL zijn optioneel instelbaar (ANTHROPIC_MODEL, standaard claude-haiku-4-5; INVENTORY_API). Zie DEPLOY.md § 9.

Projectstructuur

public/
  admin/            Decap CMS (index.html, config.yml, gevendorde bundle)
  images/           afbeeldingen (CMS-uploads + merkbeelden)
  logo.png
src/
  components/       Astro-componenten (Header, Footer, NewsCard, …)
  content/          nieuws + fietsinformatie (markdown) + content.config.ts
  data/             bewerkbare pagina-/site-data (JSON)
  layouts/          BaseLayout, ArticleLayout
  pages/            alle routes
  scripts/          inventory.js, framemaat.js, contact.js
  styles/global.css design-tokens + basisstijlen
altcha-server/      backend: ALTCHA-contact + AI-chat (server.js, knowledge.md, build-knowledge.mjs)
Dockerfile          multi-stage build → nginx
nginx.conf          serverconfig (caching, headers, /healthz, /api/-proxy)
docker-compose.yaml web (nginx) + backend-service op één domein

Nog in te vullen (zie ook DEPLOY.md)

• public/admin/config.yml: backend.repo en backend.app_id (Forgejo OAuth).
• Reviews op de homepage (src/data/home.json → testimonials) zijn voorbeeldteksten — vervang ze door echte klantreacties.
• Fiets financieren (src/data/financieren.json): vul eventueel een concrete financieringspartner/voorwaarden in.
• Social media (src/data/site.json → social): Facebook/Instagram-URL's (nu leeg).
• Contactformulier: standaard via mailprogramma (mailto). Voor directe verzending met ALTCHA-captcha draai je de meegeleverde service in altcha-server/ en vul je altchaChallengeUrl + contactFormEndpoint in — zie DEPLOY.md.
• Foto's: alle afbeeldingen op home/over-ons/contact zijn image-velden in Decap — vervang ze eenvoudig via Media door je eigen (hoge-resolutie) foto's.