A walkthrough on building a client-side blog search feature with Eleventy. Covers generating a JSON data source from post collections, constructing an accessible search widget using semantic HTML elements like `<search>`, `<form>`, and ARIA attributes (aria-live, aria-busy, aria-controls), and wiring it all together with vanilla JavaScript. Also covers URL synchronization for shareable search links and suggestions for further improvements like fuzzy matching and template elements.

7m read timeFrom kittygiraudel.com
Post cover image
Table of contents
Data source §Cooking a search widget §Wiring it all up with JS §Going further §

Sort: