Background

Wikimedia tutorials is a page on mediawiki.org intended to help people learn about Wikimedia technologies by aggregating both on-wiki and off-wiki tutorials. To help people choose a tutorial, the page uses topic tags via Template:Topic.

To do

• Create a user script as a proof of concept for adding filter behavior based on topic tags. See https://www.mediawiki.org/wiki/Gadget_kitchen for more information on user scripts.
• Review and test
• Start the process of enabling it as a gadget on the Wikimedia tutorials page

Concept

Create a gadget (prototype as a user script!) that adds search/filter behavior to the page by first walking the DOM to extract the topics, keywords, etc that can be used for filtering. Then add inputs to the page via js that are bound to events that walk the collected data and show/hide divs as appropriate. The js used in Hay's Directory is relatively easy to understand. Template:Topic adds a data-topic="..." attribute now. Something like $("span[data-topic=Python]") will find all the "Python" topic tags. And something like $("span[data-topic=Python]").parents(".mw-tpl-colorbox").css( "border", "2px red solid" ) would then highlight the cards that contain the Python topic tag.