auto extract h2 headers

lib/default-theme/NavLinks.vue

@@ -49,11 +49,17 @@ export default {
 <style lang="stylus">
 @import './styles/config.stylus'
 
-.nav-links
-  a
-    color inherit
-    font-weight 500
-    line-height 1.5
+.nav-links a
+  color inherit
+  font-weight 500
+  line-height 1.5
+  &:hover, &.active
+    color $accentColor
+
+@media (min-width: $MQMobile)
+  .nav-links a
+    &:hover:not(.active)
+      color $textColor
     &:hover, &.active
       margin-bottom -2px
       border-bottom 2px solid lighten($accentColor, 10%)

lib/default-theme/SidebarLink.vue

@@ -5,19 +5,35 @@ export default {
   functional: true,
   props: ['item'],
   render (h, { parent: { $route }, props: { item }}) {
-    return h('router-link', {
-      props: {
-        to: item.path
-      },
-      class: {
-        'sidebar-link': true,
-        // use custom active class matching logic
-        // due to edge case of paths ending with / + hash
-        active: isActive($route, item.path)
-      }
-    }, [item.title || item.path])
+    // use custom active class matching logic
+    // due to edge case of paths ending with / + hash
+    const active = isActive($route, item.path)
+    const link = renderLink(h, item.path, item.title || item.path, active)
+    return active && item.headers
+      ? [link, renderChildren(h, item, $route)]
+      : link
   }
 }
+
+function renderLink (h, to, text, active) {
+  return h('router-link', {
+    props: { to },
+    class: {
+      active,
+      'sidebar-link': true
+    }
+  }, text)
+}
+
+function renderChildren (h, { path, headers }, route) {
+  headers = headers.filter(h => h.level === 2)
+  return h('ul', { class: 'sidebar-sub-headers' }, headers.map(c => {
+    const active = isActive(route, path + '#' + c.slug)
+    return h('li', { class: 'sidebar-sub-header' }, [
+      renderLink(h, '#' + c.slug, c.title, active)
+    ])
+  }))
+}
 </script>
 
 <style lang="stylus">
@@ -38,4 +54,11 @@ a.sidebar-link
     border-left-color $accentColor
   .sidebar-group &
     padding-left 2rem
+  .sidebar-sub-headers &
+    padding-left 3.25rem
+    padding-top 0
+    border-left none
+    font-size 0.95em
+    &.active
+      font-weight 500
 </style>

lib/prepare.js

@@ -4,7 +4,7 @@ const globby = require('globby')
 const mkdirp = require('mkdirp')
 const yaml = require('yaml-front-matter')
 const tempPath = path.resolve(__dirname, 'app/.temp')
-const { inferTitle } = require('./util')
+const { inferTitle, extractHeaders } = require('./util')
 
 mkdirp(tempPath)
 
@@ -116,6 +116,10 @@ async function resolveOptions (sourceDir) {
     if (title) {
       data.title = title
     }
+    const headers = extractHeaders(frontmatter.__content, ['h2', 'h3'])
+    if (headers.length) {
+      data.headers = headers
+    }
     delete frontmatter.__content
     if (Object.keys(frontmatter).length) {
       data.frontmatter = frontmatter

lib/util.js

@@ -52,7 +52,7 @@ exports.extractHeaders = (content, include = []) => {
       res.push({
         level: parseInt(t.tag.slice(1), 10),
         title,
-        slug: S(title).slugify()
+        slug: S(title).slugify().s
       })
     }
   })