Improve documentation about blog-module HOT 12 OPEN

/**
 *  use node fs and slugify to generate the routes based off of the files in the top-level blog directory
 *  you can name the directory anything
 **/
...
  generate: {
    routes: function () {
      return require('fs').readdirSync('blog').map(function (file) {
        return '/blog/' + require('slugify')(file.replace(/\.md$/, ''))
      })
    }
  }
...

/**
 * the key here is to use if (process.server)
 * I'm also using front-matter to grab metadata from the markdown files
 **/
...
    actions: {
      nuxtServerInit () {
        if (process.server) {
          const fs = require('fs')
          const files = fs.readdirSync('blog')
          const posts = files.map((file) => {
            let post = fm(fs.readFileSync(`blog/${file}`, 'utf8'))
            post.filename = file
            post.created = new Date(fs.statSync(`blog/${file}`).ctime)
            post.slug = slugify(file.replace(/\.md$/, ''), {lower: true})
            post.url = `/blog/${post.slug}`
            return post
          })
          this.dispatch('loadPosts', posts)
        }
      },
      loadPosts ({commit}, posts) {
        const sorted = posts.sort((a, b) => {
          if (a === b) {
            return 0
          }
          return (a.created < b.created) ? 1 : -1
        })
        commit('updatePosts', sorted)
      },
      loadPost ({commit}, slug) {
        const post = this.state.posts.find((post) => {
          return post.slug === slug
        })
        commit('updatePost', post)
      }
    }
...

<template>
    <el-row style="padding: 0 15%">
        <el-col>
            <base-page-title>{{post.attributes.title}}</base-page-title>
            <br>
            <small><i class="el-icon-date"></i> {{createdAt}}</small>
            <div v-html="postFile"></div>
        </el-col>
    </el-row>
</template>

<script>
    import {Col, Row} from 'element-ui'
    import {format} from 'date-fns'
    import BasePageTitle from '~/components/BasePageTitle'

    export default {
      components: {
        'el-row': Row,
        'el-col': Col,
        'base-page-title': BasePageTitle
      },
      fetch ({store, params}) {
        store.dispatch('loadPost', params.post)
      },
      head () {
        return {
          title: this.postTitle
        }
      },
      computed: {
        post () {
          return this.$store.getters.getPost
        },
        postFile () {
          if (this.post.filename) {
            return require(`~/blog/${this.post.filename}`)
          } else {
            return require('~/blog/not-found.md')
          }
        },
        createdAt () {
          return format(new Date(this.post.created), 'MMMM Do[,] YYYY')
        },
        postTitle () {
          return `Blog :: ${this.post.attributes.title}`
        }
      }
    }
</script>

// store/index.js

function sortByPublished(a, b) {
  if (a === b) {
    return 0;
  }
  return a.attributes.published < b.attributes.published ? 1 : -1;
}

export const state = () => ({
  posts: [],
  post: {}
});

export const getters = {
  getPost: state => {
    return state.post;
  },
  allPosts: state => {
    const posts = state.posts.filter(post => post.slug !== "not-found");
    return posts.sort((a, b) => sortByPublished(a, b));
  }
};

export const mutations = {
  updatePosts(state, posts) {
    state.posts = posts;
  },
  updatePost(state, post) {
    state.post = post;
  }
};

export const actions = {
  nuxtServerInit() {
    if (process.server) {
      const markdownFromDirectory = require("../utils/markdownFromDirectory");
      this.dispatch("loadPosts", markdownFromDirectory("blog"));
    }
  },
  loadPosts({ commit }, posts) {
    commit("updatePosts", posts);
  },
  loadPost({ commit, state }, slug) {
    const { posts } = state;
    commit("updatePost", posts.find(post => post.slug === slug));
  }
};

// utils/markdownFromDirectory.js

const slugify = require("slugify");
const fs = require("fs");
const fm = require("front-matter");

module.exports = function(directory) {
  return fs.readdirSync(`./content/${directory}`).map(file => {
    return {
      ...fm(fs.readFileSync(`./content/${directory}/${file}`, "utf8")),
      filename: file,
      get created() {
        return new Date(
          fs.statSync(`./content/${directory}/${file}`, "utf8").ctime
        );
      },
      get slug() {
        return slugify(file.replace(/\.md$/, ""), { lower: true });
      },
      get href() {
        return `/${directory}/${this.slug}`;
      }
    };
  });
};

// pages/blog/_post.vue

<template>
  <div class="post mb-6">
    <h1 class="text-blue-darker">{{ post.attributes.title }}</h1>
    <div class="flex -mx-2 mbitems-center text-grey-darker text-sm">
      <div>{{ createdAt }}</div>
    </div>
    <div class="flex -mx-2 mb-4 items-center text-grey-darker text-sm">
      <div>{{ post.attributes.author }}</div>
    </div>
    <div class="mb-2">
      <img
        v-lazy="post.attributes.featuredImage"
        :alt="`${post.title} featured image`"
      />
    </div>
    <div v-html="postFile"></div>
  </div>
</template>

<script>
export default {
  layout: "post",
  fetch({ store, params }) {
    store.dispatch("loadPost", params.post);
  },
  head() {
    return {
      title: this.postTitle
    };
  },
  computed: {
    post() {
      return this.$store.getters.getPost;
    },
    postFile() {
      if (this.post.filename) {
        return require(`~/content/blog/${this.post.filename}`);
      } else {
        return require("~/content/blog/not-found.md");
      }
    },
    createdAt() {
      return format(new Date(this.post.created), "MMMM Do[,] YYYY");
    },
    postTitle() {
      return `Blog :: ${this.post.attributes.title}`;
    }
  }
};
</script>

  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-container',
      'markdown-it-attrs',
      'markdown-it-meta'
    ]
  }

  nuxtServerInit() {
    if (process.server) {
      const markdownFromDirectory = require("../utils/markdownFromDirectory");
      this.dispatch("loadPosts", markdownFromDirectory("posts"));
    }
  },