project widget: Enable changing default filter (#88)

Use `filter_default = 0` to specify index of default filter

exampleSite/content/home/projects.md

@@ -18,6 +18,10 @@ weight = 50
 view = 1
 
 # Filter toolbar.
+
+# Default filter index (e.g. 0 corresponds to the first `[[filter]]` instance below).
+filter_default = 0
+
 # Add or remove as many filters (`[[filter]]` instances) as you like.
 # Use "*" tag to show all projects or an existing tag prefixed with "." to filter by specific tag.
 # To remove toolbar, delete/comment all instances of `[[filter]]` below.

layouts/partials/widgets/projects.html

@@ -10,13 +10,18 @@
   <div class="col-xs-12 col-md-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
+    {{ $filter_default := default (int $page.Params.filter_default) 0 }}
+    {{ with $page.Params.filter }}
+    <span id="default-project-filter" class="hidden">{{ (index $page.Params.filter ($filter_default)).tag }}</span>
+    {{ end }}
+
     <div class="project-toolbar">
       <div id="filters">
         <div class="btn-toolbar">
           <div class="btn-group">
-          {{ range $page.Params.filter }}
+            {{ range $idx, $item := $page.Params.filter }}
-            <a href="#" data-filter="{{ .tag }}" class="btn btn-primary btn-large{{ if eq .tag "*" }} active{{ end }}">{{ .name }}</a>
+              <a href="#" data-filter="{{ .tag }}" class="btn btn-primary btn-large{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
-          {{ end }}
+            {{ end }}
           </div>
         </div>
       </div>

static/js/hugo-academic.js

@@ -106,7 +106,8 @@
     // Initialize Isotope after all images have loaded.
     $grid_projects.isotope({
       itemSelector: '.isotope-item',
-      layoutMode: 'masonry'
+      layoutMode: 'masonry',
+      filter: $('#default-project-filter').text()
     });
 
     // Filter items when filter link is clicked.