Merge pull request #3 from moesoha/soha-1

Add a new theme 'so-clean', mock `currentUserID` with `req.query.currentUser`

src/templates/so-clean/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Darryl Dias
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/templates/so-clean/article.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import './common'
+import { initKatex } from 'scripts/article'
+import ArticleComments from './layouts/article_comments.vue'
+import ArticleVote from './layouts/article_vote.vue'
+import 'components/comment.css'
+import 'components/button.css'
+import 'components/form.css'
+import 'components/icon.css'
+
+initKatex()
+
+window.articleVote = new Vue({
+  el: '#article-vote',
+  render: h => h(ArticleVote)
+})
+
+window.articleComments = new Vue({
+  el: '#article-comments',
+  render: h => h(ArticleComments)
+})

src/templates/so-clean/article_list.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import './common'
+import ArticleList from './layouts/article_list.vue'
+
+window.articleList = new Vue({
+  el: '#article-list',
+  render: h => h(ArticleList)
+})

src/templates/so-clean/common.js

@@ -0,0 +1 @@
+import './styles/screen.css'

src/templates/so-clean/components/pagination.vue

@@ -0,0 +1,13 @@
+<template>
+	<nav class="pagination" role="navigation">
+		<a class="newer-posts" @click="callback(page - 1)" v-if="page > 1"><span aria-hidden="true">&larr;</span> 新点儿的</a>
+		<span class="page-number">第 {{ page }} / {{ totalPages }} 页</span>
+		<a class="older-posts" @click="callback(page + 1)" v-if="page < totalPages">旧点儿的 <span aria-hidden="true">&rarr;</span></a>
+	</nav>
+</template>
+
+<script>
+  export default {
+    props: ['callback', 'page', 'totalPages']
+  }
+</script>

src/templates/so-clean/handlebars/article/content.hbs

