Enhancing archives navigation, step 2

In my previous article Enhancing archives navigation, step 1, I promised further archives navigation enhancements. Here they are!

Remember how UX of navigation in archives by year and month where already enhanced with a single Eleventy layout:

User friendly months navigation with Eleventy only

This new awesome layout made my build time go from 40 seconds to 300 seconds, a 650 % increase, not so awesome… 😅

Now, imagine you want to see content from two — or more — types (articles and notes for example), or mix not only one type and a date, but also the language, or tags, even multiple of them.

Generating all possible filter combination as static pages with one single Eleventy build would probably take more than one hour. I obviously don't want that, even if this would provide users with an even better UX.

Time to enhance the already nice server-side rendering with awesome client-side features!

Here's what is now available for navigating the archives, if you activated JavaScript in your browser:

Navigating the archives with search and facets

There is a search input field, to search for any content, with live "as you type" results, and live updated filtering facets. 🤯

If you search for something specific, the results highlight why they're here in the list:

Highlighted results


All of this would not be possible without Algolia, the awesome search service I've been using for multiple years.

I inject all my contents in an Algolia index, and a single JavaScript script uses Algolia's InstantSearch.js UI library to build the user interface and synchronize the search term and facets values to the URL (and back).

What I really like here is that this is not the only way to browse the archives, it is "only" a (great) enhancement of what's available to anyone with the server-side rendering.

I hope you'll enjoy this new feature!

17 Webmentions

14 likes

3 replies

  1. Bejamas.io avatar Bejamas.io
    thx for sharing this 👍
  2. Julie Reboul avatar Julie Reboul
    That's great Nicolas! I'll DM you :)
  3. Nicolas Hoizey avatar Nicolas Hoizey
    👍