feat: the first version 🎉

Layout.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="theme-container">
+    <header class="header">
+      <router-link to="/">
+        {{ $site.title }}
+      </router-link>
+      <div style="clear: both" />
+    </header>
+    <HomePage v-if="isHome" />
+    <PostPage v-else />
+    <footer-bar />
+  </div>
+</template>
+
+<script>
+import HomePage from "./components/Home";
+import PostPage from "./components/Post";
+import FooterBar from './components/FooterBar';
+
+export default {
+  components: {
+    HomePage,
+    PostPage,
+    FooterBar,
+  },
+  computed: {
+    isHome() {
+      return this.$page.path === "/";
+    }
+  }
+};
+</script>

components/FooterBar.vue

@@ -0,0 +1,22 @@
+<template>
+  <footer class="footer">
+    Copyright © {{ thisYear }} | Powered by
+    <a
+      href="https://github.com/viko16/vuepress-theme-simple"
+      rel="noopener"
+      target="_blank"
+    >
+      vuepress-theme-simple
+    </a>
+  </footer>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      thisYear: new Date().getFullYear()
+    }
+  }
+}
+</script>

components/Home.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="list-view">
+    <ol class="list">
+      <li
+        v-for="page of filteredList"
+        :key="page.key"
+        class="list-item"
+      >
+        <router-link
+          :to="page.path"
+          class="item-title"
+        >
+          {{ page.title }}
+        </router-link>
+        <br>
+        <time-ago
+          :last-updated="page.frontmatter.date || page.lastUpdated"
+          class="item-date"
+        />
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+import TimeAgo from './TimeAgo';
+
+export default {
+  components: {
+    TimeAgo
+  },
+  computed: {
+    filteredList() {
+      // Order by publish date, desc
+      return this.$site.pages
+        .filter(item => item.path !== '/')
+        .sort((a, b) => {
+          return new Date(b.frontmatter.date || b.lastUpdated) - new Date(a.frontmatter.date || a.lastUpdated)
+        })
+    }
+  },
+}
+</script>

components/Post.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="post-view">
+    <h1 class="post-title">
+      {{ $page.title }}
+      <time-ago
+        :last-updated="$page.frontmatter.date || $page.lastUpdated"
+        class="post-date"
+      />
+    </h1>
+    <Content />
+  </section>
+</template>
+
+<script>
+import TimeAgo from './TimeAgo';
+
+export default {
+  components: {
+    TimeAgo
+  },
+}
+</script>

components/TimeAgo.vue

@@ -0,0 +1,32 @@
+<template>
+  <time
+    :datetime="lastUpdated | formatDate"
+    :title="lastUpdated | formatDate"
+    pubdate="pubdate"
+  >
+    {{ lastUpdated | timeago($lang) }}
+  </time>
+</template>
+
+<script>
+import { format } from 'timeago.js';
+
+export default {
+  filters: {
+    timeago: (str, lang) => {
+      if (!str) return format()
+      const locale = (lang === 'zh-CN') ? 'zh_CN': 'en_US'
+      return format(new Date(str), locale)
+    },
+    formatDate: date => {
+      return new Date(date).toLocaleDateString()
+    }
+  },
+  props: {
+    lastUpdated: {
+      type: [ String, Date, Number ],
+      default: ''
+    },
+  },
+}
+</script>

index.js

@@ -1 +1,3 @@
-// required by VuePress theme rules, but nothing here.
+module.exports = {
+  plugins: ['@vuepress/last-updated']
+}

package.json

@@ -8,5 +8,10 @@
   "devDependencies": {
     "eslint": "^5.13.0",
     "eslint-plugin-vue": "^5.1.0"
+  },
+  "dependencies": {
+    "@vuepress/plugin-last-updated": "^1.0.0-alpha.0",
+    "prismjs": "^1.15.0",
+    "timeago.js": "^4.0.0-beta.2"
   }
 }

styles/index.styl

