j1_template_mde 2018.4.19 → 2018.4.20

data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html

@@ -1,10 +1,9 @@
 ---
 layout:                                 page
 
-title:                                  Blog Archive by Date
+title:                                  Posts by date
 tagline:                                Check out all blog posts grouped by month
 
-toc:                                    true
 #permalink:                             /pages/private/blog/navigator/archive/dateview/
 
 resource_options:
@@ -19,13 +18,13 @@ regenerate:                             false
 ---
 
 {% comment %} Liquid procedures
---------------------------------------------------------------- {% endcomment %}
+-------------------------------------------------------------------------------- {% endcomment %}
 {% capture get_page_path %}themes/{{site.template.name}}/procedures/global/get_page_path.proc{% endcapture %}
 {% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
 {% capture get_category_item %}themes/{{site.template.name}}/procedures/global/get_category_item.proc{% endcapture %}
 
 {% comment %} Variables
---------------------------------------------------------------- {% endcomment %}
+-------------------------------------------------------------------------------- {% endcomment %}
 {% assign view_config         = site.data.builder.blog_navigator.date_view %}
 {% assign view_description    = view_config.description %}
 
@@ -45,19 +44,10 @@ regenerate:                             false
 {% capture all_view %}{{page_path}}/{% endcapture %}
 
 {% comment %} Main
---------------------------------------------------------------- {% endcomment %}
-<!-- <script>
-  // TODO: Fix last_page settings and logging
-  var logger = log4javascript.getLogger('j1.BlogNavigator');
-  var cookieUserState = 'j1.user.state'
-  j1_user_state.last_page = "{{browser_page_url}}"
-  j1.setUserStateCookie( j1_user_state ); 
-  logger.info('Save the current Post Browser page to cookie: ' +cookieUserState);
-</script> -->
-
+-------------------------------------------------------------------------------- {% endcomment %}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
 <div class="post-headline"> <h2 id="post-headline" class="mt-2">Posts By Date</h2></div>
-<div class="paginator">
+<div class="paginator ml-3">
   <ul class="pagination raised-z0">
     <li class="page-item"><a class="page-link" href="{{navigator     | prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
     <li class="page-item"><a class="page-link" href="{{category_view | prepend: site.baseurl}}" title="View by Category">By Category</a></li>
@@ -80,19 +70,24 @@ regenerate:                             false
     {% capture monthHead %}
       {% if month != nmonth %}
       {% if  forloop.index != 1  %}{{ closeList }}{%endif %}
-      <h2 id="{{ 100000 | rand }}" class="toc-link mt-5 mb-4">{% if year != nyear %}<a id="{{ post.date | date: '%Y' }}"></a>{% endif %}<a id="{{ post.date | date:  '%Y-%m'  }}"></a><a title="Back to top" href="#"><i class="fa fa-calendar mr-3"></i></a>{{ post.date | date: '%B %Y' }}</h2>
+      <h3 id="{{ 100000 | rand }}" class="toc-link mt-5 mb-0">{% if year != nyear %}<a id="{{ post.date | date: '%Y' }}"></a>{% endif %}<a id="{{ post.date | date:  '%Y-%m'  }}"></a><a title="Back to top" href="#"><i class="fa fa-calendar mr-3"></i></a>{{ post.date | date: '%B %Y' }}</h3>
       {{ openList }}
       {% endif %}
     {% endcapture %}
 
     {% capture link %}
+      {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
       <li>
-        <h3 id="{{ 100000 | rand }}" class="mt-3 mb-2"><a title="Read {{post.title|escape_once}}" href="{{site.baseurl}}{{post.url}}">{{post.title}}</a></h3>
-        <small><time datetime="{{post.date|date_to_xmlschema}}"><i class="fa fa-calendar mr-2"></i>{{post.date|date: "%B %d, %Y"}}</time></small>
-
-        <h5 class="notoc mt-4"><i class="fa fa-quote-left mr-3"></i>{{post.tagline}}</h5>
-        <div class="service">
-          <div class="desc"> <p>{{ post.excerpt }}</p> </div>
+        <div class="card card-flat">        
+          <div class="card-body">
+            <!-- <span class="post-meta">{{post.date|date: "%B %d, %Y"}}</span> -->
+            <h4 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h4>
+            <h5 class="notoc card-subtitle text-muted mb-2">{{ post.tagline }}</h5>
+            <div class="card-text"><p>{{ excerpt }}</p></div>
+            <div class="card-footer">
+              <a class="card-link" href="{{post.url}}#readmore" target="_blank">Read more ..</a>
+            </div>
+          </div>
         </div>
       </li>
     {% endcapture %}
@@ -105,19 +100,14 @@ regenerate:                             false
 </div>
 
 <!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{ browser_page_url }}] -->
