quartz/layouts/partials/search.html

<div id="search-container">
  <div id="search-space">
    <input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search"
      placeholder="Search for something...">
    <div id="results-container">
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js"
  integrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE=" crossorigin="anonymous" defer></script>
{{ $js := resources.Get "js/search.js" | resources.Fingerprint "md5" | resources.Minify }}
<script defer src="{{ $js.Permalink }}"></script>
add search support 2021-08-27 21:08:11 +03:00			`<div id="search-container">`
refactor: move search utils to util.js 2022-07-31 20:54:23 +03:00			`<div id="search-space">`
			`<input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search"`
			`placeholder="Search for something...">`
			`<div id="results-container">`
add search support 2021-08-27 21:08:11 +03:00			`</div>`
refactor: move search utils to util.js 2022-07-31 20:54:23 +03:00			`</div>`
add search support 2021-08-27 21:08:11 +03:00			`</div>`
refactor: move search utils to util.js 2022-07-31 20:54:23 +03:00			`<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js"`
			`integrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE=" crossorigin="anonymous" defer></script>`
			`{{ $js := resources.Get "js/search.js" \| resources.Fingerprint "md5" \| resources.Minify }}`
Move css and js to appropriate files Having the CSS and JS in the html template produces pages larger than necessary, as each page need to contain all the js/css. Separating them in appropriate files allow the browser to just download them once and use them for all the pages. This is even more effective with an aggressive cache policy for the js and css, something that can be done without fear thanks to the implemented cache-busting. Also, having then in separate files allows us to use Hugo pipelines for minimizing the code. 2022-03-04 05:07:51 +03:00			`<script defer src="{{ $js.Permalink }}"></script>`