@@ -0,0 +1,23 @@
+<article id="blog-container" data-blogid="{{ postID }}" data-vote="{{ userVote }}" data-thumbUp="{{ postThumbUp }}">
+	<header>
+		<h1>
+			<a title="{{ postTitle }}">{{ postTitle }}</a>
+		</h1>
+		<br />
+		<small>
+			<time>{{ postTime }}</time>
+			{{#if isBlogAdmin}}
+				&emsp;
+				<a href="/blog/post_edit/{{ postID }}">编辑</a>
+			{{/if}}
+		</small>
+	</header>
+	<div class="kg-card-markdown" id="article-content">
+		{{{ postContent }}}
+	</div>
+	<br />
+	<br />
+	<div id="article-vote"></div>
+	<hr>
+	<div id="article-comments"></div>
+</article>

src/templates/so-clean/handlebars/article/scripts.hbs

@@ -0,0 +1,7 @@
+<script>
+    var blogContainer = document.getElementById("blog-container");
+    BlogGlobals.blogID = parseInt(blogContainer.getAttribute("data-blogid"));
+    BlogGlobals.vote = parseInt(blogContainer.getAttribute("data-vote"));
+    BlogGlobals.thumbUp = parseInt(blogContainer.getAttribute("data-thumbUp"));
+</script>
+<script src="/static/blog/so-clean/article.js"></script>

src/templates/so-clean/handlebars/article/styles.hbs

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/static/blog/so-clean/article.css">

src/templates/so-clean/handlebars/article_list/content.hbs

@@ -0,0 +1,2 @@
+<div id="article-list"></div>
+

src/templates/so-clean/handlebars/article_list/scripts.hbs

@@ -0,0 +1 @@
+<script src="/static/blog/so-clean/article_list.js"></script>

src/templates/so-clean/handlebars/article_list/styles.hbs

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/static/blog/so-clean/article_list.css">

src/templates/so-clean/handlebars/template.hbs

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+Theme: So Clean
+Description: A clean and simple theme for Ghost blogging platform
+URI: http://github.com/hashable/so-clean/
+Author: Darryl Dias
+Author URI: http://darryldias.me
+
+Luogu Blog Theme
+	So Clean
+Adapted by Soha Jin(uid=401,url=https://sohaj.in/)
+-->
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<title>{{ title }} - {{ blogName }}</title>
+		<meta charset="utf-8">
+		<meta name="HandheldFriendly" content="True" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="blog-uid" content="{{ blogUID }}">
+		<meta name="blog-name" content="{{ blogName }}">
+		<meta name="current-user" content="{{ currentUser }}">
+		{{>styles}}
+	</head>
+	<body class="paged" style="background-color:#fffaf2;">
+		<main>
+			<header>
+				<a class="logo" href="" title="{{ blogName }}">{{ blogSubtitle }}</a>
+				<nav role="main">
+					<a href=".">{{ blogName }}</a>
+					{{#if isBlogAdmin}}
+						<a href="{{ luoguAddress }}/blogAdmin">管理后台</a>
+					{{/if}}
+				</nav>
+			</header>
+			{{>content}}
+		</main>
+		<script>
+			var BlogGlobals = {
+				blogName: document.querySelector('meta[name=blog-name]').getAttribute('content'),
+				blogUID: parseInt(document.querySelector('meta[name=blog-uid]').getAttribute('content')),
+				currentUser: parseInt(document.querySelector('meta[name=current-user]').getAttribute('content')),
+				luoguAddress: '{{ luoguAddress }}',
+				picAddress: '{{ picAddress }}'
+			}
+		</script>
+		{{>scripts}}
+		<footer>
+			<hr />
+			<small class="credit">Powered by Luogu Blog. The Theme So Clean is designed by <a href="http://darryldias.me" title="Darryl Dias: Designer">Darryl Dias</a> and adapted by <a href="https://sohaj.in/" title="Soha Jin: Luogu UserID 401">Soha Jin</a></small>
+		</footer>
+	</body>
+</html>

src/templates/so-clean/layouts/article_comments.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="ui comments" id="article-comments">
+    <div v-if="uid">
+      <h3 class="ui dividing header">发表评论</h3>
+      <form class="ui reply form">
+        <div class="field">
+          <textarea title="" v-model="commentContent" style="height: 3em;padding: inherit;"></textarea>
+        </div>
+        <div class="ui blue labeled submit icon button"
+             :class="{ disabled: commentPosting }"
+             @click="postComment">
+          <i class="icon edit"></i> 评论
+        </div>
+      </form>
+	  <br />
+	  <hr>
+	  <br />
+    </div>
+	<div v-else>
+      <h3 class="ui dividing header">评论</h3>
+	</div>
+    <div v-if="ready">
+      <div class="comment" v-for="comment in comments">
+        <a class="avatar"
+           :href="BlogGlobals.luoguAddress +'/space/show?uid=' + comment.Author.UID"
+           target="_blank">
+          <img :src="BlogGlobals.picAddress + '/upload/usericon/' + comment.Author.UID + '.png'">
+        </a>
+        <div class="content">
+          <a class="author"
+             :href="BlogGlobals.luoguAddress + '/space/show?uid=' + comment.Author.UID"
+             target="_blank">
+            {{ comment.Author.Username }}
+          </a>
+          <div class="metadata">
+            <span class="date">发表于 {{ comment.ReplyTime | formatDate }}</span>
+          </div>
+          <div class="text">
+            {{ comment.Content }}&nbsp;
+          </div>
+        </div>
+      </div>
+
+      <pagination v-if="ready" :page="page" :totalPages="totalPages" :callback="getComments"></pagination>
+    </div>
+    <p v-else>正在加载...</p>
+  </div>
+</template>
+
+<script>
+  import pagination from '../components/pagination.vue'
+  import { defaultData, defaultMounted, getComments, postComment } from 'scripts/article_comments'
+  import formatDate from 'plugins/format_date'
+  export default {
+    data: defaultData,
+    mounted: defaultMounted,
+    methods: { getComments, postComment },
+    filters: { formatDate },
+    components: { pagination }
+  }
+</script>
+

src/templates/so-clean/layouts/article_list.vue

@@ -0,0 +1,28 @@
+<template>
+	<div id="article-list">
+		<article v-for="post in posts">
+			<header>
+				<h1>
+					<a :href="post.Identifier">{{ post.Title }}</a>
+				</h1>
+				<br />
+				<small><time>{{ post.PostTime | formatDate }}</time></small>
+			</header>
+			<p>{{ post.ContentDescription }}</p>
+		</article>
+		<pagination v-if="ready" :page="page" :totalPages="totalPages" :callback="getPosts"></pagination>
+	</div>
+</template>
+
+<script>
+  import pagination from '../components/pagination.vue'
+  import { defaultData, defaultMounted, getPosts } from 'scripts/article_list'
+  import formatDate from 'plugins/format_date'
+  export default {
+    data: defaultData,
+    mounted: defaultMounted,
+    methods: { getPosts },
+    filters: { formatDate },
+    components: { pagination }
+  }
+</script>

src/templates/so-clean/layouts/article_vote.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="article-vote">
+		<div v-if="uid">
+			<div v-if="vote===0">
+				<a @click="performVote(1)">赞 <span>{{ thumbUp }}</span></a> | <a @click="performVote(-1)">踩</a>
+			</div>
+			<div v-else>
+				<a @click="performVote(vote)">取消<span v-if="vote==1">赞</span><span v-if="vote==-1">踩</span> <span>{{ thumbUp }}</span></a>
+			</div>
+		</div>
+		<div v-else>
+			本文目前已有 {{ thumbUp }} 个赞。
+		</div>
+  </div>
+</template>
+
+<script>
+  import { defaultData, performVote } from 'scripts/article'
+  export default {
+    data: defaultData,
+    computed: {
+      canVoteUp () {
+        return this.checkCanVote(1)
+      },
+      canVoteDown () {
+        return this.checkCanVote(-1)
+      }
+    },
+    methods: {
+      performVote,
+      checkCanVote (voteType) {
+        // Must be logged in, and either not voted,
+        // or voted the same voteType,
+        // (in which case triggers un-vote)
+        return this.uid && (this.vote === 0 || this.vote === voteType)
+      }
+    }
+  }
+</script>