├── example
    ├── README.md
    ├── .vuepress
    │   └── config.js
    └── 1.md
├── index.js
├── .gitignore
├── .eslintrc.js
├── .editorconfig
├── .vscode
    ├── extensions.json
    └── settings.json
├── components
    ├── NavBar.vue
    ├── Post.vue
    ├── TimeAgo.vue
    ├── FooterBar.vue
    └── Home.vue
├── styles
    ├── assets
    │   └── user.svg
    └── index.styl
├── layouts
    ├── 404.vue
    └── Layout.vue
├── package.json
├── LICENSE
├── README.md
└── CHANGELOG.md


/example/README.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ['@vuepress/last-updated']
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | logs
4 | *.log
5 | npm-debug.log*
6 | coverage
7 | package-lock.json
8 | yarn.lock
9 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   extends: [
 4 |     'eslint:recommended',
 5 |     'plugin:vue/recommended'
 6 |   ],
 7 |   env: {
 8 |     browser: true,
 9 |     node: true
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/example/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   title: 'Example Site',
 5 |   description: 'Example for vuepress-theme-simple',
 6 |   theme: path.resolve(__dirname, '../../'),
 7 |   themeConfig: {
 8 |     author: 'viko16',
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
 3 |   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 4 | 
 5 |   // List of extensions which should be recommended for users of this workspace.
 6 |   "recommendations": [
 7 |     "octref.vetur",
 8 |     "thisismanta.stylus-supremacy"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-if="navbar"
 4 |     class="navbar"
 5 |   >
 6 |     <a
 7 |       v-for="(url, name) in navbar"
 8 |       :key="name"
 9 |       :href="url"
10 |       target="_blank"
11 |       class="navbar-item"
12 |       rel="noopener noreferrer"
13 |     >{{ name }}</a>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   computed: {
20 |     navbar() {
21 |       return this.$themeConfig.navbar || null
22 |     }
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/Post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="post-view">
 3 |     <div class="post-head">
 4 |       <h1 class="post-title">
 5 |         {{ $page.title }}
 6 |       </h1>
 7 |       <time-ago
 8 |         :last-updated="$page.frontmatter.date || $page.lastUpdated"
 9 |         class="post-date"
10 |       />
11 |     </div>
12 |     <Content />
13 |   </section>
14 | </template>
15 | 
16 | <script>
17 | import TimeAgo from './TimeAgo';
18 | 
19 | export default {
20 |   components: {
21 |     TimeAgo
22 |   },
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/styles/assets/user.svg:
--------------------------------------------------------------------------------
1 | <svg width="16" height="16" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="#888" d="M164.655 68.977zm701.666 700.172q0 59.804-36.377 94.437t-96.684 34.632H297.716q-60.293 0-96.684-34.632t-36.377-94.437q0-26.414 1.744-51.573t6.977-54.321 13.2-54.069 21.432-48.586 30.892-40.367 42.614-26.665 55.563-9.963q4.479 0 20.931 10.717t37.131 23.916 53.819 23.916 66.531 10.717 66.531-10.717 53.819-23.916 37.131-23.916 20.931-10.717q30.405 0 55.563 9.963t42.614 26.665 30.893 40.367 21.432 48.586 13.2 54.069 6.977 54.321 1.744 51.573zM706.846 324.131q0 79.242-56.065 135.292t-135.293 56.065-135.293-56.065-56.065-135.292 56.065-135.293 135.293-56.065 135.293 56.065 56.065 135.293z"/></svg>
2 | 


--------------------------------------------------------------------------------
/layouts/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="theme-container vuepress-theme-simple">
 3 |     <header class="header">
 4 |       <router-link
 5 |         to="/"
 6 |         :title="$description"
 7 |         class="site-name"
 8 |       >
 9 |         {{ $site.title }}
10 |       </router-link>
11 |       <div style="clear: both" />
12 |     </header>
13 |     <div class="layout-404">
14 |       <h1>404</h1>
15 |       <p>Seems nothing here.</p>
16 |       <router-link to="/">
17 |         Back to home.
18 |       </router-link>
19 |     </div>
20 |     <footer-bar />
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import FooterBar from '../components/FooterBar';
26 | 
27 | export default {
28 |   components: {
29 |     FooterBar,
30 |   },
31 | };
32 | </script>
33 | 


--------------------------------------------------------------------------------
/components/TimeAgo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <time
 3 |     :datetime="lastUpdated | formatDate"
 4 |     :title="lastUpdated | formatDate"
 5 |     pubdate="pubdate"
 6 |   >
 7 |     {{ lastUpdated | timeago($lang) }}
 8 |   </time>
 9 | </template>
10 | 
11 | <script>
12 | import { format } from 'timeago.js';
13 | 
14 | export default {
15 |   filters: {
16 |     timeago: (str, lang) => {
17 |       if (!str) return format()
18 |       const locale = (lang === 'zh-CN') ? 'zh_CN': 'en_US'
19 |       return format(new Date(str), locale)
20 |     },
21 |     formatDate: date => {
22 |       return new Date(date).toLocaleString()
23 |     }
24 |   },
25 |   props: {
26 |     lastUpdated: {
27 |       type: [ String, Date, Number ],
28 |       default: ''
29 |     },
30 |   },
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/components/FooterBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="footer">
 3 |     © {{ thisYear }}
 4 |     <i
 5 |       v-if="author"
 6 |       class="icon-user"
 7 |     />
 8 |     {{ author }}
 9 |     <br>
10 |     Powered by
11 |     <a
12 |       href="https://vuepress.vuejs.org/"
13 |       rel="noopener"
14 |       target="_blank"
15 |     >VuePress</a>
16 |     | Theme
17 |     <a
18 |       href="https://github.com/viko16/vuepress-theme-simple"
19 |       rel="noopener"
20 |       target="_blank"
21 |     >Simple</a>
22 |   </footer>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   computed: {
28 |     thisYear() {
29 |       return new Date().getFullYear();
30 |     },
31 |     author() {
32 |       return this.$themeConfig.author || '';
33 |     },
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuepress-theme-simple",
 3 |   "description": "✏️ Very Simple Blog Theme for VuePress",
 4 |   "version": "1.2.2",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "vuepress dev example",
 8 |     "lint": "eslint .",
 9 |     "release": "npm run lint && standard-version && npm publish"
10 |   },
11 |   "keywords": [
12 |     "vuepress",
13 |     "vuepress-theme",
14 |     "blog-theme"
15 |   ],
16 |   "author": "viko16 <16viko@gmail.com>",
17 |   "repository": "viko16/vuepress-theme-simple",
18 |   "license": "MIT",
19 |   "devDependencies": {
20 |     "eslint": "^6.8.0",
21 |     "eslint-plugin-vue": "^6.1.2",
22 |     "standard-version": "^8.0.1",
23 |     "vuepress": "^1.3.1"
24 |   },
25 |   "dependencies": {
26 |     "@vuepress/plugin-last-updated": "^1.2.0",
27 |     "prismjs": "^1.19.0",
28 |     "timeago.js": "^4.0.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/layouts/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="theme-container vuepress-theme-simple">
 3 |     <header class="header">
 4 |       <router-link
 5 |         to="/"
 6 |         :title="$description"
 7 |         class="site-name"
 8 |       >
 9 |         {{ $site.title }}
10 |       </router-link>
11 |       <div style="clear: both" />
12 |       <nav-bar />
13 |     </header>
14 |     <home-page v-if="isHome" />
15 |     <post-page v-else />
16 |     <footer-bar />
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import HomePage from "../components/Home";
22 | import PostPage from "../components/Post";
23 | import FooterBar from '../components/FooterBar';
24 | import NavBar from '../components/NavBar';
25 | 
26 | export default {
27 |   components: {
28 |     HomePage,
29 |     PostPage,
30 |     FooterBar,
31 |     NavBar,
32 |   },
33 |   computed: {
34 |     isHome() {
35 |       return this.$page.path === '/';
36 |     }
37 |   }
38 | };
39 | </script>
40 | 


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


--------------------------------------------------------------------------------
/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list-view">
 3 |     <div
 4 |       v-if="filteredList.length === 0"
 5 |       class="empty-list"
 6 |     >
 7 |       Ooops! Nothing here..🙈
 8 |     </div>
 9 |     <ol
10 |       v-else
11 |       class="list"
12 |     >
13 |       <li
14 |         v-for="page of filteredList"
15 |         :key="page.key"
16 |         class="list-item"
17 |       >
18 |         <router-link
19 |           :to="page.path"
20 |           class="item-title"
21 |         >
22 |           {{ page.title }}
23 |         </router-link>
24 |         <br>
25 |         <time-ago
26 |           :last-updated="page.frontmatter.date || page.lastUpdated"
27 |           class="item-date"
28 |         />
29 |       </li>
30 |     </ol>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import TimeAgo from './TimeAgo';
36 | 
37 | export default {
38 |   components: {
39 |     TimeAgo
40 |   },
41 |   computed: {
42 |     filteredList() {
43 |       // Order by publish date, desc
44 |       return this.$site.pages
45 |         .filter(item => item.path !== '/')
46 |         .sort((a, b) => {
47 |           return new Date(b.frontmatter.date || b.lastUpdated) - new Date(a.frontmatter.date || a.lastUpdated)
48 |         })
49 |     }
50 |   },
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "eslint.enable": true,
 3 |   "eslint.validate": [
 4 |     "javascript",
 5 |     "javascriptreact",
 6 |     { "language": "vue", "autoFix": true }
 7 |   ],
 8 |   "stylusSupremacy.insertColons": false,
 9 |   "stylusSupremacy.insertSemicolons": false,
10 |   "stylusSupremacy.insertBraces": false,
11 |   "stylusSupremacy.insertNewLineAroundImports": true,
12 |   "stylusSupremacy.insertNewLineAroundBlocks": true,
13 |   "stylusSupremacy.insertNewLineAroundProperties": false,
14 |   "stylusSupremacy.insertNewLineAroundOthers": false,
15 |   "stylusSupremacy.preserveNewLinesBetweenPropertyValues": true,
16 |   "stylusSupremacy.insertSpaceBeforeComment": true,
17 |   "stylusSupremacy.insertSpaceAfterComment": true,
18 |   "stylusSupremacy.insertSpaceAfterComma": true,
19 |   "stylusSupremacy.insertSpaceInsideParenthesis": false,
20 |   "stylusSupremacy.insertParenthesisAfterNegation": false,
21 |   "stylusSupremacy.insertParenthesisAroundIfCondition": true,
22 |   "stylusSupremacy.insertNewLineBeforeElse": false,
23 |   "stylusSupremacy.insertLeadingZeroBeforeFraction": true,
24 |   "stylusSupremacy.selectorSeparator": ",\n",
25 |   "stylusSupremacy.tabStopChar": "  ",
26 |   "stylusSupremacy.quoteChar": "'",
27 |   "stylusSupremacy.sortProperties": false,
28 |   "stylusSupremacy.alwaysUseImport": true,
29 |   "stylusSupremacy.alwaysUseNot": false,
30 |   "stylusSupremacy.alwaysUseAtBlock": false,
31 |   "stylusSupremacy.alwaysUseExtends": false,
32 |   "stylusSupremacy.alwaysUseNoneOverZero": false,
33 |   "stylusSupremacy.alwaysUseZeroWithoutUnit": true,
34 |   "stylusSupremacy.reduceMarginAndPaddingValues": true,
35 |   "[stylus]": {
36 |     "editor.formatOnSave": true
37 |   },
38 | }
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuepress-theme-simple
 2 | 
 3 | [![npm](https://img.shields.io/npm/v/vuepress-theme-simple.svg)](https://www.npmjs.com/package/vuepress-theme-simple)
 4 | [![LICENSE](https://img.shields.io/npm/l/vuepress-theme-simple.svg)](https://github.com/viko16/vuepress-theme-simple/blob/master/LICENSE)
 5 | [![Dependency Status](https://david-dm.org/viko16/vuepress-theme-simple.svg?theme=shields.io)](https://david-dm.org/viko16/vuepress-theme-simple)
 6 | 
 7 | > ✏️ Very Simple Blog Theme for VuePress.
 8 | 
 9 | ![preview](https://user-images.githubusercontent.com/5064777/52162728-51198680-2713-11e9-9546-e737600be782.png)
10 | 
11 | Demo: [My Personal Blog](https://ukn.me/) ([Source](https://github.com/viko16/vuepress-blog))
12 | 
13 | ## Features
14 | - 💡 Simple Configuration.
15 | - 🖼️ `/README.md` content will be **IGNORE** by this theme, and replace with posts list as screenshot.
16 | - 📅 The list of posts is sorted by the following two fields:
17 |   - `lastUpdated` based Git Commit **(Default)** - [Detail](https://vuepress.vuejs.org/theme/default-theme-config.html#last-updated)
18 |   - `date` field in FrontMatter **(Higher Priority)** - [Detail](https://vuepress.vuejs.org/guide/frontmatter.html)
19 | 
20 | ## Installation
21 | 
22 | > Note: Work For VuePress 1.x
23 | 
24 | ```shell
25 | $ npm install vuepress-theme-simple --save-dev
26 | # or
27 | $ yarn add vuepress-theme-simple --dev
28 | ```
29 | 
30 | ## Usage
31 | 
32 | Modify your `.vuepress/config.js` and provide the `theme` option.
33 | 
34 | ```js
35 | module.exports = {
36 |   theme: 'simple',
37 | }
38 | ```
39 | 
40 | And that's some additional configs: (Optional) 
41 | ```js
42 | module.exports = {
43 |   theme: 'simple',
44 |   themeConfig: {
45 |     author: 'YOUR NAME', // will display on the page footer
46 |     navbar: { // will display below the title
47 |       YOUR_SITE_NAME: 'YOUR_SITE_URL',
48 |     }
49 |   }
50 | }
51 | ```
52 | 
53 | ## Development
54 | 
55 | ```sh
56 | npm run dev
57 | ```
58 | 
59 | ## License
60 | 
61 | [MIT License](https://opensource.org/licenses/MIT) © [viko16](https://github.com/viko16)
62 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
  4 | 
  5 | ### [1.2.2](https://github.com/viko16/vuepress-theme-simple/compare/v1.2.1...v1.2.2) (2020-12-15)
  6 | 
  7 | 
  8 | ### Bug Fixes
  9 | 
 10 | * Rollback!!! ([63eebe8](https://github.com/viko16/vuepress-theme-simple/commit/63eebe8c6c4d2bc56f04d9beefca7e3fab8825f8))
 11 | 
 12 | ### [1.2.1](https://github.com/viko16/vuepress-theme-simple/compare/v1.2.0...v1.2.1) (2020-12-15)
 13 | 
 14 | 
 15 | ### Bug Fixes
 16 | 
 17 | * fix language under node env ([6a6f5b0](https://github.com/viko16/vuepress-theme-simple/commit/6a6f5b05ccb74ce23929d75ef622e250f9f5c03a))
 18 | 
 19 | ## [1.2.0](https://github.com/viko16/vuepress-theme-simple/compare/v1.1.2...v1.2.0) (2020-12-15)
 20 | 
 21 | 
 22 | ### Features
 23 | 
 24 | * use browser language for timeago.js ([533089d](https://github.com/viko16/vuepress-theme-simple/commit/533089dd78fc48be95b7e76cd5bcf54cda2f16b2))
 25 | 
 26 | ### [1.1.2](https://github.com/viko16/vuepress-theme-simple/compare/v1.1.1...v1.1.2) (2020-07-14)
 27 | 
 28 | ### [1.1.1](https://github.com/viko16/vuepress-theme-simple/compare/v1.1.0...v1.1.1) (2020-03-16)
 29 | 
 30 | ## [1.1.0](https://github.com/viko16/vuepress-theme-simple/compare/v1.0.0...v1.1.0) (2020-03-16)
 31 | 
 32 | 
 33 | ### Features
 34 | 
 35 | * formatDate() use full date ([cfab629](https://github.com/viko16/vuepress-theme-simple/commit/cfab62983fcfb22f547a86582ac08ed3753fb9a9))
 36 | 
 37 | 
 38 | ### Bug Fixes
 39 | 
 40 | * 404 page style (close [#6](https://github.com/viko16/vuepress-theme-simple/issues/6)) ([58d8a62](https://github.com/viko16/vuepress-theme-simple/commit/58d8a627dfa76b362afedded791b47b5d1e68811))
 41 | 
 42 | ## [1.0.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.7.0...v1.0.0) (2020-01-21)
 43 | 
 44 | ## [0.7.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.6.1...v0.7.0) (2019-05-20)
 45 | 
 46 | 
 47 | ### Features
 48 | 
 49 | * add line number style ([b38fe68](https://github.com/viko16/vuepress-theme-simple/commit/b38fe68))
 50 | 
 51 | 
 52 | 
 53 | ## [0.6.1](https://github.com/viko16/vuepress-theme-simple/compare/v0.6.0...v0.6.1) (2019-04-29)
 54 | 
 55 | 
 56 | ### Bug Fixes
 57 | 
 58 | * add max-width for images ([4023c92](https://github.com/viko16/vuepress-theme-simple/commit/4023c92))
 59 | 
 60 | 
 61 | 
 62 | # [0.6.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.5.0...v0.6.0) (2019-04-29)
 63 | 
 64 | 
 65 | ### Features
 66 | 
 67 | * add author info ([10fd13f](https://github.com/viko16/vuepress-theme-simple/commit/10fd13f))
 68 | * add navbar support (close [#1](https://github.com/viko16/vuepress-theme-simple/issues/1)) ([16039cb](https://github.com/viko16/vuepress-theme-simple/commit/16039cb))
 69 | 
 70 | 
 71 | 
 72 | <a name="0.5.0"></a>
 73 | # [0.5.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.4.0...v0.5.0) (2019-02-09)
 74 | 
 75 | 
 76 | ### Features
 77 | 
 78 | * add 404 layout ([4003576](https://github.com/viko16/vuepress-theme-simple/commit/4003576))
 79 | * support code block highlight line style ([6e849b6](https://github.com/viko16/vuepress-theme-simple/commit/6e849b6))
 80 | * support custom-block style ([3d45d70](https://github.com/viko16/vuepress-theme-simple/commit/3d45d70))
 81 | 
 82 | 
 83 | 
 84 | <a name="0.4.0"></a>
 85 | # [0.4.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.3.0...v0.4.0) (2019-02-07)
 86 | 
 87 | 
 88 | ### Features
 89 | 
 90 | * separate post title and time ([fd9db13](https://github.com/viko16/vuepress-theme-simple/commit/fd9db13))
 91 | 
 92 | 
 93 | 
 94 | <a name="0.3.0"></a>
 95 | # [0.3.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.2.0...v0.3.0) (2019-02-05)
 96 | 
 97 | 
 98 | ### Features
 99 | 
100 | * prettify footer ([df01bdf](https://github.com/viko16/vuepress-theme-simple/commit/df01bdf))
101 | 
102 | 
103 | 
104 | <a name="0.2.0"></a>
105 | # [0.2.0](https://github.com/viko16/vuepress-theme-simple/compare/v0.1.1...v0.2.0) (2019-02-03)
106 | 
107 | 
108 | ### Features
109 | 
110 | * add empty view ([b55e388](https://github.com/viko16/vuepress-theme-simple/commit/b55e388))
111 | * improve footbar and layout ([c832173](https://github.com/viko16/vuepress-theme-simple/commit/c832173))
112 | 
113 | 
114 | 
115 | <a name="0.1.1"></a>
116 | ## [0.1.1](https://github.com/viko16/vuepress-theme-simple/compare/v0.1.0...v0.1.1) (2019-02-02)
117 | 
118 | 
119 | ### Bug Fixes
120 | 
121 | * typo ([c127ca2](https://github.com/viko16/vuepress-theme-simple/commit/c127ca2))
122 | 
123 | 
124 | 
125 | <a name="0.1.0"></a>
126 | # 0.1.0 (2019-02-02)
127 | 
128 | 
129 | ### Features
130 | 
131 | * init ([fbf495f](https://github.com/viko16/vuepress-theme-simple/commit/fbf495f))
132 | * the first version 🎉 ([69dbe66](https://github.com/viko16/vuepress-theme-simple/commit/69dbe66))
133 | 


--------------------------------------------------------------------------------
/styles/index.styl:
--------------------------------------------------------------------------------
  1 | @import '~prismjs/themes/prism.css'
  2 | 
  3 | //
  4 | // Variable
  5 | // -----------------------------------------
  6 | fontSize = 14px
  7 | fontFamily = 'Source Sans Pro', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif
  8 | monospaceFontFamily = 'Ubuntu Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace
  9 | bgColor = #fff
 10 | textColor = #555
 11 | linkColor = #08c
 12 | metaColor = #888
 13 | codeBgColor = #f7f7f7
 14 | lineColor = #ddd
 15 | 
 16 | //
 17 | // Common
 18 | // -----------------------------------------
 19 | /::-moz-selection,
 20 | /::selection
 21 |   background #B2D7FF
 22 | 
 23 | body
 24 |   // font
 25 |   font-family fontFamily
 26 |   font-size fontSize
 27 |   line-height 2
 28 |   -webkit-font-smoothing antialiased
 29 |   -moz-osx-font-smoothing grayscale
 30 |   -webkit-text-size-adjust none
 31 |   // size
 32 |   position relative
 33 |   max-width 700px
 34 |   margin 0 auto
 35 |   padding 0
 36 |   background bgColor
 37 |   color textColor
 38 | 
 39 | h1,
 40 | h2,
 41 | h3,
 42 | h4,
 43 | h5,
 44 | h6
 45 |   font-weight 400
 46 |   position relative
 47 | 
 48 | a
 49 |   text-decoration none
 50 |   color linkColor
 51 |   overflow-wrap break-word
 52 |   word-break break-all
 53 | 
 54 | code
 55 |   font-family monospaceFontFamily !important
 56 | 
 57 | img,
 58 | video,
 59 | canvas,
 60 | iframe
 61 |   max-width 100%
 62 | 
 63 | //
 64 | // Shared
 65 | // -----------------------------------------
 66 | .header
 67 |   margin 50px auto 40px
 68 |   text-align center
 69 | 
 70 |   .site-name
 71 |     font-size fontSize + 2
 72 |     letter-spacing 5px
 73 |     text-transform uppercase
 74 |     color textColor
 75 | 
 76 |   .navbar
 77 |     margin 10px 10px 0
 78 | 
 79 |   .navbar-item
 80 |     margin-right 10px
 81 |     color metaColor
 82 |     text-decoration underline
 83 | 
 84 | .searchbar-input
 85 |   display block
 86 |   margin 5px auto 0
 87 |   width 150px
 88 |   font-family fontFamily
 89 |   font-size fontSize
 90 |   text-align center
 91 |   line-height 1.5
 92 |   border none
 93 |   background-color bgColor
 94 |   color metaColor
 95 | 
 96 |   &:hover,
 97 |   &:focus,
 98 |   &:active
 99 |     outline none
100 |     background-color darken(bgColor, 2)
101 |     text-decoration none
102 |     color textColor
103 | 
104 | .footer
105 |   margin-bottom 15px
106 |   text-align center
107 |   color metaColor
108 | 
109 |   a
110 |     color metaColor
111 |     text-decoration underline
112 | 
113 |   .icon-user
114 |     width 16px
115 |     height 16px
116 |     display inline-block
117 |     background-image embedurl('./assets/user.svg', 'utf8')
118 |     background-repeat no-repeat
119 |     background-position center
120 |     background-size 100%
121 |     vertical-align sub
122 | 
123 | //
124 | // List View
125 | // -----------------------------------------
126 | .list-view
127 |   margin 0 20px
128 | 
129 |   ol,
130 |   ul
131 |     padding 0
132 |     list-style none
133 | 
134 | .empty-list
135 |   height 100px
136 |   text-align center
137 | 
138 | .list-item
139 |   position relative
140 |   margin-bottom 50px
141 | 
142 | .item-title
143 |   display inline-block
144 |   margin-bottom 10px
145 |   font-size fontSize + 2
146 |   color textColor
147 | 
148 |   &:hover
149 |     color linkColor
150 | 
151 | .item-date
152 |   display inline-block
153 |   font-size fontSize - 2
154 |   color metaColor
155 |   border-top 1px solid lineColor
156 |   padding-top 12px
157 | 
158 | //
159 | // Post View
160 | // -----------------------------------------
161 | .post-view
162 |   position relative
163 |   margin 0 20px 50px
164 | 
165 |   // overflow-x hidden
166 |   a.header-anchor
167 |     position absolute
168 |     left -30px
169 |     width 30px
170 |     text-align center
171 |     visibility hidden
172 | 
173 |   h1:hover a.header-anchor,
174 |   h2:hover a.header-anchor,
175 |   h3:hover a.header-anchor,
176 |   h4:hover a.header-anchor,
177 |   h5:hover a.header-anchor,
178 |   h6:hover a.header-anchor
179 |     visibility visible
180 | 
181 |   a[href]:not(.header-anchor)
182 |     position relative
183 | 
184 |     &:hover
185 |       border-bottom 1px dashed linkColor
186 | 
187 |     // thanks longsien/BareCSS
188 |     // https://github.com/longsien/BareCSS/blob/v1.1.0/less/_tooltip.less
189 |     &:after
190 |       content attr(href)
191 |       position absolute
192 |       left 50%
193 |       top 0
194 |       visibility hidden
195 |       pointer-events none
196 |       transform translate(-50%, -95%)
197 |       transition all 0.1s ease-in-out
198 |       overflow visible
199 |       padding 0 10px
200 |       background #454f54
201 |       font-size 0.8em
202 |       border-radius 5px
203 |       color #ffffff
204 |       line-height 2
205 |       white-space nowrap
206 |       opacity 0.9
207 | 
208 |     &:hover:after
209 |       visibility visible
210 |       transform translate(-50%, calc(-100% - 5px))
211 | 
212 |   code
213 |     background codeBgColor
214 |     padding 2px 4px 0
215 |     border-radius 5px
216 | 
217 | .post-head
218 |   position relative
219 | 
220 | .post-title
221 |   font-size fontSize * 2
222 |   margin-bottom 50px
223 |   line-height 1
224 | 
225 | .post-date
226 |   position absolute
227 |   right 0
228 |   top 0
229 |   font-size fontSize - 2
230 |   font-weight 400
231 |   line-height fontSize * 2
232 |   color metaColor
233 | 
234 | // when smaller than tablet
235 | @media (max-width: 767px)
236 |   .post-title
237 |     font-size fontSize * 1.5
238 | 
239 |   .post-date
240 |     line-height fontSize * 1.5
241 | 
242 | blockquote
243 |   margin 0
244 |   padding 0 16px
245 |   border-left 4px solid lineColor
246 | 
247 | table
248 |   border-collapse collapse
249 | 
250 | td,
251 | th
252 |   border 1px solid lineColor
253 |   padding 0.4em 1em
254 | 
255 | // https://github.com/vuejs/vuepress/blob/v1.0.0-alpha.37/packages/@vuepress/theme-default/styles/custom-blocks.styl
256 | .custom-block
257 |   .custom-block-title
258 |     font-weight 600
259 | 
260 |   p
261 |     line-height 1.5
262 | 
263 |   &.tip,
264 |   &.warning,
265 |   &.danger
266 |     padding 0.1em 1.5em
267 |     border-left-width 0.5em
268 |     border-left-style solid
269 |     margin 1em 0
270 | 
271 |   &.tip
272 |     background-color #f3f5f7
273 |     border-color #42b983
274 | 
275 |   &.warning
276 |     background-color rgba(255, 229, 100, 0.3)
277 |     border-color darken(#ffe564, 35%)
278 |     color darken(#ffe564, 70%)
279 | 
280 |     .custom-block-title
281 |       color darken(#ffe564, 50%)
282 | 
283 |   &.danger
284 |     background-color #ffe6e6
285 |     border-color darken(red, 20%)
286 |     color darken(red, 70%)
287 | 
288 |     .custom-block-title
289 |       color darken(red, 40%)
290 | 
291 | //
292 | // 404 View
293 | // -----------------------------------------
294 | .layout-404
295 |   margin 8em
296 |   text-align center
297 | 
298 | //
299 | // Override Prism
300 | // -----------------------------------------
301 | div[class*='language-']
302 |   position relative
303 |   background codeBgColor
304 |   border-radius 5px
305 | 
306 |   .highlight-lines
307 |     position absolute
308 |     user-select none
309 |     top 0
310 |     left 0
311 |     width 100%
312 |     line-height 1.5
313 |     padding 1em 0
314 | 
315 |     .highlighted
316 |       background-color #fffbdd
317 | 
318 |   code
319 |     padding 0
320 |     background transparent
321 | 
322 |   pre[class*='language-']
323 |     position relative
324 |     color textColor
325 |     background-color transparent
326 |     font-family monospaceFontFamily !important
327 | 
328 | .line-numbers-mode
329 |   .line-numbers-wrapper
330 |     position absolute
331 |     top 1em
332 |     left 0.5em
333 |     padding-right 0.5em
334 |     min-width 1.5em
335 |     color rgba(textColor, 0.4)
336 |     text-align right
337 |     line-height 1.5
338 |     user-select none
339 | 
340 |   pre[class*='language-']
341 |     padding-left 3.5em
342 | 


--------------------------------------------------------------------------------
/example/1.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Demo 1 - Markdown Cheatsheet
  3 | date: 2020-02-21
  4 | ---
  5 | 
  6 | > Quote: [adam-p's Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
  7 | 
  8 | ## Headers
  9 | 
 10 | ```no-highlight
 11 | # H1
 12 | ## H2
 13 | ### H3
 14 | #### H4
 15 | ##### H5
 16 | ###### H6
 17 | 
 18 | Alternatively, for H1 and H2, an underline-ish style:
 19 | 
 20 | Alt-H1
 21 | ======
 22 | 
 23 | Alt-H2
 24 | ------
 25 | ```
 26 | 
 27 | # H1
 28 | ## H2
 29 | ### H3
 30 | #### H4
 31 | ##### H5
 32 | ###### H6
 33 | 
 34 | Alternatively, for H1 and H2, an underline-ish style:
 35 | 
 36 | Alt-H1
 37 | ======
 38 | 
 39 | Alt-H2
 40 | ------
 41 | 
 42 | <a name="emphasis"/>
 43 | 
 44 | ## Emphasis
 45 | 
 46 | ```no-highlight
 47 | Emphasis, aka italics, with *asterisks* or _underscores_.
 48 | 
 49 | Strong emphasis, aka bold, with **asterisks** or __underscores__.
 50 | 
 51 | Combined emphasis with **asterisks and _underscores_**.
 52 | 
 53 | Strikethrough uses two tildes. ~~Scratch this.~~
 54 | ```
 55 | 
 56 | Emphasis, aka italics, with *asterisks* or _underscores_.
 57 | 
 58 | Strong emphasis, aka bold, with **asterisks** or __underscores__.
 59 | 
 60 | Combined emphasis with **asterisks and _underscores_**.
 61 | 
 62 | Strikethrough uses two tildes. ~~Scratch this.~~
 63 | 
 64 | 
 65 | <a name="lists"/>
 66 | 
 67 | ## Lists
 68 | 
 69 | (In this example, leading and trailing spaces are shown with with dots: ⋅)
 70 | 
 71 | ```no-highlight
 72 | 1. First ordered list item
 73 | 2. Another item
 74 | ⋅⋅* Unordered sub-list. 
 75 | 1. Actual numbers don't matter, just that it's a number
 76 | ⋅⋅1. Ordered sub-list
 77 | 4. And another item.
 78 | 
 79 | ⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
 80 | 
 81 | ⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
 82 | ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
 83 | ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
 84 | 
 85 | * Unordered list can use asterisks
 86 | - Or minuses
 87 | + Or pluses
 88 | ```
 89 | 
 90 | 1. First ordered list item
 91 | 2. Another item
 92 |   * Unordered sub-list. 
 93 | 1. Actual numbers don't matter, just that it's a number
 94 |   1. Ordered sub-list
 95 | 4. And another item.
 96 | 
 97 |    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
 98 | 
 99 |    To have a line break without a paragraph, you will need to use two trailing spaces.  
100 |    Note that this line is separate, but within the same paragraph.  
101 |    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
102 | 
103 | * Unordered list can use asterisks
104 | - Or minuses
105 | + Or pluses
106 | 
107 | <a name="links"/>
108 | 
109 | ## Links
110 | 
111 | There are two ways to create links.
112 | 
113 | ```no-highlight
114 | [I'm an inline-style link](https://www.google.com)
115 | 
116 | [I'm an inline-style link with title](https://www.google.com "Google's Homepage")
117 | 
118 | [I'm a reference-style link][Arbitrary case-insensitive reference text]
119 | 
120 | [I'm a relative reference to a repository file](../blob/master/LICENSE)
121 | 
122 | [You can use numbers for reference-style link definitions][1]
123 | 
124 | Or leave it empty and use the [link text itself].
125 | 
126 | URLs and URLs in angle brackets will automatically get turned into links. 
127 | http://www.example.com or <http://www.example.com> and sometimes 
128 | example.com (but not on Github, for example).
129 | 
130 | Some text to show that the reference links can follow later.
131 | 
132 | [arbitrary case-insensitive reference text]: https://www.mozilla.org
133 | [1]: http://slashdot.org
134 | [link text itself]: http://www.reddit.com
135 | ```
136 | 
137 | [I'm an inline-style link](https://www.google.com)
138 | 
139 | [I'm an inline-style link with title](https://www.google.com "Google's Homepage")
140 | 
141 | [I'm a reference-style link][Arbitrary case-insensitive reference text]
142 | 
143 | [I'm a relative reference to a repository file](../blob/master/LICENSE)
144 | 
145 | [You can use numbers for reference-style link definitions][1]
146 | 
147 | Or leave it empty and use the [link text itself].
148 | 
149 | URLs and URLs in angle brackets will automatically get turned into links. 
150 | http://www.example.com or <http://www.example.com> and sometimes 
151 | example.com (but not on Github, for example).
152 | 
153 | Some text to show that the reference links can follow later.
154 | 
155 | [arbitrary case-insensitive reference text]: https://www.mozilla.org
156 | [1]: http://slashdot.org
157 | [link text itself]: http://www.reddit.com
158 | 
159 | <a name="images"/>
160 | 
161 | ## Images
162 | 
163 | ```no-highlight
164 | Here's our logo (hover to see the title text):
165 | 
166 | Inline-style: 
167 | ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
168 | 
169 | Reference-style: 
170 | ![alt text][logo]
171 | 
172 | [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
173 | ```
174 | 
175 | Here's our logo (hover to see the title text):
176 | 
177 | Inline-style: 
178 | ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
179 | 
180 | Reference-style: 
181 | ![alt text][logo]
182 | 
183 | [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
184 | 
185 | <a name="code"/>
186 | 
187 | ## Code and Syntax Highlighting
188 | 
189 | Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and *Markdown Here* -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. *Markdown Here* supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the [highlight.js demo page](http://softwaremaniacs.org/media/soft/highlight/test.html).
190 | 
191 | ```no-highlight
192 | Inline `code` has `back-ticks around` it.
193 | ```
194 | 
195 | Inline `code` has `back-ticks around` it.
196 | 
197 | Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
198 | 
199 | <pre lang="no-highlight"><code>```javascript
200 | var s = "JavaScript syntax highlighting";
201 | alert(s);
202 | ```
203 |  
204 | ```python
205 | s = "Python syntax highlighting"
206 | print s
207 | ```
208 |  
209 | ```
210 | No language indicated, so no syntax highlighting. 
211 | But let's throw in a &lt;b&gt;tag&lt;/b&gt;.
212 | ```
213 | </code></pre>
214 | 
215 | 
216 | 
217 | ```javascript
218 | var s = "JavaScript syntax highlighting";
219 | alert(s);
220 | ```
221 | 
222 | ```python
223 | s = "Python syntax highlighting"
224 | print s
225 | ```
226 | 
227 | ```
228 | No language indicated, so no syntax highlighting in Markdown Here (varies on Github). 
229 | But let's throw in a <b>tag</b>.
230 | ```
231 | 
232 | 
233 | <a name="tables"/>
234 | 
235 | ## Tables
236 | 
237 | Tables aren't part of the core Markdown spec, but they are part of GFM and *Markdown Here* supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.
238 | 
239 | ```no-highlight
240 | Colons can be used to align columns.
241 | 
242 | | Tables        | Are           | Cool  |
243 | | ------------- |:-------------:| -----:|
244 | | col 3 is      | right-aligned | $1600 |
245 | | col 2 is      | centered      |   $12 |
246 | | zebra stripes | are neat      |    $1 |
247 | 
248 | There must be at least 3 dashes separating each header cell.
249 | The outer pipes (|) are optional, and you don't need to make the 
250 | raw Markdown line up prettily. You can also use inline Markdown.
251 | 
252 | Markdown | Less | Pretty
253 | --- | --- | ---
254 | *Still* | `renders` | **nicely**
255 | 1 | 2 | 3
256 | ```
257 | 
258 | Colons can be used to align columns.
259 | 
260 | | Tables        | Are           | Cool |
261 | | ------------- |:-------------:| -----:|
262 | | col 3 is      | right-aligned | $1600 |
263 | | col 2 is      | centered      |   $12 |
264 | | zebra stripes | are neat      |    $1 |
265 | 
266 | There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
267 | 
268 | Markdown | Less | Pretty
269 | --- | --- | ---
270 | *Still* | `renders` | **nicely**
271 | 1 | 2 | 3
272 | 
273 | <a name="blockquotes"/>
274 | 
275 | ## Blockquotes
276 | 
277 | ```no-highlight
278 | > Blockquotes are very handy in email to emulate reply text.
279 | > This line is part of the same quote.
280 | 
281 | Quote break.
282 | 
283 | > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
284 | ```
285 | 
286 | > Blockquotes are very handy in email to emulate reply text.
287 | > This line is part of the same quote.
288 | 
289 | Quote break.
290 | 
291 | > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
292 | 
293 | <a name="html"/>
294 | 
295 | ## Inline HTML
296 | 
297 | You can also use raw HTML in your Markdown, and it'll mostly work pretty well. 
298 | 
299 | ```no-highlight
300 | <dl>
301 |   <dt>Definition list</dt>
302 |   <dd>Is something people use sometimes.</dd>
303 | 
304 |   <dt>Markdown in HTML</dt>
305 |   <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
306 | </dl>
307 | ```
308 | 
309 | <dl>
310 |   <dt>Definition list</dt>
311 |   <dd>Is something people use sometimes.</dd>
312 | 
313 |   <dt>Markdown in HTML</dt>
314 |   <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
315 | </dl>
316 | 
317 | <a name="hr"/>
318 | 
319 | ## Horizontal Rule
320 | 
321 | ```
322 | Three or more...
323 | 
324 | ---
325 | 
326 | Hyphens
327 | 
328 | ***
329 | 
330 | Asterisks
331 | 
332 | ___
333 | 
334 | Underscores
335 | ```
336 | 
337 | Three or more...
338 | 
339 | ---
340 | 
341 | Hyphens
342 | 
343 | ***
344 | 
345 | Asterisks
346 | 
347 | ___
348 | 
349 | Underscores
350 | 
351 | <a name="lines"/>
352 | 
353 | ## Line Breaks
354 | 
355 | My basic recommendation for learning how line breaks work is to experiment and discover -- hit &lt;Enter&gt; once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend. 
356 | 
357 | Here are some things to try out:
358 | 
359 | ```
360 | Here's a line for us to start with.
361 | 
362 | This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
363 | 
364 | This line is also a separate paragraph, but...
365 | This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
366 | ```
367 | 
368 | Here's a line for us to start with.
369 | 
370 | This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
371 | 
372 | This line is also begins a separate paragraph, but...  
373 | This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
374 | 
375 | (Technical note: *Markdown Here* uses GFM line breaks, so there's no need to use MD's two-space line breaks.)
376 | 
377 | <a name="videos"/>
378 | 
379 | ## YouTube Videos
380 | 
381 | They can't be added directly but you can add an image with a link to the video like this:
382 | 
383 | ```no-highlight
384 | <a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
385 | " target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
386 | alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
387 | ```
388 | 
389 | Or, in pure Markdown, but losing the image sizing and border:
390 | 
391 | ```no-highlight
392 | [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
393 | ```
394 | 
395 | Referencing a bug by #bugID in your git commit links it to the slip. For example #1. 
396 | 


--------------------------------------------------------------------------------