first

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+
+  env: {
+    "node": true,
+    "jest": true
+  },
+
+  extends: [
+    'plugin:vue/recommended',
+    'plugin:prettier/recommended',
+    "prettier/vue",
+  ],
+
+  parserOptions: {
+    parser: 'babel-eslint' // Support dynamic import
+  },
+
+  rules: {
+    'no-undef': ['error'],
+
+    'vue/match-component-file-name': [
+      'error',
+      {
+        extensions: ['js', 'vue'],
+        shouldMatchCase: false
+      }
+    ],
+
+    'vue/prop-name-casing': 0,
+
+    'vue/require-default-prop': 0
+  },
+
+
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.temp
+dist

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  semi:false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+}

LICENSE

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

README.md

@@ -0,0 +1,24 @@
+
+# Demo 
+
+# Install
+
+Install packages
+
+```
+yarn
+```
+
+Run server
+
+```
+vuepress dev docs
+```
+
+Build for production
+
+```
+vuepress build docs
+```
+
+

components/Avatar.vue

@@ -0,0 +1,18 @@
+<template>
+  <div v-if="$themeConfig.authors">
+    <span
+    v-for="author in $themeConfig.authors"
+    :key="author.name"
+    >
+    <div class="d-flex align-items-center">
+      <a class="profile-avatar">
+        <img v-if="author.name === $frontmatter.author" :src="($withBase)(author.avatar)" class="avatar-image" :alt="author.name">
+      </a>
+      <div  v-if="author.name === $frontmatter.author">
+        <span>{{author.name}}</span> &nbsp;
+        <NavLink v-if="author.name === $frontmatter.author" :link="author.link" class="btn btn-sm btn-outline-dark">{{ author.linktext }}</NavLink>
+      </div>
+    </div>
+    </span>
+  </div>
+</template>

components/Feed.vue

