Adds sort by widget and subtitle

Author: zachleat

src/site/_includes/search-js.njk

@@ -34,6 +34,20 @@ search.addWidgets([
     showSubmit: false,
   }),
 
+  instantsearch.widgets.sortBy({
+    container: '#sort-by',
+    items: [
+      { label: 'Newest', value: 'jamstack' },
+      { label: 'Popular', value: 'popular' },
+    ],
+    cssClasses: {
+      //root: 'MyCustomSortBy',
+      select: [
+        'text-black py-1 px-2 rounded-default border border-white bg-white',
+      ],
+    },
+  }),
+
   instantsearch.widgets.hits({
     snippetEllipsisText: '…',
     container: '#hits',

src/site/tv.njk

@@ -1,5 +1,6 @@
 ---
 title: Jamstack TV
+subtitle:  Jamstack TV is a searchable collection of video resources. Interested in a topic? Looking for a specific talk? Search here and we’ll find that talk or topic timestamp within the videos for you.
 layout: layouts/base.njk
 preconnect:
   - https://cdn.jsdelivr.net
@@ -8,16 +9,23 @@ javascriptIncludes:
 ---
 {# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #}
 
-<div class="p-8 max-w-6xl mx-auto">
-  <div class="md:mt-20">
-    <h1 class="text-center">{{ title }}</h1>
-  </div>
-  <div class="flex flex-wrap items-center justify-center my-8 max-w-2xl mx-auto">
+
+<section class="md:mt-20">
+  <h1 class="text-center">{{ title }}</h1>
+  <p class="text-center">{{ subtitle }}</p>
+</section>
+
+<div class="px-8 max-w-6xl mx-auto">
+  <div class="flex flex-wrap items-center justify-center max-w-2xl mx-auto">
     <div id="searchbox" class="flex-grow my-2">
       <span class="jamstacktv-js">The search functionality on Jamstack TV requires JavaScript to operate.</span>
     </div>
     <div class="ml-4 my-2"><img src="/img/svg/search-by-algolia-dark-background.svg" alt="Search by Algolia" width="168" height="24" class="w-auto"/></div>
   </div>
-  <div id="hits" class="mt-20"></div>
+  <div class="flex items-center justify-end mt-20">
+    <div class="mr-4">Sort by</div>
+    <div id="sort-by"></div>
+  </div>
+  <div id="hits" class="mt-4"></div>
 </div>