Add search for js-enabled browsers

templates/index.html

@@ -24,5 +24,6 @@
 			{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}
 		{% endblock %}
 	</main>
+	{% block script %}{% endblock %}
 </body>
 </html>

templates/macros.html

@@ -12,7 +12,7 @@
 
 {% macro print_article(page) %}
 	<article>
-		<h1><a href="{{ page.permalink }}">{{ page.title }}</a></h1>
+		<h2><a href="{{ page.permalink }}">{{ page.title }}</a></h2>
 		<p>{{ page.summary | safe }}</p>
 		{{ self::page_info(page=page) }}
 	</article>

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 %}