Replace "style=display:none" with HTML data tags:

When storing metadata in an HTML node, you can use data attributes, which is
more declarative, and doesn't require rendering an invisible node.

See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

content/_index.md

@@ -35,8 +35,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // for each recipe hide all but matched
     recipes.forEach(recipe => {
-      const recipeName = recipe.textContent.toLowerCase();
-      const isMatch = searchTerms.every(term => recipeName.includes(term));
+      const searchString = `${recipe.textContent} ${recipe.dataset.tags}`.toLowerCase();
+      const isMatch = searchTerms.every(term => searchString.includes(term));
 
       recipe.hidden = !isMatch;
       recipe.classList.toggle("matched-recipe", hasFilter && isMatch);

layouts/shortcodes/artlist.html

@@ -1,5 +1,5 @@
 <ul id=artlist>
 {{range.Site.RegularPages}}
-<li><a href="{{.Permalink}}">{{.Title}}<span style="display:none">{{.Params.Tags}}</span></a></li>
+<li data-tags="{{.Params.Tags}}"><a href="{{.Permalink}}">{{.Title}}</a></li>
 {{end}}
 </ul>