Skip to content

Commit 6f704e7

Browse files
zachleatzachleat
committed
Optimize the JS loading.
1 parent 9b27d46 commit 6f704e7

File tree

3 files changed

+93
-83
lines changed

3 files changed

+93
-83
lines changed

‎src/site/_includes/layouts/base.njk‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ ogimage: "/img/og/default-og-image.png"
1515
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
1616
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
1717
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
18+
{%- for url in preconnect %}
19+
<link rel="preconnect" href="{{ url }}">
20+
{%- endfor %}
1821
<meta property="og:title" content="{{ title }} | Jamstack">
1922
<meta property="og:site_name" content="Jamstack.org">
2023
<meta property="og:url" content="https://jamstack.org{{ page.url }}">
@@ -99,5 +102,8 @@ ogimage: "/img/og/default-og-image.png"
99102
<script type="module" src="/js/filter-container.js"></script>
100103
<script type="module" src="/js/sort-container.js"></script>
101104
<script type="module" src="/js/lazyiframe.js"></script>
105+
{%- for path in javascriptIncludes %}
106+
{% include path %}
107+
{%- endfor %}
102108
</body>
103109
</html>

‎src/site/_includes/search-js.njk‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
2+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
3+
<script>
4+
const searchClient = algoliasearch('{{ algolia.appId }}', '{{ algolia.searchOnlyApiKey }}');
5+
6+
const search = instantsearch({
7+
indexName: '{{ algolia.indexName }}',
8+
searchClient,
9+
});
10+
11+
{% raw %}
12+
function pad(num) { return num < 10 ? `0${num}` : num; }
13+
14+
function getDurationString(duration) {
15+
let secondsInOne = {
16+
hour: 60*60,
17+
minute: 60
18+
};
19+
20+
let hours = Math.floor(duration / secondsInOne.hour);
21+
let minutes = Math.floor((duration % secondsInOne.hour) / secondsInOne.minute);
22+
let seconds = Math.floor(duration % secondsInOne.minute);
23+
24+
return `${hours ? `${hours}:`: ""}${hours ? pad(minutes) : minutes}:${pad(seconds)}`;
25+
}
26+
27+
search.addWidgets([
28+
instantsearch.widgets.searchBox({
29+
container: '#searchbox',
30+
//placeholder: 'Search Video Content',
31+
showReset: false,
32+
showSubmit: false,
33+
}),
34+
35+
instantsearch.widgets.hits({
36+
snippetEllipsisText: '…',
37+
container: '#hits',
38+
cssClasses: {
39+
root: "bg-blue-900 text-blue-100",
40+
//item: "bg-blue-900 text-blue-100",
41+
},
42+
transformItems(items) {
43+
return items.map(item => {
44+
let start = item.caption.start;
45+
46+
let obj = {
47+
...item,
48+
url: `https://www.youtube.com/watch?v=${item.video.id}}&t=${start}s`,
49+
displayDuration: getDurationString(item.video.duration),
50+
};
51+
52+
if(start > 10) { // only show for deep links > 10 seconds
53+
obj.displayStartInline = `<span class="jamstacktv-time"><b></b><b></b>${getDurationString(start)} of</span>`;
54+
//obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
55+
} else {
56+
obj.wrapperClass = "jamstacktv-no-skip";
57+
}
58+
return obj;
59+
});
60+
},
61+
templates: {
62+
item: `
63+
<a href="{{ url }}" class="grid grid-cols-3 gap-4 mb-4 group">
64+
<div class="aspect-ratio-youtube relative jamstacktv-card">
65+
<img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="jamstacktv-img absolute top-0 card-shadow bg-gradient-card-sunrise group-hover:card-shadow-sunrise">
66+
<span class="jamstacktv-duration">{{{ displayStartInline }}}{{ displayDuration }}</span>
67+
</div>
68+
<div class="col-span-2 jamstacktv-item {{ wrapperClass }}">
69+
<div class="jamstacktv-meta mb-1">
70+
<span class="jamstacktv-category">{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}}</span>
71+
<span class="jamstacktv-title">{{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}}</span>
72+
</div>
73+
<strong class="jamstacktv-caption"><span class="jamstacktv-caption-quote">{{#helpers.highlight}}{ "attribute": "caption.content" }{{/helpers.highlight}}</span></strong>
74+
</div>
75+
</div>
76+
`,
77+
},
78+
})
79+
]);
80+
81+
search.start();
82+
{% endraw %}
83+
</script>

