accordion doc navigation & search

Author: aksakalli

_includes/docs_contents.html

@@ -0,0 +1,22 @@
+<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+{% for section in site.data.docs %}
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{forloop.index}}" aria-expanded="false" aria-controls="collapse-{{forloop.index}}">
+          {{ section.title }}
+        </a>
+      </h4>
+    </div>
+    <div id="collapse-{{forloop.index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+      <ul class="list-group">
+        {% for item in section.docs %}
+          {% assign item_url = item | prepend:"/docs/" | append:"/" %}
+          {% assign p = site.docs | where:"url", item_url | first %}
+          <a class="list-group-item {% if item_url == page.url %}active{% endif %}" href="{{ p.url }}">{{ p.title }}</a>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+{% endfor %}
+</div>

_includes/docs_nav.html

@@ -10,6 +10,3 @@
         <!-- <p class="text-muted">Place sticky footer content here.</p> -->
     </div>
 </footer>
-
-<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-<script src="{{ " /js/bootstrap.min.js " | prepend: site.baseurl }} "></script>

_includes/docs_ul.html

@@ -0,0 +1,5 @@
+<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+<script src="{{ " /js/bootstrap.min.js " | prepend: site.baseurl }} "></script>
+<script src="{{ " /js/typeahead.bundle.min.js " | prepend: site.baseurl }} "></script>
+
+<script src="{{ " /js/main.js " | prepend: site.baseurl }} "></script>

_includes/footer.html

@@ -17,6 +17,13 @@
                 <li {% if page.sectionid=='blog' %} class="active" {% endif %}><a href="{{ site.posts.first.url | prepend: site.baseurl }}">Blog</a></li>
                 <li><a href="{{ site.github_address }}"><i class="fa fa-github" aria-hidden="true"></i> GitHub</a></li>
             </ul>
+            <form class="navbar-form navbar-right">
+              <input id="search-box" type="text" class="form-control" placeholder="Search...">
+              
+              <!-- <div id="search-box-container">
+
+              </div> -->
+            </form>
         </div>
     </div>
 </nav>

_includes/js_files.html

@@ -14,7 +14,7 @@
     </div>
 
     {% include footer.html %}
-
+    {% include js_files.html %}
 </body>
 
 </html>

_includes/topnav.html

@@ -7,21 +7,15 @@
 <div class="container">
     <div class="row">
         <div class="col-md-4">
-
-          <div class="panel panel-default">
-              <div class="panel-body">
-                {% include docs_contents.html %}
-              </div>
-          </div>
+          {% include docs_nav.html %}
         </div>
 
-        <div class="col-lg-8">
+        <div class="col-md-8">
             <h1>{{ page.title }}</h1>
             <div>{{ content }}</div>
             <hr>
             {% include section_nav.html %}
         </div>
 
-
     </div>
 </div>

_layouts/default.html

@@ -0,0 +1,59 @@
+//http://stackoverflow.com/questions/21749179/typeahead-js-v0-10-1-and-bootstrap-3/33177315#33177315
+@mixin typeahead-active() {
+    // mimics  @extend .dropdown-menu > .active > a;
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    outline: 0;
+    background-color: $dropdown-link-active-bg;
+}
+
+//https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
+span.twitter-typeahead {
+    // this is the suggested matches dropdown
+    .tt-menu {
+        @extend .dropdown-menu;
+    }
+
+    .tt-hint {
+        color: #999;
+    }
+    // Added to suggestion elements.
+    .tt-suggestion {
+        // mimic .dropdown-menu > li > a
+        padding: 3px 20px;
+        line-height: $line-height-base;
+        // Added to suggestion element when menu cursor moves to said suggestion.
+        &.tt-cursor {
+            @include typeahead-active;
+        }
+        // Hover/focus on suggestion
+        &:focus,
+        &:hover {
+            @include typeahead-active;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .input-group & {
+        display: block !important;
+
+        .tt-dropdown-menu {
+            top: 32px !important;
+        }
+    }
+
+    .input-group.input-group-lg & {
+        .tt-dropdown-menu {
+            top: 44px !important;
+        }
+    }
+
+    .input-group.input-group-sm & {
+        .tt-dropdown-menu {
+            top: 28px !important;
+        }
+    }
+}

_layouts/docs.html

@@ -8,7 +8,8 @@
   "variables",
   "bootstrap",
   "bootswatch",
-  "syntax-highlighting"
+  "syntax-highlighting",
+  "typeahead"
 ;
 
 html {

_sass/_typeahead.scss

@@ -0,0 +1,30 @@
+$(function() {
+
+    // $('.collapse').collapse('hide');
+    $('.list-group-item.active').parent().parent('.collapse').collapse('show');
+
+
+    var pages = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
+        // datumTokenizer: Bloodhound.tokenizers.whitespace,
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+
+        // local: ['dog', 'pig', 'moose'],
+
+        prefetch: '/search.json'
+    });
+
+    $('#search-box').typeahead({
+        minLength: 0,
+        highlight: true
+    }, {
+        name: 'pages',
+        display: 'title',
+        source: pages
+    });
+
+    $('#search-box').bind('typeahead:select', function(ev, suggestion) {
+        window.location.href = suggestion.url;
+    });
+
+});

css/main.scss

@@ -0,0 +1,22 @@
+---
+---
+[
+{% for section in site.data.docs %}
+  {% for item in section.docs %}
+    {% assign item_url = item | prepend:"/docs/" | append:"/" %}
+    {% assign p = site.docs | where:"url", item_url | first %}
+    {
+      "title": "{{ p.title }}",
+      "url": "{{ p.url }}"
+
+    },
+  {% endfor %}
+{% endfor %}
+
+  {% for post in site.posts %}
+  {
+  "title": "{{ post.title | escape }}",
+  "url": "{{ post.url | prepend: site.baseurl }}"
+  }{% unless forloop.last %},{% endunless %}
+  {% endfor %}
+]