# Headless CMS

## Wat is headless?

De website is dus gebouwd op een moderne, headless stack die ook wel de JAMStack wordt genoemd. JAM staat voor Javascript, Api’s en Markup. 

Javascript voor het ophalen van data en front-end interactiviteit, Api’s om de data vandaan te halen en te gebruiken voor het toevoegen van bepaalde functionaliteit en (statisch gegenereerde) Markup waaruit je pagina’s worden opgebouwd.

In plaats van dat je dus een pure server hebt waaraan de browser telkens vraagt “hoe ziet deze pagina eruit?” krijgt de CMD website in deze nieuwe opzet de benodigde data voor de pagina’s vooraf en laten we een static site generator de benodigde HTML files wegschrijven.

### **Javascript**

Hoewel de website erg licht is voor wat betreft de hoeveelheid JavaScript die gebruikt wordt in de browser, gebruiken we het wel veel wanneer we data ergens voor nodig hebben (bijvoorbeeld om de data voor de pagina’s op te halen). JavaScript gebruik je in deze opzet dus voornamelijk om data ergens vandaan te halen of om een externe service te gebruiken.

### **API's**

Api's gebruiken we in deze onder andere om data op te halen uit het CMS. Echter, we gebruiken ze ook (middels een serverless function) om bijvoorbeeld de data uit formulieren te verwerken. API's gebruik je in een headless opzet dus om data op te halen of om te praten met externe services (zie ook de codesnippets bij 'Content ophalen vanuit een headless CMS').

### **Markup**

De data die je binnenhaalt moet natuurlijk ook getoond worden op de pagina. Dit is waar het markup gedeelte van pas komt. We hebben HTML templates gebouwd voor elk component. Elk component krijgt dan simpelweg een stukje data mee die je dan kan gebruiken binnen die template. In Nunjucks werkt dat als volgt:

```markup
<section>
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
    
    {% for article in data.articles %}
        <article>
            <h3>{{ article.title }}</h3>
            <p>{{ article.text }}</p>
        </article>
    {% endfor %}
</section>
```

## Content verkrijgen vanuit een headless CMS

Omdat we dus een statische website hebben verkrijgen we allereerst alle content pre-build (hierover later meer). Voor het verkrijgen van de data maken we gebruik van de Storyblok API. We doen simpelweg een request naar de Storyblok API als volgt:

```javascript
// Onze eigen storyblok-instance
require('dotenv-safe').config()
const StoryblokClient = require('storyblok-js-client')

const {
  ELEVENTY_ENV,
  STORYBLOK_PREVIEW_KEY,
  STORYBLOK_PUBLIC_KEY
} = process.env
const production = ELEVENTY_ENV === 'production'
const STORYBLOK_KEY = production ? STORYBLOK_PUBLIC_KEY : STORYBLOK_PREVIEW_KEY

module.exports = new StoryblokClient({
  accessToken: STORYBLOK_KEY,
  cache: {
    clear: 'auto',
    type: 'memory'
  }
})
```

```javascript
// Het verkrijgen van data middels onze Storyblok instance
const getPagesData = require('../../../lib/get-pages-data')
const getNavigationData = require('../../../lib/get-navigation-data')
const Storyblok = require('../../lib/storyblok-instance')
const getEventsData = require('../../../lib/get-events-data')
const getFooterData = require('../../lib/get-footer-data')

module.exports = async () => {
  const env = process.env.ELEVENTY_ENV
  const version = env === 'production' ? 'published' : 'draft'

  const [pages, events] = await Promise.all([
    Storyblok.get('cdn/stories', { version }),
    Storyblok.get('cdn/stories', { starts_with: 'events', version })
  ])

  const { stories = [] } = pages.data

  return {
    navigation: getNavigationData(stories),
    footer: getFooterData(stories),
    stories: getPagesData(
      stories, 
      getEventsData(events.data.stories)
    ),
  }
}

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cmd-digital-playground.gitbook.io/design-rationale-cmd-digital-playground/uitleg-van-de-code/headless-cms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.