feat: blog (#620)

* feat: blog

* feat(admin): editorial_workflow

* feat(blog): hero

* refactor(blog): hero component

* chore(admin): open authoring

Co-authored-by: Damien Robinson <damien.robinson@xcommedia.com.au>

components/breadcrumb.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-toolbar flat height="65" color="transparent" :absolute="absolute">
+    <v-breadcrumbs :items="breadcrumbs" class="pa-0"></v-breadcrumbs>
+  </v-toolbar>
+</template>
+
+<script>
+import { startCase } from 'lodash-es';
+export default {
+  props: {
+    dark: { type: Boolean, default: false },
+    absolute: { type: Boolean, default: false },
+  },
+  computed: {
+    breadcrumbs() {
+      const segments = this.$route.path.split('/').slice(1);
+      const breadcrumbs = [{ text: 'Home', to: '/' }];
+
+      segments.forEach((segment, index) => {
+        const text = startCase(segment);
+        const to = this.localePath(
+          '/' + segments.slice(0, index + 1).join('/'),
+        );
+        breadcrumbs.push({ text, to, exact: true });
+      });
+
+      return breadcrumbs;
+    },
+  },
+};
+</script>
+
+<style>
+.v-application .v-breadcrumbs__item {
+  color: white;
+}
+</style>

components/hero.vue

@@ -64,12 +64,12 @@ export default {
     _src: require.context(
       `~/assets/img?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&sizes[]=4686&placeholder&format=webp`,
       true,
-      /\.(png|jpe?g|svg).*$/,
+      /\.(png|jpe?g).*$/,
     ),
     cover: require.context(
       `~/assets/img?resize&size=1200&format=jpg`,
       true,
-      /\.(png|jpe?g|svg).*$/,
+      /\.(png|jpe?g).*$/,
     ),
   },
   head() {

components/sections/BlogHero.vue

@@ -0,0 +1,64 @@
+<template>
+  <Hero :src="src">
+    <Breadcrumb absolute dark></Breadcrumb>
+    <v-row class="fill-height mx-0 pa-4" no-gutters>
+      <v-col
+        class="d-flex text-left align-end justify-start"
+        cols="12"
+        sm="auto"
+      >
+        <v-card color="transparent" flat>
+          <v-card-title class="text-break">
+            <h1 class="mb-0">{{ title }}</h1>
+          </v-card-title>
+          <v-card-subtitle v-if="summary">{{ summary }}</v-card-subtitle>
+        </v-card>
+      </v-col>
+      <v-col v-if="credit" class="d-flex text-right align-end justify-end">
+        <span>
+          Photo by
+          <a
+            :href="credit.by.href"
+            rel="noopener"
+            target="_blank"
+            class="white--text"
+            >{{ credit.by.text }}</a
+          >
+          on
+          <a
+            :href="credit.on.href"
+            rel="noopener"
+            target="_blank"
+            class="white--text"
+            >{{ credit.on.text }}</a
+          >
+        </span>
+      </v-col>
+    </v-row>
+  </Hero>
+</template>
+
+<script>
+export default {
+  props: {
+    src: { type: String, default: './blog.jpg' },
+    title: { type: String, required: true },
+    summary: { type: String, default: null },
+    credit: {
+      type: Object,
+      default: () => ({
+        by: {
+          text: 'Patrick Fore',
+          href:
+            'https://unsplash.com/@patrickian4?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText',
+        },
+        on: {
+          text: 'Unsplash',
+          href:
+            'https://unsplash.com/s/photos/blog?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText',
+        },
+      }),
+    },
+  },
+};
+</script>

content/blog/hello-world.md

@@ -0,0 +1,7 @@
+---
+date: 2020-09-21T11:06:50.972Z
+title: Hello World
+description: My first blog post.
+---
+
+Welcome to the start of my blog.

layouts/default.vue

@@ -12,7 +12,6 @@
           v-for="item in items"
           :key="item.text"
           :to="localePath(item.route ? item.route : {})"
-          active-class="btn-primary pointer-events-none active"
           nuxt
           class="text-decoration-none"
         >
@@ -58,7 +57,13 @@
 </template>
 
 <script>
-import { mdiHome, mdiAccountTie, mdiToolbox, mdiFolder } from '@mdi/js';
+import {
+  mdiHome,
+  mdiAccountTie,
+  mdiToolbox,
+  mdiFolder,
+  mdiInformation,
+} from '@mdi/js';
 import TheFooter from '@/components/layout/the-footer.vue';
 export default {
   components: {
@@ -73,11 +78,11 @@ export default {
           text: 'Home',
           route: 'index',
         },
-        // {
-        //   icon: '$info',
-        //   text: 'Blog',
-        //   route: 'blog',
-        // },
+        {
+          icon: mdiInformation,
+          text: 'Blog',
+          route: 'blog',
+        },
         {
           icon: mdiAccountTie,
           text: 'Resume',

lighthouserc.js

@@ -8,6 +8,7 @@ module.exports = {
         '/releases/',
         '/tools/',
         '/portfolio/',
+        '/blog/',
       ],
       staticDistDir: './dist',
       numberOfRuns: 5,

nuxt.config.js

@@ -226,6 +226,8 @@ export default {
    ** Build configuration
    */
   build: {
+    transpile: ['lodash-es', 'vuetify/lib'],
+
     extractCSS: true,
     /*
      ** You can extend webpack config here

package.json

@@ -59,6 +59,7 @@
     "github-markdown-css": "4.0.0",
     "i18n-iso-countries": "6.0.0",
     "koa": "2.13.0",
+    "lodash-es": "4.17.15",
     "mailgo": "0.9.18",
     "nuxt": "2.14.6",
     "nuxt-fontawesome": "0.4.0",

pages/blog/_slug.vue

@@ -1,65 +1,46 @@
 <template>
   <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>
+    <BlogHero :title="item.title" :summary="item.description"></BlogHero>
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-card flat>
+            <v-card-text class="body-1">
+              <nuxt-content :document="item" />
+            </v-card-text>
+            <v-card-text
+              >Published
+              <time :datetime="item.date">{{
+                formatDate(item.date)
+              }}</time></v-card-text
+            >
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script>
-import Breadcrumb from '@/components/layout/breadcrumb';
-import Richtext from '@/components/richtext.vue';
-// import storyblokLivePreview from '@/mixins/storyblokLivePreview';
-
+import * as dayjs from 'dayjs';
+import BlogHero from '~/components/sections/BlogHero';
 export default {
-  components: {
-    Richtext,
-    Breadcrumb,
+  components: { BlogHero },
+  async asyncData({ $content, route, error }) {
+    try {
+      const item = await $content('blog', route.params.slug).fetch();
+      return { item, ...item };
+    } catch {
+      error({ statusCode: 404 });
+    }
   },
-  // mixins: [storyblokLivePreview],
-  // asyncData(context) {
-  //   const version =
-  //     context.query._storyblok || context.isDev ? 'draft' : 'published';
-  //   const endpoint = `cdn/stories/blog/${context.params.slug}`;
-
-  //   return context.app.$storyapi
-  //     .get(endpoint, {
-  //       version,
-  //       // cv: context.store.state.cacheVersion,
-  //     })
-  //     .then((res) => {
-  //       return res.data;
-  //     })
-  //     .catch((res) => {
-  //       context.error({
-  //         statusCode: res.response.status,
-  //         message: res.response.data,
-  //       });
-  //     });
-  // },
-  data() {
-    return { story: { content: { body: '' } } };
+  data: () => ({
+    item: {},
+  }),
+  methods: {
+    formatDate(date) {
+      return dayjs(date).format('MMMM D, YYYY');
+    },
   },
 };
 </script>
-
-<style lang="scss">
-.blog {
-  padding: 0 20px;
-  max-width: 600px;
-  margin: 40px auto 100px;
-
-  img {
-    width: 100%;
-    height: auto;
-  }
-}
-
-.blog__body {
-  line-height: 1.6;
-}
-</style>