Merge pull request #537 from jamstack/zl/jamstacktv

Adds JamstackTV section.

Author: zachleat

.gitignore

@@ -18,4 +18,4 @@ dist
 .cache
 
 # Environment variables
-.env
+.env

algolia.config.js

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

package.json

@@ -23,27 +23,27 @@
   },
   "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",
+    "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",
     "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"
   },
   "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 {
@@ -152,21 +152,29 @@ footer p a:focus {
 }
 
 @supports (outline: none) {
+  .group:hover .group-hover\:card-shadow-blue-seafoam,
+  .group:focus .group-hover\:card-shadow-blue-seafoam,
   .hover\:card-shadow-blue-seafoam:hover,
   .hover\:card-shadow-blue-seafoam:focus {
     outline: none;
     box-shadow: 0px 3px 20px rgba(1, 159, 220, 0.6);
   }
+  .group:hover .group-hover\:card-shadow-seafoam,
+  .group:focus .group-hover\:card-shadow-seafoam,
   .hover\:card-shadow-seafoam:hover,
   .hover\:card-shadow-seafoam:focus {
     outline: none;
     box-shadow: 0px 3px 20px rgba(135, 249, 237, 0.7);
   }
+  .group:hover .group-hover\:card-shadow-sunrise,
+  .group:focus .group-hover\:card-shadow-sunrise,
   .hover\:card-shadow-sunrise:hover,
   .hover\:card-shadow-sunrise:focus {
     outline: none;
     box-shadow: 0px 3px 20px rgba(246, 62, 103, 0.6);
   }
+  .group:hover .group-hover\:card-shadow-gold,
+  .group:focus .group-hover\:card-shadow-gold,
   .hover\:card-shadow-gold:hover,
   .hover\:card-shadow-gold:focus {
     outline: none;
@@ -330,6 +338,143 @@ details[open] .summary-swap-open {
 .filter-country--hide {
   display: none !important;
 }
+
+/* Jamstack TV */
+.ais-SearchBox-input {
+  @apply bg-blue-900;
+  @apply text-white;
+  @apply font-bold;
+  @apply p-3;
+  @apply pl-14;
+  @apply mx-auto;
+  @apply border;
+  border-color: #5A5F75;
+  @apply rounded-full;
+  @apply block;
+  @apply w-full;
+  background-image: url(/img/svg/icon-search.svg);
+  background-repeat: no-repeat;
+  background-position: 1em 50%;
+  position: relative;
+}
+.ais-SearchBox-input:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3em;
+  background-color: #2b3350;
+}
+@supports (box-shadow: none) {
+  .ais-SearchBox-input:focus {
+    outline: none;
+    box-shadow: 0 0 1px 4px #E7017A;
+  }
+}
+
+.jamstacktv-link {
+  display: flex;
+  flex-wrap: wrap;
+}
+.jamstacktv-card {
+  flex-basis: 18.75em; /* 300px /16 */
+}
+.jamstacktv-item {
+  flex-basis: 18.75em; /* 300px /16 */
+  flex-grow: 3;
+}
+.jamstacktv-card,
+.jamstacktv-img {
+  border-radius: 1em 0 1em 1em;
+}
+.jamstacktv-img {
+  width: 100%;
+}
+.jamstacktv-duration {
+  @apply inline-block;
+  @apply px-1;
+  @apply bg-black;
+  @apply text-sm;
+  @apply font-bold;
+  position: absolute;
+  right: .4em;
+  top: .4em;
+}
+.jamstacktv-time {
+  display: inline-block;
+  margin-right: 0.25em; /* 4px /16 */
+}
+.jamstacktv-time > b {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 7px solid currentColor;
+}
+.jamstacktv-time > b + b {
+  margin-right: 3px;
+}
+.jamstacktv-item {
+  @apply p-4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.jamstacktv-item mark {
+  @apply bg-pink-900;
+  @apply text-white;
+}
+.jamstacktv-meta {
+  @apply leading-normal;
+}
+.jamstacktv-category:after {
+  content: ": ";
+}
+.jamstacktv-no-skip .jamstacktv-category:after {
+  content: "";
+}
+.jamstacktv-no-skip .jamstacktv-category {
+  display: block;
+}
+.jamstacktv-caption {
+  @apply text-xl;
+  @apply font-normal;
+}
+.jamstacktv-caption-quote {
+  @apply italic;
+}
+.jamstacktv-caption-quote:before {
+  content: "“"
+}
+.jamstacktv-caption-quote:after {
+  content: "”"
+}
+.jamstacktv-no-skip .jamstacktv-title {
+  @apply text-2xl;
+  @apply font-bold;
+}
+.jamstacktv-no-skip .jamstacktv-caption {
+  display: none;
+}
+.js .jamstacktv-js {
+  display: none;
+}
+.jamstacktv-scrubber {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  height: 1em;
+  border-radius: 0 0 1em 1em;
+  overflow: hidden;
+}
+.jamstacktv-scrubber > div {
+  height: 4px;
+  background-color: red;
+}
 /* purgecss end ignore */
 
 @tailwind utilities;

src/site/_data/algolia.js

@@ -0,0 +1,8 @@
+const algoliaConfig = require("../../../algolia.config.js");
+
+// don’t hardcode anything here, make the config variables opt-in
+module.exports = {
+  appId: algoliaConfig.appId,
+  indexName: algoliaConfig.indexName,
+  searchOnlyApiKey: algoliaConfig.searchOnlyApiKey,
+};

src/site/_data/github.js

@@ -30,7 +30,7 @@ async function githubRequest(user, repo) {
     issues: "",
   };
 
-  if(process.env.ELEVENTY_ENV == 'dev') {
+  if(process.env.ELEVENTY_ENV == 'dev' || !process.env.GITHUB_READ_TOKEN) {
     return errorData;
   }
 

src/site/_includes/header.njk

@@ -7,6 +7,7 @@
       { "url": "/best-practices/", "text": "Jamstack best practices" },
       { "url": "/glossary/", "text": "Glossary" }
     ]},
+    { "url": "/tv/" , "text": "Jamstack TV" },
     { "url": "/generators/" , "text": "Site Generators" },
     { "url": "/headless-cms/" , "text": "Headless CMS" },
     { "url": "/community/" , "text": "Community" }

src/site/_includes/layouts/base.njk

@@ -15,6 +15,9 @@ ogimage: "/img/og/default-og-image.png"
     <link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
+{%- for url in preconnect %}
+    <link rel="preconnect" href="{{ url }}">
+{%- endfor %}
     <meta property="og:title" content="{{ title }} | Jamstack">
     <meta property="og:site_name" content="Jamstack.org">
     <meta property="og:url" content="https://jamstack.org{{ page.url }}">
@@ -28,6 +31,7 @@ ogimage: "/img/og/default-og-image.png"
     <meta property="twitter:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
     <meta name="google-site-verification" content="i5IheizQ6X_M4jNqb_b7vbJrT34i_gvEg8Gxkq9IY_w" />
     <meta name="google-site-verification" content="WDIQ_1X8K7XIpPJ5G1Z8KnOqdSeYetPQB4EgoTLfIsc" />
+    <script type="module">document.documentElement.classList.add("js");</script>
   </head>
   <body class="bg-blue-900 text-blue-100 leading-relaxed antialiased">
     <svg width="0" height="0" aria-hidden="true" style="position: absolute;">
@@ -96,5 +100,8 @@ ogimage: "/img/og/default-og-image.png"
     <script type="module" src="/js/filter-container.js"></script>
     <script type="module" src="/js/sort-container.js"></script>
     <script type="module" src="/js/lazyiframe.js"></script>
+    {%- for path in javascriptIncludes %}
+    {% include path %}
+    {%- endfor %}
   </body>
 </html>

src/site/_includes/search-js.njk

@@ -0,0 +1,102 @@
+<script type="module" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.3/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
+<script type="module">
+const searchClient = algoliasearch('{{ algolia.appId }}', '{{ algolia.searchOnlyApiKey }}');
+
+const search = instantsearch({
+  indexName: '{{ algolia.indexName }}',
+  searchClient,
+});
+
+{% raw %}
+function pad(num) {
+  return num < 10 ? `0${num}` : num;
+}
+
+function getDurationString(duration) {
+  let secondsInOne = {
+    hour: 60*60,
+    minute: 60
+  };
+
+  let hours = Math.floor(duration / secondsInOne.hour);
+  let minutes = Math.floor((duration % secondsInOne.hour) / secondsInOne.minute);
+  let seconds = Math.floor(duration % secondsInOne.minute);
+
+  return `${hours ? `${hours}:`: ""}${hours ? pad(minutes) : minutes}:${pad(seconds)}`;
+}
+
+search.addWidgets([
+  instantsearch.widgets.searchBox({
+    container: '#searchbox',
+    //placeholder: 'Search Video Content',
+    showReset: false,
+    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',
+    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`,
+          displayDuration: getDurationString(item.video.duration),
+        };
+
+        if(start > 10) { // only show for deep links > 10 seconds
+          obj.displayStartInline = `<span class="jamstacktv-time"><b></b><b></b>${getDurationString(start)} of</span>`;
+          let scrubberWidth = Math.floor( 100 * item.caption.start / item.video.duration );
+          obj.scrubberHtml = `<div class="jamstacktv-scrubber"><div style="width: ${scrubberWidth}%"></div></div>`;
+          //obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
+        } else {
+          obj.wrapperClass = "jamstacktv-no-skip";
+        }
+        return obj;
+      });
+    },
+    templates: {
+      item: `
+        <a href="{{ url }}" class="mb-4 group jamstacktv-link">
+          <div class="relative jamstacktv-card">
+            <img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="jamstacktv-img card-shadow bg-gradient-card-sunrise group-hover:card-shadow-sunrise" width="480" height="360">
+            <span class="jamstacktv-duration">{{{ displayStartInline }}}{{ displayDuration }}</span>
+            {{{ scrubberHtml }}}
+          </div>
+          <div class="jamstacktv-item {{ wrapperClass }}">
+            <div class="jamstacktv-meta mb-1">
+              <span class="jamstacktv-category">{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}}</span>
+              <span class="jamstacktv-title">{{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}}</span>
+            </div>
+            <strong class="jamstacktv-caption"><span class="jamstacktv-caption-quote">{{#helpers.highlight}}{ "attribute": "caption.content" }{{/helpers.highlight}}</span></strong>
+          </div>
+        </div>
+      `,
+    },
+  })
+]);
+
+search.start();
+{% endraw %}
+</script>