Skip to content

Commit 3bd0e95

Browse files
zachleatzachleat
committed
Trial run.
1 parent 47cb649 commit 3bd0e95

File tree

8 files changed

+163
-12
lines changed

8 files changed

+163
-12
lines changed

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,7 @@ dist
1818
.cache
1919

2020
# Environment variables
21-
.env
21+
.env
22+
23+
# Captions Metadata from Jamstack TV
24+
data/

‎algolia.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
require('dotenv').config();
2+
3+
module.exports = {
4+
appId: 'VGOL4P01VV',
5+
indexName: 'jamstack',
6+
apiKey: process.env.ALGOLIA_API_KEY,
7+
// It’s okay to have this in the repo, it’s used in the clientside JS
8+
searchOnlyApiKey: "a457b566acbf454a61eaaae2e4fee0bf",
9+
};

‎netlify.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[build]
2-
command = "npm run build"
2+
command = "npm run build:production"
33
publish = "dist"
44

55
[build.environment]

‎package.json

+14-9
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,40 @@
1515
"build": "npm-run-all build:html build:css",
1616
"build:html": "eleventy",
1717
"build:css": "postcss src/css/tailwind.css -o dist/css/styles.css",
18+
"data:jamstacktv": "youtinx pull",
1819
"watch:html": "ELEVENTY_ENV=dev eleventy --watch --quiet",
1920
"watch:css": "postcss src/css/tailwind.css -o dist/css/styles.css --watch",
2021
"serve": "live-server dist --quiet --port=8090",
2122
"start": "npm-run-all --parallel watch:html watch:css serve",
22-
"clean": "rm -rf dist"
23+
"clean": "rm -rf dist",
24+
"build:production": "npm run data:jamstacktv && npm run build"
2325
},
2426
"dependencies": {
2527
"@11ty/eleventy": "^0.11.1",
26-
"@11ty/eleventy-cache-assets": "^2.0.4",
28+
"@11ty/eleventy-cache-assets": "^2.1.0",
2729
"@zachleat/filter-container": "^1.0.3",
28-
"autoprefixer": "^10.2.3",
30+
"algoliasearch": "^4.8.6",
31+
"autoprefixer": "^10.2.5",
2932
"cssnano": "^4.1.10",
3033
"dotenv": "^8.2.0",
3134
"fast-glob": "^3.2.5",
3235
"gray-matter": "^4.0.2",
33-
"i18n-iso-countries": "^6.4.0",
36+
"i18n-iso-countries": "^6.5.0",
37+
"instantsearch.js": "^4.17.0",
3438
"js-yaml": "^3.14.0",
35-
"lodash": "^4.17.20",
36-
"luxon": "^1.25.0",
39+
"lodash": "^4.17.21",
40+
"luxon": "^1.26.0",
3741
"markdown-it": "^12.0.4",
38-
"netlify-plugin-minify-html": "^0.3.0",
42+
"netlify-plugin-minify-html": "^0.3.1",
3943
"node-fetch": "^2.6.1",
4044
"npm-run-all": "^4.1.5",
4145
"placename": "^1.1.2",
42-
"postcss": "^8.2.4",
46+
"postcss": "^8.2.8",
4347
"postcss-cli": "^8.3.1",
4448
"postcss-import": "^13.0.0",
4549
"spdx-correct": "^3.1.1",
46-
"tailwindcss": "^2.0.2"
50+
"tailwindcss": "^2.0.3",
51+
"youtinx": "^0.4.1"
4752
},
4853
"devDependencies": {
4954
"live-server": "^1.2.1"

‎src/css/tailwind.css

+18-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818
}
1919
h2 {
20-
@apply text-white text-3xl font-bold leading-none mb-8;
20+
@apply text-white text-3xl font-bold leading-none mb-8;
2121
}
2222
@screen md {
2323
h2 {
@@ -330,6 +330,23 @@ details[open] .summary-swap-open {
330330
.filter-country--hide {
331331
display: none !important;
332332
}
333+
334+
/* Jamstack TV */
335+
.ais-SearchBox-input {
336+
@apply bg-blue-900;
337+
@apply text-white;
338+
@apply p-4;
339+
@apply my-8;
340+
@apply mx-auto;
341+
@apply border-blue-100;
342+
@apply border;
343+
@apply rounded-full;
344+
@apply block;
345+
@apply w-full;
346+
}
347+
.aspect-ratio-youtube {
348+
padding-top: 74.9295775%;
349+
}
333350
/* purgecss end ignore */
334351

335352
@tailwind utilities;

‎src/site/_data/algolia.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const algoliaConfig = require("../../../algolia.config.js");
2+
3+
// make sure we don’t leak algoliaConfig.apiKey
4+
module.exports = {
5+
appId: algoliaConfig.appId,
6+
indexName: algoliaConfig.indexName,
7+
searchOnlyApiKey: algoliaConfig.searchOnlyApiKey,
8+
};

‎src/site/tv.njk

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Jamstack TV
3+
layout: layouts/base.njk
4+
---
5+
6+
{# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous"> #}
7+
{# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous"> #}
8+
<div class="p-8">
9+
<div id="searchbox"></div>
10+
<div id="hits"></div>
11+
</div>
12+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
14+
<script>
15+
const searchClient = algoliasearch('{{ algolia.appId }}', '{{ algolia.searchOnlyApiKey }}');
16+
17+
const search = instantsearch({
18+
indexName: '{{ algolia.indexName }}',
19+
searchClient,
20+
});
21+
22+
{% raw %}
23+
search.addWidgets([
24+
instantsearch.widgets.searchBox({
25+
container: '#searchbox',
26+
}),
27+
28+
instantsearch.widgets.hits({
29+
snippetEllipsisText: '…',
30+
container: '#hits',
31+
cssClasses: {
32+
root: "bg-blue-900 text-blue-100",
33+
//item: "bg-blue-900 text-blue-100",
34+
},
35+
transformItems(items) {
36+
return items.map(item => {
37+
let start = item.caption.start;
38+
39+
let obj = {
40+
...item,
41+
url: `https://www.youtube.com/watch?v=${item.video.id}}&t=${start}s`,
42+
};
43+
if(start > 0) {
44+
let secondsInOne = {
45+
hour: 60*60,
46+
minute: 60
47+
}
48+
function pad(num) { return num < 10 ? `0${num}` : num; }
49+
let hours = Math.floor(start / secondsInOne.hour);
50+
let minutes = Math.floor((start % secondsInOne.hour) / secondsInOne.minute);
51+
let seconds = Math.floor(start % secondsInOne.minute);
52+
obj.displayStart = `(at ${hours ? `${pad(hours)}:`: ""}${pad(minutes)}:${pad(seconds)}) `;
53+
//obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
54+
}
55+
return obj;
56+
});
57+
},
58+
templates: {
59+
item: `
60+
<a href="{{ url }}" class="grid grid-cols-4 gap-4 mb-4">
61+
<div class="aspect-ratio-youtube relative">
62+
<img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="absolute top-0">
63+
</div>
64+
<div class="col-span-3">
65+
<div>{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}}: {{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}}</div>
66+
<span class="text-2xl">{{ displayStart }}</span>
67+
<strong class="text-2xl">{{#helpers.highlight}}{ "attribute": "caption.content" }{{/helpers.highlight}}</strong>
68+
<div></div>
69+
</div>
70+
</div>
71+
`,
72+
},
73+
})
74+
]);
75+
76+
search.start();
77+
{% endraw %}
78+
</script>

‎youtinx.config.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
require('dotenv').config();
2+
3+
const algoliaConfig = require('./algolia.config.js');
4+
const _ = require('golgoth/lodash');
5+
6+
module.exports = {
7+
playlists: [
8+
'PL58Wk5g77lF-VssZBBOxEWCd6AODGNtND', // Tutorials and presentations
9+
'PL58Wk5g77lF85BuoWgPQZhOxDIPzx1F1z', // Meetups
10+
'PL58Wk5g77lF_mT2y-v0u4wQngzIIuGpyM', // JamSnacks
11+
'PL58Wk5g77lF94tg-F3y5zRyDeLVhTDnTg', // Jamstack Conf Oct 2020
12+
'PL58Wk5g77lF8jzqp_1cViDf-WilJsAvqT', // Jamstack Conf May 2020
13+
'PL58Wk5g77lF_gCGGqbVZMBun9x70yC4o-', // Jamstack Conf SF 2019
14+
'PL58Wk5g77lF8yBcRouUcOv5dRz0rmDzKD', // Jamstack Conf London 2019
15+
'PL58Wk5g77lF9_tthBm3jHQJedDvPSURhd', // Jamstack Conf NYC 2019
16+
'PL58Wk5g77lF-UQ39pejLX2Zn5DxQyExBa', // Jamstack Conf SF 2018
17+
],
18+
knownVideosWithoutCaptions: [
19+
'DKM-WCYQHa4',
20+
'5nITeKhoa1E'
21+
],
22+
algoliaCredentials: {
23+
appId: algoliaConfig.appId,
24+
indexName: algoliaConfig.indexName,
25+
settings: {
26+
typoTolerance: "min",
27+
// We manually disable typo on years
28+
disableTypoToleranceOnWords: _.times(50, (year) => `${2000 + year}`),
29+
},
30+
},
31+
};

0 commit comments

Comments
 (0)