+{% comment %} Update cookie for lastpage
+-------------------------------------------------------------------------------- {% endcomment %}
 <script type="text/javascript">
   function setLastPage() {
+    var logger = log4javascript.getLogger('j1.BlogNavigator');
     var user_state_last_page = "{{browser_page_url}}";
     j1.setUserStateCookie( {last_page:user_state_last_page} );
+    logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');
   }
   window.onload = setLastPage;
 </script>
-<!--
-<script>
-/* Manage the current page settings */
-$(document).ready(function() {
-    var user_state_last_page = "{{browser_page_url}}";
-    j1.setUserStateCookie( {last_page:user_state_last_page} );
-});
-</script>
--->

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -1,12 +1,12 @@
 ---
 layout:                                 page
 
-title:                                  Blog Archive by Tag
+title:                                  Posts by tag
 tagline:                                Check out all blog posts by tag
-
-toc:                                    true
 #permalink:                             /pages/private/blog/navigator/archive/tagview/
 
+skip_words:                             [ posts ]
+
 resource_options:
 
   - masthead:
@@ -18,13 +18,11 @@ resource_options:
 regenerate:                             false
 ---
 
-{% comment %} TODO
-logic for "letter_group_written == false" to be fixed
---------------------------------------------------------------- {% endcomment %}
-
+{% comment %} TODO: logic for "letter_group_written == false" to be fixed
+-------------------------------------------------------------------------------- {% endcomment %}
 
 {% comment %} Liquid procedures
---------------------------------------------------------------- {% endcomment %}
+-------------------------------------------------------------------------------- {% endcomment %}
 {% capture get_page_path %}themes/{{site.template.name}}/procedures/global/get_page_path.proc{% endcapture %}
 {% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
 {% capture get_category %}themes/{{site.template.name}}/procedures/global/get_category.proc{% endcapture %}
@@ -32,9 +30,9 @@ logic for "letter_group_written == false" to be fixed
 {% capture create_word_cloud %}themes/{{site.template.name}}/procedures/global/create_word_cloud.proc{% endcapture %}
 
 {% comment %} Variables
---------------------------------------------------------------- {% endcomment %}
-{% assign view_config         = site.data.builder.blog_navigator.tag_view %}
-{% assign view_description    = view_config.description %}
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign view_config           = site.data.builder.blog_navigator.tag_view %}
+{% assign view_description      = view_config.description %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{ page.url }}.html{% endcapture %}
@@ -43,15 +41,12 @@ logic for "letter_group_written == false" to be fixed
 {% endif %}
 
 {% comment %} jadams: skip_words needs to be configured by yaml data file
---------------------------------------------------------------- {% endcomment %}
-{% assign skip_words      = "posts" %}
-{% assign skip_word_array = skip_words | split:',' | sort %}
-
-{% assign letter_groups        = "ab, cd, ef, gh, ij, kl, mn, op, qr, st, uvw, xyz" %}
-{% assign letter_groups        = letter_groups | remove: ' ' %}
-{% assign letter_group_array   = letter_groups | split:',' %}
-{% assign letter_group_counter = 0 %}
-{% assign letter_group_written = false %}
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign letter_groups         = "ab, cd, ef, gh, ij, kl, mn, op, qr, st, uvw, xyz" %}
+{% assign letter_groups         = letter_groups | remove: ' ' %}
+{% assign letter_group_array    = letter_groups | split:',' %}
+{% assign letter_group_counter  = 0 %}
+{% assign letter_group_written  = false %}
 
 {% include {{get_page_path}} mode='absolute' %} 
 {% assign navigator_path = page_path | remove_first:'archive' %}