@@ -0,0 +1,214 @@
+@import '~prismjs/themes/prism.css'
+
+//
+// Variable
+// -----------------------------------------
+
+fontSize = 14px
+
+fontFamily = "Source Sans Pro", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif
+monospaceFontFamily = "Ubuntu Mono" ,"PT Mono", Consolas, Monaco, Menlo, monospace
+
+bgColor = #fff
+textColor = #555
+linkColor = #08c
+metaColor = #888
+codeBgColor = #f7f7f7
+
+//
+// Common
+// -----------------------------------------
+
+/::-moz-selection,
+/::selection
+  background #B2D7FF
+
+body
+  // font
+  font-family fontFamily
+  font-size fontSize
+  line-height 2
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  -webkit-text-size-adjust none
+  // size
+  position relative
+  max-width 700px
+  margin 0 auto
+  padding 0
+  background bgColor
+  color textColor
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  font-weight 400
+  position relative
+
+a
+  text-decoration none
+  color linkColor
+  overflow-wrap break-word
+  word-break break-all
+
+//
+// Shared
+// -----------------------------------------
+
+.header
+  margin 50px auto
+  text-align center
+  a
+    font-size fontSize + 2
+    letter-spacing 5px
+    text-transform uppercase
+    color textColor
+
+.searchbar-input
+  display block
+  margin 5px auto 0
+  width 150px
+  font-family fontFamily
+  font-size fontSize
+  text-align center
+  line-height 1.5
+  border none
+  background-color bgColor
+  color metaColor
+  &:hover,
+  &:focus,
+  &:active
+    outline none
+    background-color darken(bgColor, 2)
+    text-decoration none
+    color textColor
+
+.footer
+  margin-bottom 15px
+  text-align center
+  color metaColor
+  a
+    color metaColor
+    text-decoration underline
+
+//
+// List View
+// -----------------------------------------
+
+.list-view
+  margin 0 20px
+  ol,
+  ul
+    padding 0
+    list-style none
+
+.list-item
+  position relative
+  margin-bottom 50px
+
+.item-title
+  display inline-block
+  margin-bottom 10px
+  font-size fontSize + 2
+  color textColor
+  &:hover
+    color linkColor
+
+.item-date
+  display inline-block
+  font-size fontSize - 2
+  color metaColor
+  border-top 1px solid #ddd
+  padding-top 12px
+
+//
+// Post View
+// -----------------------------------------
+
+.post-view
+  margin 0 20px 50px
+  // overflow-x hidden
+  a.header-anchor
+    position absolute
+    left -30px
+    width 30px
+    text-align center
+    visibility hidden
+
+  h1:hover a.header-anchor,
+  h2:hover a.header-anchor,
+  h3:hover a.header-anchor,
+  h4:hover a.header-anchor,
+  h5:hover a.header-anchor,
+  h6:hover a.header-anchor
+    visibility visible
+
+  a[href]:not(.header-anchor)
+    position relative
+    &:hover
+      border-bottom 1px dashed linkColor
+    // thanks longsien/BareCSS
+    // https://github.com/longsien/BareCSS/blob/v1.1.0/less/_tooltip.less
+    &:after
+      content attr(href)
+      position absolute
+      left 50%
+      top 0
+      visibility hidden
+      pointer-events none
+      transform translate(-50%, -95%)
+      transition all 0.1s ease-in-out
+      overflow visible
+      padding 0 10px
+      background #454f54
+      font-size 0.8em
+      border-radius 5px
+      color #ffffff
+      line-height 2
+      white-space nowrap
+      opacity 0.9
+    &:hover:after
+      visibility visible
+      transform translate(-50%, calc(-100% - 5px))
+
+.post-title
+  font-size fontSize * 2
+  margin-bottom 50px
+  line-height 1
+
+// when smaller than tablet
+@media (max-width: 767px)
+  .post-title
+    font-size 1.5em
+
+.post-date
+  float right
+  font-size fontSize - 2
+  font-weight 400
+  line-height 2
+  color metaColor
+
+code
+  background codeBgColor
+  font-family monospaceFontFamily !important
+  padding 0 5px
+
+blockquote
+  margin 0
+  padding 0 16px
+  border-left 4px solid #ddd
+
+//
+// Override prism
+// -----------------------------------------
+
+code[class*="language-"],
+pre[class*="language-"]
+  color textColor
+  background codeBgColor
+  padding 16px
+  font-family monospaceFontFamily !important
+