simple search

docs/.vuepress/config.js

@@ -49,12 +49,23 @@ module.exports = {
         {
           title: 'Config Reference',
           collapsable: false,
-          children: extractHeaders(
-            fs.readFileSync(path.resolve(__dirname, '../config/README.md'), 'utf-8'),
-            ['h3']
-          ).map(({ title, slug }) => [`#${slug}`, title])
+          children: genSidebar('config/README.md')
+        }
+      ],
+      '/default-theme-config/': [
+        {
+          title: 'Default Theme Config',
+          collapsable: false,
+          children: genSidebar('default-theme-config/README.md')
         }
       ]
     }
   }
 }
+
+function genSidebar (file) {
+  return extractHeaders(
+    fs.readFileSync(path.resolve(__dirname, '../', file), 'utf-8'),
+    ['h3']
+  ).map(({ title, slug }) => [`#${slug}`, title])
+}

docs/guide/README.md

@@ -8,6 +8,10 @@ next: ./getting-started
 
 ## Todo Features
 
+### PWA Support
+
+### Algolia DocSearch Integration
+
 ## Why Not ...?
 
 ### Nuxt / NuxtDoc

lib/default-theme/NavLinks.vue

 <template>
-  <div class="nav-links">
+  <nav class="nav-links">
     <!-- user links -->
     <router-link v-for="item in userLinks"
       :to="item.link"
@@ -14,7 +14,7 @@
       Github
       <OutboundLink/>
     </a>
-  </div>
+  </nav>
 </template>
 
 <script>
