JSFiddle - React, Tailwind, and code Playground

by dominikangerer

CSS

body {
  font-family: sans-serif;
}

.teaser,
.column {
  font-size: 2rem;
  text-align: center;
  line-height: 3;
  background: #ebeff2;
  border-radius: 10px;
  margin: 10px 5px;
}

.grid {
  display: flex;
}

.column {
  flex: 1;
}

.slide {
  height: 250px;
}

img {
  max-height: 100%;
}

JavaScript

var renderBlocks = null
var components = {}
var token = "s1PGON6DqMjghX820W7Kzgtt"

// The url path of the browser can define which story/content entry you get form the api
// In the root path of your website you receive the content entry with the slug "home"
var path = 'home'

// Do the request
var request = new XMLHttpRequest()
request.open('GET', `https://api.storyblok.com/v1/cdn/stories/${path}?version=draft&token=${token}`, true)
request.onload = function() {
  var data = JSON.parse(request.responseText)
  renderBlocks(data)
}
request.send()

// Simple rendering engine
renderBlocks = function(data) {
  var blok = data.story.content
  document.body.insertAdjacentHTML('beforeend', components[blok.component](blok))
}

components = {
  page(blok) {
    return blok.body.map((child) => { return components[child.component](child) }).join('')
  },
  teaser(blok) {
    return `${blok._editable}
      <div class="teaser">${blok.headline}</div>`
  },
  grid(blok) {
    return `${blok._editable}
      <div class="grid">
        ${blok.columns.map((child) => { return components[child.component](child) }).join('')}
      </div>`
  },
  feature(blok) {
    return `${blok._editable}
      <div class="column feature">
        ${blok.name}
      </div>`
  },

  // Slider Component
  slider(blok) {
    return `${blok._editable}
      <div class="slider">
        ${blok.slides.map((child) => { return components[child.component](child) }).join('')}
      </div>`
  },
  slide(blok) {
    return `${blok._editable}
      <div class="slide">
        <img src="${blok.image}" alt="${blok.alt}">
      </div>`
  }
}