Initial implementation of actual navigation

data/layout.jade

@@ -1,8 +1,23 @@
+mixin menu(m, depth)
+  li.menu-item(class=('-level-' + depth))
+    if m.url
+      a.link.title(href=(base + m.url))= m.title
+    else if m.title
+      span.title= m.title
+    if m.sections
+      ul.submenu
+        - for (var key in m.sections)
+          +menu(m.sections[key], depth + 1)
+
 doctype html
 html
   head
     meta(charset='utf-8')
     link(rel='stylesheet' href=(base + 'assets/style.css'))
   body
-    .markdown-body
-      != contents
+    .doc-layout
+      .menu.toc-menu
+        +menu(toc, 0)
+      .body
+        .markdown-body
+          != contents

data/style.sass

@@ -1,6 +1,65 @@
 @import './normalize.css/normalize'
 @import './github-markdown-css/github-markdown'
 
+html, body
+  height: 100%
+
+.doc-layout
+  display: flex
+  width: 100%
+  height: 100%
+
+@media (min-width: 769px)
+  html, body
+    overflow: hidden
+
+  .doc-layout
+    .menu
+      flex: 0 0 300px
+      overflow-y: auto
+
+    .body
+      flex: 1
+      overflow-y: auto
+      padding-top: 32px
+
+.toc-menu
+  $pad: 32px
+
+  &
+    padding: 8px 0
+    background: #fdfdfd
+    border-right: solid 1px #f3f3f3
+    font-size: 0.9em
+
+  ul, li
+    margin: 0
+    padding: 0
+    list-style: none
+
+  .title
+    display: block
+    padding: 8px $pad
+
+  // .title
+  //   color: #888
+
+  .link
+    &, &:visited
+      color: #555
+      text-decoration: none
+
+  .-level-1 > .title
+    margin-top: 16px
+    font-weight: bold
+    font-size: 1.1em
+
+  .-level-3 .title
+    padding-left: $pad + 8px * 1
+
+  .-level-4 .title
+    padding-left: $pad + 8px * 2
+
 .markdown-body
   margin: 40px auto
-  max-width: 700px
+  max-width: 768px

fixture/basic/metalsmith.js

@@ -1,4 +1,4 @@
-var bookdown = require('bookdown')
+var bookdown = require('bookdown-core')
 
 var app = bookdown(__dirname)
   .use(require('../../')())

index.js

@@ -1,3 +1,5 @@
+'use strict'
+
 const ware = require('ware')
 const fs = require('fs')
 const join = require('path').join
@@ -13,7 +15,6 @@ module.exports = function base (options) {
   var app = ware()
     .use(addAssets)
     .use(relayout)
-    .use(require('metalsmith-sass'))
 
   return app.run.bind(app)
 }
@@ -29,7 +30,13 @@ function addAssets (files, ms, done) {
     outputStyle: 'compact'
   })
 
-  files['assets/style.css'] = { contents: result.css }
+  const postcss = require('postcss')
+  const autoprefixer = require('autoprefixer')({})
+
+  let css = result.css
+  css = postcss([autoprefixer]).process(css).css
+
+  files['assets/style.css'] = { contents: css }
   done()
 }
 
@@ -38,14 +45,18 @@ function addAssets (files, ms, done) {
  */
 
 function relayout (files, ms, done) {
+  const toc = JSON.parse(files['toc.json'].contents)
+  const index = JSON.parse(files['index.json'].contents)
   const path = fs.readFileSync(join(__dirname, 'data/layout.jade'), 'utf-8')
   const layout = jade.compile(path)
 
   Object.keys(files).forEach((fname) => {
     if (!fname.match(/\.html$/)) return
     const file = files[fname]
     const base = Array(fname.split('/').length).join('../')
-    file.contents = layout(assign({}, file, { base }))
+    file.contents = layout(assign({}, file, {
+      base, toc, index
+    }))
   })
 
   done()

package.json

@@ -9,10 +9,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "autoprefixer": "6.0.3",
+    "autoprefixer-core": "6.0.1",
     "github-markdown-css": "2.0.10",
     "jade": "1.11.0",
     "node-sass": "3.3.3",
     "normalize.css": "3.0.3",
+    "postcss": "5.0.8",
     "ware": "1.3.0"
   }
 }