‎src/site/tv.njk‎

Lines changed: 4 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
---
22
title: Jamstack TV
33
layout: layouts/base.njk
4+
preconnect:
5+
- https://cdn.jsdelivr.net
6+
javascriptIncludes:
7+
- search-js.njk
48
---
59
{# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #}
610

@@ -17,86 +21,3 @@ layout: layouts/base.njk
1721
<div id="hits" class="mt-20"></div>
1822
</div>
1923

20-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
21-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
22-
<script>
23-
const searchClient = algoliasearch('{{ algolia.appId }}', '{{ algolia.searchOnlyApiKey }}');
24-
25-
const search = instantsearch({
26-
indexName: '{{ algolia.indexName }}',
27-
searchClient,
28-
});
29-
30-
{% raw %}
31-
function pad(num) { return num < 10 ? `0${num}` : num; }
32-
33-
function getDurationString(duration) {
34-
let secondsInOne = {
35-
hour: 60*60,
36-
minute: 60
37-
};
38-
39-
let hours = Math.floor(duration / secondsInOne.hour);
40-
let minutes = Math.floor((duration % secondsInOne.hour) / secondsInOne.minute);
41-
let seconds = Math.floor(duration % secondsInOne.minute);
42-
43-
return `${hours ? `${hours}:`: ""}${hours ? pad(minutes) : minutes}:${pad(seconds)}`;
44-
}
45-
46-
search.addWidgets([
47-
instantsearch.widgets.searchBox({
48-
container: '#searchbox',
49-
//placeholder: 'Search Video Content',
50-
showReset: false,
51-
showSubmit: false,
52-
}),
53-
54-
instantsearch.widgets.hits({
55-
snippetEllipsisText: '…',
56-
container: '#hits',
57-
cssClasses: {
58-
root: "bg-blue-900 text-blue-100",
59-
//item: "bg-blue-900 text-blue-100",
60-
},
61-
transformItems(items) {
62-
return items.map(item => {
63-
let start = item.caption.start;
64-
65-
let obj = {
66-
...item,
67-
url: `https://www.youtube.com/watch?v=${item.video.id}}&t=${start}s`,
68-
displayDuration: getDurationString(item.video.duration),
69-
};
70-
71-
if(start > 10) { // only show for deep links > 10 seconds
72-
obj.displayStartInline = `<span class="jamstacktv-time"><b></b><b></b>${getDurationString(start)} of</span>`;
73-
//obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
74-
} else {
75-
obj.wrapperClass = "jamstacktv-no-skip";
76-
}
77-
return obj;
78-
});
79-
},
80-
templates: {
81-
item: `
82-
<a href="{{ url }}" class="grid grid-cols-3 gap-4 mb-4 group">
83-
<div class="aspect-ratio-youtube relative jamstacktv-card">
84-
<img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="jamstacktv-img absolute top-0 card-shadow bg-gradient-card-sunrise group-hover:card-shadow-sunrise">
85-
<span class="jamstacktv-duration">{{{ displayStartInline }}}{{ displayDuration }}</span>
86-
</div>
87-
<div class="col-span-2 jamstacktv-item {{ wrapperClass }}">
88-
<div class="jamstacktv-meta mb-1">
89-
<span class="jamstacktv-category">{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}}</span>
90-
<span class="jamstacktv-title">{{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}}</span>
91-
</div>
92-
<strong class="jamstacktv-caption"><span class="jamstacktv-caption-quote">{{#helpers.highlight}}{ "attribute": "caption.content" }{{/helpers.highlight}}</span></strong>
93-
</div>
94-
</div>
95-
`,
96-
},
97-
})
98-
]);
99-
100-
search.start();
101-
{% endraw %}
102-
</script>

0 commit comments

Comments
 (0)