Vuepress. Fix #6

.gitignore

@@ -1,2 +1 @@
-public
-themes/shiro/static/css/main.css
+/public

.vuepress/config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  dest: 'public',
+  title: `Pine Wu's Blog`,
+  description: `Pine Wu's Blog`,
+  markdown: {
+    anchor: {
+      permalink: false
+    }
+  },
+  head: [
+    ['link', { rel: 'shortcut icon', href: '/favicon.ico' }],
+    ['link', { rel: 'stylesheet', href: '/style.css' }]
+  ]
+}

static/css/style.css → .vuepress/public/style.css

@@ -46,7 +46,8 @@ a {
   color: #6f92ba;
   transition: color .4s;
 }
-a:before {
+
+#main a:before {
   content: "";
   position: absolute;
   width: 100%;
@@ -57,10 +58,11 @@ a:before {
   transform: scaleX(0);
   transition: all 0.2s var(--ease) 0s;
 }
-a:hover:before {
+#main a:hover:before {
   visibility: visible;
   transform: scaleX(1);
 }
+
 /**
  * Chrome
  */
@@ -73,14 +75,13 @@ a:hover:before {
  * Skeleton
  */
 
-#content hr {
+#main hr {
   border-top: none;
   margin-top: 1.4rem;
   margin-bottom: 1.4rem;
   max-width: 44rem !important;
 }
 
-
 #header {
   max-width: 34rem;
 }
@@ -97,15 +98,19 @@ a:hover:before {
   background-color: #777;
   color: #fff;
 }
+#header nav {
+  display: flex;
+  justify-content: space-between;
+}
 
-#content > ul,
-#content #text > * {
+#main > ul,
+#main .content.custom > * {
   max-width: 34rem;
   margin-left: auto;
   margin-right: auto;
 }
-#content #text pre,
-#content #text figure {
+#main .content.custom pre,
+#main .content.custom figure {
   max-width: 44rem;
 }
 
@@ -117,6 +122,10 @@ code {
 }
 code { white-space: nowrap; }
 pre code { white-space: pre; }
+pre code {
+  display: block;
+  padding: 1rem;
+}
 pre {
   overflow: auto;
   overflow-wrap: break-word;
@@ -129,7 +138,80 @@ pre {
     margin-left: 1rem;
     margin-right: 1rem;
   }
-  #content ul li {
+  #main ul li {
     flex-flow: column nowrap;
   }
 }
+
+/**
+ * Tomorrow Theme
+ */
+
+/* Tomorrow Comment */
+pre code .token.comment,
+pre code .token.quote {
+  color: #8e908c;
+}
+
+/* Tomorrow Red */
+pre code .token.variable,
+pre code .token.template-variable,
+pre code .token.tag,
+pre code .token.name,
+pre code .token.selector-id,
+pre code .token.selector-class,
+pre code .token.regexp,
+pre code .token.deletion {
+  color: #c82829;
+}
+
+/* Tomorrow Orange */
+pre code .token.number,
+pre code .token.built_in,
+pre code .token.builtin-name,
+pre code .token.literal,
+pre code .token.type,
+pre code .token.params,
+pre code .token.meta,
+pre code .token.link {
+  color: #f5871f;
+}
+
+/* Tomorrow Yellow */
+pre code .token.attribute {
+  color: #eab700;
+}
+
+/* Tomorrow Green */
+pre code .token.string,
+pre code .token.symbol,
+pre code .token.bullet,
+pre code .token.addition {
+  color: #718c00;
+}
+
+/* Tomorrow Blue */
+pre code .token.title,
+pre code .token.section {
+  color: #4271ae;
+}
+
+/* Tomorrow Purple */
+pre code .token.keyword,
+pre code .token.selector-tag {
+  color: #8959a8;
+}
+
+.hljs {
+  display: block;
+  padding: 1em;
+  background-color: #f7f7f7;
+}
+
+pre code .token.emphasis {
+  font-style: italic;
+}
+
+pre code .token.strong {
+  font-weight: bold;
+}

