@vuepress/plugin-blog usage

This repository contains my findings of how to configure and use VuePress 1.x blog plugin...

• create project

  npx create-vuepress-site
  mv docs create-vuepress-site-example && cd $_
  npm i -ED @vuepress/plugin-blog natural-compare-lite

• create posts

  mkdir -p src/_posts/
  mv src/index.md src/_posts/
  mv src/config/README.md src/_posts/config-README.md
  mv src/guide/README.md src/_posts/guide-README.md  
  mv src/guide/using-vue.md src/_posts/guide-using-vue.md

• configure @vuepress/plugin-blog

  vi src/.vuepress/config.js

  /*
  themeConfig: {
    repo: '',
    editLinks: false,
    docsDir: '',
    editLinkText: '',
    lastUpdated: false,
    nav: [
      {
        text: 'Guide',
        link: '/guide/',
      },
      {
        text: 'Config',
        link: '/config/'
      },
      {
        text: 'VuePress',
        link: 'https://v1.vuepress.vuejs.org'
      }
    ],
    sidebar: {
      '/guide/': [
        {
          title: 'Guide',
          collapsable: false,
          children: [
            '',
            'using-vue',
          ]
        }
      ],
    }
  },
  */

  /*
  plugins: [
    '@vuepress/plugin-back-to-top',
    '@vuepress/plugin-medium-zoom',
  ]
  */

  plugins: [
    ["@vuepress/blog", {
      directories: [
        {
          id: 'post', // Unique ID of current classification
          dirname: '_posts', // Target directory
          path: '/post/', // Posts context path
          itemPermalink: '/post/:year/:month/:day/:slug', // Requires if path is not '/'
        },
      ],
    }],
  ]

  • update app enhancer to list and link all posts

  import naturalCompare from 'natural-compare-lite';
      
  export default ({ Vue }) => {
    Vue.mixin({
      computed: { 
        $allPostsInDescendingOrder() {
          return this.$site.pages
                     .filter(p => p.path.indexOf('/post/') === 0)
                     .map(({ title, path }) => ({ title, path, sortBy: path.replace('/post/', '/') }))
                     .filter(p => p.sortBy.length > 1)
                     .sort((a, b) => naturalCompare(b.sortBy, a.sortBy))
        },
      },
    });
  }

• TODO: tags, pagination, etc...

links

• Sort JavaScript arrays in natural order
• VuePress getting started guide
• Example of an app enhancer
• My vuepress-plugin-blog GitHub issue with a questions