automatic table of contents for all guides

Gemfile

@@ -4,6 +4,7 @@ group :jekyll do
     gem 'jekyll'
     gem 'jekyll-sitemap'
     gem 'jekyll-redirect-from'
+    gem 'jekyll-toc'
     gem 'redcarpet'
 end
 

_config.yml

@@ -94,11 +94,19 @@ collections:
         output: true
         permalink: /:collection/:path/
 
+defaults:
+    - scope:
+        path: ""
+        type: guides
+      values:
+        toc: true
+
 # Plugins
 # --------------------
 plugins:
     - jekyll-sitemap
     - jekyll-redirect-from
+    - jekyll-toc
 
 
 jekyll_get:

_src/_assets/javascripts/bigchain.js

@@ -23,7 +23,7 @@ jQuery(function($) {
     //
     // init Smooth Scroll
     //
-    var scroll = new SmoothScroll('a[data-scroll]', {
+    var scroll = new SmoothScroll('a[data-scroll], .toc-entry a', {
         easing: 'easeOutQuint'
     });
 

_src/_assets/styles/_page-guides.scss

@@ -65,3 +65,49 @@ h1.guide__title {
     margin-top: 0;
     color: $brand-primary;
 }
+
+//
+// TOC
+//
+.section-nav {
+    background: darken($brand-main-gray, 2%);
+    margin-bottom: $spacer * 2;
+    padding: $spacer;
+    border-radius: $border-radius;
+}
+
+.toc-entry {
+
+}
+
+li.toc-h1 {
+    margin-bottom: $spacer / 2;
+
+    // custom numbers
+    &:before {
+        font-size: $font-size-h5;
+        opacity: .5;
+    }
+
+    a {
+        @extend .h5;
+        margin: 0;
+        box-shadow: none;
+        color: $brand-primary;
+    }
+
+    ul {
+        padding-left: $spacer * 3;
+    }
+}
+
+li.toc-h2 {
+    a {
+        font-size: $font-size-base;
+        color: $text-color;
+    }
+}
+
+li.toc-h3 {
+    display: none;
+}

_src/_assets/styles/bigchain/_toc.scss

@@ -7,27 +7,27 @@
     li { padding-left: 0; }
 
     &:before {
-        @extend .h1;
-        content: 'Table Of Contents';
+        @extend .h5;
+        content: 'Contents';
         display: block;
-        border-bottom: 1px solid $brand-main-blue-light;
-        padding-bottom: $spacer;
-        margin-bottom: ($spacer * 2);
-        text-align: center;
+        margin-top: 0;
     }
 
     li,
-    ol { margin: 0; }
+    ol,
+    ul { margin: 0; }
 
     li {
         display: block;
+    }
 
+    > li {
         // custom numbers
         &:before {
-            content: counters(item, '.') ' ';
+            content: counters(item, '.') '. ';
             counter-increment: item;
-            margin-right: $spacer;
-            color: $brand-main-gray;
+            margin-right: $spacer / 4;
+            color: $brand-main-gray-light;
         }
     }
 }
@@ -35,7 +35,8 @@
 // output by Kramdown
 
 /* stylelint-disable selector-no-id  */
-#markdown-toc {
+#markdown-toc,
+.section-nav {
     @extend .toc;
 }
 

_src/_includes/sections/section-guides.html

@@ -0,0 +1,25 @@
+<section class="section section--guides">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">Guides</h1>
+            <p class="section-description">Complete these guides to learn about how to create apps in BigchainDB.</p>
+        </header>
+    </div>
+    <div class="row row--wide">
+        <div class="grid grid--full grid-small--half grid--gutters">
+            {% for guide in site.guides limit: 4 %}
+            <div class="grid__col">
+                <article class="guide">
+                    <a href="{{ guide.url }}">
+                        <h1 class="guide__title">{{ guide.title }}</h1>
+                        <p class="guide__description">{{ guide.description }}</p>
+                    </a>
+                </article>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    <div class="row text-center">
+        <a class="btn btn-secondary" href="/guides/">All guides</a>
+    </div>
+</section>

_src/_layouts/guide.html

@@ -23,7 +23,7 @@ layout: base
             </header>
         {% endif %}
 
-        {{ content }}
+        {{ content | toc }}
     </div>
 </section>
 
@@ -47,6 +47,6 @@ layout: base
         </div>
     </div>
     <div class="row text-center">
-        <a href="/guides/">All guides</a>
+        <a class="btn btn-secondary" href="/guides/">All guides</a>
     </div>
 </section>

_src/guides.html

@@ -2,6 +2,8 @@
 layout: page
 
 title: Guides
+
+js: page-guides.min.js
 ---
 
 <section class="section section--guides">
@@ -24,4 +26,4 @@ title: Guides
             {% endfor %}
         </div>
     </div>
-</section>
+</section>

_src/index.html

@@ -64,31 +64,7 @@ intro:
     </div>
 </section>
 
-<section class="section section--guides">
-    <div class="row">
-        <header class="section-header">
-            <h1 class="section-title">Guides</h1>
-            <p class="section-description">Complete these guides to learn about how to create apps in BigchainDB.</p>
-        </header>
-    </div>
-    <div class="row row--wide">
-        <div class="grid grid--full grid-small--half grid--gutters">
-            {% for guide in site.guides limit: 4 %}
-            <div class="grid__col">
-                <article class="guide">
-                    <a href="{{ guide.url }}">
-                        <h1 class="guide__title">{{ guide.title }}</h1>
-                        <p class="guide__description">{{ guide.description }}</p>
-                    </a>
-                </article>
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-    <div class="row text-center">
-        <a class="btn btn-secondary" href="/guides/">All guides</a>
-    </div>
-</section>
+{% include sections/section-guides.html %}
 
 {% include sections/section-partners.html %}