Skip to content
Permalink
Browse files

Vuepress. Fix #6

  • Loading branch information
octref committed Jun 24, 2018
1 parent 79168d3 commit 46e58961d720581cafbedcac7d191f1775bd2127
@@ -1,2 +1 @@
public
themes/shiro/static/css/main.css
/public
@@ -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.
@@ -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;
}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

@@ -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>
@@ -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).

This file was deleted.

This file was deleted.

0 comments on commit 46e5896

Please sign in to comment.