feat(blog): add breadcrumb (#117)

components/layout/breadcrumb.vue

@@ -0,0 +1,28 @@
+<template>
+  <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
+</template>
+
+<script>
+export default {
+  computed: {
+    breadcrumbs() {
+      // console.log(this.$route);
+
+      const here = this.$route.path.split('/').slice(1);
+
+      const parts = [{ text: 'Home', to: '/' }];
+
+      for (let i = 0; i < here.length; i++) {
+        const part = here[i];
+        const text =
+          part.charAt(0).toUpperCase() + part.substr(1).toLowerCase();
+        const to = '/' + here.slice(0, i + 1).join('/');
+        parts.push({ text, to });
+      }
+      return parts;
+    },
+  },
+};
+</script>
+
+<style></style>

pages/blog/_slug.vue

@@ -1,19 +1,24 @@
 <template>
-  <section class="util__container">
-    <div v-editable="story.content" class="blog">
-      <h1>{{ story.content.name }}</h1>
-      <richtext class="blog__body" :text="story.content.body"></richtext>
-    </div>
-  </section>
+  <div>
+    <breadcrumb></breadcrumb>
+    <section class="util__container">
+      <div v-editable="story.content" class="blog">
+        <h1>{{ story.content.name }}</h1>
+        <richtext class="blog__body" :text="story.content.body"></richtext>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
+import Breadcrumb from '@/components/layout/breadcrumb';
 import Richtext from '@/components/richtext.vue';
 import storyblokLivePreview from '@/mixins/storyblokLivePreview';
 
 export default {
   components: {
     Richtext,
+    Breadcrumb,
   },
   mixins: [storyblokLivePreview],
   asyncData(context) {

pages/blog/index.vue

@@ -1,27 +1,32 @@
 <template>
-  <section class="util__container">
-    <div
-      v-for="blogPost in data.stories"
-      :key="blogPost.content._uid"
-      class="blog__overview"
-    >
-      <h2>
-        <nuxt-link class="blog__detail-link" :to="'/' + blogPost.full_slug">
-          {{ blogPost.content.name }}
-        </nuxt-link>
-      </h2>
-      <small>
-        {{ blogPost.published_at }}
-      </small>
-      <p>
-        {{ blogPost.content.intro }}
-      </p>
-    </div>
-  </section>
+  <div>
+    <Breadcrumb></Breadcrumb>
+    <section class="util__container">
+      <div
+        v-for="blogPost in data.stories"
+        :key="blogPost.content._uid"
+        class="blog__overview"
+      >
+        <h2>
+          <nuxt-link class="blog__detail-link" :to="'/' + blogPost.full_slug">
+            {{ blogPost.content.name }}
+          </nuxt-link>
+        </h2>
+        <small>
+          {{ blogPost.published_at }}
+        </small>
+        <p>
+          {{ blogPost.content.intro }}
+        </p>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
+import Breadcrumb from '@/components/layout/breadcrumb';
 export default {
+  components: { Breadcrumb },
   asyncData(context) {
     const version =
       context.query._storyblok || context.isDev ? 'draft' : 'published';