Add basic keyboard support #202

This adds basic keyboard support on the search results page:

    ArrowUp or k - focus previous result
    ArrowDown or j - focus next result
    / focus search box

Because this just focuses links in the search result items hitting Enter
(or ctrl/cmd + Enter) when an item is focused - will open the search 
result (because the link is already focused and this is browser's default
behaviour).

app/static/css/header.css

@@ -60,3 +60,9 @@ header {
     margin: 15px;
     display: block;
 }
+
+
+#main>div:focus-within {
+    border-radius: 8px;
+    box-shadow: 0 0 6px 1px #2375e8;
+}

app/static/js/keyboard.js

+(function () {
+	let searchBar, results;
+	const keymap = {
+		ArrowUp: goUp,
+		ArrowDown: goDown,
+		k: goUp,
+		j: goDown,
+		'/': focusSearch,
+	};
+	let activeIdx = -1;
+
+	document.addEventListener('DOMContentLoaded', () => {
+		searchBar = document.querySelector('#search-bar');
+		results = document.querySelectorAll('#main>div>div>div>a');
+	});
+
+	document.addEventListener('keydown', (e) => {
+		if (e.target.tagName === 'INPUT') return true;
+		if (typeof keymap[e.key] === 'function') {
+			e.preventDefault();
+			keymap[e.key]();
+		}
+	});
+
+	function goUp () {
+		if (activeIdx > 0) focusResult(activeIdx - 1);
+		else focusSearch();
+	}
+
+	function goDown () {
+		if (activeIdx < results.length - 1) focusResult(activeIdx + 1);
+	}
+
+	function focusResult (idx) {
+		activeIdx = idx;
+		results[activeIdx].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+		results[activeIdx].focus();
+	}
+
+	function focusSearch () {
+		activeIdx = -1;
+		searchBar.focus();
+	}
+}());

app/templates/display.html

@@ -5,8 +5,6 @@
         <link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="referrer" content="no-referrer">
-        <script type="text/javascript" src="static/js/autocomplete.js"></script>
-        <script type="text/javascript" src="static/js/utils.js"></script>
         <link rel="stylesheet" href="static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
         <link rel="stylesheet" href="static/css/header.css">
         {% if dark_mode %}
@@ -24,4 +22,7 @@
             <a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
         </p>
     </footer>
+	<script src="static/js/autocomplete.js"></script>
+	<script src="static/js/utils.js"></script>
+	<script src="static/js/keyboard.js"></script>
 </html>