Big change, hope it works!!!

.eslintrc.js

@@ -2,23 +2,24 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
-  extends: [
-    'plugin:vue/recommended',
-    'plugin:prettier/recommended'
-  ],
+  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
   // required to lint *.vue files
-  plugins: [
-    'vue',
-    'prettier'
-  ],
+  plugins: ['vue', 'prettier'],
   // add your custom rules here
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'comma-dangle': [
+      'error',
+      {
+        arrays: 'only-multiline',
+        objects: 'only-multiline',
+      },
+    ],
+  },
 }

.gitlab-ci.yml

@@ -10,8 +10,6 @@ cache:
 pages:
   script:
     - yarn generate
-    - mkdir public
-    - mv dist/* public/
   artifacts:
     paths:
       - public

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "es5"
 }

assets/sass/_utilities.sass

@@ -1,3 +1,4 @@
+@import '~bulma/sass/utilities/initial-variables'
 @import '~bulma/sass/utilities/functions'
   
 $pink: #F4ACB7
@@ -21,3 +22,5 @@ $warning: $bright
 $warning-invert: $bright-invert
 $link: $purple
 $link-invert: $purple-invert
+
+@import '~bulma/sass/utilities/all'

assets/sass/mat.sass

@@ -1,6 +1,4 @@
-@import '~bulma/sass/utilities/initial-variables'
-
-@import 'variables'
+@import 'utilities'
 
 @import '~bulma/bulma'
 

content/2018-10-16-BlogWithVueNuxtNuxtent.md

@@ -0,0 +1,15 @@
+---
+title: writing your own blog in Vue, powered by Nuxt, and Nuxtent
+tagline: break free from boring jekyll themes
+tags:
+  - blog
+  - vue
+  - vuejs
+  - nuxt
+  - nuxtent
+  - markdown
+  - static site
+  - github pages
+  - gitlab pages
+draft: true
+---

content/2018-10-17-FirstPost.md

@@ -0,0 +1,22 @@
+---
+title: hi, world
+tagline: my personal introduction to the world of words on the web
+tags:
+  - first post
+  - introduction
+  - tech blog
+  - creative writing
+---
+
+hi, world! this is my first blog post. i'm hoping to use this as part creative outlet, part
+self-encouragement to see technical projects through, and part place to document my learning so i
+can go back and look at all the things i forgot, one day.
+
+to those of you who don't know me, here's a brief introduction: my name is mat! i'm a communist,
+a [partner][1], and generally (at the very least) something of a curmudgeon. i have a number of
+strong opinions, especially about technology and politics. i have a love for art, and, in another
+life, i really wish that i'd studied philosophy or music.
+
+if you have ideas for me to blog about, feel free to reach out to me at mess [at] yelp [dot] com.
+
+[1]: https://macklovesmatt.com/ 'me and my partner'

middleware/README.md

@@ -1,8 +0,0 @@
-# MIDDLEWARE
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your application middleware.
-The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

nuxt.config.js

@@ -1,6 +1,6 @@
-const pkg = require('./package') // javascript.validate.enable false
+import pkg from './package'
 
-module.exports = {
+export default {
   mode: 'universal',
 
   /*
@@ -31,20 +31,29 @@ module.exports = {
   /*
   ** Plugins to load before mounting the App
   */
-  plugins: [],
+  plugins: ['~/plugins/filters.js'],
 
   /*
   ** Nuxt.js modules
   */
   modules: ['@nuxtjs/bulma', 'nuxtent'],
 
