From 5403e0e556e0324baf3a4008a41fe25d22bb96e8 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Sat, 4 Dec 2021 22:10:40 +0100
Subject: [PATCH] Enable search on category listing

---
 static/js/search.js              | 21 +++++++++++++++++++++
 templates/categories/single.html |  5 +++++
 templates/posts.html             | 24 +-----------------------
 3 files changed, 27 insertions(+), 23 deletions(-)
 create mode 100644 static/js/search.js

diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 0000000..c255397
--- /dev/null
+++ b/static/js/search.js
@@ -0,0 +1,21 @@
+function filter_name(str)
+{
+	str = str.toLowerCase();
+	if (str.length == 0) {
+		for (let i = 0; i < articles.length; i++) {
+			articles[i].style.display = "block";
+		}
+	} else {
+		for (let i = 0; i < articles.length; i++) {
+			let name = articles[i].getElementsByTagName("h2")[0].innerHTML.toLowerCase();
+			if (!name.includes(str)) {
+				articles[i].style.display = "none";
+			} else {
+				articles[i].style.display = "block";
+			}
+		}
+	}
+}
+let articles = document.getElementsByTagName("article");
+let search = document.getElementById("search");
+search.style.display = "inline-block";
diff --git a/templates/categories/single.html b/templates/categories/single.html
index a8e59de..12c40fb 100644
--- a/templates/categories/single.html
+++ b/templates/categories/single.html
@@ -2,5 +2,10 @@
 
 {% block content %}
 	<h1>{{ term.name }} category</h1>
+	<input id="search" class="search" type="text" placeholder="Search titles" oninput="filter_name(this.value)">
 	{{ macros::list_posts(section=term, taxonomy=true) }}
 {% endblock %}
+
+{% block script %}
+	<script src="/js/search.js"></script>
+{% endblock %}
diff --git a/templates/posts.html b/templates/posts.html
index d8360b5..d090244 100644
--- a/templates/posts.html
+++ b/templates/posts.html
@@ -11,27 +11,5 @@
 {% endblock content %}
 
 {% block script %}
-<script>
-function filter_name(str)
-{
-	str = str.toLowerCase();
-	if (str.length == 0) {
-		for (let i = 0; i < articles.length; i++) {
-			articles[i].style.display = "block";
-		}
-	} else {
-		for (let i = 0; i < articles.length; i++) {
-			let name = articles[i].getElementsByTagName("h2")[0].innerHTML.toLowerCase();
-			if (!name.includes(str)) {
-				articles[i].style.display = "none";
-			} else {
-				articles[i].style.display = "block";
-			}
-		}
-	}
-}
-let articles = document.getElementsByTagName("article");
-let search = document.getElementById("search");
-search.style.display = "inline-block";
-</script>
+	<script src="/js/search.js"></script>
 {% endblock %}