Skip to content

Commit

Permalink
Vuepress. Fix #6
Browse files Browse the repository at this point in the history
  • Loading branch information
octref committed Jun 24, 2018
1 parent 79168d3 commit 46e5896
Show file tree
Hide file tree
Showing 35 changed files with 6,453 additions and 236 deletions.
3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
public
themes/shiro/static/css/main.css
/public
14 changes: 14 additions & 0 deletions .vuepress/config.js
Original file line number Diff line number Diff line change
@@ -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' }]
]
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
100 changes: 91 additions & 9 deletions static/css/style.css → .vuepress/public/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ a {
color: #6f92ba;
transition: color .4s;
}
a:before {

#main a:before {
content: "";
position: absolute;
width: 100%;
Expand All @@ -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
*/
Expand All @@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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;
Expand All @@ -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;
}
17 changes: 17 additions & 0 deletions .vuepress/theme/BlogItem.vue
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 35 additions & 0 deletions .vuepress/theme/Home.vue
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 16 additions & 0 deletions .vuepress/theme/Layout.vue
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions .vuepress/theme/Nav.vue
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions .vuepress/theme/NotFound.vue
Original file line number Diff line number Diff line change
@@ -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>

21 changes: 21 additions & 0 deletions .vuepress/theme/Page.vue
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 16 additions & 0 deletions about.md
Original file line number Diff line number Diff line change
@@ -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).
16 changes: 0 additions & 16 deletions config.toml

This file was deleted.

10 changes: 0 additions & 10 deletions content/about.md

This file was deleted.

Loading

0 comments on commit 46e5896

Please sign in to comment.