Add search for js-enabled browsers

templates/posts.html

@@ -6,5 +6,32 @@
 
 {% block content %}
 	<h1>{{ section.title }}</h1>
+	<input id="search" class="search" type="text" placeholder="Search titles" oninput="filter_name(this.value)">
 	{{ macros::list_posts() }}
 {% 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>
+{% endblock %}