feat(storyblok): add storyblok cms

We can now update content with out deploying code.

assets/css/storyblok.css

@@ -0,0 +1,60 @@
+@import url('https://fonts.googleapis.com/css?family=Lato');
+
+.root {
+  max-width: 960px;
+  margin: 0 auto;
+  font-family: 'Lato', sans-serif;
+  margin-top: 120px;
+}
+
+.teaser {
+  text-align: center;
+}
+
+.grid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.column {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+
+  width: 50%;
+
+  box-shadow: 0px 1px 10px 0px #ccc;
+  border: 1px solid #ddd;
+  margin: 20px;
+  padding: 20px;
+}
+
+body {
+  font-family: 'Lato', sans-serif;
+}
+
+.rebuilding {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  text-align: center;
+  background: green;
+  padding: 10px;
+  color: #fff;
+}
+
+footer {
+  text-align: center;
+}

components/feature.vue

@@ -0,0 +1,11 @@
+<template>
+  <div v-editable="blok" class="column feature">
+    {{ blok.name }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: { blok: { type: Object, required: true } },
+};
+</script>

components/grid.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-editable="blok" class="grid">
+    <component
+      :is="blok.component"
+      v-for="content in blok.columns"
+      :key="content._uid"
+      :blok="content"
+    ></component>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { blok: { type: Object, required: true } },
+};
+</script>

components/page.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-editable="blok" class="page">
+    <component
+      :is="blok.component"
+      v-for="content in blok.body"
+      :key="content._uid"
+      :blok="content"
+    ></component>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { blok: { type: Object, required: true } },
+};
+</script>

components/teaser.vue

@@ -0,0 +1,11 @@
+<template>
+  <div v-editable="blok" class="teaser">
+    <h1>{{ blok.headline }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { blok: { type: Object, required: true } },
+};
+</script>

nuxt.config.js

@@ -76,12 +76,12 @@ module.exports = {
   /*
    ** Global CSS
    */
-  css: ['~/assets/scss/custom.scss'],
+  css: ['~/assets/scss/custom.scss', '~/assets/css/storyblok.css'],
 
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [],
+  plugins: ['~/plugins/components.js'],
 
   /*
    ** Nuxt.js dev-modules
@@ -106,6 +106,13 @@ module.exports = {
     '@nuxtjs/dotenv',
     '@nuxtjs/vuetify',
     'nuxt-i18n',
+    [
+      'storyblok-nuxt',
+      {
+        accessToken: 'kycw6YWwjgilZCDf6Xb6kAtt',
+        cacheProvider: 'memory',
+      },
+    ],
   ],
 
   /*
@@ -148,6 +155,8 @@ module.exports = {
     langDir: 'lang/',
   },
 
+  // storyblok: {},
+
   vuetify: {
     optionsPath: './vuetify.options.js',
     // customVariables: ['~/assets/scss/vuetify.scss'],

package.json

@@ -37,7 +37,8 @@
     "cross-env": "6.0.3",
     "koa": "2.11.0",
     "nuxt": "2.10.2",
-    "nuxt-i18n": "6.4.1"
+    "nuxt-i18n": "6.4.1",
+    "storyblok-nuxt": "1.0.2"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "1.3.0",

pages/_slug.vue

@@ -0,0 +1,48 @@
+<template>
+  <section>
+    <component
+      :is="story.content.component"
+      v-if="story.content.component"
+      :key="story.content._uid"
+      :blok="story.content"
+    ></component>
+  </section>
+</template>
+<script>
+export default {
+  asyncData(context) {
+    // Check if we are in the editor mode
+    const version =
+      context.query._storyblok || context.isDev ? 'draft' : 'published';
+
+    // Load the JSON from the API
+    return context.app.$storyapi
+      .get(`cdn/stories/${context.params.slug}`, {
+        version,
+      })
+      .then((res) => {
+        return res.data;
+      })
+      .catch((res) => {
+        context.error({
+          statusCode: res.response.status,
+          message: res.response.data,
+        });
+      });
+  },
+  data() {
+    return { story: { content: {} } };
+  },
+  mounted() {
+    this.$storybridge.on(['input', 'published', 'change'], (event) => {
+      if (event.action === 'input') {
+        if (event.story.id === this.story.id) {
+          this.story.content = event.story.content;
+        }
+      } else {
+        window.location.reload();
+      }
+    });
+  },
+};
+</script>

plugins/components.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Page from '@/components/page.vue';
+import Teaser from '@/components/teaser.vue';
+import Grid from '@/components/grid.vue';
+import Feature from '@/components/feature.vue';
+
+Vue.component('page', Page);
+Vue.component('teaser', Teaser);
+Vue.component('grid', Grid);
+Vue.component('feature', Feature);