Post cursor

docs/.vuepress/config.js

@@ -39,7 +39,7 @@ module.exports = {
           {
             id: 'post',
             dirname: '_posts',
-            path: '/',
+            path: '/posts/',
             layout: 'PostList',
             itemLayout: 'Post',
             pagination: {

docs/.vuepress/theme/layouts/Post.vue

@@ -11,6 +11,10 @@
     </div>
     <Content />
     <social-share :networks="['twitter', 'facebook']" is-plain/>
+    <div>
+       <router-link v-if="hasPrev" :to=prevPost.path>{{ prevPost.title }}</router-link> |
+       <router-link v-if="hasNext" :to=nextPost.path> {{ nextPost.title }}</router-link>
+    </div>
     <div class="comment">
       <Vssue :title="$title" />
     </div>
@@ -21,8 +25,71 @@
 import TimeAgo from '../components/TimeAgo';
 
 export default {
+  name: "post",
   components: {
     TimeAgo
   },
+  computed: {
+    hasPrev() {
+      return this.posts().findIndex(post => post.key === this.$page.key) > 0
+    },
+    hasNext() {
+      return this.posts().findIndex(post => post.key === this.$page.key) < this.posts().length - 1
+    },
+    prevPost() {
+      return this.posts()[this.posts().findIndex(post => post.key === this.$page.key)-1]
+    },
+    nextPost() {
+      return this.posts()[this.posts().findIndex(post => post.key === this.$page.key)+1]
+    },
+    currentPost(){
+      return this.posts()[this.posts().findIndex(post => post.key === this.$page.key)]
+    }
+  },
+  mounted: function(){
+    document.addEventListener('keydown', this.transitionPage, false);
+  },
+  beforeDestroy: function() {
+    document.removeEventListener('keydown', this.transitionPa, false);
+  },
+  methods: {
+    posts() {
+      const postReg = /^_posts\//
+      const posts = this.$site.pages.filter( (page) => {
+        return /^_posts/.test(page.relativePath)
+      })
+
+      const sortedPosts = posts.sort( (a,b) => {
+        const dateA = a.frontmatter.date;
+        const dateB = b.frontmatter.date;
+        if (dateA < dateB) {
+          return 1;
+        }
+        if (dateA > dateB) {
+          return -1;
+        }
+        return 0;
+      })
+      return sortedPosts;
+    },
+    transitionPage(e){
+      if (e.code === "ArrowRight") {
+        if (this.hasNext) {
+          this.transitionNextPost()
+        }
+      }else if(e.code === "ArrowLeft") {
+        if (this.hasPrev) {
+          this.transitionPrevPost()
+        }
+      }
+    },
+    transitionNextPost() {
+      this.$router.push( {path: this.nextPost.path })
+    },
+    transitionPrevPost() {
+      this.$router.push( {path: this.prevPost.path }).catch(err => {})
+    }
+  }
+
 }
 </script>

docs/.vuepress/theme/styles/index.styl

@@ -58,7 +58,6 @@ img,
 video,
 canvas,
 iframe
-  max-width 100%
 
 //
 // Shared
@@ -120,6 +119,11 @@ iframe
     background-size 100%
     vertical-align sub
 
+.icon
+  display block
+  margin-left auto
+  margin-right auto
+
 //
 // List View
 // -----------------------------------------
@@ -226,6 +230,12 @@ iframe
   .comment
     padding 60px 30px 30px 30px
 
+  iframe
+    max-width 100%
+    display block
+    margin-left auto
+    margin-right auto
+
 .post-head
   position relative
 

docs/README.md

@@ -0,0 +1,2 @@
+
+<img class="icon" src="icon.jpg">