@@ -63,115 +58,118 @@ logic for "letter_group_written == false" to be fixed
 {% capture tag_view %}{{page_path}}/tagview/{% endcapture %}
 {% capture all_view %}{{page_path}}/{% endcapture %}
 
-{% capture site_tag_list %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
-{% assign site_tag_list_array = site_tag_list | split:',' | sort %}
-
-{% comment %} Main
---------------------------------------------------------------- {% endcomment %}  
-  <!-- <script>
-    // TODO: Fix last_page settings and logging
-    var logger = log4javascript.getLogger('j1.BlogNavigator');
-    var cookieUserState = 'j1.user.state'
-    j1_user_state.last_page = "{{browser_page_url}}"
-    j1.setUserStateCookie( j1_user_state ); 
-    logger.info('Save the current Post Browser page to cookie: ' +cookieUserState);
-  </script> -->
-
-  <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
-  {% include {{create_word_cloud}} word_list=site_tag_list source="tags" skip_words=skip_words %}
+{% comment %} TODO: skip_words should configured by yaml data file?
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign tags = site.tags | sort %}
+{% capture site_tag_word_list %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
+{% assign tags = site_tag_word_list | split:',' %}
+
+{% for tag in tags %}
+  {% if page.skip_words contains tag %} {% continue %} {% endif %}
+  {% capture tag_list %}{{ tag_list | append: tag }}{% unless forloop.last %},{% endunless %}{% endcapture %} 
+{% endfor %}
+
+
+{% comment %} Main 
+-------------------------------------------------------------------------------- {% endcomment %}  
+<!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
+{% include {{create_word_cloud}} word_list=tag_list source="tags" %}
+
+<div class="paginator ml-3">
+  <ul class="pagination raised-z0">
+    <li class="page-item"><a class="page-link" href="{{navigator | prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
+    <li class="page-item"><a class="page-link" href="{{date_view | prepend: site.baseurl}}" title="View by Date">By Date</a></li>
+    <li class="page-item"><a class="page-link" href="{{category_view | prepend: site.baseurl}}" title="View by Category">By Category</a></li>
+    <li class="page-item"><a class="page-link" href="{{all_view | prepend: site.baseurl}}" title="View All">All Posts</a></li>
+  </ul>
+</div>
+
+<div class="post-search-results col-md-10 col-sm-10 col-xs-11">
+  <div class="view-description mb-1">{{view_description}}</div>
+  <div class="post-headline"> <h2 id="post-headline" class="mt-5">Posts By Tag</h2></div>
+  {% assign letter_group = letter_group_array[letter_group_counter] %}
 
-  <div class="post-headline"> <h2 id="post-headline" class="mt-2">Posts By Tag</h2></div>
-  <div class="paginator">
-    <ul class="pagination raised-z0">
-      <li class="page-item"><a class="page-link" href="{{navigator | prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
-      <li class="page-item"><a class="page-link" href="{{date_view | prepend: site.baseurl}}" title="View by Date">By Date</a></li>
-      <li class="page-item"><a class="page-link" href="{{category_view | prepend: site.baseurl}}" title="View by Category">By Category</a></li>
-      <li class="page-item"><a class="page-link" href="{{all_view | prepend: site.baseurl}}" title="View All">All Posts</a></li>
-    </ul>
-  </div>
+  {% for item in (0..site.tags.size) %}{% unless forloop.last %}
+    {% capture this_word %}{{ word_array[item] | strip_newlines }}{% endcapture %}
 
-  <div class="post-search-results col-md-10 col-sm-10 col-xs-11">
+    {% for skip_word in skip_word_array %}
+      {% if skip_word contains this_word %} {% assign skip = true %} {% else %} {% assign skip = false %} {% endif %}
+      {% if skip %} {% break %} {% endif %}
+    {% endfor %}
 
-    <div class="view-description mb-5">{{view_description}}</div>
+    {% if skip %} {% continue %} {% endif %}
 
-  {% assign letter_group = letter_group_array[letter_group_counter] %}
+    {% assign first_letter = this_word | slice: 0, 1  %}
+    {% assign first_letter = first_letter | downcase %}
 
-  {% for item in (0..site.tags.size) %}{% unless forloop.last %}
-      {% capture this_word %}{{ word_array[item] | strip_newlines }}{% endcapture %}
-
-      {% for skip_word in skip_word_array %}
-        {% if skip_word contains this_word %} {% assign skip = true %} {% else %} {% assign skip = false %} {% endif %}
-        {% if skip %} {% break %} {% endif %}
-      {% endfor %}
-
-      {% if skip %} {% continue %} {% endif %}
-
-      {% assign first_letter = this_word | slice: 0, 1  %}
-      {% assign first_letter = first_letter | downcase %}
-
-      {% if letter_group contains first_letter %}
-        {% comment %} jadams, 2018-01-17: logic seems NOT work. Disabled.
-        {% if letter_group_written == false %}
-          <h2 id="id_{{letter_group}}" class="toc-link mt-5 mb-5"><a title="Back to top" href="#"><i class="fa fa-tags mr-2"></i></a>{{ letter_group | upcase }}</h2>
-          {% assign letter_group_written = true %}
-        {% endif %}
-        ------------------------------------------------------- {% endcomment %}
-      {% else %}
-        {% assign letter_group_counter = letter_group_counter | plus:1 %}
-        {% assign letter_group = letter_group_array[letter_group_counter] %}
-        {% comment %} jadams, 2018-01-17: logic seems NOT work. Added workaround by checking if letter_group has a value {% endcomment %}
-        {% if letter_group %}
-        <h2 id="id_{{letter_group}}" class="toc-link mb-3"><a title="Back to top" href="#"><i class="fa fa-tags mr-2"></i></a>{{ letter_group | upcase }}</h2>
-        {% endif %}
+    {% if letter_group contains first_letter %}
+      {% comment %} jadams, 2018-01-17: logic seems NOT work. Disabled.
+      --------------------------------------------------------------------------
+      <!-- jadams, 2018-01-17: logic seems NOT work. Disabled. -->
+      {% if letter_group_written == false %}
+        <h3 id="id_{{letter_group}}" class="toc-link mt-5 mb-5"><a title="Back to top" href="#"><i class="fa fa-tags mr-2"></i></a>{{ letter_group | upcase }}</h3>
         {% assign letter_group_written = true %}
       {% endif %}
-
-      {% comment %}
-      letter_group: {{ letter_group | debug }}
-      this_word: {{ this_word | debug }}
-      first_letter: {{ first_letter | debug }}
-      {% endcomment %}
-
-      <h3 id="{{this_word | replace: '+','_' | replace: ' ','_' | downcase }}" class="toc-link"><a title="Back to top" href="#"><i class="fa fa-tag mr-2"></i></a>{{ this_word }}</h3>
-      <ul class="list-unstyled link-news">
-          {% for post in site.tags[this_word] %}{% if post.title != null %}
-          <li>
-            {% include {{get_category}} post=post %}
-            {% assign category = _category %}
-
-            {% include {{get_category_item}} category=category %}
-            {% include {{select_icon_size}} family=icon_family size=icon_size %}
-            {% assign icon_size = size %}
-
-            <!-- span class="post-category-icon"><i class="{{icon_family}} {{icon_family}}-{{icon_name}} {{icon_size}}"></i></span -->
-            <h4 id="{{ 100000 | rand }}" class="mt-3 mb-2"><a title="Read {{post.title|escape_once}}" href="{{site.baseurl}}{{post.url}}">{{post.title}}</a></h4>
-            <small><time datetime="{{post.date|date_to_xmlschema}}"><i class="fa fa-calendar mr-2"></i>{{post.date|date: "%B %d, %Y"}}</time></small>
-
-            <h5 class="notoc mt-4"><i class="fa fa-quote-left mr-2"></i>{{post.tagline}}</h5>
-            <div class="service">
-              <div class="desc"> <p>{{ post.excerpt }}</p> </div>
-            </div>
-
-          </li>
-          {% endif %}{% endfor %}
-      </ul>
+      -------------------------------------------------------------------------- {% endcomment %}
+    {% else %}
+      {% assign letter_group_counter = letter_group_counter | plus:1 %}
+      {% assign letter_group = letter_group_array[letter_group_counter] %}
+
+      {% comment %} jadams, 2018-01-17: logic seems NOT work. 
+                    Added workaround by checking if letter_group has a value 
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% if letter_group %}
+      <h3 id="id_{{letter_group}}" class="toc-link mb-3">
+        <a title="Back to top" href="#">
+          <i class="fa fa-tags mr-2"></i>
+        </a>{{ letter_group | upcase }}
+      </h3>
+      {% endif %}
+      {% assign letter_group_written = true %}
+    {% endif %}
+
+    {% comment %}
+    letter_group: {{ letter_group | debug }}
+    this_word: {{ this_word | debug }}
+    first_letter: {{ first_letter | debug }}
+    {% endcomment %}
+
+    <h4 id="{{this_word | replace: '+','_' | replace: ' ','_' | downcase }}" class="toc-link"><a title="Back to top" href="#"><i class="fa fa-tag mr-2"></i></a>{{ this_word }}</h4>
+
+    {% for post in site.tags[this_word] %}{% if post.title != null %}
+      {% include {{get_category}} post=post %}
+      {% assign category = _category %}
+
+      {% include {{get_category_item}} category=category %}
+      {% include {{select_icon_size}} family=icon_family size=icon_size %}
+      {% assign icon_size = size %}
+
+      {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
+
+      <!-- place post  -->
+      <div class="card card-flat">        
+        <div class="card-body">
+          <!-- <span class="post-meta">{{post.date|date: "%B %d, %Y"}}</span> -->
+          <h5 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h5>
+          <h6 class="notoc card-subtitle text-muted mb-2">{{ post.tagline }}</h6>
+          <div class="card-text"><p>{{ excerpt }}</p></div>
+          <div class="card-footer">
+            <a class="card-link" href="{{post.url}}#readmore" target="_blank">Read more ..</a>
+          </div>
+        </div>
+      </div>
+    {% endif %}{% endfor %}
   {% endunless %}{% endfor %}
-  </div>
+</div>
 
 <!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{ browser_page_url }}] -->
 <script type="text/javascript">
   function setLastPage() {
+    var logger = log4javascript.getLogger('j1.BlogNavigator');
     var user_state_last_page = "{{browser_page_url}}";
     j1.setUserStateCookie( {last_page:user_state_last_page} );
+    logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');
   }
   window.onload = setLastPage;
 </script>
