From d090f61543fd915132260cffdd0ba442eb3464fd Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Sat, 4 Dec 2021 22:05:33 +0100
Subject: [PATCH] Add search for js-enabled browsers

---
 sass/style.scss       | 11 ++++++++++-
 templates/index.html  |  1 +
 templates/macros.html |  2 +-
 templates/posts.html  | 27 +++++++++++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index 578b1d7..327e93e 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -75,7 +75,7 @@ aside {
 main {
 	margin-bottom: 5rem;
 
-	article h1 a { color: inherit }
+	article h2 a { color: inherit }
 	.info {
 		border-top: 1px solid #eee;
 		margin: 2em 0;
@@ -131,6 +131,15 @@ main {
 		overflow: auto;
 		border-radius: .3em;
 	}
+	input.search {
+		display: none; // Hide for non-js browsers
+		box-sizing: border-box;
+		width: 100%;
+		border: 1px solid #bbb;
+		padding: .5em 1em;
+		margin: 1em 0;
+		outline: none;
+	}
 }
 
 a {
diff --git a/templates/index.html b/templates/index.html
index 333aa65..fdb4859 100644
--- a/templates/index.html
+++ b/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>
diff --git a/templates/macros.html b/templates/macros.html
index 98a524a..f10d52e 100644
--- a/templates/macros.html
+++ b/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>
diff --git a/templates/posts.html b/templates/posts.html
index 3db7726..d8360b5 100644
--- a/templates/posts.html
+++ b/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 %}