.vuepress/theme/BlogItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <li class="flex justify-between pb3">
+    <a class="link" :href="cleanPath">{{ page.title }}</a>
+    <span class="date gray">{{ page.frontmatter.date }}</span>
+  </li>
+</template>
+
+<script>
+export default {
+  props: ['page'],
+  computed: {
+    cleanPath() {
+      return this.page.path.replace(/.html$/g, '')
+    }
+  }
+}
+</script>

.vuepress/theme/Home.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="f6 avenir">
+    <Nav :page="$page" />
+
+    <section id="main" class="gray mb6 lh-copy">
+      <ul class="ph0">
+        <BlogItem
+          v-for="(page ,i) in postsOrderedByDate"
+          v-if="!page.frontmatter.top_page"
+          :page="page" :key="i"
+        ></BlogItem>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+import Nav from './Nav.vue'
+import BlogItem from './BlogItem.vue'
+
+export default {
+  components: { Nav, BlogItem },
+  computed: {
+    postsOrderedByDate() {
+      return this.$site.pages
+        .filter(p => !p.frontmatter.top_page)
+        .sort((p1, p2) => p1 > p2)
+        .reverse()
+    },
+    data() {
+      return this.$page.frontmatter
+    }
+  }
+}
+</script>

.vuepress/theme/Layout.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="theme-container">
+    <Home v-if="$page.frontmatter.home"/>
+    <Page v-else></Page>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Home from './Home.vue'
+import Page from './Page.vue'
+
+export default {
+  components: { Home, Page }
+}
+</script>

.vuepress/theme/Nav.vue

@@ -0,0 +1,20 @@
+<template>
+  <header id="header" class="measure-wide center mt6 mb4">
+    <nav>
+      <div class="mb2 dib">
+        <a class="gray link" :class="{ active: page.path !== '/about' }" href="/" title="blog">blog</a>
+        .
+        <a class="gray link" :class="{ active: page.path === '/about' }" href="/about" title="matsu">matsu</a>
+      </div>
+      <div>
+        <a class="rss gray link" href="/feed.xml" title="matsu" >/rss</a>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script>
+export default {
+  props: ['page']
+}
+</script>

.vuepress/theme/NotFound.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="f6 avenir">
+    <header id="header" class="measure-wide center mt6 mb4">
+      <nav>
+        <div class="mb2 dib">
+          <a class="gray link active" href="/" title="blog">blog</a>
+          .
+          <a class="gray link" href="/about" title="matsu">matsu</a>
+        </div>
+      </nav>
+    </header>
+
+    <section id="main" class="gray mb6 lh-copy">
+      <div class="content custom">
+        <p>Nothing found.</p>
+      </div>
+    </section>
+  </div>
+</template>
+

.vuepress/theme/Page.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="f6 avenir">
+    <Nav :page="$page" />
+
+    <section id="main" class="gray mb6 lh-copy">
+      <ul class="ph0">
+        <BlogItem :page="$page"></BlogItem>
+      </ul>
+      <Content/>
+    </section>
+  </div>
+</template>
+
+<script>
+import Nav from './Nav.vue'
+import BlogItem from './BlogItem.vue'
+
+export default {
+  components: { Nav, BlogItem }
+}
+</script>

about.md

@@ -0,0 +1,16 @@
+---
+title: 'About'
+lastUpdated: '2016-09-18'
+top_page: true
+---
+
+Hi, I'm Pine. I work on Visual Studio Code at Microsoft.
+
+Software engineer is my title, but I aim to become an Information Architect. In the literary level, I work to organize and present information at the right place & time. In a figurative sense, I try to approach programming with empathy and ethics, despite programming itself being a very technical endeavor.
+
+Some projects that I work on:
+
+- [Vetur](https://github.com/vuejs/vetur): Vue tooling for VS Code.
+- [Polacode](https://github.com/octref/polacode): Polaroid for your code.
+
+You can find me on [GitHub](https://github.com/octref) and [Twitter](https://twitter.com/octref).