@@ -48,12 +48,19 @@ export default {
 <style lang="stylus">
 @import './styles/config.stylus'
 
-.nav-links a
-  color inherit
-  font-weight 500
-  line-height 1.5
-  &:hover, &.router-link-active
-    color $accentColor
+.nav-links
+  display inline-block
+  a
+    color inherit
+    font-weight 500
+    line-height 1.25rem
+    margin-left 1.5rem
+    &:hover, &.router-link-active
+      color $accentColor
+
+@media (max-width: $MQMobile)
+  .nav-links a
+    margin-left 0
 
 @media (min-width: $MQMobile)
   .nav-links a

lib/default-theme/Navbar.vue

 <template>
-  <div class="navbar">
+  <header class="navbar">
     <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
     <router-link to="/">
       <img class="logo"
@@ -12,18 +12,19 @@
       </span>
     </router-link>
     <div class="links">
-      <!-- search box -->
+      <SearchBox/>
       <NavLinks class="can-hide"/>
     </div>
-  </div>
+  </header>
 </template>
 
 <script>
 import SidebarButton from './SidebarButton.vue'
+import SearchBox from './SearchBox.vue'
 import NavLinks from './NavLinks.vue'
 
 export default {
-  components: { SidebarButton, NavLinks }
+  components: { SidebarButton, NavLinks, SearchBox }
 }
 </script>
 
@@ -33,6 +34,7 @@ export default {
 .navbar
   padding 0.7rem 1.5rem
   line-height 2rem
+  position relative
   a, span, img
     vertical-align middle
     display inline-block
@@ -48,10 +50,10 @@ export default {
     position relative
     top -0.125rem
   .links
-    font-size 0.95rem
-    float right
-    a:not(:last-child)
-      margin-right 1.5rem
+    font-size 0.9rem
+    position absolute
+    right 1.5rem
+    top 0.7rem
 
 @media (max-width: $MQMobile)
   .navbar

lib/default-theme/SearchBox.vue

 <template>
-  <span>
-
-  </span>
+  <div class="search-box">
+    <input v-model="query"
+      autocomplete="off"
+      spellcheck="false"
+      @focus="focused = true"
+      @blur="focused = false"
+      @keyup.enter="go(focusIndex)"
+      @keyup.up="onUp"
+      @keyup.down="onDown">
+    <ul class="suggestions"
+      v-if="showSuggestions"
+      @mouseleave="unfocus">
+      <li class="suggestion" v-for="(s, i) in suggestions"
+        :class="{ focused: i === focusIndex }"
+        @mousedown="go(i)"
+        @mouseenter="focus(i)">
+        <a :href="s.path" @click.prevent>
+          <span class="page-title">{{ s.title || s.path }}</span>
+          <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
+export default {
+  data () {
+    return {
+      query: '',
+      focused: false,
+      focusIndex: 0
+    }
+  },
+  computed: {
+    showSuggestions () {
+      return (
+        this.focused &&
+        this.suggestions &&
+        this.suggestions.length
+      )
+    },
+    suggestions () {
+      const query = this.query.trim().toLowerCase()
+      if (!query) {
+        return
+      }
 
+      const max = 5
+      const { pages } = this.$site
+      const matches = item => (
+        item.title &&
+        item.title.toLowerCase().indexOf(query) > -1
+      )
+      const res = []
+      for (let i = 0; i < pages.length; i++) {
+        if (res.length >= max) break
+        const p = pages[i]
+        if (matches(p)) {
+          res.push(p)
+        } else if (p.headers) {
+          for (let j = 0; j < p.headers.length; j++) {
+            if (res.length >= max) break
+            const h = p.headers[j]
+            if (matches(h)) {
+              res.push(Object.assign({}, p, {
+                path: p.path + '#' + h.slug,
+                header: h
+              }))
+            }
+          }
+        }
+      }
+      return res
+    }
+  },
+  methods: {
+    onClick () {
+      console.log('clicked')
+    },
+    onUp () {
+      if (this.showSuggestions) {
+        if (this.focusIndex > 0) {
+          this.focusIndex--
+        } else {
+          this.focusIndex = this.suggestions.length - 1
+        }
+      }
+    },
+    onDown () {
+      if (this.showSuggestions) {
+        if (this.focusIndex < this.suggestions.length - 1) {
+          this.focusIndex++
+        } else {
+          this.focusIndex = 0
+        }
+      }
+    },
+    go (i) {
+      this.$router.push(this.suggestions[i].path)
+      this.query = ''
+      this.focusIndex = 0
+    },
+    focus (i) {
+      this.focusIndex = i
+    },
+    unfocus () {
+      this.focusIndex = -1
+    }
+  }
+}
 </script>
+
+<style lang="stylus">
+@import './styles/config.stylus'
+
+.search-box
+  display inline-block
+  position relative
+  margin-right 0.5rem
+  input
+    cursor pointer
+    width 10rem
+    color lighten($textColor, 25%)
+    display inline-block
+    border 1px solid darken($borderColor, 10%)
+    border-radius 2rem
+    font-size 0.9rem
+    line-height 2rem
+    padding 0 0.5rem 0 2rem
+    outline none
+    transition all .2s ease
+    background #fff url(./search.svg) 0.6rem 0.5rem no-repeat
+    background-size 1rem
+    &:focus
+      cursor auto
+      border-color $accentColor
+  .suggestions
+    background #fff
+    width 20rem
+    position absolute
+    top 1.5rem
+    border 1px solid darken($borderColor, 10%)
+    border-radius 6px
+    padding 0.4rem 0
+    list-style-type none
+  .suggestion
+    line-height 1.4
+    padding 0.4rem 1rem
+    a
+      color lighten($textColor, 20%)
+      .page-title
+        font-weight 600
+      .header
+        font-size 0.9em
+        margin-left 0.25em
+    &.focused
+      background-color $lighten($textColor, 50%)
+      a
+        color $accentColor
+
+@media (max-width: $MQNarrow)
+  .search-box input
+    width 0
+    border-color transparent
+    position relative
+    left 1rem
+    &:focus
+      left 0.5rem
+      width 10rem
+
+@media (max-width: $MQMobile)
+  .search-box
+    margin-right 0
+    .suggestions
+      right -0.5rem
+</style>

lib/default-theme/Sidebar.vue

 <template>
   <div class="sidebar">
-    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
     <NavLinks/>
     <ul>
       <li v-for="(item, i) in sidebarItems">
@@ -19,12 +18,11 @@
 <script>
 import SidebarGroup from './SidebarGroup.vue'
 import SidebarLink from './SidebarLink.vue'
-import SidebarButton from './SidebarButton.vue'
 import NavLinks from './NavLinks.vue'
 import { resolvePage, isActive } from './util'
 
 export default {
-  components: { SidebarGroup, SidebarLink, SidebarButton, NavLinks },
+  components: { SidebarGroup, SidebarLink, NavLinks },
   data () {
     return {
       openGroupIndex: 0

lib/default-theme/search.svg

+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

lib/default-theme/styles/theme.stylus

@@ -20,7 +20,7 @@ body
 
 .navbar
   position fixed
-  z-index 10
+  z-index 20
   top 0
   left 0
   right 0
@@ -34,7 +34,7 @@ body
   background-color #fff
   width $sidebarWidth
   position fixed
-  z-index 20
+  z-index 10
   margin 0
   top $navbarHeight
   left 0

lib/util.js

@@ -26,6 +26,9 @@ exports.applyUserWebpackConfig = function (userConfig, config, isServer) {
 }
 
 exports.inferTitle = function (frontmatter) {
+  if (frontmatter.home) {
+    return 'Home'
+  }
   if (frontmatter.title) {
     return frontmatter.title
   }