404
+{{ getMsg() }}+
+
+
+
+
diff --git a/assets/search.svg b/assets/search.svg
new file mode 100644
index 0000000..03d8391
--- /dev/null
+++ b/assets/search.svg
@@ -0,0 +1 @@
+
diff --git a/components/AnimationButton.vue b/components/AnimationButton.vue
new file mode 100644
index 0000000..8dcbc70
--- /dev/null
+++ b/components/AnimationButton.vue
@@ -0,0 +1,48 @@
+
+
+ {{ item.text }}
+
+
+
diff --git a/components/ArticleCard.vue b/components/ArticleCard.vue
new file mode 100644
index 0000000..a4edd76
--- /dev/null
+++ b/components/ArticleCard.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
+
+ ![overview]()
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/ArticleGroup.vue b/components/ArticleGroup.vue
new file mode 100644
index 0000000..7c2b84f
--- /dev/null
+++ b/components/ArticleGroup.vue
@@ -0,0 +1,28 @@
+
+
+ {{ title }}
+
+
+
+
+
+
+
+ {{tag}}
+
+
+
+
+
+
+
+
+
diff --git a/components/DropdownLink.vue b/components/DropdownLink.vue
new file mode 100644
index 0000000..c689360
--- /dev/null
+++ b/components/DropdownLink.vue
@@ -0,0 +1,153 @@
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+
+
diff --git a/components/GithubCard.vue b/components/GithubCard.vue
new file mode 100644
index 0000000..05c5ae1
--- /dev/null
+++ b/components/GithubCard.vue
@@ -0,0 +1,162 @@
+
+
+
+
+ ![overview]()
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/LeetCodeGroup.vue b/components/LeetCodeGroup.vue
new file mode 100644
index 0000000..47609a7
--- /dev/null
+++ b/components/LeetCodeGroup.vue
@@ -0,0 +1,28 @@
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/NavLink.vue b/components/NavLink.vue
new file mode 100644
index 0000000..e2e801b
--- /dev/null
+++ b/components/NavLink.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+ ![]()
+
+ {{ $site.title }}
+
+
+
+
+
+
+ {{message}}
+ +
+ + +
+
+
+
+
+
+
+
+
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
new file mode 100644
index 0000000..0270678
--- /dev/null
+++ b/components/Sidebar.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
diff --git a/components/SidebarButton.vue b/components/SidebarButton.vue
new file mode 100644
index 0000000..0f1c21f
--- /dev/null
+++ b/components/SidebarButton.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/components/SidebarGroup.vue b/components/SidebarGroup.vue
new file mode 100644
index 0000000..2be890a
--- /dev/null
+++ b/components/SidebarGroup.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
diff --git a/components/SidebarLink.vue b/components/SidebarLink.vue
new file mode 100644
index 0000000..c184cc1
--- /dev/null
+++ b/components/SidebarLink.vue
@@ -0,0 +1,86 @@
+
+
+
diff --git a/components/Tag.vue b/components/Tag.vue
new file mode 100644
index 0000000..5ea99f1
--- /dev/null
+++ b/components/Tag.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
diff --git a/components/ToolGroup.vue b/components/ToolGroup.vue
new file mode 100644
index 0000000..b2029ce
--- /dev/null
+++ b/components/ToolGroup.vue
@@ -0,0 +1,15 @@
+
+ TAGS
+
+
+ #{{tag}} {{$tags[tag].length}}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/enhanceApp.js b/enhanceApp.js
new file mode 100644
index 0000000..f8f9657
--- /dev/null
+++ b/enhanceApp.js
@@ -0,0 +1,11 @@
+import routes from './enhancers/routes';
+import tags from './enhancers/tags';
+import optionHandler from './enhancers/optionHandler';
+
+export default ({ Vue, options, router, siteData }) => {
+ const { themeConfig, pages } = siteData;
+
+ Vue.use(optionHandler, { themeConfig });
+ Vue.use(routes, { router, themeConfig });
+ Vue.use(tags, { router, pages, themeConfig });
+}
\ No newline at end of file
diff --git a/enhancers/optionHandler.js b/enhancers/optionHandler.js
new file mode 100644
index 0000000..b963c67
--- /dev/null
+++ b/enhancers/optionHandler.js
@@ -0,0 +1,46 @@
+/**
+ * Handle the options you need later, mount them on Vue
+ * @param {*} themeConfig theme configuration
+ */
+const install = (Vue, { themeConfig }) => {
+ const TAGS = '/tags/';
+ const ROOT = '/';
+
+ const navs = themeConfig.nav;
+
+ Vue.options = Vue.options || {};
+
+ const tagsOption = {
+ useTag: themeConfig.tags,
+ path: TAGS
+ }
+
+ const rootOption = {
+ path: ROOT
+ }
+
+ navs.forEach(nav => {
+ if (nav.tags && nav.link) {
+ tagsOption.path = nav.link;
+ }
+ if (nav.root && nav.link) {
+ rootOption.path = nav.link;
+ }
+ })
+
+ Vue.options.tags = tagsOption;
+ Vue.options.root = rootOption;
+
+ Vue.mixin({
+ computed: {
+ $tagOptions() {
+ return Object.assign({}, tagsOption);
+ },
+ $rootOptions() {
+ return Object.assign({}, rootOption);
+ }
+ }
+ })
+}
+
+export default { install }
diff --git a/enhancers/routes.js b/enhancers/routes.js
new file mode 100644
index 0000000..e1b51b0
--- /dev/null
+++ b/enhancers/routes.js
@@ -0,0 +1,62 @@
+const Layout = () => import('../Layout');
+
+/**
+ * Injection route
+ * @param {*} Vue
+ * @param {*} param1
+ */
+const install = (Vue, { router, themeConfig }) => {
+ const navs = navsLocale(themeConfig.nav);
+ const routes = [];
+
+ // Get the directory with the index set in the directory structure via redirect
+ const navInRouter = router.options.routes
+ .filter(route => route.redirect)
+ .map(route => route.redirect);
+
+ // Inject root
+ navs.forEach(nav => {
+ if (nav.root &&
+ nav.link &&
+ !~navInRouter.indexOf(nav.link)) {
+ routes.push({
+ path: nav.link,
+ component: Layout,
+ name: `nav-${nav.text}`,
+ meta: { root: true }
+ })
+ }
+ });
+
+ // Inject tags
+ if (Vue.options.tags.useTag) {
+ routes.push({
+ path: `${Vue.options.tags.path}:tagName?`,
+ component: Layout,
+ meta: { tag: true }
+ })
+ }
+
+ router.addRoutes(routes);
+}
+
+const hasPath = (router, path) => {
+ const routes = router.options.routes;
+ for(let route of routes) {
+ if (route.path === path) return true;
+ }
+ return false;
+}
+
+/**
+ * Get local nav link
+ * Filter out http | https | // header
+ * @param {Array} navs
+ */
+const navsLocale = (navs) => {
+ const localeReg = /^\/(?!\/).*/;
+
+ return navs.filter(nav => nav.link && localeReg.test(nav.link))
+}
+
+export default { install }
\ No newline at end of file
diff --git a/enhancers/tags.js b/enhancers/tags.js
new file mode 100644
index 0000000..9283a6c
--- /dev/null
+++ b/enhancers/tags.js
@@ -0,0 +1,44 @@
+import { pageNormalize } from '../lib/util';
+
+/**
+ * Extract the tags of the article
+ * @param {*} Vue
+ * @param {*} param1
+ */
+const install = (Vue, { router, pages, themeConfig }) => {
+ const navs = themeConfig.nav;
+ const pagesWithoutLayout = pageNormalize(pages, navs);
+
+ const tagMap = {};
+
+ pagesWithoutLayout.forEach(page => {
+ if (page.frontmatter && page.frontmatter.tag) {
+ const tag = page.frontmatter.tag;
+ if (typeof tag === 'string') {
+ page.tags = [tag];
+ insertTag(tagMap, tag, page.key);
+ } else {
+ page.tags = tag;
+ tag.forEach(t => insertTag(tagMap, t, page.key));
+ }
+ }
+ })
+
+ Vue.mixin({
+ computed: {
+ $tags() {
+ return tagMap;
+ }
+ }
+ });
+}
+
+const insertTag = (tagMap, tag, key) => {
+ if (!tagMap[tag]) {
+ tagMap[tag] = [key];
+ } else {
+ tagMap[tag].push(key);
+ }
+}
+
+export default { install };
diff --git a/layout/Activity.vue b/layout/Activity.vue
new file mode 100644
index 0000000..4b424cf
--- /dev/null
+++ b/layout/Activity.vue
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
+
diff --git a/lib/animation.js b/lib/animation.js
new file mode 100644
index 0000000..e0b13f0
--- /dev/null
+++ b/lib/animation.js
@@ -0,0 +1,45 @@
+/**
+ * 粒子原型, 提供一个绘图函数
+ */
+export function ExplodingParticle() {
+ this.animationDuration = 1000; // in ms
+
+ // Set the speed for our particle
+ this.speed = {
+ x: -5 + Math.random() * 10,
+ y: -5 + Math.random() * 10
+ };
+
+ // Size our particle
+ this.radius = 5 + Math.random() * 5;
+
+ // Set a max time to live for our particle
+ this.life = 30 + Math.random() * 10;
+ this.remainingLife = this.life;
+
+ // This function will be called by our animation logic later on
+ this.draw = ctx => {
+ let p = this;
+
+ if (this.remainingLife > 0 && this.radius > 0) {
+ // Draw a circle at the current location
+ ctx.beginPath();
+ ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);
+ ctx.fillStyle =
+ "rgba(" +
+ this.rgbArray[0] +
+ "," +
+ this.rgbArray[1] +
+ "," +
+ this.rgbArray[2] +
+ ", 1)";
+ ctx.fill();
+
+ // Update the particle's location and life
+ p.remainingLife--;
+ p.radius -= 0.25;
+ p.startX += p.speed.x;
+ p.startY += p.speed.y;
+ }
+ };
+};
diff --git a/lib/comment.mixin.js b/lib/comment.mixin.js
new file mode 100644
index 0000000..ee8f121
--- /dev/null
+++ b/lib/comment.mixin.js
@@ -0,0 +1,12 @@
+import Gitalk from 'gitalk'
+
+const commentMixin = {
+ methods: {
+ comment() {
+ if (!this.$site.themeConfig.comment) return;
+ return new Gitalk(this.$site.themeConfig.comment);
+ }
+ }
+}
+
+export default commentMixin;
diff --git a/lib/navLayout.mixin.js b/lib/navLayout.mixin.js
new file mode 100644
index 0000000..bf1ff68
--- /dev/null
+++ b/lib/navLayout.mixin.js
@@ -0,0 +1,33 @@
+import { pageWithCustomLayout, pageNormalize, navLayoutRE } from './util'
+
+export default {
+ computed: {
+ // Handle whether the current route is nav layout, if yes, only show layoutTag for this layout page
+ isNavLayout() {
+ const navsWithLayout = this.$site.themeConfig.nav.filter(nav => nav.layout)
+ return navsWithLayout.some(nav => nav.link === this.$route.path)
+ },
+ // Handling leetcode layout
+ isLeetCode() {
+ const layout = currentLayout(this.$site.themeConfig.nav, this.$route.path)
+ return this.isNavLayout && layout === 'leetcode'
+ },
+ pages() {
+ const { nav } = this.$site.themeConfig
+ if (this.isNavLayout) {
+ // get layout from current $route.path
+ const layout = currentLayout(nav, this.$route.path)
+ return pageWithCustomLayout(this.$site.pages, nav, layout)
+ }
+ return pageNormalize(this.$site.pages, nav)
+ },
+ perPage() {
+ return (this.$site.themeConfig['per_page'] || 5)
+ }
+ }
+}
+
+function currentLayout(navs, routePath) {
+ const routes = navs.filter(nav => nav.link === routePath)
+ return routes.length > 0 ? routes[0].layout : null
+}
diff --git a/lib/util.js b/lib/util.js
new file mode 100644
index 0000000..6513ca0
--- /dev/null
+++ b/lib/util.js
@@ -0,0 +1,319 @@
+export const hashRE = /#.*$/
+export const indexRE = /(.+\/)index$/
+export const navLayoutRE = /(\/.+\/)(.*)$/g
+export const extRE = /\.(md|html)$/
+export const endingSlashRE = /\/$/
+export const outboundRE = /^(https?:|mailto:)/
+
+export function normalize (path) {
+ return path
+ .replace(hashRE, '')
+ .replace(extRE, '')
+}
+
+export function getHash (path) {
+ const match = path.match(hashRE)
+ if (match) {
+ return match[0]
+ }
+}
+
+export function isExternal (path) {
+ return outboundRE.test(path)
+}
+
+export function isMailto (path) {
+ return /^mailto:/.test(path)
+}
+
+export function ensureExt (path) {
+ if (isExternal(path)) {
+ return path
+ }
+ const hashMatch = path.match(hashRE)
+ const hash = hashMatch ? hashMatch[0] : ''
+ const normalized = normalize(path)
+
+ if (endingSlashRE.test(normalized)) {
+ return path
+ }
+ return normalized + '.html' + hash
+}
+
+export function isActive (route, path) {
+ const routeHash = route.hash
+ const linkHash = getHash(path)
+ if (linkHash && routeHash !== linkHash) {
+ return false
+ }
+ const routePath = normalize(route.path)
+ const pagePath = normalize(path)
+ if (endingSlashRE.test(routePath) || endingSlashRE.test(pagePath)) {
+ return routePath === pagePath
+ } else {
+ return routePath.indexOf(pagePath) === 0
+ }
+}
+
+export function getTitle (siteTitle, page) {
+ if(page.frontmatter.activity) {
+ return page.frontmatter.title || siteTitle
+ }
+
+ return siteTitle
+}
+
+export function layoutsFromNav(navs) {
+ return navs.reduce((layouts, nav) =>
+ layouts.concat(nav.layout || []), [])
+}
+
+export function excludeFeature (page) {
+ return (!page.frontmatter.date ||
+ +new Date(page.frontmatter.date) <= +new Date())
+}
+
+// Filter out pages with a unique layoutTag flag
+export function pageWithCustomLayout(pages, navs, layout) {
+ const navList = navs || []
+ const navLinks = navList.map(n => navsLinksNormalize(n.link))
+ const pagesWithoutRoot = pages
+ .filter(
+ page => page.path !== '/' && // exclude root
+ excludeFeature(page) && // exclude page.date > current time
+ !~navLinks.indexOf(page.path) && // nav link
+ !isHidden(page) && // page.frontmatter.hidden
+ page.frontmatter.layoutTag === layout // layout tag
+ )
+ return pageSortByDate(pagesWithoutRoot)
+}
+
+// Pages that appear in themeConfig.nav, as well as pages with layoutTag in nav are filtered
+export function pageNormalize(pages, navs) {
+ const layouts = layoutsFromNav(navs)
+ const navList = navs || []
+ const navLinks = navList.map(n => navsLinksNormalize(n.link))
+ const withoutRoot = pages
+ .filter(
+ page => page.path !== '/' &&
+ excludeFeature(page) && // exclude page.date > current time
+ !~layouts.indexOf(page.frontmatter.layoutTag) &&
+ !~navLinks.indexOf(page.path) &&
+ !isHidden(page)
+ )
+ return pageSortByDate(withoutRoot)
+}
+
+// /about/index ==> /about/
+export function navsLinksNormalize(link) {
+ const re = link.match(indexRE)
+ return re ? re[1] : link
+}
+
+export function isHidden(page) {
+ if(!page.frontmatter) return false
+ return page.frontmatter.hidden
+}
+
+// pages sort by date
+export function pageSortByDate (pages) {
+ const pageWithDate = pages
+ .filter(page => page.frontmatter.date )
+ const pageWithOutDate = pages
+ .filter(page => !page.frontmatter.date )
+
+ let mapped = pageWithDate
+ .map((p, i) => ({ index: i, date: +new Date(p.frontmatter.date) }))
+
+ mapped.sort((a, b) => {
+ if(a.date > b.date) {
+ return -1
+ }
+ if(a.date < b.date) {
+ return 1
+ }
+ return 0
+ })
+ return mapped.map(m => pageWithDate[m.index]).concat(pageWithOutDate)
+}
+
+export function resolvePage (pages, rawPath, base) {
+ if (base) {
+ rawPath = resolvePath(rawPath, base)
+ }
+ const path = normalize(rawPath)
+ for (let i = 0; i < pages.length; i++) {
+ if (normalize(pages[i].path) === path) {
+ return Object.assign({}, pages[i], {
+ type: 'page',
+ path: ensureExt(rawPath)
+ })
+ }
+ }
+ console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
+ return {}
+}
+
+function resolvePath (relative, base, append) {
+ const firstChar = relative.charAt(0)
+ if (firstChar === '/') {
+ return relative
+ }
+
+ if (firstChar === '?' || firstChar === '#') {
+ return base + relative
+ }
+
+ const stack = base.split('/')
+
+ // remove trailing segment if:
+ // - not appending
+ // - appending to trailing slash (last segment is empty)
+ if (!append || !stack[stack.length - 1]) {
+ stack.pop()
+ }
+
+ // resolve relative path
+ const segments = relative.replace(/^\//, '').split('/')
+ for (let i = 0; i < segments.length; i++) {
+ const segment = segments[i]
+ if (segment === '..') {
+ stack.pop()
+ } else if (segment !== '.') {
+ stack.push(segment)
+ }
+ }
+
+ // ensure leading slash
+ if (stack[0] !== '') {
+ stack.unshift('')
+ }
+
+ return stack.join('/')
+}
+
+export function resolveSidebarItems (page, route, site, localePath) {
+ const pageSidebarConfig = page.frontmatter.sidebar
+ if (pageSidebarConfig === 'auto') {
+ return resolveHeaders(page)
+ }
+ const { pages, themeConfig } = site
+
+ const localeConfig = localePath && themeConfig.locales
+ ? themeConfig.locales[localePath] || themeConfig
+ : themeConfig
+
+ const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
+ if (!sidebarConfig) {
+ return []
+ } else {
+ const { base, config } = resolveMatchingConfig(route, sidebarConfig)
+ return config
+ ? config.map(item => resolveItem(item, pages, base))
+ : []
+ }
+}
+
+function resolveHeaders (page) {
+ const headers = groupHeaders(page.headers || [])
+ return [{
+ type: 'group',
+ collapsable: false,
+ title: page.title,
+ children: headers.map(h => ({
+ type: 'auto',
+ title: h.title,
+ basePath: page.path,
+ path: page.path + '#' + h.slug,
+ children: h.children || []
+ }))
+ }]
+}
+
+export function groupHeaders (headers) {
+ // group h3s under h2
+ headers = headers.map(h => Object.assign({}, h))
+ let lastH2
+ headers.forEach(h => {
+ if (h.level === 2) {
+ lastH2 = h
+ } else if (lastH2) {
+ (lastH2.children || (lastH2.children = [])).push(h)
+ }
+ })
+ return headers.filter(h => h.level === 2)
+}
+
+export function resolveNavLinkItem (linkItem) {
+ return Object.assign(linkItem, {
+ type: linkItem.items && linkItem.items.length ? 'links' : 'link'
+ })
+}
+
+export function resolveMatchingConfig (route, config) {
+ if (Array.isArray(config)) {
+ return {
+ base: '/',
+ config: config
+ }
+ }
+ for (const base in config) {
+ if (ensureEndingSlash(route.path).indexOf(base) === 0) {
+ return {
+ base,
+ config: config[base]
+ }
+ }
+ }
+ return {}
+}
+
+function ensureEndingSlash (path) {
+ return /(\.html|\/)$/.test(path)
+ ? path
+ : path + '/'
+}
+
+function resolveItem (item, pages, base, isNested) {
+ if (typeof item === 'string') {
+ return resolvePage(pages, item, base)
+ } else if (Array.isArray(item)) {
+ return Object.assign(resolvePage(pages, item[0], base), {
+ title: item[1]
+ })
+ } else {
+ if (isNested) {
+ console.error(
+ '[vuepress] Nested sidebar groups are not supported. ' +
+ 'Consider using navbar + categories instead.'
+ )
+ }
+ const children = item.children || []
+ return {
+ type: 'group',
+ title: item.title,
+ children: children.map(child => resolveItem(child, pages, base, true)),
+ collapsable: item.collapsable !== false
+ }
+ }
+}
+
+Date.prototype.Format = function (fmt) {
+ var o = {
+ "y+": this.getFullYear(),
+ "M+": this.getMonth() + 1, // month
+ "d+": this.getDate(), // day
+ "H+": this.getHours(), // hour
+ "m+": this.getMinutes(), // Minute
+ "s+": this.getSeconds(), // Seconds
+ "q+": Math.floor((this.getMonth() + 3) / 3), // Quarter
+ "S": this.getMilliseconds() // millisecond
+ };
+ if (!fmt) fmt = 'yyyy-MM-dd HH:mm:ss'
+ if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+ for (var k in o)
+ if (new RegExp("(" + k + ")").test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+ }
+ return fmt;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2da99f7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "vuepress-theme-mufeng",
+ "version": "2.0.1",
+ "description": "vuepress-theme",
+ "repository": "https://github.com/zhangximufeng/vuepress-theme-mufeng",
+ "homepage": "https://github.com/zhangximufeng/vuepress-theme-mufeng/blob/master/README.md",
+ "main": "util.js",
+ "keywords": [
+ "vuepress",
+ "theme",
+ "vuepress-theme"
+ ],
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "zhangximufeng",
+ "license": "ISC",
+ "dependencies": {
+ "autosize": "^4.0.2",
+ "axios": "^0.18.0",
+ "date-fns": "^1.29.0",
+ "github-markdown-css": "^2.10.0",
+ "html2canvas": "^1.0.0-alpha.12",
+ "node-polyglot": "^2.3.0",
+ "raw-loader": "^0.5.1"
+ }
+}
diff --git a/package/comment/assets/icon/arrow_down.svg b/package/comment/assets/icon/arrow_down.svg
new file mode 100644
index 0000000..d20fe20
--- /dev/null
+++ b/package/comment/assets/icon/arrow_down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/package/comment/assets/icon/edit.svg b/package/comment/assets/icon/edit.svg
new file mode 100644
index 0000000..ffb84e5
--- /dev/null
+++ b/package/comment/assets/icon/edit.svg
@@ -0,0 +1,3 @@
+
diff --git a/package/comment/assets/icon/github.svg b/package/comment/assets/icon/github.svg
new file mode 100644
index 0000000..36e758f
--- /dev/null
+++ b/package/comment/assets/icon/github.svg
@@ -0,0 +1,3 @@
+
diff --git a/package/comment/assets/icon/heart.svg b/package/comment/assets/icon/heart.svg
new file mode 100644
index 0000000..fcc6240
--- /dev/null
+++ b/package/comment/assets/icon/heart.svg
@@ -0,0 +1,3 @@
+
diff --git a/package/comment/assets/icon/heart_on.svg b/package/comment/assets/icon/heart_on.svg
new file mode 100644
index 0000000..3d5cc5b
--- /dev/null
+++ b/package/comment/assets/icon/heart_on.svg
@@ -0,0 +1,3 @@
+
diff --git a/package/comment/assets/icon/reply.svg b/package/comment/assets/icon/reply.svg
new file mode 100644
index 0000000..11af6f1
--- /dev/null
+++ b/package/comment/assets/icon/reply.svg
@@ -0,0 +1,3 @@
+
diff --git a/package/comment/assets/icon/tip.svg b/package/comment/assets/icon/tip.svg
new file mode 100644
index 0000000..20ea0b2
--- /dev/null
+++ b/package/comment/assets/icon/tip.svg
@@ -0,0 +1,8 @@
+
diff --git a/package/comment/components/Action.vue b/package/comment/components/Action.vue
new file mode 100644
index 0000000..8ce7778
--- /dev/null
+++ b/package/comment/components/Action.vue
@@ -0,0 +1,16 @@
+
+
+ {{text}}
+
+
+
+
\ No newline at end of file
diff --git a/package/comment/components/Button.vue b/package/comment/components/Button.vue
new file mode 100644
index 0000000..fd0154c
--- /dev/null
+++ b/package/comment/components/Button.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/package/comment/components/Comment.vue b/package/comment/components/Comment.vue
new file mode 100644
index 0000000..a31ee2a
--- /dev/null
+++ b/package/comment/components/Comment.vue
@@ -0,0 +1,165 @@
+
+
+ ![hero]()
+
+ {{ data.heroText }}
++ {{ data.tagline }} +
++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ feature.title }}
+{{ feature.details }}
+
+
+
+
+
+
diff --git a/package/comment/components/Svg.vue b/package/comment/components/Svg.vue
new file mode 100644
index 0000000..43bad8e
--- /dev/null
+++ b/package/comment/components/Svg.vue
@@ -0,0 +1,17 @@
+
+
+
+ {{text}}
+
+
+
+
\ No newline at end of file
diff --git a/package/comment/const.js b/package/comment/const.js
new file mode 100644
index 0000000..ce6e0a2
--- /dev/null
+++ b/package/comment/const.js
@@ -0,0 +1,2 @@
+export const GT_ACCESS_TOKEN = 'GT_ACCESS_TOKEN'
+export const GT_COMMENT = 'GT_COMMENT'
diff --git a/package/comment/graphql/getComments.js b/package/comment/graphql/getComments.js
new file mode 100644
index 0000000..c815d6d
--- /dev/null
+++ b/package/comment/graphql/getComments.js
@@ -0,0 +1,133 @@
+import { axiosGithub } from "../util";
+
+const getQL = (vars, pagerDirection) => {
+ const cursorDirection = pagerDirection === "last" ? "before" : "after";
+ const ql = `
+ query getIssueAndComments(
+ $owner: String!,
+ $repo: String!,
+ $id: Int!,
+ $cursor: String,
+ $pageSize: Int!
+ ) {
+ repository(owner: $owner, name: $repo) {
+ issue(number: $id) {
+ title
+ url
+ bodyHTML
+ createdAt
+ comments(${pagerDirection}: $pageSize, ${cursorDirection}: $cursor) {
+ totalCount
+ pageInfo {
+ ${pagerDirection === "last" ? "hasPreviousPage" : "hasNextPage"}
+ ${cursorDirection === "before" ? "startCursor" : "endCursor"}
+ }
+ nodes {
+ id
+ databaseId
+ author {
+ avatarUrl
+ login
+ url
+ }
+ bodyHTML
+ body
+ createdAt
+ reactions(first: 100, content: HEART) {
+ totalCount
+ viewerHasReacted
+ pageInfo{
+ hasNextPage
+ }
+ nodes {
+ id
+ databaseId
+ user {
+ login
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ `;
+
+ if (vars.cursor === null) delete vars.cursor;
+
+ return {
+ operationName: "getIssueAndComments",
+ query: ql,
+ variables: vars
+ };
+};
+
+function getComments(issue) {
+ const {
+ owner,
+ repo,
+ perPage,
+ pagerDirection,
+ defaultAuthor
+ } = this.options;
+ return axiosGithub
+ .post(
+ "/graphql",
+ getQL(
+ {
+ owner,
+ repo,
+ id: issue.number,
+ pageSize: perPage,
+ cursor: this.cursor
+ },
+ pagerDirection
+ ),
+ {
+ headers: {
+ Authorization: `bearer ${this.accessToken}`
+ }
+ }
+ )
+ .then(res => {
+ const data = res.data.data.repository.issue.comments;
+ const items = data.nodes.map(node => {
+ const author = node.author || defaultAuthor;
+
+ return {
+ id: node.databaseId,
+ gId: node.id,
+ user: {
+ avatar_url: author.avatarUrl,
+ login: author.login,
+ html_url: author.url
+ },
+ created_at: node.createdAt,
+ body_html: node.bodyHTML,
+ body: node.body,
+ html_url: `https://github.com/${owner}/${repo}/issues/${issue.number}#issuecomment-${node.databaseId}`,
+ reactions: node.reactions
+ };
+ });
+
+ let cs;
+
+ if (pagerDirection === "last") {
+ cs = [...items, ...this.comments];
+ } else {
+ cs = [...this.comments, ...items];
+ }
+
+ const isLoadOver =
+ data.pageInfo.hasPreviousPage === false ||
+ data.pageInfo.hasNextPage === false;
+ this.comments = cs;
+ this.isLoadOver = isLoadOver;
+ this.cursor = data.pageInfo.startCursor || data.pageInfo.endCursor;
+
+ return cs;
+ });
+}
+
+export default getComments;
diff --git a/package/comment/i18n/en.json b/package/comment/i18n/en.json
new file mode 100644
index 0000000..7bac7a3
--- /dev/null
+++ b/package/comment/i18n/en.json
@@ -0,0 +1,20 @@
+{
+ "init": "Gitalking ...",
+ "no-found-related": "Related %{link} not found",
+ "please-contact": "Please contact %{user} to initialize the comment",
+ "init-issue": "Init Issue",
+ "leave-a-comment": "Leave a comment",
+ "preview": "Preview",
+ "edit": "Edit",
+ "comment": "Comment",
+ "support-markdown": "Markdown is supported",
+ "login-with-github": "Login with GitHub",
+ "first-comment-person": "Be the first guy leaving a comment!",
+ "commented": "commented",
+ "load-more": "Load more",
+ "counts": "%{counts} comment |||| %{counts} comments",
+ "sort-asc": "Sort by Oldest",
+ "sort-desc": "Sort by Latest",
+ "logout": "Logout",
+ "anonymous": "Anonymous"
+}
diff --git a/package/comment/i18n/es-ES.json b/package/comment/i18n/es-ES.json
new file mode 100644
index 0000000..4331daa
--- /dev/null
+++ b/package/comment/i18n/es-ES.json
@@ -0,0 +1,20 @@
+{
+ "init": "Gitalking ...",
+ "no-found-related": "Link %{link} no encontrado",
+ "please-contact": "Por favor contacta con %{user} para inicializar el comentario",
+ "init-issue": "Iniciar Issue",
+ "leave-a-comment": "Deja un comentario",
+ "preview": "Avance",
+ "edit": "Editar",
+ "comment": "Comentario",
+ "support-markdown": "Markdown es soportado",
+ "login-with-github": "Entrar con GitHub",
+ "first-comment-person": "Sé el primero en dejar un comentario!",
+ "commented": "comentó",
+ "load-more": "Cargar más",
+ "counts": "%{counts} comentario |||| %{counts} comentarios",
+ "sort-asc": "Ordenar por Antiguos",
+ "sort-desc": "Ordenar por Recientes",
+ "logout": "Salir",
+ "anonymous": "Anónimo"
+}
diff --git a/package/comment/i18n/fr.json b/package/comment/i18n/fr.json
new file mode 100644
index 0000000..9242d36
--- /dev/null
+++ b/package/comment/i18n/fr.json
@@ -0,0 +1,20 @@
+{
+ "init": "Gitalking ...",
+ "no-found-related": "Lien %{link} non trouvé",
+ "please-contact": "S’il vous plaît contactez %{user} pour initialiser les commentaires",
+ "init-issue": "Initialisation des issues",
+ "leave-a-comment": "Laisser un commentaire",
+ "preview": "Aperçu",
+ "edit": "Modifier",
+ "comment": "Commentaire",
+ "support-markdown": "Markdown est supporté",
+ "login-with-github": "Se connecter avec GitHub",
+ "first-comment-person": "Être le premier à laisser un commentaire !",
+ "commented": "commenter",
+ "load-more": "Charger plus",
+ "counts": "%{counts} commentaire |||| %{counts} commentaires",
+ "sort-asc": "Trier par plus ancien",
+ "sort-desc": "Trier par plus récent",
+ "logout": "Déconnexion",
+ "anonymous": "Anonyme"
+}
diff --git a/package/comment/i18n/index.js b/package/comment/i18n/index.js
new file mode 100644
index 0000000..ff22310
--- /dev/null
+++ b/package/comment/i18n/index.js
@@ -0,0 +1,24 @@
+import Polyglot from 'node-polyglot'
+import ZHCN from './zh-CN.json'
+import ZHTW from './zh-TW.json'
+import EN from './en.json'
+import ES from './es-ES.json'
+import FR from './fr.json'
+import RU from './ru.json'
+
+const i18nMap = {
+ 'zh': ZHCN,
+ 'zh-CN': ZHCN,
+ 'zh-TW': ZHTW,
+ 'en': EN,
+ 'es-ES': ES,
+ 'fr': FR,
+ 'ru': RU,
+}
+
+export default function (language) {
+ return new Polyglot({
+ phrases: i18nMap[language] || i18nMap.en,
+ locale: language
+ })
+}
diff --git a/package/comment/i18n/ru.json b/package/comment/i18n/ru.json
new file mode 100644
index 0000000..4c1d868
--- /dev/null
+++ b/package/comment/i18n/ru.json
@@ -0,0 +1,20 @@
+{
+ "init": "Gitalking ...",
+ "no-found-related": "Связанные %{link} не найдены",
+ "please-contact": "Пожалуйста, свяжитесь с %{user} чтобы инициализировать комментарий",
+ "init-issue": "Выпуск инициализации",
+ "leave-a-comment": "Оставить комментарий",
+ "preview": "Предварительный просмотр",
+ "edit": "Pедактировать",
+ "comment": "Комментарий",
+ "support-markdown": "Поддерживается Markdown",
+ "login-with-github": "Вход через GitHub",
+ "first-comment-person": "Будьте первым, кто оставил комментарий",
+ "commented": "прокомментированный",
+ "load-more": "Загрузить ещё",
+ "counts": "%{counts} комментарий |||| %{counts} комментарьев",
+ "sort-asc": "Сортировать по старым",
+ "sort-desc": "Сортировать по последним",
+ "logout": "Выход",
+ "anonymous": "Анонимный"
+}
diff --git a/package/comment/i18n/zh-CN.json b/package/comment/i18n/zh-CN.json
new file mode 100644
index 0000000..4715928
--- /dev/null
+++ b/package/comment/i18n/zh-CN.json
@@ -0,0 +1,20 @@
+{
+ "init": "Gitalk 加载中 ...",
+ "no-found-related": "未找到相关的 %{link} 进行评论",
+ "please-contact": "请联系 %{user} 初始化创建",
+ "init-issue": "初始化 Issue",
+ "leave-a-comment": "说点什么",
+ "preview": "预览",
+ "edit": "编辑",
+ "comment": "评论",
+ "support-markdown": "支持 Markdown 语法",
+ "login-with-github": "使用 GitHub 登录",
+ "first-comment-person": "来做第一个留言的人吧！",
+ "commented": "发表于",
+ "load-more": "加载更多",
+ "counts": "%{counts} 条评论",
+ "sort-asc": "从旧到新排序",
+ "sort-desc": "从新到旧排序",
+ "logout": "注销",
+ "anonymous": "未登录用户"
+}
diff --git a/package/comment/i18n/zh-TW.json b/package/comment/i18n/zh-TW.json
new file mode 100644
index 0000000..91229f8
--- /dev/null
+++ b/package/comment/i18n/zh-TW.json
@@ -0,0 +1,20 @@
+{
+ "init": "Gitalk 載入中…",
+ "no-found-related": "未找到相關的 %{link}",
+ "please-contact": "請聯絡 %{user} 初始化評論",
+ "init-issue": "初始化 Issue",
+ "leave-a-comment": "寫點什麼",
+ "preview": "預覽",
+ "edit": "編輯",
+ "comment": "評論",
+ "support-markdown": "支援 Markdown 語法",
+ "login-with-github": "使用 GitHub 登入",
+ "first-comment-person": "成為首個留言的人吧！",
+ "commented": "評論於",
+ "load-more": "載入更多",
+ "counts": "%{counts} 筆評論",
+ "sort-asc": "從舊至新排序",
+ "sort-desc": "從新至舊排序",
+ "logout": "登出",
+ "anonymous": "訪客"
+}
diff --git a/package/comment/index.styl b/package/comment/index.styl
new file mode 100644
index 0000000..03134db
--- /dev/null
+++ b/package/comment/index.styl
@@ -0,0 +1,422 @@
+/* variables */
+$gt-color-main := #6190e8
+$gt-color-sub := #a1a1a1
+$gt-color-loader := #999999
+$gt-color-error := #ff3860
+$gt-color-hr := #E9E9E9
+$gt-color-input-border := rgba(0,0,0,0.1)
+$gt-color-input-bg := #f6f6f6
+$gt-color-comment-bg := #f9f9f9
+$gt-color-comment-adminbg := #f6f9fe
+$gt-color-comment-txt := #333333
+$gt-color-link-active := #333333
+$gt-color-btn := #ffffff
+$gt-color-popbg := #ffffff
+$gt-size-base := 16px // default font-size
+$gt-size-border-radius := 5px
+$gt-breakpoint-mobile := 479px
+$gt-mask-z-index := 9999
+
+/* functions & mixins */
+clearfix() {
+ &:before,
+ &:after {
+ content: " ";
+ display: table;
+ }
+ &:after { clear: both; }
+}
+em($px, $base-size = $gt-size-base)
+ u = unit($px)
+ if (u is 'px')
+ unit($px / $base-size, 'em')
+ else
+ unit($px, u)
+
+mobile()
+ @media (max-width: $gt-breakpoint-mobile)
+ {block}
+
+/* variables - calculated */
+$gt-size-loader-dot := em(6px)
+$gt-size-loader := em(28px)
+$gt-size-avatar := em(50px)
+$gt-size-avatar-mobi := em(32px)
+
+/* styles */
+// Put everything under container to avoid style conflicts
+.gt-container
+ box-sizing: border-box
+ padding: 2rem
+ *
+ box-sizing: border-box
+ font-size: $gt-size-base
+ // common
+ a
+ color: $gt-color-main
+ &:hover
+ color: lighten($gt-color-main, 20%)
+ border-color: lighten($gt-color-main, 20%)
+ &.is--active
+ color: $gt-color-link-active
+ cursor: default !important
+ &:hover
+ color: $gt-color-link-active
+ .hide
+ display: none !important
+ // icons
+ .gt-svg
+ display: inline-block
+ width: em(16px)
+ height: em(16px)
+ vertical-align: sub
+ svg
+ width: 100%
+ height: 100%
+ fill: $gt-color-main
+ .gt-ico
+ display: inline-block
+ &-text
+ margin-left: em(5px)
+ &-github
+ .gt-svg
+ width: 100%
+ height: 100%
+ svg
+ fill: inherit
+ /* loader */
+ .gt-spinner
+ position: relative
+ &::before
+ content: ''
+ box-sizing: border-box
+ position: absolute
+ top: 3px
+ width: em(12px)
+ height: em(12px)
+ margin-top: em(-3px)
+ margin-left: em(-6px)
+ border-radius: 50%
+ border: 1px solid $gt-color-btn
+ border-top-color: $gt-color-main
+ animation: gt-kf-rotate .6s linear infinite
+
+ .gt-loader
+ position: relative
+ border: 1px solid $gt-color-loader
+ animation: ease gt-kf-rotate 1.5s infinite
+ display: inline-block
+ font-style: normal
+ width: $gt-size-loader
+ height: $gt-size-loader
+ //font-size: $gt-size-loader
+ line-height: $gt-size-loader
+ border-radius: 50%
+ &:before
+ content: ''
+ position: absolute
+ display: block
+ top: 0
+ left: 50%
+ margin-top: -($gt-size-loader-dot / 2)
+ margin-left: -($gt-size-loader-dot / 2)
+ width: $gt-size-loader-dot
+ height: $gt-size-loader-dot
+ background-color: $gt-color-loader
+ border-radius: 50%
+ // avatar
+ .gt-avatar
+ display: inline-block
+ width: $gt-size-avatar
+ height: $gt-size-avatar
+ +mobile()
+ width: $gt-size-avatar-mobi
+ height: $gt-size-avatar-mobi
+ img
+ width: 100%
+ height: auto
+ border-radius: 3px
+ &-github
+ width: $gt-size-avatar - em(2px)
+ height: $gt-size-avatar - em(2px)
+ +mobile()
+ width: $gt-size-avatar-mobi - em(2px)
+ height: $gt-size-avatar-mobi - em(2px)
+ // button
+ .gt-btn
+ padding: em(12px) em(20px)
+ display: inline-block
+ line-height: 1
+ text-decoration: none
+ white-space: nowrap
+ cursor: pointer
+ border: 1px solid $gt-color-main
+ border-radius: $gt-size-border-radius
+ background-color: $gt-color-main
+ color: $gt-color-btn
+ outline: none
+ font-size: em(12px)
+ &-text
+ font-weight: 400
+ &-loading
+ position: relative
+ margin-left: em(8px)
+ display: inline-block
+ width: em(12px)
+ height: em(16px)
+ vertical-align: top
+ &.is--disable
+ cursor: not-allowed
+ opacity: 0.5
+ &-login
+ margin-right: 0
+ &-preview
+ background-color: $gt-color-btn
+ color: $gt-color-main
+ &:hover
+ background-color: darken($gt-color-btn, 5%)
+ border-color: lighten($gt-color-main, 20%)
+ &-public
+ &:hover
+ background-color: lighten($gt-color-main, 20%)
+ border-color: lighten($gt-color-main, 20%)
+ &-loadmore
+ // loadmore
+
+ /* error */
+ .gt-error
+ text-align: center
+ margin: em(10px)
+ color: $gt-color-error
+
+ /* initing */
+ .gt-initing
+ padding: em(20px) 0
+ text-align: center
+ &-text
+ margin: em(10px) auto
+ font-size: 92%
+
+ /* no int */
+ .gt-no-init
+ padding: em(20px) 0
+ text-align: center
+
+ /* link */
+ .gt-link
+ border-bottom: 1px dotted $gt-color-main
+ &-counts, &-project
+ text-decoration: none
+
+ /* meta */
+ .gt-meta
+ margin: em(20px) 0
+ padding: em(16px) 0
+ position: relative
+ border-bottom: 1px solid $gt-color-hr
+ font-size: em(16px)
+ position: relative
+ z-index: 10
+ clearfix()
+
+ .gt-counts
+ margin: 0 em(10px) 0 0
+
+ .gt-user
+ float: right
+ margin: 0
+ font-size: 92%
+ &-pic
+ width: 16px
+ height: 16px
+ vertical-align: top
+ margin-right: em(8px)
+ &-inner
+ display: inline-block
+ cursor: pointer
+ .gt-ico
+ margin: 0 0 0 em(5px)
+ svg
+ fill: inherit
+ .is--poping
+ .gt-ico
+ svg
+ fill: $gt-color-main
+
+ .gt-version
+ color: $gt-color-sub
+ margin-left: em(6px)
+
+ .gt-copyright
+ margin: 0 em(15px) em(8px)
+ border-top: 1px solid $gt-color-hr
+ padding-top: em(8px)
+
+ /* popup */
+ .gt-popup
+ position: absolute
+ right: 0
+ top: em(38px)
+ background: $gt-color-popbg
+ display: inline-block
+ border: 1px solid $gt-color-hr
+ padding: em(10px) 0
+ font-size: em(14px)
+ letter-spacing: .5px
+ .gt-action
+ cursor: pointer
+ display: block
+ margin: em(8px) 0
+ padding: 0 em(18px)
+ position: relative
+ text-decoration: none
+ &.is--active
+ &:before
+ content: ''
+ width: em(4px)
+ height: em(4px)
+ background: $gt-color-main
+ position: absolute
+ left: em(8px)
+ top: em(7px)
+ /* header */
+ .gt-header
+ position: relative
+ display: flex
+ &-comment
+ flex: 1
+ margin-left: em(20px)
+ +mobile()
+ margin-left: em(14px)
+ &-textarea
+ padding: em(12px)
+ display: block
+ box-sizing: border-box
+ width: 100%
+ min-height: em(82px)
+ max-height: em(240px)
+ border-radius: $gt-size-border-radius
+ border: 1px solid $gt-color-input-border
+ font-size: em(14px)
+ word-wrap: break-word
+ resize: vertical
+ background-color: $gt-color-input-bg
+ outline: none
+ transition: all 0.25s ease
+ &:hover
+ background-color: lighten($gt-color-input-bg, 50%)
+ // box-shadow: 0 em(10px) em(60px) 0 $gt-color-input-bg
+ &-preview
+ padding: em(12px)
+ border-radius: $gt-size-border-radius
+ border: 1px solid $gt-color-input-border
+ background-color: $gt-color-input-bg
+ &-controls
+ position: relative
+ margin: em(12px) 0 0
+ clearfix()
+ +mobile()
+ margin: 0
+ &-tip
+ font-size: em(14px)
+ color: $gt-color-main
+ text-decoration: none
+ vertical-align: sub
+ +mobile()
+ display: none
+ .gt-btn
+ float: right
+ margin-left: em(20px)
+ +mobile()
+ float: none
+ width: 100%
+ margin: em(12px) 0 0
+
+ &:after
+ content: ''
+ position: fixed
+ bottom: 100%
+ left: 0
+ right: 0
+ top: 0
+ opacity: 0
+ &.gt-input-focused
+ position: relative
+ &:after
+ content: ''
+ position: fixed
+ bottom: 0%
+ left: 0
+ right: 0
+ top: 0
+ background: #000
+ opacity: 0.6
+ transition: opacity .3s, bottom 0s
+ z-index: $gt-mask-z-index
+ .gt-header-comment
+ z-index: $gt-mask-z-index + 1
+
+ /* comments */
+ .gt-comments
+ padding-top: em(20px)
+ &-null
+ text-align: center
+ &-controls
+ margin: em(20px) 0
+ text-align: center
+
+ /* comment */
+ .gt-comment
+ position: relative
+ padding: em(10px) 0
+ display: flex
+ &-content
+ flex: 1
+ margin-left: em(20px)
+ padding: em(12px) em(16px)
+ background-color: $gt-color-comment-bg
+ overflow: auto
+ transition: all ease 0.25s
+ &:hover
+ box-shadow: 0 em(10px) em(60px) 0 darken($gt-color-comment-bg, 2%)
+ +mobile()
+ margin-left: em(14px)
+ padding: em(10px) em(12px)
+ &-header
+ margin-bottom: em(8px)
+ font-size: em(14px)
+ position: relative
+ &-username
+ font-weight: 500
+ color: $gt-color-main
+ text-decoration: none
+ &:hover
+ text-decoration: underline
+ &-text
+ margin-left: em(8px)
+ color: $gt-color-sub
+ &-date
+ margin-left: em(8px)
+ color: $gt-color-sub
+ &-like, &-edit, &-reply
+ position: absolute
+ height: em(22px)
+ &:hover
+ cursor: pointer
+ &-like
+ top: 0
+ right: em(32px)
+ &-edit, &-reply
+ top: 0
+ right: 0
+ &-body
+ color: $gt-color-comment-txt !important
+ &-admin
+ .gt-comment-content
+ background-color: $gt-color-comment-adminbg
+
+@keyframes gt-kf-rotate
+ 0%
+ transform: rotate(0)
+ 100%
+ transform: rotate(360deg)
diff --git a/package/comment/index.vue b/package/comment/index.vue
new file mode 100644
index 0000000..2480229
--- /dev/null
+++ b/package/comment/index.vue
@@ -0,0 +1,321 @@
+
+
+
+
+
+
+
+
+
diff --git a/package/comment/mixin/index.js b/package/comment/mixin/index.js
new file mode 100644
index 0000000..01bcbf1
--- /dev/null
+++ b/package/comment/mixin/index.js
@@ -0,0 +1,597 @@
+import {
+ queryStringify,
+ axiosJSON,
+ axiosGithub,
+ getMetaContent,
+ formatErrorMsg,
+ hasClassInParent
+} from "../util";
+import i18n from '../i18n'
+import autosize from "autosize";
+import { GT_ACCESS_TOKEN, GT_COMMENT } from "../const";
+import QLGetComments from "../graphql/getComments";
+
+const Mixin = {
+ data() {
+ return {
+ user: null,
+ issue: null,
+ comments: [],
+ localComments: [],
+ comment: "",
+ page: 1,
+ pagerDirection: "last",
+ cursor: null,
+ previewHtml: "",
+
+ isNoInit: false,
+ isIniting: true,
+ isCreating: false,
+ isLoading: false,
+ isLoadMore: false,
+ isLoadOver: false,
+ isIssueCreating: false,
+ isPopupVisible: false,
+ isInputFocused: false,
+ isPreview: false,
+
+ isOccurError: false,
+ errorMsg: "",
+
+ _accessToken: null,
+ options: {},
+ i18n: i18n('en'),
+ commentEL: null
+ };
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.commentEL = this.$refs['commentEL'];
+
+ if (this.storedComment) {
+ this.comment = decodeURIComponent(this.storedComment);
+ localStorage.removeItem(GT_COMMENT);
+ }
+
+ this.options = Object.assign(
+ this.options,
+ {
+ id: document.title,
+ number: -1,
+ labels: ["Gitalk"],
+ title: document.title,
+ body: "", // location.href + header.meta[description]
+ language: navigator.language || navigator.userLanguage,
+ perPage: 10,
+ pagerDirection: "last", // last or first
+ createIssueManually: false,
+ distractionFreeMode: false,
+ proxy:
+ "https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token",
+ enableHotKey: true,
+ url: location.href,
+ defaultAuthor: {
+ avatarUrl:
+ "//avatars1.githubusercontent.com/u/29697133?s=50",
+ login: "null",
+ url: ""
+ },
+ updateCountCallback: null
+ },
+ this.$site.themeConfig.comment
+ );
+
+ this.i18n = i18n(this.options.language);
+
+ this.initial();
+ });
+ },
+ computed: {
+ isAdmin() {
+ const { admin } = this.options;
+ return (
+ this.user &&
+ ~[]
+ .concat(admin)
+ .map(a => a.toLowerCase())
+ .indexOf(this.user.login.toLowerCase())
+ );
+ },
+ accessToken: {
+ get: function() {
+ if (typeof window === 'undefined') {
+ return this._accessToken;
+ }
+ return this._accessToken || localStorage.getItem(GT_ACCESS_TOKEN);
+ },
+ set: function(token) {
+ this._accessToken = token;
+ if (typeof window !== 'undefined') {
+ localStorage.setItem(GT_ACCESS_TOKEN, token);
+ }
+ }
+ },
+ loginLink() {
+ const githubOauthUrl = "http://github.com/login/oauth/authorize";
+ const { clientID } = this.options;
+ const query = {
+ client_id: clientID,
+ redirect_uri: location.href,
+ scope: "public_repo"
+ };
+ return `${githubOauthUrl}?${queryStringify(query)}`;
+ }
+ },
+ methods: {
+ initial() {
+ const query = this.$route.query;
+ if (query.code) {
+ const code = query.code;
+ delete this.$route.query.code;
+ const replacedUrl = `${location.origin}${
+ location.pathname
+ }${queryStringify(query)}${location.hash}`;
+ history.replaceState(null, null, replacedUrl);
+ this.options = Object.assign(
+ {},
+ this.options,
+ {
+ url: replacedUrl,
+ id: replacedUrl
+ },
+ this.$site.themeConfig.comment
+ );
+ this.commentInital(code);
+ } else {
+ this.getInit()
+ .then(() => {
+ this.isIniting = false;
+ })
+ .catch(err => {
+ console.log("err:", err);
+ this.isIniting = false;
+ this.isOccurError = true;
+ this.errorMsg = formatErrorMsg(err);
+ });
+ }
+ },
+ commentInital(code) {
+ axiosJSON.post(this.options.proxy, {
+ code,
+ client_id: this.options.clientID,
+ client_secret: this.options.clientSecret
+ }).then(res => {
+ if (res.data && res.data.access_token) {
+ this.accessToken = res.data.access_token
+
+ this.getInit()
+ .then(() => {
+ this.isIniting = false;
+ })
+ .catch(err => {
+ console.log('init err:', err);
+ this.isIniting = false;
+ this.isOccurError = true;
+ this.errorMsg = formatErrorMsg(err);
+ })
+ } else {
+ // no access_token
+ console.log('res.data err:', res.data)
+ this.isOccurError = true;
+ this.errorMsg = formatErrorMsg(new Error('no access token'));
+ }
+ }).catch(err => {
+ console.log('err: ', err)
+ this.isOccurError = true;
+ this.errorMsg = formatErrorMsg(err)
+ })
+ },
+ getInit() {
+ return this.getUserInfo()
+ .then(() => this.getIssue())
+ .then(issue => this.getComments(issue));
+ },
+ getIssue() {
+ const { number } = this.options;
+ if (this.issue) {
+ this.isNoInit = false;
+ return Promise.resolve(this.issue);
+ }
+
+ if (typeof number === "number" && number > 0) {
+ return this.getIssueById().then(resIssue => {
+ if (!resIssue) return this.getIssueByLabels();
+ return resIssue;
+ });
+ }
+ return this.getIssueByLabels();
+ },
+ getIssueById() {
+ const {
+ owner,
+ repo,
+ number,
+ clientID,
+ clientSecret
+ } = this.options;
+ const getUrl = `/repos/${owner}/${repo}/issues/${number}`;
+
+ return new Promise((resolve, reject) => {
+ axiosGithub
+ .get(getUrl, {
+ params: {
+ client_id: clientID,
+ client_secret: clientSecret,
+ t: Date.now()
+ }
+ })
+ .then(res => {
+ let issue = null;
+
+ if (res && res.data && res.data.number === number) {
+ issue = res.data;
+
+ this.issue = issue;
+ this.isNoInit = false;
+ }
+ resolve(issue);
+ })
+ .catch(err => {
+ // When the status code is 404, promise will be resolved with null
+ if (err.response.status === 404) resolve(null);
+ reject(err);
+ });
+ });
+ },
+ getIssueByLabels() {
+ const {
+ owner,
+ repo,
+ id,
+ labels,
+ clientID,
+ clientSecret
+ } = this.options;
+
+ return axiosGithub
+ .get(`/repos/${owner}/${repo}/issues`, {
+ params: {
+ client_id: clientID,
+ client_secret: clientSecret,
+ labels: labels.concat(id).join(","),
+ t: Date.now()
+ }
+ })
+ .then(res => {
+ const { createIssueManually } = this.options;
+ let isNoInit = false;
+ let issue = null;
+ if (!(res && res.data && res.data.length)) {
+ if (!createIssueManually && this.isAdmin) {
+ return this.createIssue();
+ }
+
+ isNoInit = true;
+ } else {
+ issue = res.data[0];
+ }
+ this.issue = issue;
+ this.isNoInit = isNoInit;
+ return issue;
+ });
+ },
+ createIssue() {
+ const { owner, repo, title, body, id, labels, url } = this.options;
+ return axiosGithub
+ .post(
+ `/repos/${owner}/${repo}/issues`,
+ {
+ title,
+ labels: labels.concat(id),
+ body: body || `${url} \n\n ${
+ getMetaContent('description') ||
+ getMetaContent('description', 'og:description') || ''
+ }`
+ },
+ {
+ headers: {
+ Authorization: `token ${this.accessToken}`
+ }
+ }
+ )
+ .then(res => {
+ this.issue = res.data;
+ return res.data;
+ });
+ },
+ getComments(issue) {
+ if (!issue) return;
+ // Get comments via v4 graphql api, login required and sorting feature is available
+ if (this.accessToken) return QLGetComments.call(this, issue);
+ return this.getCommentsV3(issue);
+ },
+ createComment() {
+ return this.getIssue()
+ .then(issue =>
+ axiosGithub.post(
+ issue.comments_url,
+ {
+ body: this.comment
+ },
+ {
+ headers: {
+ Accept: "application/vnd.github.v3.full+json",
+ Authorization: `token ${this.accessToken}`
+ }
+ }
+ )
+ )
+ .then(res => {
+ this.comment = ""
+ this.comments = this.comments.concat(res.data)
+ this.localComments = this.localComments.concat(res.data)
+ });
+ },
+ getCommentsV3(issue) {
+ const { clientID, clientSecret, perPage } = this.options;
+ return this.getIssue().then(issue => {
+ if (!issue) return;
+
+ return axiosGithub
+ .get(issue.comments_url, {
+ headers: {
+ Accept: "application/vnd.github.v3.full+json"
+ },
+ params: {
+ client_id: clientID,
+ client_secret: clientSecret,
+ per_page: perPage,
+ page: this.page
+ }
+ })
+ .then(res => {
+ let isLoadOver = false;
+ const cs = this.comments.concat(res.data);
+ if (
+ cs.length >= this.issue.comments ||
+ res.data.length < perPage
+ ) {
+ isLoadOver = true;
+ }
+ this.comments = cs;
+ this.isLoadOver = isLoadOver;
+ this.page = this.page + 1;
+
+ return cs;
+ });
+ });
+ },
+ reply(replyComment) {
+ const comment = this.comment;
+ const replyCommentBody = replyComment.body;
+ let replyCommentArray = replyCommentBody.split("\n");
+ replyCommentArray.unshift(`@${replyComment.user.login}`);
+ replyCommentArray = replyCommentArray.map(t => `> ${t}`);
+ replyCommentArray.push("");
+ replyCommentArray.push("");
+ if (comment) replyCommentArray.unshift("");
+ this.comment = comment + replyCommentArray.join("\n");
+ autosize.update(this.commentEL);
+ this.commentEL.focus();
+ },
+ like(comment) {
+ const { owner, repo } = this.options;
+ let comments = this.comments;
+ let user = this.user;
+
+ axiosGithub
+ .post(
+ `/repos/${owner}/${repo}/issues/comments/${
+ comment.id
+ }/reactions`,
+ {
+ content: "heart"
+ },
+ {
+ headers: {
+ Authorization: `token ${this.accessToken}`,
+ Accept:
+ "application/vnd.github.squirrel-girl-preview"
+ }
+ }
+ )
+ .then(res => {
+ comments = comments.map(c => {
+ if (c.id === comment.id) {
+ if (c.reactions) {
+ if (
+ !~c.reactions.nodes.findIndex(
+ n => n.user.login === user.login
+ )
+ ) {
+ c.reactions.totalCount += 1;
+ }
+ } else {
+ c.reactions = { nodes: [] };
+ c.reactions.totalCount = 1;
+ }
+
+ c.reactions.nodes.push(res.data);
+ c.reactions.viewerHasReacted = true;
+ }
+ return c;
+ });
+
+ this.comments = comments;
+ });
+ },
+ unLike(comment) {
+ let comments = this.comments;
+ let user = this.user;
+
+ const getQL = id => {
+ return {
+ operationName: "RemoveReaction",
+ query: `
+ mutation RemoveReaction{
+ removeReaction (input:{
+ subjectId: "${id}",
+ content: HEART
+ }) {
+ reaction {
+ content
+ }
+ }
+ }
+ `
+ };
+ };
+
+ axiosGithub
+ .post("/graphql", getQL(comment.gId), {
+ headers: {
+ Authorization: `bearer ${this.accessToken}`
+ }
+ })
+ .then(res => {
+ if (res.data) {
+ comments = comments.map(c => {
+ if (c.id === comment.id) {
+ const index = c.reactions.nodes.findIndex(
+ n => n.user.login === user.login
+ );
+ if (~index) {
+ c.reactions.totalCount -= 1;
+ c.reactions.nodes.splice(index, 1);
+ }
+ c.reactions.viewerHasReacted = false;
+ }
+ return c;
+ });
+
+ this.comments = comments;
+ }
+ });
+ },
+ handleLogin() {
+ localStorage.setItem(GT_COMMENT, encodeURIComponent(this.comment))
+ location.href = this.loginLink;
+ },
+ handleIssueCreate() {
+ this.isIssueCreating = true;
+ this.createIssue().then(issue => {
+ this.isIssueCreating = false;
+ this.isOccurError = false;
+ return this.getComments(issue);
+ }).catch(err => {
+ this.isIssueCreating = false;
+ this.isOccurError = true;
+ this.errorMsg = formatErrorMsg(err)
+ })
+ },
+ handleCommentCreate(e) {
+ if (!this.comment.length) {
+ e && e.preventDefault();
+ this.commentEL.focus()
+ return
+ }
+ this.isCreating = true;
+ this.createComment()
+ .then(() => {
+ this.isCreating = false
+ this.isOccurError = false
+ })
+ .catch(err => {
+ this.isCreating = false
+ this.isOccurError = true
+ this.errorMsg = formatErrorMsg(err)
+ })
+ },
+ handleCommentPreview() {
+ this.isPreview = !this.isPreview;
+
+ axiosGithub.post('/markdown', {
+ text: this.comment
+ }, {
+ headers: this.accessToken && { Authorization: `token ${this.accessToken}` }
+ }).then(res => {
+ this.previewHtml = res.data;
+ }).catch(err => {
+ this.isOccurError = true;
+ this.errorMsg = formatErrorMsg(err);
+ })
+ },
+ handleCommentLoad() {
+ if (this.isLoadMore) return
+ this.isLoadMore = true;
+ this.getComments(this.issue)
+ .then(() => {
+ this.isLoadMore = false;
+ })
+ },
+ handleLogout() {
+ this.logout();
+ location.reload();
+ },
+ handleCommentFocus(e) {
+ const { distractionFreeMode } = this.options
+ if (!distractionFreeMode) return e && e.preventDefault()
+ this.isInputFocused = true;
+ },
+ handleCommentBlur(e) {
+ const { distractionFreeMode } = this.options
+ if (!distractionFreeMode) return e && e.preventDefault()
+ this.isInputFocused = false;
+ },
+ handleSort(direction) {
+ this.pagerDirection = direction;
+ },
+ handlePopup() {
+ const isVisible = !this.isPopupVisible
+ const hideHandle = e => {
+ if (hasClassInParent(e.target, 'gt-user', 'gt-popup')) {
+ return
+ }
+ document.removeEventListener('click', hideHandle)
+ this.isPopupVisible = false;
+ }
+ this.isPopupVisible = isVisible;
+ if (isVisible) {
+ document.addEventListener('click', hideHandle)
+ } else {
+ document.removeEventListener('click', hideHandle)
+ }
+ },
+ handleCommentKeyDown() {
+ const { enableHotKey } = this.options
+ if (enableHotKey) {
+ // this.publicBtnEL && this.publicBtnEL.focus()
+ this.handleCommentCreate();
+ }
+ },
+ getUserInfo() {
+ const accessToken =
+ this._accessToken ||
+ localStorage.getItem(GT_ACCESS_TOKEN);
+
+ return axiosGithub
+ .get("/user", {
+ headers: {
+ Authorization: `token ${accessToken}`
+ }
+ })
+ .then(res => {
+ this.user = res.data;
+ })
+ .catch(err => {
+ this.logout();
+ });
+ },
+ logout() {
+ this.user = null;
+ localStorage.removeItem(GT_ACCESS_TOKEN);
+ }
+ }
+};
+
+export default Mixin;
diff --git a/package/comment/util.js b/package/comment/util.js
new file mode 100644
index 0000000..6d92c56
--- /dev/null
+++ b/package/comment/util.js
@@ -0,0 +1,74 @@
+import axios from 'axios'
+
+export const queryParse = (search = window.location.search) => {
+ if (!search) return {}
+ const queryString = search[0] === '?' ? search.substring(1) : search
+ const query = {}
+ queryString
+ .split('&')
+ .forEach(queryStr => {
+ const [key, value] = queryStr.split('=')
+ /* istanbul ignore else */
+ if (key) query[decodeURIComponent(key)] = decodeURIComponent(value)
+ })
+
+ return query
+}
+
+export const queryStringify = query => {
+ const queryString = Object.keys(query)
+ .map(key => `${key}=${encodeURIComponent(query[key] || '')}`)
+ .join('&')
+ return queryString
+}
+
+export const axiosJSON = axios.create({
+ headers: {
+ 'Accept': 'application/json'
+ }
+})
+
+export const axiosGithub = axios.create({
+ baseURL: 'https://api.github.com',
+ headers: {
+ 'Accept': 'application/json'
+ }
+})
+
+export const getMetaContent = (name, content) => {
+ /* istanbul ignore next */
+ content || (content = 'content')
+ /* istanbul ignore next */
+ const el = document.querySelector(`meta[name='${name}']`)
+ /* istanbul ignore next */
+ return el && el.getAttribute(content)
+}
+
+export const formatErrorMsg = err => {
+ let msg = 'Error: '
+ if (err.response && err.response.data && err.response.data.message) {
+ msg += `${err.response.data.message}. `
+ err.response.data.errors && (msg += err.response.data.errors.map(e => e.message).join(', '))
+ } else {
+ msg += err.message
+ }
+ return msg
+}
+
+export const hasClassInParent = (element, ...className) => {
+ /* istanbul ignore next */
+ let yes = false
+ /* istanbul ignore next */
+ if (typeof element.className === 'undefined') return false
+ /* istanbul ignore next */
+ const classes = element.className.split(' ')
+ /* istanbul ignore next */
+ className.forEach((c, i) => {
+ /* istanbul ignore next */
+ yes = yes || (classes.indexOf(c) >= 0)
+ })
+ /* istanbul ignore next */
+ if (yes) return yes
+ /* istanbul ignore next */
+ return element.parentNode && hasClassInParent(element.parentNode, className)
+}
diff --git a/styles/arrow.styl b/styles/arrow.styl
new file mode 100644
index 0000000..ed650ea
--- /dev/null
+++ b/styles/arrow.styl
@@ -0,0 +1,22 @@
+@require './config'
+
+.arrow
+ display inline-block
+ width 0
+ height 0
+ &.up
+ border-left 4px solid transparent
+ border-right 4px solid transparent
+ border-bottom 6px solid $textColor
+ &.down
+ border-left 4px solid transparent
+ border-right 4px solid transparent
+ border-top 6px solid $textColor
+ &.right
+ border-top 4px solid transparent
+ border-bottom 4px solid transparent
+ border-left 6px solid $textColor
+ &.left
+ border-top 4px solid transparent
+ border-bottom 4px solid transparent
+ border-right 6px solid $textColor
diff --git a/styles/card.styl b/styles/card.styl
new file mode 100644
index 0000000..2992be0
--- /dev/null
+++ b/styles/card.styl
@@ -0,0 +1,10 @@
+@require './config'
+
+.card
+ background #fff
+ overflow hidden
+ border-radius 2px
+ box-shadow 0 1px 3px rgba(26,26,26,.1)
+ box-sizing border-box
+ margin 0 auto
+ margin-bottom 10px
\ No newline at end of file
diff --git a/styles/code.styl b/styles/code.styl
new file mode 100644
index 0000000..bb07762
--- /dev/null
+++ b/styles/code.styl
@@ -0,0 +1,89 @@
+@require './config'
+
+.content
+ code
+ color #FF7F00
+ padding 0.25rem 0.5rem
+ margin 0
+ font-size 0.85em
+ background-color rgba(27,31,35,0.05)
+ border-radius 3px
+
+.content
+ pre, pre[class*="language-"]
+ background-color $codeBgColor
+ line-height 1.4
+ border-radius 6px
+ padding 1.25rem 1.5rem
+ margin 0.85rem 0
+ white-space pre-wrap
+ word-break break-word
+ overflow auto
+ position relative
+ code
+ color #fff
+ padding 0
+ background-color none
+ border-radius 0
+ &:before
+ position absolute
+ top 0.8em
+ right 1em
+ font-size 0.75rem
+ color rgba(255, 255, 255, 0.4)
+ .highlighted-line
+ background-color rgba(0, 0, 0, 66%)
+ display block
+ margin 0.1rem -1.5rem 0
+ padding 0.1rem 1.8rem
+
+pre[class="language-js"], pre[class="language-javascript"]
+ &:before
+ content "js"
+
+pre[class="language-html"], pre[class="language-markup"]
+ &:before
+ content "html"
+
+pre[class="language-markdown"], pre[class="language-md"]
+ &:before
+ content "md"
+
+pre[class="language-vue"]:before
+ content "vue"
+
+pre[class="language-css"]:before
+ content "css"
+
+pre[class="language-sass"]:before
+ content "sass"
+
+pre[class="language-less"]:before
+ content "less"
+
+pre[class="language-scss"]:before
+ content "scss"
+
+pre[class="language-stylus"]:before
+ content "stylus"
+
+pre[class="language-json"]:before
+ content "json"
+
+pre[class="language-ruby"]:before
+ content "rb"
+
+pre[class="language-python"]:before
+ content "py"
+
+pre[class="language-go"]:before
+ content "go"
+
+pre[class="language-java"]:before
+ content "java"
+
+pre[class="language-c"]:before
+ content "c"
+
+pre[class="language-bash"]:before
+ content "sh"
diff --git a/styles/config.styl b/styles/config.styl
new file mode 100644
index 0000000..fd0def0
--- /dev/null
+++ b/styles/config.styl
@@ -0,0 +1,22 @@
+// colors
+$accentColor = #3eaf7c
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34
+
+// layout
+$navbarHeight = 3.6rem
+$sidebarWidth = 20rem
+$contentWidth = 740px
+
+// responsive breakpoints
+$MQNarrow = 1119px
+$MQMobile = 719px
+$MQMobileNarrow = 419px
+
+// global
+$appWidth = 1200px
+$toolWidth = 16rem
+$pageWidth = 60rem
+
+// @import '~@temp/override.styl' // generated from user config
diff --git a/styles/custom-blocks.styl b/styles/custom-blocks.styl
new file mode 100644
index 0000000..3ccc2df
--- /dev/null
+++ b/styles/custom-blocks.styl
@@ -0,0 +1,28 @@
+.custom-block
+ .custom-block-title
+ font-weight 600
+ margin-bottom -0.4rem
+ &.tip, &.warning, &.danger
+ padding .1rem 1.5rem
+ border-left-width .5rem
+ border-left-style solid
+ margin 1rem 0
+ &.tip
+ background-color #f3f5f7
+ border-color #42b983
+ &.warning
+ background-color rgba(255,229,100,.3)
+ border-color darken(#ffe564, 35%)
+ color darken(#ffe564, 70%)
+ .custom-block-title
+ color darken(#ffe564, 50%)
+ a
+ color $textColor
+ &.danger
+ background-color #ffe6e6
+ border-color darken(red, 20%)
+ color darken(red, 70%)
+ .custom-block-title
+ color darken(red, 40%)
+ a
+ color $textColor
diff --git a/styles/mobile.styl b/styles/mobile.styl
new file mode 100644
index 0000000..6ba8f80
--- /dev/null
+++ b/styles/mobile.styl
@@ -0,0 +1,39 @@
+@require './config'
+
+$mobileSidebarWidth = $sidebarWidth * 0.82
+
+// narrow desktop / iPad
+@media (max-width: $MQNarrow)
+ .sidebar
+ font-size 15px
+ width $mobileSidebarWidth
+ .page
+ padding-left $mobileSidebarWidth
+ .content:not(.custom)
+ padding 2rem
+ .content-header
+ padding 0 2rem
+
+// wide mobile
+@media (max-width: $MQMobile)
+ .sidebar
+ top 0
+ padding-top $navbarHeight
+ transform translateX(-100%)
+ transition transform .2s ease
+ .page
+ padding-left 0
+ .theme-container.sidebar-open
+ .sidebar
+ transform translateX(0)
+
+// narrow mobile
+@media (max-width: $MQMobileNarrow)
+ h1
+ font-size 1.9rem
+ .content:not(.custom)
+ padding 1.5rem
+ .content
+ pre, pre[class*="language-"]
+ margin 0.85rem -1.5rem
+ border-radius 0
diff --git a/styles/nprogress.styl b/styles/nprogress.styl
new file mode 100644
index 0000000..4fdf83a
--- /dev/null
+++ b/styles/nprogress.styl
@@ -0,0 +1,46 @@
+#nprogress
+ pointer-events none
+ .bar
+ background $accentColor
+ position fixed
+ z-index 1031
+ top 0
+ left 0
+ width 100%
+ height 2px
+ .peg
+ display block
+ position absolute
+ right 0px
+ width 100px
+ height 100%
+ box-shadow 0 0 10px $accentColor, 0 0 5px $accentColor
+ opacity 1.0
+ transform rotate(3deg) translate(0px, -4px)
+ .spinner
+ display block
+ position fixed
+ z-index 1031
+ top 15px
+ right 15px
+ .spinner-icon
+ width 18px
+ height 18px
+ box-sizing border-box
+ border solid 2px transparent
+ border-top-color $accentColor
+ border-left-color $accentColor
+ border-radius 50%
+ animation nprogress-spinner 400ms linear infinite
+
+.nprogress-custom-parent
+ overflow hidden
+ position relative
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar
+ position absolute
+
+@keyframes nprogress-spinner
+ 0% transform rotate(0deg)
+ 100% transform rotate(360deg)
diff --git a/styles/theme.styl b/styles/theme.styl
new file mode 100644
index 0000000..f610332
--- /dev/null
+++ b/styles/theme.styl
@@ -0,0 +1,225 @@
+@require './config'
+@require './nprogress'
+@require './code'
+@require './custom-blocks'
+@require './arrow'
+
+html, body
+ padding 0
+ margin 0
+
+body
+ font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+ -webkit-font-smoothing antialiased
+ -moz-osx-font-smoothing grayscale
+ font-size 16px
+ color $textColor
+ background #f6f6f6
+.page
+ padding-left $sidebarWidth
+.navbar
+ position fixed
+ z-index 20
+ top 0
+ left 0
+ right 0
+ height $navbarHeight
+ background-color #fff
+ box-sizing border-box
+ border-bottom 1px solid $borderColor
+
+.sidebar-mask
+ position fixed
+ z-index 9
+ top 0
+ left 0
+ width 100vw
+ height 100vh
+ display none
+
+.sidebar
+ font-size 15px
+ background-color #fff
+ width $sidebarWidth
+ position fixed
+ z-index 10
+ margin 0
+ top $navbarHeight
+ left 0
+ bottom 0
+ box-sizing border-box
+ border-right 1px solid $borderColor
+ overflow-y auto
+
+.content:not(.custom)
+ max-width $contentWidth
+ margin 0 auto
+ padding 2rem 2.5rem
+ > *:first-child
+ margin-top $navbarHeight - 2rem
+ a:hover
+ text-decoration underline
+ p.demo
+ padding 1rem 1.5rem
+ border 1px solid #ddd
+ border-radius 4px
+ img
+ max-width 100%
+
+.content-header
+ max-width $contentWidth
+ margin 0 auto
+ padding 0 2rem
+
+.content.custom
+ padding 0
+ margin 0
+
+a
+ font-weight 500
+ color $accentColor
+ text-decoration none
+
+p a code
+ font-weight 400
+ color $accentColor
+
+kbd
+ background #eee
+ border solid 0.15rem #ddd
+ border-bottom solid 0.25rem #ddd
+ border-radius 0.15rem
+ padding 0 0.15em
+
+blockquote
+ font-size 1rem
+ color #999
+ border-left .25rem solid #dfe2e5
+ margin-left 0
+ padding-left 1rem
+
+ul, ol
+ padding-left 1.2em
+
+strong
+ font-weight 600
+
+h1, h2, h3, h4, h5, h6
+ font-weight 600
+ line-height 1.25
+ .content:not(.custom) > &
+ margin-top (0.5rem - $navbarHeight)
+ padding-top ($navbarHeight + 1rem)
+ margin-bottom 0
+ &:first-child
+ margin-top -3.5rem
+ margin-bottom 1rem
+ + p, + pre, + .custom-block
+ margin-top 2rem
+ &:hover .header-anchor
+ opacity: 1
+
+h1
+ font-size 2rem
+
+h2
+ font-size 1.5rem
+ padding-bottom .3rem
+ border-bottom 1px solid $borderColor
+
+h3
+ font-size 1.2rem
+
+a.header-anchor
+ font-size 0.85em
+ float left
+ margin-left -0.87em
+ padding-right 0.23em
+ margin-top 0.125em
+ opacity 0
+ &:hover
+ text-decoration none
+
+code, kbd
+ font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
+
+p, ul, ol
+ line-height 1.7
+
+hr
+ border 0
+ border-top 1px solid $borderColor
+
+table
+ border-collapse collapse
+ margin 1rem 0
+
+tr
+ border-top 1px solid #dfe2e5
+ &:nth-child(2n)
+ background-color #f6f8fa
+
+th, td
+ border 1px solid #dfe2e5
+ padding .6em 1em
+
+.theme-line
+ width 100%
+ height 1px
+ transform scaleY(0.5)
+ transform-origin 50% 100%
+ background #DCDCDC
+
+.custom-layout
+ padding-top $navbarHeight
+
+.wrap
+ width $appWidth
+ padding 3rem 1rem
+ margin 0 auto
+
+.background-mask
+ width: 100%
+ height: 100%
+ position fixed
+ background-size cover
+ left 0
+ top 0
+ z-index -1
+
+// container
+.container
+ padding 1rem 0
+
+.page-container
+ width $pageWidth
+
+.theme-container
+ &.sidebar-open
+ .sidebar-mask
+ display: block
+ &.no-navbar
+ .content:not(.custom)
+ h1, h2, h3, h4, h5, h6
+ margin-top 1.5rem
+ padding-top 0
+
+@media (max-width ($MQNarrow + 1px))
+ .container
+ display block
+
+ .page-container
+ width 100%
+
+ .wrap
+ padding 3rem 0 0 0
+ width 100%
+
+@media (min-width: ($MQMobile + 1px))
+ .theme-container.no-sidebar
+ .sidebar
+ display none
+ .page
+ padding-left 0
+
+@require './mobile.styl'
diff --git a/styles/tool-group.styl b/styles/tool-group.styl
new file mode 100644
index 0000000..52ffb7f
--- /dev/null
+++ b/styles/tool-group.styl
@@ -0,0 +1,15 @@
+@require './config'
+@require './card'
+
+.tool-group
+ flex-grow 1
+ position fixed
+ top $navbarHeight + 1rem
+ width $toolWidth + 3rem
+ margin-left $pageWidth
+
+@media (max-width ($MQNarrow + 1px))
+ .tool-group
+ position static
+ width auto
+ margin-left 0
diff --git a/styles/transition.styl b/styles/transition.styl
new file mode 100644
index 0000000..37e8634
--- /dev/null
+++ b/styles/transition.styl
@@ -0,0 +1,69 @@
+.bounce-enter-active,
+.bounce-leave-active,
+.fade-enter-active,
+.fade-leave-active
+ absolute(left top)
+ size 100%
+
+.bounce-enter-active
+ z-index 1
+ animation bounce-in .1s
+
+.bounce-leave-active
+ z-index -1
+ animation bounce-out .1s
+
+@keyframes bounce-in
+ from
+ transform scale(1.25)
+
+ 50%
+ transform scale(1.125)
+
+ to
+ transform scale(1)
+
+@keyframes bounce-out
+ from
+ opacity 1
+
+ 50%
+ opacity .5
+
+ to
+ opacity 0
+
+.fade-enter-active, .fade-leave-active
+ transition opacity .1s
+
+.fade-enter, .fade-leave-active
+ opacity 0
+
+.bottom-enter-active, .bottom-leave-active
+ transform: translate3d(0, 0, 0)
+ transition transform .2s
+
+.bottom-enter, .bottom-leave-active
+ transform translate3d(0, 100%, 0)
+
+.top-enter-active, .top-leave-active
+ transform: translate3d(0, 0, 0)
+ transition transform .2s
+
+.top-enter, .top-leave-active
+ transform translate3d(0, -100%, 0)
+
+.left-enter-active, .left-leave-active, .right-enter-active, .right-leave-active
+ transform: translate3d(0, 0, 0)
+ transition transform .2s
+
+.left-enter, .left-leave-active
+ transform translate3d(-100%, 0, 0)
+
+.right-enter, .right-leave-active
+ transform translate3d(100%, 0, 0)
+
+
+
+
+
+ ![avatar]()
+
+
+
+
+
+
+