|
13 | 13 | /> |
14 | 14 |
|
15 | 15 |
|
16 | | - <link rel="stylesheet" href="https://ferretlang.org/sass/main.min.481dd192e4d3d70d80a4e2fa81d6592f470e651db5407dd5eeaaabde7ecbcc4a.css" /> |
| 16 | + <link rel="stylesheet" href="https://ferretlang.org/sass/main.min.9c29b02027e8b7895d7b2eb2185d5b9b7cefe6b3ef45099b3f2018fbf32ba946.css" /> |
| 17 | + <link href="/pagefind/pagefind-component-ui.css" rel="stylesheet" /> |
| 18 | + <script src="/pagefind/pagefind-component-ui.js" type="module"></script> |
17 | 19 |
|
18 | 20 | <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" /> |
19 | 21 | <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" /> |
|
38 | 40 | </script> |
39 | 41 | </head> |
40 | 42 | <body><nav class="navbar site-navbar" role="navigation" aria-label="main navigation" data-pagefind-ignore="all"> |
| 43 | + <pagefind-config instance="site-search" highlight-param="highlight"></pagefind-config> |
| 44 | + |
41 | 45 | <div class="container site-navbar-container"> |
42 | 46 | <div class="navbar-brand site-navbar-brand"> |
43 | 47 | <a class="navbar-item site-navbar-logo" href="/" aria-label="Ferret home"> |
|
47 | 51 | <span class="site-navbar-logo-text">FERRET</span> |
48 | 52 | </a> |
49 | 53 |
|
| 54 | + |
| 55 | +<pagefind-modal-trigger |
| 56 | + class="site-navbar-search site-navbar-search-mobile" |
| 57 | + instance="site-search" |
| 58 | + placeholder="Search docs" |
| 59 | +></pagefind-modal-trigger> |
| 60 | + |
| 61 | + |
50 | 62 | <button |
51 | 63 | id="navbar-burger" |
52 | 64 | type="button" |
|
69 | 81 |
|
70 | 82 |
|
71 | 83 |
|
72 | | - <a href="/try/" class="navbar-item site-navbar-link site-navbar-cta" |
73 | | - title="Try it" id="repl"> |
74 | | - Try it |
75 | | - </a> |
76 | | - |
77 | | - |
78 | | - |
79 | 84 | <a href="/docs/" class="navbar-item site-navbar-link" |
80 | 85 | title="Project documentation" id="docs"> |
81 | 86 | Docs |
|
88 | 93 | Blog |
89 | 94 | </a> |
90 | 95 |
|
| 96 | + |
| 97 | + |
| 98 | + <a href="/try/" class="navbar-item site-navbar-link site-navbar-cta" |
| 99 | + title="Try it" id="repl"> |
| 100 | + Try it |
| 101 | + </a> |
| 102 | + |
91 | 103 | </div> |
92 | 104 |
|
| 105 | + |
| 106 | +<pagefind-modal-trigger |
| 107 | + class="site-navbar-search site-navbar-search-desktop" |
| 108 | + instance="site-search" |
| 109 | + placeholder="Search docs" |
| 110 | + shortcut="/" |
| 111 | +></pagefind-modal-trigger> |
| 112 | + |
| 113 | + |
93 | 114 | <div class="navbar-end site-navbar-links site-navbar-links-secondary"> |
94 | 115 |
|
95 | 116 |
|
|
109 | 130 | </div> |
110 | 131 | </div> |
111 | 132 | </nav> |
| 133 | +<pagefind-modal class="site-search-modal" instance="site-search"> |
| 134 | + <pagefind-modal-header> |
| 135 | + <pagefind-input instance="site-search" placeholder="Search docs" debounce="150"></pagefind-input> |
| 136 | + </pagefind-modal-header> |
| 137 | + <pagefind-modal-body> |
| 138 | + <pagefind-summary instance="site-search" default-message="Type at least 2 characters to search."></pagefind-summary> |
| 139 | + <pagefind-results instance="site-search" max-results="6" max-sub-results="3"></pagefind-results> |
| 140 | + </pagefind-modal-body> |
| 141 | + <pagefind-modal-footer> |
| 142 | + <a id="site-search-view-all" class="site-search-view-all" href="/search/">View all results</a> |
| 143 | + <pagefind-keyboard-hints instance="site-search"></pagefind-keyboard-hints> |
| 144 | + </pagefind-modal-footer> |
| 145 | +</pagefind-modal> |
| 146 | + |
| 147 | +<script type="module"> |
| 148 | + await customElements.whenDefined("pagefind-modal"); |
| 149 | + |
| 150 | + const components = window.PagefindComponents; |
| 151 | + if (components) { |
| 152 | + const instanceName = "site-search"; |
| 153 | + const instance = components.getInstanceManager().getInstance(instanceName); |
| 154 | + const inputComponent = document.querySelector(`pagefind-input[instance="${instanceName}"]`); |
| 155 | + const modal = document.querySelector(`pagefind-modal[instance="${instanceName}"]`); |
| 156 | + const viewAll = document.getElementById("site-search-view-all"); |
| 157 | + |
| 158 | + const waitForInput = () => new Promise((resolve) => { |
| 159 | + const check = () => { |
| 160 | + if (inputComponent?.inputEl) { |
| 161 | + resolve(inputComponent.inputEl); |
| 162 | + return; |
| 163 | + } |
| 164 | + |
| 165 | + window.requestAnimationFrame(check); |
| 166 | + }; |
| 167 | + |
| 168 | + check(); |
| 169 | + }); |
| 170 | + |
| 171 | + const input = await waitForInput(); |
| 172 | + const searchURL = (query) => { |
| 173 | + const url = new URL("/search/", window.location.origin); |
| 174 | + if (query) { |
| 175 | + url.searchParams.set("q", query); |
| 176 | + } |
| 177 | + |
| 178 | + return `${url.pathname}${url.search}`; |
| 179 | + }; |
| 180 | + const updateViewAll = (query) => { |
| 181 | + if (viewAll) { |
| 182 | + viewAll.href = searchURL(query.trim()); |
| 183 | + } |
| 184 | + }; |
| 185 | + const addResultHighlights = () => { |
| 186 | + const query = input.value.trim(); |
| 187 | + if (query.length < 2) { |
| 188 | + return; |
| 189 | + } |
| 190 | + |
| 191 | + modal?.querySelectorAll(".pf-result-link, .pf-heading-link").forEach((link) => { |
| 192 | + const url = new URL(link.href, window.location.origin); |
| 193 | + url.searchParams.set("highlight", query); |
| 194 | + link.href = `${url.pathname}${url.search}${url.hash}`; |
| 195 | + }); |
| 196 | + }; |
| 197 | + |
| 198 | + const resultObserver = new MutationObserver(addResultHighlights); |
| 199 | + resultObserver.observe(modal, { |
| 200 | + childList: true, |
| 201 | + subtree: true |
| 202 | + }); |
| 203 | + |
| 204 | + input.addEventListener("input", (event) => { |
| 205 | + const query = input.value.trim(); |
| 206 | + updateViewAll(query); |
| 207 | + |
| 208 | + if (query.length < 2) { |
| 209 | + event.stopImmediatePropagation(); |
| 210 | + inputComponent.updateState?.(input.value); |
| 211 | + instance.triggerSearch(""); |
| 212 | + } |
| 213 | + }, true); |
| 214 | + |
| 215 | + input.addEventListener("keydown", (event) => { |
| 216 | + if (event.key !== "Enter") { |
| 217 | + return; |
| 218 | + } |
| 219 | + |
| 220 | + event.preventDefault(); |
| 221 | + event.stopImmediatePropagation(); |
| 222 | + |
| 223 | + const query = input.value.trim(); |
| 224 | + const firstResult = instance.searchTerm.trim() === query |
| 225 | + ? modal?.querySelector(".pf-result-link, .pf-heading-link") |
| 226 | + : null; |
| 227 | + |
| 228 | + window.location.href = firstResult?.href || searchURL(query); |
| 229 | + }, true); |
| 230 | + |
| 231 | + instance.on("search", (query) => { |
| 232 | + if (document.activeElement !== input) { |
| 233 | + updateViewAll(query); |
| 234 | + } |
| 235 | + }); |
| 236 | + instance.on("results", () => { |
| 237 | + window.requestAnimationFrame(addResultHighlights); |
| 238 | + }); |
| 239 | + } |
| 240 | +</script> |
112 | 241 |
|
113 | 242 | <script> |
114 | 243 | (function(){ |
|
0 commit comments