add index for API pages

Author: yyx990803

source/api/directives.md

@@ -80,13 +80,32 @@ Conditionally insert / remove the element based on the truthy-ness of the bindin
 
 - This directive takes a registered asset id.
 
-Compile this element as a child ViewModel with a registered component constructor. For more details see [Composing ViewModels](/guide/composition.html).
+Compile this element as a child ViewModel with a registered component constructor. This can be used with `v-with` to inehrit data from the parent. For more details see [Composing ViewModels](/guide/composition.html).
 
 ### v-with
 
 - This directive requires the value to be an Object or falsy.
 
-Compile this element as a child ViewModel, using the binding value as the `data` option. This can be used in combination with `v-component`.
+Compile this element as a child ViewModel, using the binding value as the `data` option. Inside the template you can directly access properties on the binding value. This can be used in combination with `v-component`.
+
+Suppose our data looks like this:
+
+``` js
+{
+    user: {
+        name: 'Foo Bar',
+        email: '[email protected]'
+    }
+}
+```
+
+You can simplify the template like this:
+
+``` html
+<div v-with="user">
+    {&#123;name&#125;} {&#123;email&#125;}
+</div>
+```
 
 ### v-component-id
 

themes/vue/layout/layout.ejs

@@ -6,6 +6,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
         <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic|Source+Code+Pro' rel='stylesheet' type='text/css'>
         <link rel="icon" href="/images/logo.png" type="image/x-icon">
+        <script>
+            window.PAGE_TYPE = "<%- page.type %>"
+        </script>
         <script src="/js/classList.js"></script>
         <%- css(page.index ? 'css/index' : 'css/page') %>
         <%- partial('partials/ga') %>
@@ -19,26 +22,6 @@
         <div id="main">
             <%- body %>
         </div>
-        <script>
-            var main = document.getElementById('main'),
-                doc = document.documentElement,
-                body = document.body,
-                header = document.getElementById('header'),
-                menu = document.querySelector('.sidebar'),
-                menuToggle = document.querySelector('.sidebar .toggle')
-            if (menu) {
-                window.addEventListener('scroll', function () {
-                    var top = doc && doc.scrollTop || body.scrollTop
-                    if (top > header.offsetHeight) {
-                        main.className = 'fix-sidebar'
-                    } else {
-                        main.className = ''
-                    }
-                })
-                menuToggle.addEventListener('click', function () {
-                    menu.classList.toggle('open')
-                })
-            }
-        </script>
+        <script src="/js/common.js"></script>
     </body>
 </html>

themes/vue/source/css/_common.styl

@@ -1,6 +1,5 @@
 @import "_settings"
 @import "_syntax"
-@import "_demo"
 
 body
     font-family $body-font

themes/vue/source/css/index.styl

@@ -108,7 +108,7 @@ a.button
         padding 0 1em
         position relative
         background-color #fff
-        top -.65em
+        top -.75em
 
 @media screen and (max-width: 420px)
     body

themes/vue/source/css/page.styl

@@ -1,4 +1,5 @@
 @import "_common"
+@import "_demo"
 
 $header-height = 40px
 

themes/vue/source/js/common.js

@@ -0,0 +1,40 @@
+(function () {
+
+    var main = document.getElementById('main'),
+        doc = document.documentElement,
+        body = document.body,
+        header = document.getElementById('header'),
+        menu = document.querySelector('.sidebar'),
+        menuToggle = document.querySelector('.sidebar .toggle')
+
+    if (menu) {
+        window.addEventListener('scroll', function () {
+            var top = doc && doc.scrollTop || body.scrollTop
+            if (top > header.offsetHeight) {
+                main.className = 'fix-sidebar'
+            } else {
+                main.className = ''
+            }
+        })
+        menuToggle.addEventListener('click', function () {
+            menu.classList.toggle('open')
+        })
+    }
+
+    if (PAGE_TYPE === 'api') {
+        var h1 = document.querySelector('h1'),
+            h3s = document.querySelectorAll('h3'),
+            list = document.createElement('ul'),
+            inner = '',
+            replaceRE = /\(.*$/
+        for (var i = 0, l = h3s.length; i < l; i++) {
+            var h3 = h3s[i]
+            inner += '<li><a href="#' + h3.id + '">' +
+                    h3.textContent.replace(replaceRE, '') +
+                '</a></li>'
+        }
+        list.innerHTML = inner
+        h1.parentNode.insertBefore(list, h1.nextSibling)
+    }
+
+})()