Use underscore to render the sidebar

Author: Tom Clark

_layouts/default.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="/stylesheets/styles.css">
     <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
     <script src="/javascripts/scale.fix.js"></script>
+    <script src="http://documentcloud.github.com/underscore/underscore.js"></script>
+    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     <script src="/javascripts/sidebar.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <!--[if lt IE 9]>
@@ -23,8 +25,9 @@
       <header>
         <h1>tutorials.github.com</h1>
         <p>Decentralized polyglot tutorials</p>
+        <nav id="sidebar"></nav>
         <p class="view"><a href="https://github.com/tutorials/tutorials.github.com">View the Project on GitHub <small>tutorials/tutorials.github.com</small></a></p>
-        <ul>
+        <ul id="download">
           <li><a href="https://github.com/tutorials/tutorials.github.com/zipball/master">Download <strong>ZIP File</strong></a></li>
           <li><a href="https://github.com/tutorials/tutorials.github.com/tarball/master">Download <strong>TAR Ball</strong></a></li>
           <li><a href="https://github.com/tutorials/tutorials.github.com">Fork On <strong>GitHub</strong></a></li>

javascripts/sidebar.js

@@ -0,0 +1,43 @@
+var tutorials;
+var sidebar;
+var sidebar_counts;
+
+$(function(){
+  // Grab all tutorials
+  tutorials = $("section.tutorial");
+
+  // Generate the sidebar
+  sidebar = _.chain(tutorials)
+    .map(function(tutorial) {
+      return $(tutorial).data().facets;
+    })
+    .reduce(function(counts, facets) {
+      _(facets).each(function(val, key) {
+        if(!_(counts).has(key)) {
+          counts[key] = {};
+        }
+        if(!_(counts[key]).has(val)) {
+          counts[key][val] = 0;
+        }
+        counts[key][val] += 1;
+      });
+      return counts;
+    }, {})
+    .value();
+
+  // Generate counts for the sidebar
+  counts = {};
+  _(sidebar).each(function(val, key) {
+    counts[key] = _(val).keys().length;
+  });
+  sidebar_counts = counts;
+
+  // Draw the sidebar
+  redraw();
+});
+
+function redraw() {
+  template = "<% _(sidebar).each(function(val, key) { %><h3><%= key %> (<%= sidebar_counts[key] %>)</h3><ul><% _(val).each(function(v, k) { %><li><%= k %> (<%= v %>)</li><% }) %></ul><% }) %>";
+  list = _.template(template);
+  $("#sidebar").append(list);
+};

pages/test.md

@@ -8,46 +8,51 @@ Javascript Testing
 ==================
 
 This is a test of the javascript-based filtering code.
-The idea is that there are sections with `data-foo=bar` data attributes that are used to list key-value pairs that javascript uses to "facet" the document with.
+The idea is that there are sections with `data-facets={"some": "json"}` data attributes that are used to list key-value pairs that javascript uses to "facet" the document with.
 
-We use `markdown="1"` to tell kramdown that we want to parse the content within the section as markdown.  You can indent your code or not, the choice is up to you (although I prefer to not indent so my editor's syntax highlighting doesn't break).
+We store JSON because jQuery automatically converts HTML5 data attributes into `camelCase`, so we'd lose formatting.
+
+Valid sections should have `class="tutorial"` (because we allow nested sections).
+
+We also use the `markdown="1"` attribute to tell kramdown that we want to parse the content within the section as markdown.  You can indent your code or not, the choice is up to you (although I prefer to not indent so my editor's syntax highlighting doesn't break).
 
 For example, a document like this:
 
 {% highlight html %}
-<section markdown="1" data-operating-system="OS X" data-package-management="Homebrew">
+<section class="tutorial" markdown="1" data-facets='{"Operating System": "OS X", "Package Management": "Homebrew"}'>
   ...
 </section>
 
-<section markdown="1" data-operating-system="OS X" data-package-management="Source">
+<section class="tutorial" markdown="1" data-facets='{"Operating System": "OS X", "Package Management": "Macports"}'>
   ...
 </section>
 
-<section markdown="1" data-operating-system="Ubuntu" data-package-management="Source">
+<section class="tutorial" markdown="1" data-facets='{"Operating System": "Ubuntu", "Package Management": "Source"}'>
   ...
 </section>
 {% endhighlight %}
 
 should show the following sidebar:
 
-    Operating System
+    Operating System (2)
       OS X (2)
       Ubuntu (1)
 
-    Package Management
+    Package Management (3)
       Homebrew (1)
-      Source (2)
+      Macports (1)
+      Source (1)
 
 This allows users to filter the document by those attributes which are relevant to them.
 
 Note the following empty liquid call used to force syntax highlighting: {{ }}
 
-<section markdown="1" data-operating-system="OS X" data-package-management="Source">
+<section class="tutorial" markdown="1" data-facets='{"Operating System": "OS X", "Package Management": "Homebrew"}'>
 This is the tutorial written for _OS X_ and _Homebrew_.
 It has data attributes on the preceeding `hr` tag.
 </section>
 
-<section markdown="1" data-operating-system="OS X" data-package-management="Source">
+<section class="tutorial" markdown="1" data-facets='{"Operating System": "OS X", "Package Management": "Macports"}'>
 This is the tutorial written for _OS X_ and _Source_.
 It has data attributes on a surrounding section tag (written in html).
 It uses kramdown's `markdown="1"` attribute to enable markdown processing within an html tag.
@@ -61,6 +66,6 @@ Here's some code:
 Yay!
 </section>
 
-<section markdown="1" data-operating-system="Ubuntu" data-package-management="Source">
+<section class="tutorial" markdown="1" data-facets='{"Operating System": "Ubuntu", "Package Management": "Source"}'>
 This is the tutorial written for _Ubuntu_ and _Source_.
 </section>

stylesheets/styles.css

@@ -101,7 +101,7 @@ header {
   position:fixed;
 }
 
-header ul {
+#download {
   list-style:none;
   height:40px;
 
@@ -121,14 +121,14 @@ header ul {
   width:270px;
 }
 
-header li {
+#download li {
   width:89px;
   float:left;
   border-right:1px solid #d2d2d2;
   height:40px;
 }
 
-header ul a {
+#download a {
   line-height:1;
   font-size:11px;
   color:#999;
@@ -143,22 +143,26 @@ strong {
   font-weight:700;
 }
 
-header ul li + li {
+#download li + li {
   width:88px;
   border-left:1px solid #fff;
 }
 
-header ul li + li + li {
+#download li + li + li {
   border-right:none;
   width:89px;
 }
 
-header ul a strong {
+#download a strong {
   font-size:14px;
   display:block;
   color:#222;
 }
 
+#sidebar ul h3 {
+  margin: 0;
+}
+
 section#main {
   width:560px;
   float:right;
@@ -211,7 +215,7 @@ footer {
     display:inline;
   }
 
-  header ul {
+  #download {
     position:absolute;
     right:50px;
     top:52px;
@@ -227,7 +231,7 @@ footer {
     padding:0;
   }
 
-  header ul, header p.view {
+  #download, header p.view {
     position:static;
   }
 }
@@ -237,7 +241,7 @@ footer {
     padding:15px;
   }
 
-  header ul {
+  #download {
     display:none;
   }
 }