+  /*
+  ** Static Site Generation configuration
+  */
+  generate: {
+    dir: 'public'
+  },
+
   /*
   ** Nuxtent configuration
   */
   nuxtent: {
-    page: '/posts/_slug',
+    content: {
+      page: '/blog/_slug',
       permalink: ':slug',
       generate: ['get', 'getAll']
+    }
   },
 
   /*

pages/README.md

@@ -1,6 +0,0 @@
-# PAGES
-
-This directory contains your Application Views and Routes.
-The framework reads all the `*.vue` files inside this directory and create the router of your application.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

pages/blog.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+#blog
+  nuxt-link(to='/blog')
+    h1.title.has-text-centered ~ a mess of words ~
+  #top
+  nuxt-child
+</template>
+
+<script>
+export default {
+  async asyncData({ app }) {
+    return {
+      listing: await app.$content('/').getAll()
+    }
+  },
+  head() {
+    return { title: 'blog' }
+  },
+  layout: 'compact'
+}
+</script>
+
+<style lang="sass" scoped>
+.title
+  margin-bottom: 5rem
+</style>

pages/blog/_slug.vue

@@ -1,9 +1,41 @@
 <template lang="pug">
 #post
+  h1.title {{ post.title }}
+  h2.subtitle {{ post.tagline }}
+  p {{ post.date | prettifyDateLong }}
+  hr
+  .post-body.content(v-html='post.body')
+  a(href='#top') top
 </template>
 
 <script>
 export default {
-  layout: 'compact'
+  async asyncData({ app, params, payload }) {
+    return {
+      post: await app.$content('/').get(params.slug),
+    }
+  },
+  head() {
+    return {
+      title: this.post.title,
+    }
+  },
+  beforeMount() {
+    if (this.post.draft) {
+      this.$router.replace('/blog')
+    }
+  },
+  layout: 'compact',
 }
 </script>
+
+<style lang="sass" scoped>
+@import '~assets/sass/utilities'
+
+.post-body
+  width: 75%
+  margin-bottom: 5rem
+  font-size: $size-medium
+  a
+    text-decoration: underline
+</style>

pages/blog/index.vue

@@ -1,17 +1,43 @@
 <template lang="pug">
-#blog
+ul.blog-items
+  li.blog-item(v-for='(post, index) in listing' v-if='!post.draft')
+    nuxt-link(:to='post.path')
+      span.post-title {{ post.title }}
+      span.post-date {{ post.date | prettifyDate }}
+      .post-tagline {{ post.tagline }}
+    hr(v-if='index < listing.length - 1')
 </template>
 
 <script>
 export default {
-  asyncData({ app, route }) {
-    console.log(route)
-  },
-  head() {
+  async asyncData({ app }) {
     return {
-      title: 'blog'
+      listing: await app
+        .$content('/')
+        .query({ exclude: ['body', 'meta', 'permalink', 'anchors'] })
+        .getAll()
     }
   },
   layout: 'compact'
 }
 </script>
+
+<style lang="sass" scoped>
+@import '~assets/sass/utilities'
+
+.blog-items
+  +desktop
+    width: 75%
+  margin: 0 auto
+.blog-item
+  margin-bottom: 3rem
+.post-title
+  font-size: $size-medium
+.post-date
+  float: right
+.post-tagline
+  font-size: $size-normal
+  color: $grey-light
+  margin-bottom: 1rem
+  width: fit-content
+</style>

pages/projects.vue

@@ -33,21 +33,19 @@
     or my older #[a.has-text-info(href='https://github.com/matthewess') github account].
 </template>
 
+<script>
+export default {
+  head() {
+    return { title: 'projects' }
+  },
+  layout: 'compact'
+}
+</script>
+
 <style lang="sass" scoped>
-@import '~bulma/sass/utilities/mixins'
+@import '~assets/sass/utilities'
 
 +desktop
   .is-half
     width: 50%
 </style>
-
-<script>
-export default {
-  head() {
-    return {
-      title: 'projects'
-    }
-  },
-  layout: 'compact'
-}
-</script>

pages/resume.vue

@@ -47,23 +47,15 @@
 <script>
 export default {
   head() {
-    return {
-      title: 'resume'
-    }
+    return { title: 'resume' }
   },
   layout: 'compact'
 }
 </script>
 
 <style lang="sass" scoped>
-@import '~bulma/sass/utilities/mixins'
-@import '~assets/sass/variables'
+@import '~assets/sass/utilities'
 
-$background: $primary
-
-hr
-  height: 0.5rem
-  background: $background
 +desktop
   .is-three-quarters
     width: 75%

plugins/README.md

@@ -1,7 +0,0 @@
-# PLUGINS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Javascript plugins that you want to run before mounting the root Vue.js application.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

plugins/filters.js

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+
+const monthNames = [
+  { short: 'jan', long: 'january' },
+  { short: 'feb', long: 'february' },
+  { short: 'mar', long: 'march' },
+  { short: 'apr', long: 'april' },
+  { short: 'may', long: 'may' },
+  { short: 'jun', long: 'june' },
+  { short: 'jul', long: 'july' },
+  { short: 'aug', long: 'august' },
+  { short: 'sep', long: 'september' },
+  { short: 'oct', long: 'october' },
+  { short: 'nov', long: 'november' },
+  { short: 'dec', long: 'december' },
+]
+
+/*
+** Very confusing to read, but this takes the YYYY-MM-DD format from posts
+** and makes it readable in the way I want: either
+** 'mon DD', 'mon DD YY', or 'month DD YYYY'
+*/
+const prettifyDate = (date, long) => {
+  date = date.split('-')
+  const month = monthNames[parseInt(date[1]) - 1] || {
+    short: date[1],
+    long: date[1],
+  }
+  const day = date[2]
+  const year = date[0]
+  const thisYear = year == new Date().getFullYear()
+  return `${long ? month.long : month.short} ${day} ${
+    long ? year : thisYear ? '' : year.substring(2)
+  }`
+}
+
+Vue.filter('prettifyDate', date => prettifyDate(date, false))
+Vue.filter('prettifyDateLong', date => prettifyDate(date, true))

static/README.md

@@ -1,10 +0,0 @@
-# STATIC
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your static files.
-Each file inside this directory is mapped to `/`.
-
-Example: `/static/robots.txt` is mapped as `/robots.txt`.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).