New Vuepress Site

.github/workflows/deploy.yml

@@ -0,0 +1,26 @@
+name: Github Pages Deployment
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: '12'
+
+      - run: npm install
+      - run: npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./.vuepress/dist

.gitignore

@@ -1,7 +1,4 @@
-_site
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor
-*.iml
-.idea/
+node_modules
+.vuepress/dist/
+npm-debug.log
+.DS_Store

.vuepress/components/BlogPosts.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div v-for="post in posts">
+      <section class="blog-post">
+        <time class="published">{{ post.date }}</time>
+        <h2 class="title">
+          <a v-bind:href="post.path" class="link">{{ post.title }}</a>
+        </h2>
+        <p v-if="post.frontmatter.excerpt" class="excerpt">
+          {{ post.frontmatter.excerpt }}
+        </p>
+        <a class="read-more" v-bind:href="post.path"> Read More →</a>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BlogPosts",
+  computed: {
+    posts() {
+      return this.$site.pages
+        .filter((p) => {
+          return p.path.indexOf("/blog/") >= 0 && p.path != "/blog/";
+        })
+        .map((p) => {
+          let path = p.path.replace("/blog/", "");
+          return { ...p, path: path, date: path.substring(0, 10) };
+        })
+        .sort((a, b) => new Date(b.date) - new Date(a.date));
+    },
+  },
+};
+</script>
+
+<style scoped>
+.blog-post {
+  margin-bottom: 2.5rem;
+}
+.excerpt {
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 1.2rem;
+}
+.link {
+  font-weight: 700;
+  color: #2c3e50;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.published {
+  font-weight: 400;
+}
+.title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 24px;
+}
+.read-more {
+  font-weight: 500;
+  border: 1px solid #3eaf7c;
+  border-radius: 4px;
+  color: #3eaf7c;
+  font-size: 0.9rem;
+  padding: 0.3rem 0.6rem;
+  box-shadow: 0 0;
+  display: inline-block;
+}
+</style>