Giters

stefanjudis / tiny-helpers

A collection of useful online web development tools

Home Page:https://tiny-helpers.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Implement a search

stefanjudis opened this issue · comments

commented

After discussing the possibility of an in-page search (#61), it can now be added. :)

Requirements for a search are that it's:

  • accessible
  • reflected in the URL
  • in best case works without JS
commented
  • in best case works without JS

Do you mean you would ideally like some server-side logic to execute so the server can dynamically render the page with filtering already applied?

Given most / potentially almost all of the tools listed on the page utilise JavaScript to actually work and this page is developer focussed, is it likely that people won't have JS enabled? Perhaps a progressive enhancement approach could be used so you only see the search capability and therefore can only use search if JS is enabled?

I have a basic site that uses Eleventy so have some knowledge of the tech and would like to help with this feature if I can... seeing I've kept on going on about it! :)

commented

@JonUK Thank you for the open discussion and the offer to help and join the party! 🎉🙇‍♂️

in best case works without JS

Sorry, that was poorly phrased. Let me explain. 🙈

I'm not against a JS search, and I think you're right that almost everybody has JS enabled these days. But I'd love to implement a search "that just works" – no matter what. Let me dig deeper a little what I have in mind. :)

The improvements I see for the in issue #61 mentioned frontend masters search are the following:

  • it is not reflecting the search query in the URL – ideally, it would do that to share queries. Tiny helpers seem to grow and grow, and that would be nice for the future.
    • if it's reflecting the search query then some server logic would be needed I guess?

The ideal state, in my opinion, is an approach like you see on perf-tooling.today. The search works client-side, updates the URL, shows the correct results immediately on refresh and works even when JS is pending or broken. It just works. :)

Perhaps a progressive enhancement approach could be used so you only see the search capability and therefore can only use search if JS is enabled?

Yay, I'm all up for PE (progressive enhancement). :) Question is then, how to handle the updated URL, though. I'm up for ideas. :)

I hope that all makes sense, and thank you again!

commented

So I think the main Q is whether server-side rendering is used so the initial HTML page response from the server is rendered with just the filtered items (probably by hiding via CSS the non-matched items) based on the query string param.

Using a JS only approach, we could still read the query string param and hide the non-matches so the page could render in the same way as server-side rendering but this wouldn't work if JS was actually disabled. With HTML5 History API / pushState we should be able to change the query string when a new search term is entered (without performing a full page reload).

commented

I've worked on a bare-bones implementation of client-side searching
#221

Deployment links with example queries
https://tiny-helpers-5k7727egl.now.sh/?q=hash
https://tiny-helpers-5k7727egl.now.sh/?q=pwa

It's still work in progress but if this is an approach to go forwards with then let me know. Any feedback welcome.

commented

Nice! Thank you so much @JonUK. I'll have a look at it tmrw then! 🙇🏻‍♂️🎉

commented

Oh man, I'm so sorry Jon. The PR is high on my todo-list. Sorry. :/

commented

Came across this other self-hostable web search plugin. Based on Rust (wasm) + JS. Stork-Search.

Think its all client-side as well though..

EDIT: Another one 😂 - https://pagefind.app/