Trial run.

Author: zachleat

.gitignore

@@ -18,4 +18,7 @@ dist
 .cache
 
 # Environment variables
-.env
+.env
+
+# Captions Metadata from Jamstack TV
+data/

algolia.config.js

@@ -0,0 +1,9 @@
+require('dotenv').config();
+
+module.exports = {
+  appId: 'VGOL4P01VV',
+  indexName: 'jamstack',
+  apiKey: process.env.ALGOLIA_API_KEY,
+  // It’s okay to have this in the repo, it’s used in the clientside JS
+  searchOnlyApiKey: "a457b566acbf454a61eaaae2e4fee0bf",
+};

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  command = "npm run build"
+  command = "npm run build:production"
   publish = "dist"
 
 [build.environment]

package.json

@@ -15,35 +15,40 @@
     "build": "npm-run-all build:html build:css",
     "build:html": "eleventy",
     "build:css": "postcss src/css/tailwind.css -o dist/css/styles.css",
+    "data:jamstacktv": "youtinx pull",
     "watch:html": "ELEVENTY_ENV=dev eleventy --watch --quiet",
     "watch:css": "postcss src/css/tailwind.css -o dist/css/styles.css --watch",
     "serve": "live-server dist --quiet --port=8090",
     "start": "npm-run-all --parallel watch:html watch:css serve",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "build:production": "npm run data:jamstacktv && npm run build"
   },
   "dependencies": {
     "@11ty/eleventy": "^0.11.1",
-    "@11ty/eleventy-cache-assets": "^2.0.4",
+    "@11ty/eleventy-cache-assets": "^2.1.0",
     "@zachleat/filter-container": "^1.0.3",
-    "autoprefixer": "^10.2.3",
+    "algoliasearch": "^4.8.6",
+    "autoprefixer": "^10.2.5",
     "cssnano": "^4.1.10",
     "dotenv": "^8.2.0",
     "fast-glob": "^3.2.5",
     "gray-matter": "^4.0.2",
-    "i18n-iso-countries": "^6.4.0",
+    "i18n-iso-countries": "^6.5.0",
+    "instantsearch.js": "^4.17.0",
     "js-yaml": "^3.14.0",
-    "lodash": "^4.17.20",
-    "luxon": "^1.25.0",
+    "lodash": "^4.17.21",
+    "luxon": "^1.26.0",
     "markdown-it": "^12.0.4",
-    "netlify-plugin-minify-html": "^0.3.0",
+    "netlify-plugin-minify-html": "^0.3.1",
     "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.5",
     "placename": "^1.1.2",
-    "postcss": "^8.2.4",
+    "postcss": "^8.2.8",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^13.0.0",
     "spdx-correct": "^3.1.1",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "^2.0.3",
+    "youtinx": "^0.4.1"
   },
   "devDependencies": {
     "live-server": "^1.2.1"

src/css/tailwind.css

@@ -17,7 +17,7 @@
     }
   }
   h2 {
-      @apply text-white text-3xl font-bold leading-none mb-8;
+    @apply text-white text-3xl font-bold leading-none mb-8;
   }
   @screen md {
     h2 {
@@ -330,6 +330,23 @@ details[open] .summary-swap-open {
 .filter-country--hide {
   display: none !important;
 }
+
+/* Jamstack TV */
+.ais-SearchBox-input {
+  @apply bg-blue-900;
+  @apply text-white;
+  @apply p-4;
+  @apply my-8;
+  @apply mx-auto;
+  @apply border-blue-100;
+  @apply border;
+  @apply rounded-full;
+  @apply block;
+  @apply w-full;
+}
+.aspect-ratio-youtube {
+  padding-top: 74.9295775%;
+}
 /* purgecss end ignore */
 
 @tailwind utilities;

src/site/_data/algolia.js

@@ -0,0 +1,8 @@
+const algoliaConfig = require("../../../algolia.config.js");
+
+// make sure we don’t leak algoliaConfig.apiKey
+module.exports = {
+  appId: algoliaConfig.appId,
+  indexName: algoliaConfig.indexName,
+  searchOnlyApiKey: algoliaConfig.searchOnlyApiKey,
+};

src/site/tv.njk

@@ -0,0 +1,78 @@
+---
+title: Jamstack TV
+layout: layouts/base.njk
+---
+
+{# <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">
+  <div id="searchbox"></div>
+  <div id="hits"></div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
+<script>
+const searchClient = algoliasearch('{{ algolia.appId }}', '{{ algolia.searchOnlyApiKey }}');
+
+const search = instantsearch({
+  indexName: '{{ algolia.indexName }}',
+  searchClient,
+});
+
+{% raw %}
+search.addWidgets([
+  instantsearch.widgets.searchBox({
+    container: '#searchbox',
+  }),
+
+  instantsearch.widgets.hits({
+    snippetEllipsisText: '…',
+    container: '#hits',
+    cssClasses: {
+      root: "bg-blue-900 text-blue-100",
+      //item: "bg-blue-900 text-blue-100",
+    },
+    transformItems(items) {
+      return items.map(item => {
+        let start = item.caption.start;
+
+        let obj = {
+          ...item,
+          url: `https://www.youtube.com/watch?v=${item.video.id}}&t=${start}s`,
+        };
+        if(start > 0) {
+          let secondsInOne = {
+            hour: 60*60,
+            minute: 60
+          }
+          function pad(num) { return num < 10 ? `0${num}` : num; }
+          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._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
+        }
+        return obj;
+      });
+    },
+    templates: {
+      item: `
+        <a href="{{ url }}" class="grid grid-cols-4 gap-4 mb-4">
+          <div class="aspect-ratio-youtube relative">
+            <img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="absolute top-0">
+          </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>
+            <strong class="text-2xl">{{#helpers.highlight}}{ "attribute": "caption.content" }{{/helpers.highlight}}</strong>
+            <div></div>
+          </div>
+        </div>
+      `,
+    },
+  })
+]);
+
+search.start();
+{% endraw %}
+</script>

youtinx.config.js

@@ -0,0 +1,31 @@
+require('dotenv').config();
+
+const algoliaConfig = require('./algolia.config.js');
+const _ = require('golgoth/lodash');
+
+module.exports = {
+  playlists: [
+    'PL58Wk5g77lF-VssZBBOxEWCd6AODGNtND', // Tutorials and presentations
+    'PL58Wk5g77lF85BuoWgPQZhOxDIPzx1F1z', // Meetups
+    'PL58Wk5g77lF_mT2y-v0u4wQngzIIuGpyM', // JamSnacks
+    'PL58Wk5g77lF94tg-F3y5zRyDeLVhTDnTg', // Jamstack Conf Oct 2020
+    'PL58Wk5g77lF8jzqp_1cViDf-WilJsAvqT', // Jamstack Conf May 2020
+    'PL58Wk5g77lF_gCGGqbVZMBun9x70yC4o-', // Jamstack Conf SF 2019
+    'PL58Wk5g77lF8yBcRouUcOv5dRz0rmDzKD', // Jamstack Conf London 2019
+    'PL58Wk5g77lF9_tthBm3jHQJedDvPSURhd', // Jamstack Conf NYC 2019
+    'PL58Wk5g77lF-UQ39pejLX2Zn5DxQyExBa', // Jamstack Conf SF 2018
+  ],
+  knownVideosWithoutCaptions: [
+    'DKM-WCYQHa4',
+    '5nITeKhoa1E'
+  ],
+  algoliaCredentials: {
+    appId: algoliaConfig.appId,
+    indexName: algoliaConfig.indexName,
+    settings: {
+      typoTolerance: "min",
+      // We manually disable typo on years
+      disableTypoToleranceOnWords: _.times(50, (year) => `${2000 + year}`),
+    },
+  },
+};