Add search for js-enabled browsers

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 {

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