Skip to content

Commit 9b27d46

Browse files
zachleatzachleat
committed
Adds icons and algolia branding, adds to nav, more tweaks to timestamp display
1 parent 762d70f commit 9b27d46

File tree

6 files changed

+41
-8
lines changed

6 files changed

+41
-8
lines changed

‎src/css/tailwind.css‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -344,14 +344,27 @@ details[open] .summary-swap-open {
344344
@apply bg-blue-900;
345345
@apply text-white;
346346
@apply font-bold;
347-
@apply p-4;
348-
@apply my-8;
347+
@apply p-3;
348+
@apply pl-14;
349349
@apply mx-auto;
350350
@apply border;
351351
border-color: #5A5F75;
352352
@apply rounded-full;
353353
@apply block;
354354
@apply w-full;
355+
background-image: url(/img/svg/icon-search.svg);
356+
background-repeat: no-repeat;
357+
background-position: 1em 50%;
358+
position: relative;
359+
}
360+
.ais-SearchBox-input:before {
361+
content: "";
362+
position: absolute;
363+
left: 0;
364+
top: 0;
365+
bottom: 0;
366+
width: 3em;
367+
background-color: #2b3350;
355368
}
356369
@supports (box-shadow: none) {
357370
.ais-SearchBox-input:focus {
@@ -376,8 +389,8 @@ details[open] .summary-swap-open {
376389
@apply text-sm;
377390
@apply font-bold;
378391
position: absolute;
379-
right: .25em;
380-
bottom: .25em;
392+
right: .4em;
393+
bottom: .4em;
381394
}
382395
.jamstacktv-time {
383396
display: inline-block;
@@ -435,6 +448,9 @@ details[open] .summary-swap-open {
435448
.jamstacktv-no-skip .jamstacktv-caption {
436449
display: none;
437450
}
451+
.js .jamstacktv-js {
452+
display: none;
453+
}
438454
/* purgecss end ignore */
439455

440456
@tailwind utilities;

‎src/site/_includes/header.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
{ "url": "/best-practices/", "text": "Jamstack best practices" },
88
{ "url": "/glossary/", "text": "Glossary" }
99
]},
10+
{ "url": "/tv/" , "text": "Jamstack TV" },
1011
{ "url": "/generators/" , "text": "Site Generators" },
1112
{ "url": "/headless-cms/" , "text": "Headless CMS" },
1213
{ "url": "/community/" , "text": "Community" }

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ ogimage: "/img/og/default-og-image.png"
2828
<meta property="twitter:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
2929
<meta name="google-site-verification" content="i5IheizQ6X_M4jNqb_b7vbJrT34i_gvEg8Gxkq9IY_w" />
3030
<meta name="google-site-verification" content="WDIQ_1X8K7XIpPJ5G1Z8KnOqdSeYetPQB4EgoTLfIsc" />
31+
<script>
32+
if("classList" in document.documentElement) document.documentElement.classList.add("js");
33+
</script>
3134
</head>
3235
<body class="bg-blue-900 text-blue-100 leading-relaxed antialiased">
3336
<svg width="0" height="0" aria-hidden="true" style="position: absolute;">

‎src/site/img/svg/icon-search.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/site/img/svg/search-by-algolia-dark-background.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/site/tv.njk‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@ layout: layouts/base.njk
55
{# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #}
66

77
<div class="p-8 max-w-6xl mx-auto">
8-
<h1 class="text-center">{{ title }}</h1>
9-
<div id="searchbox"></div>
10-
<div id="hits"></div>
8+
<div class="md:mt-20">
9+
<h1 class="text-center">{{ title }}</h1>
10+
</div>
11+
<div class="flex flex-wrap items-center justify-center my-8 max-w-2xl mx-auto">
12+
<div id="searchbox" class="flex-grow my-2">
13+
<span class="jamstacktv-js">The search functionality on Jamstack TV requires JavaScript to operate.</span>
14+
</div>
15+
<div class="ml-4 my-2"><img src="/img/svg/search-by-algolia-dark-background.svg" alt="Search by Algolia" width="168" height="24" class="w-auto"/></div>
16+
</div>
17+
<div id="hits" class="mt-20"></div>
1118
</div>
1219

1320
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
@@ -62,7 +69,7 @@ search.addWidgets([
6269
};
6370
6471
if(start > 10) { // only show for deep links > 10 seconds
65-
obj.displayStartInline = `<span class="jamstacktv-time"><b></b><b></b>${getDurationString(start)} /</span>`;
72+
obj.displayStartInline = `<span class="jamstacktv-time"><b></b><b></b>${getDurationString(start)} of</span>`;
6673
//obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
6774
} else {
6875
obj.wrapperClass = "jamstacktv-no-skip";

0 commit comments

Comments
 (0)