-<!--
-<script>
-/* Manage the current page settings */
-$(document).ready(function() {
-    var user_state_last_page = "{{browser_page_url}}";
-    j1.setUserStateCookie( {last_page:user_state_last_page} );
-});
-</script>
--->
+

data/lib/starter_web/pages/public/blog/navigator/index.html

@@ -1,8 +1,8 @@
 ---
 layout:                                 blog_archive
 
-title:                                  Article Navigator
-tagline:                                Navigate all Blog Posts throughout this Site
+title:                                  Blog Navigator
+tagline:                                Explore posts this site
 description:                            Page Generator
 
 tags:                                   [ Blog, Navigator ]

data/lib/starter_web/pages/public/instant_search_media.adoc

@@ -0,0 +1,438 @@
+---
+title:                                  InstantSearch
+tagline:                                Example Media
+description:                            Using Algolia Index API for static sites
+
+tags:                                   []
+resources:                              [ algolia ]
+permalink:                              /pages/public/instantsearch/media/
+
+resource_options:
+
+  - toccer:
+      collapseDepth:                    2
+
+  - masthead:
+      opacity:                          0.2
+      slides:
+        - url:                          /assets/images/widescreen/featured-1920x800.jpg
+          alt:                          featured-1920x800
+
+regenerate:                             true
+---
+
+// Enable the Liquid Preprocessor
+//
+//:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+== Site Search
+
+lorem:sentences[2]
+
+++++
+  <header class="row">
+    <div><a href="https://community.algolia.com/instantsearch.js/" class="is-logo"><img src="logo-is.png" width="40"></a><a href="./" class="logo">You<i class="fa fa-youtube-play"></i></a></div>
+    <div class="searchbox-container">
+      <div class="input-group">
+        <input id="q" type="text" class="form-control"><span class="input-group-btn">
+          <button class="btn btn-default"><i class="fa fa-search"></i></button></span>
+      </div>
+    </div>
+  </header>
+  <section>
+    <aside>
+      <ul class="nav nav-list">
+        <li><a href=""><i class="fa fa-home"></i> Home</a></li>
+        <li class="separator"></li>
+      </ul>
+      <h5><i class="fa fa-chevron-right"></i> Genres</h5>
+      <div id="genres"></div>
+      <h5><i class="fa fa-chevron-right"></i> Ratings</h5>
+      <div id="ratings"></div>
+      <div class="thank-you">Data courtesy of <a href="https://www.imdb.com/">imdb.com</a></div>
+    </aside>
+    <article>
+      <div id="stats" class="text-right text-muted"></div>
+      <hr>
+      <div id="hits"></div>
+      <div id="pagination" class="text-center"></div>
+    </article>
+  </section>
+++++
+
+++++
+<script>
+
+var search = instantsearch({
+  appId: 'latency',
+  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
+  indexName: 'movies',
+  routing: true
+});
+
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#q'
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.stats({
+    container: '#stats'
+  })
+);
+
+var hitTemplate =
+  '<div class="hit media">' +
+    '<div class="media-left">' +
+      '<div class="media-object" style="background-image: url(\'{{image}}\');"></div>' +
+    '</div>' +
+    '<div class="media-body">' +
+      '<h4 class="media-heading">{{{_highlightResult.title.value}}} {{#stars}}<span class="ais-star-rating--star{{^.}}__empty{{/.}}"></span>{{/stars}}</h4>' +
+      '<p class="year">{{year}}</p><p class="genre">{{#genre}}<span class="badge">{{.}}</span> {{/genre}}</p>' +
+    '</div>' +
+  '</div>';
+
+var noResultsTemplate =
+  '<div class="text-center">No results found matching <strong>{{query}}</strong>.</div>';
+
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '#hits',
+    hitsPerPage: 10,
+    templates: {
+      empty: noResultsTemplate,
+      item: hitTemplate
+    },
+    transformData: function(hit) {
+      hit.stars = [];
+      for (var i = 1; i <= 5; ++i) {
+        hit.stars.push(i <= hit.rating);
+      }
+      return hit;
+    }
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.pagination({
+    container: '#pagination',
+    cssClasses: {
+      root: 'pagination',
+      active: 'active'
+    }
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.refinementList({
+    container: '#genres',
+    attributeName: 'genre',
+    operator: 'and',
+    limit: 10,
+    cssClasses: {
+      list: 'nav nav-list',
+      count: 'badge pull-right',
+      active: 'active'
+    }
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.starRating({
+    container: '#ratings',
+    attributeName: 'rating',
+    cssClasses: {
+      list: 'nav',
+      count: 'badge pull-right'
+    }
+  })
+);
+
+search.start();
+
+</script>
+++++
+
+
+++++
+<style>
+
+body {
+  min-height: 100%;
+  font-family: Roboto;
+  background: #F1F1F1;
+}
+
+a {
+  color: #333333;
+}
+
+hr {
+  margin: 10px 14px;
+}
+
+.is-logo {
+  float: left;
+  margin-left: 18px;
+}
+
+.logo {
+  margin-left: 15px;
+  font-size: 30px;
+  font-weight: bold;
+  float: left;
+}
+
+.logo:hover {
+  text-decoration: none;
+}
+
+.logo i {
+  margin-left: 5px;
+  color: #E91D00;
+}
+
+header {
+  background: #FFFFFF;
+  padding: 10px;
+  border-bottom: 1px solid #E8E8E8;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+
+header .searchbox-container {
+  margin-left: 240px;
+  max-width: 400px;
+}
+
+header .searchbox-container .ais-search-box {
+  max-width: inherit;
+}
+
+header .searchbox-container .ais-search-box #q {
+  border-radius: 0;
+  padding-bottom: 7px;
+}
+
+header .searchbox-container .input-group {
+  margin-top: 5px;
+}
+
+header .searchbox-container .input-group .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+header .searchbox-container .input-group .input-group-btn button {
+  padding-left: 20px;
+  padding-right: 20px;
+  background: #F8F8F8;
+  border-radius: 0;
+}
+
+section {
+  background: #F1F1F1;
+  min-height: 100%;
+  z-index: 1;
+}
+
+section aside {
+  position: fixed;
+  top: 70px;
+  left: 0;
+  bottom: 10px;
+  width: 230px;
+  background: #FFFFFF;
+  border-right: 1px solid #E8E8E8;
+}
+
+section aside .nav {
+  margin: 0 20px;
+}
+
+section aside .nav li a {
+  display: block;
+  padding: 2px 10px;
+  margin: 10px 0;
+}
+
+section aside .nav li a:hover {
+  color: #FFFFFF;
+  background: #333333;
+}
+
+section aside .nav li.separator {
+  height: 1px;
+  background: #E8E8E8;
+}
+
+section aside h5 {
+  color: #CE1312;
+  margin-left: 30px;
+  text-transform: uppercase;
+  font-size: 10px;
+  margin-top: 20px;
+}
+
+section aside .badge {
+  font-size: .8em;
+  background: #BBBBBB;
+  position: relative;
+  top: 1px;
+}
+
+section aside #genres label {
+  display: block;
+  cursor: pointer;
+  padding: 4px 4px 4px 8px;
+  font-weight: normal;
+  font-size: .9em;
+  margin: 0 0 -1px;
+}
+
+section aside #genres label:hover {
+  color: #FFFFFF;
+  background: #333333;
+}
+
+section aside #genres label input {
+  display: none;
+}
+
+section aside #genres .active label {
+  border: 1px solid #CE1312;
+  margin-top: -1px;
+}
+
+section aside #genres .active .badge {
+  background: #333333;
+}
+
+section aside #ratings {
+  margin-left: 10px;
+}
+
+section aside #ratings .ais-stars-list--link {
+  font-size: .9em;
+}
+
+section aside #ratings .ais-stars-list--link:hover,
+section aside #ratings .ais-stars-list--link:active,
+section aside #ratings .ais-stars-list--link:focus {
+  text-decoration: none;
+}
+
+section aside #ratings .ais-stars-list--count {
+  font-size: 8px;
+}
+
+section aside #ratings .ais-star-rating--item {
+  margin-bottom: 6px;
+}
+
+section aside #ratings .ais-star-rating--item__active a {
+  color: #CE1312;
+}
+
+section article {
+  margin-top: 70px;
+  margin-bottom: 10px;
+  margin-left: 237px;
+  margin-right: 10px;
+  padding: 10px 0;
+  max-width: 100%;
+  background: #FFFFFF;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+section article #stats {
+  padding-right: 14px;
+  font-size: .8em;
+  line-height: 24px;
+}
+
+section article #hits {
+  padding: 0 15px;
+}
+
+section article #pagination .pagination a {
+  background: #F8F8F8;
+  padding: 3px 8px;
+  color: #333333;
+  margin-right: 4px;
+}
+
+section article #pagination .pagination a.active {
+  border-color: #b5b5b5;
+  background: #E8E8E8;
+}
+
+section article #pagination .pagination a:hover {
+  border-color: #cfcfcf;
+  background: #ebebeb;
+}
+
+section article .hit {
+  margin-bottom: 10px;
+  height: 130px;
+  border: 1px solid #F3F3F3;
+}
+
+section article .hit em {
+  font-style: normal;
+  background: #FFFFD4;
+  text-decoration: underline;
+}
+
+section article .hit .media-object {
+  height: 130px;
+  width: 130px;
+  overflow: hidden;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+section article .hit .media-heading {
+  color: #167AC6;
+  font-weight: normal;
+  font-size: 18px;
+}
+
+section .thank-you {
+  font-size: .8em;
+  margin-top: 18px;
+  margin-left: 30px;
+}
+
+section .thank-you a {
+  color: #CE1312;
+}
+
+.ais-search-box--input {
+  padding-left: 14px;
+}
+
+.genre,
+.year {
+  margin: 12px 0;
+}
+
+.year {
+  font-weight: bold;
+}
+
+.genre .badge {
+  background: #BBBBBB;
+}
+
+</style>
+++++