CloudCannon / pagefind

Static low-bandwidth search at scale
https://pagefind.app
MIT License
3.38k stars 104 forks source link

Default UI: Add wrapping elements to search term and result count in the summary #289

Open davidsneighbour opened 1 year ago

davidsneighbour commented 1 year ago

The output for the search term "something" is the following HTML in the PagefindUI:

<p class="pagefind-ui__message svelte-1bkqzc5">75 results for something</p>

Better would be

<p class="pagefind-ui__message svelte-1bkqzc5">75 results for <mark>something</mark></p>

or

<p class="pagefind-ui__message svelte-1bkqzc5">
  75 results for <span class="pagefind-ui__sarchterm">something</span>
</p>

so the search term can be visually distinct.

Bonus points for wrapping the "75 results" too into something designable.

bglw commented 1 year ago

This looks like a reasonable change 👍 I'll roll with the span with a class.

(In general, this level of styling is why the Modular UI is under development, but adding some spans is a transparent enough change that I'm happy to add that to the default UI)

bglw commented 1 year ago

_(Self note for implementation: these strings are sourced from the translation files, so the default UI will need to wrap the [COUNT] and the [SEARCH_TERM] placeholders in spans before processing)_