About the Playground

Ik heb voor de projectomschrijving in de wiki een stukje geschreven over wat het nou allemaal precies inhoudt. Hierbij heb ik de focus vooral gelegd op de technische kant. En natuurlijk in het Engels!

About the project

The CMD Digital Playground is a component library on the one side, on the other side content managers should be able to use the created components to create pages which in turn make the CMD website.

Built on a headless stack (JAMStack)

The website is built on a modern, headless stack that's sometimes called the JAMStack. JAM stands for Javascript, Api's and Markup.

The main point here is that nothing is faster than sending static files to a browser (also, we just like to be hipsters ).

So instead of having a true server that sends pages to the browser every time a user refreshes the page we chose to get all data upfront and then let Eleventy 'build' all needed HTML files for every page before the next version of the website goes live. This way you can have an interactive and dynamic website, while you're able to send static files to a browser.

Whut, JAMStack?

Javascript

Although this website is very light on Javascript in the browser we do use it a lot when we need to get data from somewhere (just take a look at the src/_includes/_data/site.js file). So you mainly use JavaScript to get and clean data while also using it to enhance(!) your website with some interactivity.

API's

As you can also see in the file stated above, we use some kind of Storyblok.get() method, that's where the API part comes in. To get the data we use all kinds of so-called API's. The Storyblok API is one of them and probably the most important since that's where all the content of the website comes from.

Markup

All data has to be displayed on a page, right? That's where markup comes in. Don't worry, markup is just the HTML you write for a certain component or page. Anyway, that markup can use the data you got from the CMS for example.

File and folder structure

# Serverless funtions
|-api

# Helper functions at (pre)build time
|-lib
    # Nunjucks filters to parse data to the right format
    |-filters

# Project source code
|-src
    # Assets to be build or copied during build time (js, scss and static assets)
    |-assets

    # Helper functions to connect with external API's for example
    |-lib

    # Site static pages, collections and data fetching
    |-site
        # Data fetching folder
        |-_data
            # Site config, available as site.something in the templates
            |-site.js

        # Site's components and layouts
        |-_includes
            |-components # All components the website uses
                |-my-component
                    |-my-component.html
                    |-my-component.scss
                    |-my-component.js
            |-layouts
                |-default.html # The default layout, you could create more different layouts if needed

        # Site's route structure with pages; an about.html here would create a `/about` page etc.
        |-*.html
    
    # Storybook configuration
    |-storybook
        |-index.stories.js

        # Storybook components
        |-components