blob: aa65430619cbd1b7fb3b1e8954187d5945d1b6f4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<style>
#global-search-overlay.shown {
z-index: 10!important;
opacity: 1!important;
}
#global-search #pagefind input {
outline: none
}
#global-search.shown {
z-index: 15!important;
display: flex!important;
animation: fade-in 0.3s ease-in-out!important;
}
</style>
<div id="global-search-container">
<div id="global-search"
class="fixed -z-10 hidden top-0 left-0 right-0 bottom-0 items-center justify-center">
<div id="global-search-close" class="absolute top-0 right-0 px-4 text-12 cursor-pointer">×</div>
<!-- Pagefind Search -->
<div id="pagefind" class="max-h-[90vh] overflow-y-auto w-full m-4 md:w-[600px]"></div>
<script>
window.addEventListener('DOMContentLoaded', () => {
new PagefindUI({ element: "#pagefind", showSubResults: true });
});
</script>
</div>
<div id="global-search-overlay"
class="fixed top-0 left-0 w-full h-full bg-[rgba(250,250,250,0.75)] dark:bg-[rgba(30,30,30,0.75)]
backdrop-blur-md -z-10 opacity-0 transition-opacity duration-300">
</div>
<script>
(() => {
const search = document.getElementById("global-search");
const overlay = document.getElementById("global-search-overlay");
const turnOn = () => {
search.classList.add("shown");
overlay.classList.add("shown");
umami.track('🔍 Open search panel')
};
const turnOff = () => {
search.classList.remove("shown");
overlay.classList.remove("shown");
};
window.addEventListener("keydown", (event) => {
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
// Open the popup window
if (search.classList.contains("shown")) {
turnOff()
} else {
turnOn();
}
// Focus on the search input
const input = search.querySelector("input");
input.focus();
}
if (event.key === 'Escape') {
turnOff();
}
});
// trigger by clicking instruction text
// to allow mobile users to search
const searchInstruction = document.getElementById("search-instruction");
if (searchInstruction) {
searchInstruction.addEventListener("click", turnOn);
}
// double-click to turn off search
// in case esc and ctrl/cmd+k cannot be used
search.addEventListener("dblclick", turnOff);
const closeButton = document.getElementById("global-search-close");
closeButton.addEventListener("click", turnOff);
})();
</script>
</div>
|
