1) Added disqus

2) updated opti-image and added transitions
3) tweaks to newsletter ui
4) markdown component

.eslintignore

@@ -0,0 +1 @@
+../assets/modules/opti-image/dist/index.js

assets/scss/_animations.scss

@@ -1,4 +1,4 @@
-@keyframes blurIn {
+@keyframes blurInGrayscale {
   0%{
     filter:blur(40px) grayscale(0);
   }

assets/scss/_transitions.scss

@@ -9,3 +9,19 @@
 .page-leave-to {
   opacity: 0;
 }
+
+.image{
+  overflow:hidden;
+  background:#eee;
+}
+.opti-image{
+  transition: 0.2s ease opacity, 0.2s ease filter;
+  opacity:1;
+  filter: blur(0);
+}
+
+.opti-image-before-load{
+  opacity:0;
+  filter: blur(10px);
+}
+

components/DisqusComments.vue

@@ -17,7 +17,7 @@ export default {
     ;(() => {
       const d = document
       const s = d.createElement('script')
-      s.src = `https://${this.$globals.disqusSiteShortName}.disqus.com/embed.js`
+      s.src = `https://${this.$globals.disqus.siteShortName}.disqus.com/embed.js`
       s.setAttribute('data-timestamp', +new Date())
       ;(d.head || d.body).appendChild(s)
     })()

components/LatestPosts.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="columns posts">
-    <div v-for="post in posts" :key="post.data.title" class="column is-4">
+    <div
+      v-for="post in posts"
+      :key="post.data.title"
+      :class="`column is-${gridNumber}`"
+    >
       <post-card
         :title="post.data.title"
         :link="post.data.slug"
         :image="post.data.featureImage"
+        :author="post.data.author"
+        :date="post.data.date"
       />
     </div>
   </div>
@@ -19,6 +25,17 @@ export default {
     return {
       posts: require('~/static/api/posts.json')
     }
+  },
+  computed: {
+    gridNumber() {
+      return 12 / this.$globals.columns
+    }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.card {
+  height: 100%;
+}
+</style>

components/Markdown.vue

@@ -0,0 +1,39 @@
+<template>
+  <component :is="tag" class="content" v-html="content" />
+</template>
+
+<script>
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+export default {
+  name: 'Markdown',
+  props: {
+    tag: { type: String, default: 'article' },
+    markdown: { type: String, required: true }
+  },
+  computed: {
+    content() {
+      const md = new MarkdownIt({
+        linkify: true,
+        typographer: true,
+        highlight: (str, lang) => {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return hljs.highlight(lang, str).value
+            } catch (__) {}
+          }
+
+          return '' // use external default escaping
+        }
+      })
+        .use(require('markdown-it-deflist'))
+        .use(require('markdown-it-sub'))
+        .use(require('markdown-it-sup'))
+        .use(require('markdown-it-footnote'))
+      return md.render(this.markdown)
+    }
+  }
+}
+</script>
+
+<style scoped></style>

components/SubscribeForm.vue → components/NewsLetterForm.vue

@@ -13,7 +13,7 @@
         class="close"
         @click="toggle()"
       />
-      <p>Subscribe to Our Newsletter</p>
+      <p>{{ header }}</p>
     </div>
     <div class="message-body">
       <div class="field has-addons">
@@ -26,7 +26,7 @@
         </p>
         <div class="control">
           <a class="button is-primary">
-            Subscribe
+            {{ $globals.newsLetter.btnText || 'Subscribe' }}
           </a>
         </div>
       </div>
@@ -41,6 +41,11 @@ export default {
       active: true
     }
   },
+  computed: {
+    header() {
+      return this.$globals.newsLetter.heading || 'Subscribe to Our Newsletter'
+    }
+  },
   methods: {
     toggle() {
       this.active = !this.active
@@ -61,6 +66,7 @@ export default {
     justify-content: start;
     .close {
       margin-right: 16px;
+      cursor: pointer;
     }
   }
 

components/PostCard.vue

@@ -10,8 +10,19 @@
     <div class="card-content">
       <div class="media">
         <div class="media-content">
-          <a :href="link" class="subtitle is-5">
-            {{ title }}
+          <a :href="link">
+            <h3 class="title is-5 has-text-weight-light">{{ title }}</h3>
+            <h4 class="subtitle is-6">
+              <span
+                v-if="author && $globals.displayAuthor"
+                class="author-wrapper"
+              >
+                <strong>Author:</strong> {{ author }} |
+              </span>
+              <span v-if="date" class="date-wrapper">
+                <strong>Published on:</strong> {{ datePretty }}
+              </span>
+            </h4>
           </a>
         </div>
       </div>
@@ -20,6 +31,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 export default {
   props: {
     title: {
@@ -34,7 +46,21 @@ export default {
     },
     date: {
       type: String
+    },
+    author: {
+      type: String
+    }
+  },
+  computed: {
+    datePretty() {
+      return moment(this.date).format('MMMM Do, YYYY')
     }
   }
 }
 </script>
+<style scoped lang="scss">
+.subtitle {
+  opacity: 0.5;
+  font-size: 0.8rem;
+}
+</style>

components/hero.vue

@@ -1,5 +1,5 @@
 <template functional>
-  <section class="hero is-medium">
+  <section :class="`hero is-medium hero-theme-${props.theme}`">
     <opti-image
       class="hero-bg-img"
       :src="props.image"
@@ -31,7 +31,8 @@ export default {
     title: { type: String, default: '' },
     subtitle: { type: String, default: '' },
     image: { type: String, default: '' },
-    color: { type: String, default: '#469af0' }
+    color: { type: String, default: '#469af0' },
+    theme: { type: String, default: 'mist' }
   }
 }
 </script>
@@ -84,15 +85,57 @@ export default {
     right: 0;
     bottom: 0;
     object-fit: cover;
-    filter: grayscale(1);
     width: 100%;
   }
   .opti-image {
     opacity: 0;
   }
+  .opti-image-loaded {
+    opacity: 1;
+  }
+}
+.hero-theme-mist {
+  .hero-bg-img {
+    filter: grayscale(1);
+  }
   .opti-image-loaded {
     opacity: 0.12;
-    animation: blurIn 4.5s ease;
+    animation: blurInGrayscale 4.5s ease;
+  }
+}
+.hero-theme-bold,
+.hero-theme-light {
+  &.hero:after {
+    content: '';
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.65);
+    position: absolute;
+  }
+  .hero-body {
+    position: relative;
+    z-index: 2;
+  }
+}
+.hero-theme-bold {
+  .title,
+  .subtitle,
+  .under-subtitle,
+  .under-subtitle strong {
+    color: white;
+  }
+}
+.hero-theme-light.hero {
+  &:after {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .title,
+  .subtitle,
+  .under-subtitle,
+  .under-subtitle strong {
+    text-shadow: 1px 1px 2px white;
   }
 }
 </style>

config/global.js

@@ -13,5 +13,21 @@ export default {
       link: '/contact'
     }
   ],
-  disqusSiteShortName: 'blog-danielkelly-io'
+
+  // Post Listings
+  columns: 3,
+
+  // Disqus
+  disqus: {
+    siteShortName: 'blog-danielkelly-io'
+  },
+
+  // Newsletter Subscribe
+  newsLetter: {
+    heading: 'Subscribe to Our Newsletter',
+    btnText: 'Subscribe'
+  },
+
+  // Posts
+  displayAuthor: true
 }

