Improve search

This new approach makes sure the input field is hidden on browsers which
ignore `display:none`, such as w3m or lynx.

content/about/index.md

@@ -4,7 +4,9 @@ title = "About"
 notoc = true
 +++
 
-This is my personal website mainly used for technical articles about problems and projects I am working on.
+<img src="profile-picture.jpg" alt="Profile Picture" class="profile-picture">
+
+This is my personal website mainly used for technical articles about problems and projects I&nbsp;am working on.
 
 It is generated to static HTML via [Zola](https://www.getzola.org/).
 

sass/style.scss

@@ -188,7 +188,6 @@ main {
 	}
 
 	input.search {
-		display: none; // Hide for non-js browsers
 		box-sizing: border-box;
 		width: 100%;
 		border: 1px solid #ccc;
@@ -211,6 +210,12 @@ a {
 	&:hover { text-decoration: underline }
 }
 
+.profile-picture {
+  float: right;
+  width: 15rem;
+  margin-left: 3em;
+}
+
 @media screen and (max-width: 50rem) {
 
 	.grid { grid-template-columns: auto }
@@ -230,6 +235,11 @@ a {
 		}
 		span.title { display: none }
 	}
+
+  .profile-picture {
+    width: 10rem;
+    margin-left: 1em;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

static/js/search.js

@@ -1,15 +1,23 @@
-function filter_title(str)
+function filter_title(query, articles)
 {
-	if (str.length == 0) {
-		articles.forEach(article => article.style.display = "block");
-	} else {
-		articles.forEach(article => article.style.display = article.dataset.title.indexOf(str.toLowerCase()) === -1 ? "none" : "block");
+	const search = query.trim().toLowerCase();
+
+	if (search.length === 0) {
+		articles.forEach(article => article.style.display = 'block');
+		return;
 	}
+	articles.forEach(article => {
+		const title = article.dataset.title || '';
+		article.style.display = title.includes(search) ? 'block' : 'none';
+	});
 }
 
-const search = document.querySelector("input[type='search']");
-const form = document.querySelector("form");
-let articles = Array.from(document.querySelectorAll("article"));
+window.addEventListener('DOMContentLoaded', () => {
+	document.querySelector('.search-wrapper').innerHTML =
+		'<input class="search" type="search" placeholder="Search">';
 
-search.addEventListener("input", () => filter_title(search.value));
-window.addEventListener("load", () => search.style.display = "inline-block");
+	const search = document.querySelector("input[type='search']");
+	const articles = Array.from(document.querySelectorAll('article'));
+
+	search.addEventListener('input', () => filter_title(search.value, articles));
+});

templates/posts.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 	<h1>{{ section.title }}</h1>
-	<input class="search" type="search" placeholder="Search">
+	<div class="search-wrapper"></div>
 	{{ macros::list_posts() }}
 {% endblock content %}