Categories/tags with filter buttons on homepage

[raphaelfournier]

A large collection of notebooks needs a taxonomy to improve user navigation and content discovery. Several approaches could be proposed for this (tree-based hierarchies, tags, etc.).

I chose to add a "category" attribute in _data/gallery.yaml (the notebook metadata). In my example, each of the notebook receives 2 "categories" (or tags) — based on the Monty Python group which gave Python its name.

On the home page, a list of buttons shows the available categories. A click on one of them restrict the list of displayed notebooks to those which are associated with this attribute. The filtering was made using a simple javascript tutorial from w3schools, hence the name of the functions. A "show all" button rests on the left of all the categories (I forgot to put it in English).

A live demo of this is displayed on my test website: http://microlearning.fournier-sniehotta.fr/testfiltresvoila/

Possible improvements:

• add an operator button or a different javascript behavior, so that multiple categories can be selected (or excluded)
• a hierarchy of tags?
• I don't know if gallery.yaml was manually written or generated. In the latter case, the "propagation" of the categories should be handled with other code. My demo is (very) manual.

[jtpio]

Thanks!

Playing around on the test website and it looks good: http://microlearning.fournier-sniehotta.fr/testfiltresvoila/

Posting a screencast here for reference:

tags.mp4

I don't know if gallery.yaml was manually written or generated.

Yes it is manually written. Usually people open a new PR to the this repo when they want to add a new entry to the gallery.