search

alex-shpak / hugo-book

Hugo documentation theme as simple as plain book
https://hugo-book-demo.netlify.app
MIT License
3.21k stars 1.16k forks source link

Only show search when JS is enabled #591

Closed leoheitmannruiz closed 2 months ago

leoheitmannruiz commented 5 months ago

Hey, thanks for the lovely theme!!

What do you think about only showing the search bar when JS is enabled? I feel like this would be a caring touch :)

I know very little about this type of development, but can't you have an empty div, which is filled with the search, in case JS is enabled? Is it that simple?

alex-shpak commented 4 months ago

Hi! I thought about it, option could be to have search box hidden by default and unhide it with JS, not sure if it worth an extra JS script tho

alex-shpak commented 4 months ago

Perhaps like this search.html

{{ if default true .Site.Params.BookSearch }}
<div class="book-search hidden">
  <input type="text" id="book-search-input" placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>
<script>document.querySelector(".book-search").classList.remove("hidden")</script>
{{ end }}
leoheitmannruiz commented 4 months ago

I tested this and it LGTM. Very cool!