@@ -0,0 +1,44 @@
+<template>
+  <a
+    v-if="getFirstEnabledFeed"
+    class="feed"
+    :href="getFirstEnabledFeed | getFeedFilePath"
+  >
+    <RssIcon />
+  </a>
+</template>
+
+<script>
+import { RssIcon } from 'vue-feather-icons'
+
+export default {
+  components: { RssIcon },
+  filters: {
+    getFeedFilePath(feed) {
+      if (feed === 'rss') return './rss.xml'
+      if (feed === 'atom') return './feed.atom'
+      if (feed === 'json') return './feed.json'
+      return ''
+    },
+  },
+  computed: {
+    getFirstEnabledFeed() {
+      for (const feed in this.$service.feed) {
+        const isEnabled = this.$service.feed[feed]
+        if (isEnabled) return feed
+      }
+      return false
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+.feed
+  display flex
+  align-items center
+  color inherit
+
+  &:hover
+    color $accentColor
+</style>

components/Footer.vue

@@ -0,0 +1,95 @@
+<template>
+<footer class="themefooter">
+
+<div class="container">
+<div class="row justify-content-between">
+<div class="col">
+<a href="/"><img class="logofooter" :src="($withBase)($themeConfig.logo)"></a>
+</div>
+<div class="col text-right">
+<ul v-if="contact" class="list-unstyled">
+<li
+v-for="item in contact"
+:key="item.iconComponent"
+class="contact-item"
+>
+<NavLink :link="item.link">
+<component :is="item.iconComponent"></component>
+{{ item.text }}
+</NavLink>
+</li>
+</ul>
+<ul v-if="copyright" class="list-unstyled">
+<li v-for="item in copyright" :key="item.text" class="copyright-item">
+<NavLink :link="item.link">{{ item.text }}</NavLink>
+</li>
+</ul>
+</div>
+</div>
+</div>
+
+</footer>
+</template>
+
+<script>
+import {
+  CodepenIcon,
+  FacebookIcon,
+  GithubIcon,
+  GitlabIcon,
+  GlobeIcon,
+  InstagramIcon,
+  LinkedinIcon,
+  MailIcon,
+  MessageSquareIcon,
+  PhoneIcon,
+  TwitterIcon,
+} from 'vue-feather-icons'
+
+export default {
+  components: {
+    CodepenIcon,
+    FacebookIcon,
+    GithubIcon,
+    GitlabIcon,
+    GlobeIcon,
+    InstagramIcon,
+    LinkedinIcon,
+    MailIcon,
+    MessageSquareIcon,
+    PhoneIcon,
+    TwitterIcon,
+  },
+
+  computed: {
+    contact() {
+      return (
+        (this.$themeConfig.footer && this.$themeConfig.footer.contact) ||
+        []
+      )
+        .map(({ type, link }) => {
+          return {
+            iconComponent: this.getIconComponentName(type),
+            link,
+          }
+        })
+        .filter(({ iconComponent }) => iconComponent)
+    },
+
+    copyright() {
+      return (
+        (this.$themeConfig.footer && this.$themeConfig.footer.copyright) || []
+      )
+    },
+  },
+
+  methods: {
+    getIconComponentName(contactType) {
+      switch (contactType) {
+        case 'github':
+          return 'GithubIcon'
+      }
+    },
+  },
+}
+</script>

components/Header.vue

@@ -0,0 +1,113 @@
+<template>
+<section id="header-wrapper">
+<header id="header">
+<div class="header-wrapper">
+<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top">
+<div class="container">
+<NavLink link="/" class="navbar-brand"><img :src="($withBase)($themeConfig.logo)"> {{ $site.title }} </NavLink>
+<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+<span class="navbar-toggler-icon"></span>
+</button>
+<div class="collapse navbar-collapse" id="navbarsExampleDefault">
+<ul v-if="$themeConfig.nav" class="navbar-nav ml-auto">
+<li
+v-for="item in $themeConfig.nav"
+:key="item.text"
+class="nav-item"
+>
+<NavLink :link="item.link" class="nav-link">{{ item.text }}</NavLink>
+</li>
+<SearchBox />
+<Feed />
+</ul>
+</div>
+</div>
+</nav>
+</div>
+</header>
+</section>
+</template>
+
+<script>
+import SearchBox from '@SearchBox'
+import Feed from './Feed'
+
+export default {
+  components: { SearchBox, Feed },
+}
+</script>
+
+<style lang="stylus">
+@import '~@app/style/config'
+// border-bottom 5px solid lighten(#3eaf7c, 50%)
+.header-wrapper
+  .title
+    /* flex 0 0 200px */
+    font-size 30px
+    margin 0
+    letter-spacing 2px
+    display block
+    text-transform uppercase
+
+    a
+      color $darkTextColor
+      font-weight bold
+      font-family PT Serif, Serif
+      text-decoration none
+
+  .header-right-wrap
+    flex 1
+    display flex
+    justify-content flex-end
+    align-items center
+
+    .nav
+      flex 0 0 auto
+      display flex
+      margin 0
+
+      .nav-item
+        margin-left 20px
+
+        a
+          font-family PT Serif, Serif
+          font-size 20px
+          // color lighten(#3eaf7c, 30%)
+          text-decoration none
+          transition color 0.3s
+
+    .search-box
+      font-family PT Serif, Serif
+      margin-left 20px
+
+      input
+        border-radius 5px
+        transition all 0.5s
+        border 1px solid #cecece
+
+        &:hover
+          border 1px solid $accentColor
+          box-shadow 0 0 5px $accentColor
+
+      .suggestions
+        border 1px solid $darkBorderColor
+        top 40px
+        right 0
+
+        a
+          color $darkTextColor
+          text-decoration none
+
+          &.focused
+            color $accentColor
+
+@media (max-width: $MQMobile)
+  #header
+    display none
+
+  .header-wrapper
+    flex-direction column
+
+    .header-right-wrap
+      display none
+</style>