From 3bd0e9549f6f9e1e32f957b12ec08005d279e8d0 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 12 Mar 2021 17:55:02 -0600 Subject: [PATCH 01/14] Trial run. --- .gitignore | 5 ++- algolia.config.js | 9 +++++ netlify.toml | 2 +- package.json | 23 +++++++----- src/css/tailwind.css | 19 +++++++++- src/site/_data/algolia.js | 8 ++++ src/site/tv.njk | 78 +++++++++++++++++++++++++++++++++++++++ youtinx.config.js | 31 ++++++++++++++++ 8 files changed, 163 insertions(+), 12 deletions(-) create mode 100644 algolia.config.js create mode 100644 src/site/_data/algolia.js create mode 100644 src/site/tv.njk create mode 100644 youtinx.config.js diff --git a/.gitignore b/.gitignore index 805a5e3b1..5d2ada952 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,7 @@ dist .cache # Environment variables -.env \ No newline at end of file +.env + +# Captions Metadata from Jamstack TV +data/ \ No newline at end of file diff --git a/algolia.config.js b/algolia.config.js new file mode 100644 index 000000000..de7a29b05 --- /dev/null +++ b/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", +}; diff --git a/netlify.toml b/netlify.toml index f834f8501..683bb5d0a 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,5 +1,5 @@ [build] - command = "npm run build" + command = "npm run build:production" publish = "dist" [build.environment] diff --git a/package.json b/package.json index 061cc39d5..a81ba1f75 100644 --- a/package.json +++ b/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" diff --git a/src/css/tailwind.css b/src/css/tailwind.css index 7bb1171c0..350548657 100644 --- a/src/css/tailwind.css +++ b/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; diff --git a/src/site/_data/algolia.js b/src/site/_data/algolia.js new file mode 100644 index 000000000..294128d5b --- /dev/null +++ b/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, +}; \ No newline at end of file diff --git a/src/site/tv.njk b/src/site/tv.njk new file mode 100644 index 000000000..357965b7b --- /dev/null +++ b/src/site/tv.njk @@ -0,0 +1,78 @@ +--- +title: Jamstack TV +layout: layouts/base.njk +--- + +{# #} +{# #} +
+ +
+
+ + + \ No newline at end of file diff --git a/youtinx.config.js b/youtinx.config.js new file mode 100644 index 000000000..a47a697b9 --- /dev/null +++ b/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}`), + }, + }, +}; From fa5faf2fbf3599429cab333ddc399ce0155ce36a Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 15 Mar 2021 12:59:13 -0500 Subject: [PATCH 02/14] Only run youtinx in production. --- netlify.toml | 14 +++++++++++++- package.json | 2 +- src/site/_data/github.js | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/netlify.toml b/netlify.toml index 683bb5d0a..77950903b 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,11 +1,23 @@ [build] - command = "npm run build:production" + command = "npm run build" publish = "dist" [build.environment] NODE_VERSION = "12.16.2" NODE_ENV = "production" +# This requires YOUTUBE_API_KEY and ALGOLIA_API_KEY +[context.production] + command = "npm run build:production" + +# TODO remove this, this is just for testing +[context.deploy-preview] + command = "npm run build:production" + +# TODO remove this, this is just for testing +[context.branch-deploy] + command = "npm run build:production" + [dev] command = "npm run start" publish = "dist" diff --git a/package.json b/package.json index a81ba1f75..23a8980e4 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "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", + "data:jamstacktv": "youtinx pull && youtinx push", "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", diff --git a/src/site/_data/github.js b/src/site/_data/github.js index db1f962da..9db2517cc 100644 --- a/src/site/_data/github.js +++ b/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; } From 12b8e90526b46336b224b1c2469bc1db0cfb4c1d Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 15 Mar 2021 17:02:58 -0500 Subject: [PATCH 03/14] Decouple the data source population code to a separate repo. --- .gitignore | 3 --- algolia.config.js | 1 - netlify.toml | 12 ------------ package.json | 7 ++----- src/site/_data/algolia.js | 2 +- src/site/tv.njk | 7 ++++--- youtinx.config.js | 31 ------------------------------- 7 files changed, 7 insertions(+), 56 deletions(-) delete mode 100644 youtinx.config.js diff --git a/.gitignore b/.gitignore index 5d2ada952..6d3253786 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,3 @@ dist # Environment variables .env - -# Captions Metadata from Jamstack TV -data/ \ No newline at end of file diff --git a/algolia.config.js b/algolia.config.js index de7a29b05..7f17e4d3f 100644 --- a/algolia.config.js +++ b/algolia.config.js @@ -3,7 +3,6 @@ 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", }; diff --git a/netlify.toml b/netlify.toml index 77950903b..f834f8501 100644 --- a/netlify.toml +++ b/netlify.toml @@ -6,18 +6,6 @@ NODE_VERSION = "12.16.2" NODE_ENV = "production" -# This requires YOUTUBE_API_KEY and ALGOLIA_API_KEY -[context.production] - command = "npm run build:production" - -# TODO remove this, this is just for testing -[context.deploy-preview] - command = "npm run build:production" - -# TODO remove this, this is just for testing -[context.branch-deploy] - command = "npm run build:production" - [dev] command = "npm run start" publish = "dist" diff --git a/package.json b/package.json index 23a8980e4..760d9ac58 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,11 @@ "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 && youtinx push", "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", - "build:production": "npm run data:jamstacktv && npm run build" + "clean": "rm -rf dist" }, "dependencies": { "@11ty/eleventy": "^0.11.1", @@ -47,8 +45,7 @@ "postcss-cli": "^8.3.1", "postcss-import": "^13.0.0", "spdx-correct": "^3.1.1", - "tailwindcss": "^2.0.3", - "youtinx": "^0.4.1" + "tailwindcss": "^2.0.3" }, "devDependencies": { "live-server": "^1.2.1" diff --git a/src/site/_data/algolia.js b/src/site/_data/algolia.js index 294128d5b..952da68df 100644 --- a/src/site/_data/algolia.js +++ b/src/site/_data/algolia.js @@ -1,6 +1,6 @@ const algoliaConfig = require("../../../algolia.config.js"); -// make sure we don’t leak algoliaConfig.apiKey +// don’t hardcode anything here, make the config variables opt-in module.exports = { appId: algoliaConfig.appId, indexName: algoliaConfig.indexName, diff --git a/src/site/tv.njk b/src/site/tv.njk index 357965b7b..61c153511 100644 --- a/src/site/tv.njk +++ b/src/site/tv.njk @@ -9,9 +9,10 @@ layout: layouts/base.njk
- - - + + - - + +
-

{{ title }}

- -
+
+

{{ title }}

+
+
+ +
Search by Algolia
+
+
@@ -62,7 +69,7 @@ search.addWidgets([ }; if(start > 10) { // only show for deep links > 10 seconds - obj.displayStartInline = `${getDurationString(start)} /`; + obj.displayStartInline = `${getDurationString(start)} of`; //obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`; } else { obj.wrapperClass = "jamstacktv-no-skip"; From 6f704e70eda1b5bd850b40591839b04ee12bd724 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 16 Mar 2021 14:47:20 -0500 Subject: [PATCH 09/14] Optimize the JS loading. --- src/site/_includes/layouts/base.njk | 6 ++ src/site/_includes/search-js.njk | 83 +++++++++++++++++++++++++++ src/site/tv.njk | 87 ++--------------------------- 3 files changed, 93 insertions(+), 83 deletions(-) create mode 100644 src/site/_includes/search-js.njk diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk index 4d55469f6..e0d199ad4 100644 --- a/src/site/_includes/layouts/base.njk +++ b/src/site/_includes/layouts/base.njk @@ -15,6 +15,9 @@ ogimage: "/img/og/default-og-image.png" +{%- for url in preconnect %} + +{%- endfor %} @@ -99,5 +102,8 @@ ogimage: "/img/og/default-og-image.png" + {%- for path in javascriptIncludes %} + {% include path %} + {%- endfor %} diff --git a/src/site/_includes/search-js.njk b/src/site/_includes/search-js.njk new file mode 100644 index 000000000..60dd32acf --- /dev/null +++ b/src/site/_includes/search-js.njk @@ -0,0 +1,83 @@ + + + \ No newline at end of file diff --git a/src/site/tv.njk b/src/site/tv.njk index 06ac8e93b..e92f3c556 100644 --- a/src/site/tv.njk +++ b/src/site/tv.njk @@ -1,6 +1,10 @@ --- title: Jamstack TV layout: layouts/base.njk +preconnect: + - https://cdn.jsdelivr.net +javascriptIncludes: + - search-js.njk --- {# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #} @@ -17,86 +21,3 @@ layout: layouts/base.njk
- - - \ No newline at end of file From 3f7e3a6620e16782198da119e9731198d29f6ebe Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 16 Mar 2021 14:54:21 -0500 Subject: [PATCH 10/14] Removes unnecessary deps. --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 760d9ac58..af63d2aec 100644 --- a/package.json +++ b/package.json @@ -25,14 +25,12 @@ "@11ty/eleventy": "^0.11.1", "@11ty/eleventy-cache-assets": "^2.1.0", "@zachleat/filter-container": "^1.0.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.5.0", - "instantsearch.js": "^4.17.0", "js-yaml": "^3.14.0", "lodash": "^4.17.21", "luxon": "^1.26.0", From 47ba3f1543430ac8d344ff6ca9341335340ae231 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 16 Mar 2021 17:00:24 -0500 Subject: [PATCH 11/14] Adds a little fake scrubber for deep video links --- src/css/tailwind.css | 14 ++++++++++++++ src/site/_includes/layouts/base.njk | 4 +--- src/site/_includes/search-js.njk | 13 +++++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/css/tailwind.css b/src/css/tailwind.css index 2063b1d5a..e71a47e78 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -451,6 +451,20 @@ details[open] .summary-swap-open { .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; diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk index e0d199ad4..d8e3e66d9 100644 --- a/src/site/_includes/layouts/base.njk +++ b/src/site/_includes/layouts/base.njk @@ -31,9 +31,7 @@ ogimage: "/img/og/default-og-image.png" - + ${getDurationString(start)} of`; + let scrubberWidth = Math.floor( 100 * item.caption.start / item.video.duration ); + obj.scrubberHtml = `
`; //obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`; } else { obj.wrapperClass = "jamstacktv-no-skip"; @@ -64,6 +68,7 @@ search.addWidgets([
{{ video.title }} {{{ displayStartInline }}}{{ displayDuration }} + {{{ scrubberHtml }}}
From b291cfc8620ad3242c79c65b537505904b70e01d Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 16 Mar 2021 17:59:27 -0500 Subject: [PATCH 12/14] Adds sort by widget and subtitle --- src/site/_includes/search-js.njk | 14 ++++++++++++++ src/site/tv.njk | 20 ++++++++++++++------ 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/site/_includes/search-js.njk b/src/site/_includes/search-js.njk index 7ddfff295..8b168d896 100644 --- a/src/site/_includes/search-js.njk +++ b/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', diff --git a/src/site/tv.njk b/src/site/tv.njk index e92f3c556..0717dadda 100644 --- a/src/site/tv.njk +++ b/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 #} -
-
-

{{ title }}

-
-
+ +
+

{{ title }}

+

{{ subtitle }}

+
+ +
+
Search by Algolia
-
+
+
Sort by
+
+
+
From bfb80ed662e3964bfb99b9527326c6b42568a716 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 17 Mar 2021 08:57:42 -0500 Subject: [PATCH 13/14] Layout fix for small viewports --- src/css/tailwind.css | 16 +++++++++++++--- src/site/_includes/search-js.njk | 8 ++++---- src/site/tv.njk | 1 - 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/css/tailwind.css b/src/css/tailwind.css index e71a47e78..aa47b1673 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -372,8 +372,17 @@ details[open] .summary-swap-open { box-shadow: 0 0 1px 4px #E7017A; } } -.aspect-ratio-youtube { - padding-top: 74.9295775%; + +.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 { @@ -390,7 +399,7 @@ details[open] .summary-swap-open { @apply font-bold; position: absolute; right: .4em; - bottom: .4em; + top: .4em; } .jamstacktv-time { display: inline-block; @@ -408,6 +417,7 @@ details[open] .summary-swap-open { margin-right: 3px; } .jamstacktv-item { + @apply p-4; display: flex; flex-direction: column; justify-content: center; diff --git a/src/site/_includes/search-js.njk b/src/site/_includes/search-js.njk index 8b168d896..49dfa62c2 100644 --- a/src/site/_includes/search-js.njk +++ b/src/site/_includes/search-js.njk @@ -78,13 +78,13 @@ search.addWidgets([ }, templates: { item: ` - -
- {{ video.title }} + +
+ {{ video.title }} {{{ displayStartInline }}}{{ displayDuration }} {{{ scrubberHtml }}}
-
+
{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}} {{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}} diff --git a/src/site/tv.njk b/src/site/tv.njk index 0717dadda..5403089dd 100644 --- a/src/site/tv.njk +++ b/src/site/tv.njk @@ -9,7 +9,6 @@ javascriptIncludes: --- {# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #} -

{{ title }}

{{ subtitle }}

From 5bc6d8a3738a20e433573c0b573c6bd442aad8ee Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 17 Mar 2021 09:10:15 -0500 Subject: [PATCH 14/14] Center algolia logo at small viewports --- src/site/tv.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/site/tv.njk b/src/site/tv.njk index 5403089dd..f5c61adb0 100644 --- a/src/site/tv.njk +++ b/src/site/tv.njk @@ -19,7 +19,7 @@ javascriptIncludes: -
Search by Algolia
+
Search by Algolia
Sort by