content/pages/about.md

@@ -0,0 +1,5 @@
+---
+title: About
+subtitle: This is the subtitle
+featureImage: https://picsum.photos/1800/900
+---

content/posts/my-second-post.md

@@ -1,8 +1,8 @@
 ---
 layout: blog
-title: "My Second Post"
-subtitle: "Hardy"
+title: My Second Post
+subtitle: Hardy
 date: 1999-12-31 11:59:59 -0800
-featureImage: "https://picsum.photos/1800/900"
+featureImage: https://picsum.photos/1800/900
 ---
 This is the post body, where I write about our last chance to party before the Y2K bug destroys us all.

content/posts/my-third-post.md

@@ -1,8 +1,8 @@
 ---
 layout: blog
-title: "My Third Post"
-subtitle: "Hardy"
+title: My Third Post
+subtitle: Hardy
 date: 1999-12-31 11:59:59 -0800
-featureImage: "https://picsum.photos/1800/900"
+featureImage: https://picsum.photos/1800/900
 ---
 This is the post body, where I write about our last chance to party before the Y2K bug destroys us all.

layouts/default.vue

@@ -2,7 +2,7 @@
   <div>
     <nav-bar />
     <nuxt />
-    <subscribe-form></subscribe-form>
+    <news-letter-form />
     <site-footer></site-footer>
   </div>
 </template>
@@ -11,9 +11,9 @@
 import 'animate.css/animate.min.css'
 import NavBar from '~/components/navbar'
 import SiteFooter from '~/components/footer'
-import SubscribeForm from '~/components/SubscribeForm'
+import NewsLetterForm from '~/components/NewsLetterForm'
 export default {
-  components: { NavBar, SiteFooter, SubscribeForm },
+  components: { NavBar, SiteFooter, NewsLetterForm },
   transition: 'slide-fade',
   data() {
     return {