Tweaks to template.

Author: zachleat

src/css/tailwind.css

@@ -347,6 +347,16 @@ details[open] .summary-swap-open {
 .aspect-ratio-youtube {
   padding-top: 74.9295775%;
 }
+.jamstacktv-time {
+  display: inline-block;
+  font-size: .75em;
+  border: 1px solid #eee;
+  padding: 0 .5em;
+  margin-right: .5em;
+  border-radius: .25em;
+  word-spacing: 0.25em; /* 4px /16 */
+  font-weight: 700;
+}
 /* purgecss end ignore */
 
 @tailwind utilities;

src/site/tv.njk

@@ -2,7 +2,7 @@
 title: Jamstack TV
 layout: layouts/base.njk
 ---
-
+{# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #}
 {# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous"> #}
 {# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous"> #}
 <div class="p-8">
@@ -24,6 +24,9 @@ const search = instantsearch({
 search.addWidgets([
   instantsearch.widgets.searchBox({
     container: '#searchbox',
+    placeholder: 'Search Video Content',
+    showReset: false,
+    showSubmit: false,
   }),
 
   instantsearch.widgets.hits({
@@ -50,7 +53,7 @@ search.addWidgets([
           let hours = Math.floor(start / secondsInOne.hour);
           let minutes = Math.floor((start % secondsInOne.hour) / secondsInOne.minute);
           let seconds = Math.floor(start % secondsInOne.minute);
-          obj.displayStart = `(at ${hours ? `${pad(hours)}:`: ""}${pad(minutes)}:${pad(seconds)}) `;
+          obj.displayStart = `<span class="jamstacktv-time">⏱ ${hours ? `${pad(hours)}:`: ""}${pad(minutes)}:${pad(seconds)}</span>`;
           //obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
         }
         return obj;
@@ -64,7 +67,7 @@ search.addWidgets([
           </div>
           <div class="col-span-3">
             <div>{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}}: {{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}}</div>
-            <span class="text-2xl">{{ displayStart }}</span>
+            <span class="text-2xl">{{{ displayStart }}}</span>
             <strong class="text-2xl">{{#helpers.highlight}}{ "attribute": "caption.content" }{{/helpers.highlight}}</strong>
             <div></div>
           </div>