Rewrite using fastapi

app/templates/base.html

@@ -0,0 +1,13 @@
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Squirrel</title>
+  <link rel="icon" type="image/png" href="/static/images/squirrel_32.png">
+  <link rel="stylesheet" href="/static/css/search.css"></link>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  {% block scripts %}{% endblock %}
+<head>
+</head>
+  <body>
+    {% block content %}CONTENT{% endblock %}
+  </body>
+</html>

app/templates/home.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<div id="home-header"></div>
+<div id="home-search" class="mx-auto mt-50">
+  <div class="font-beyond-the-mountains text-8xl text-red-900 text-center">Squirrel</div>
+  <div class="mx-auto w-1/2 my-10">
+    <form action="/search" method="get">
+      <input type="text" name="q" placeholder="Find your nuts..."
+          class="shadow appearance-none border-slate-600 text-2xl rounded-full w-full py-3 px-5 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
+      ></input>
+    </form>
+  </div>
+</div>
+
+{% endblock %}

app/templates/search_results.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div x-data="query">
+    <div id="search-header" class="flex m-2 items-center border-b pb-2 border-red-900 mx-10">
+      <a href="/" class="mx-10 text-2xl text-red-900 font-beyond-the-mountains">Squirrel</a>
+      <form action="/search" method="get">
+        <input 
+          class="shadow appearance-none border-slate-600 rounded-full w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
+          type="text" size="80" name="q"
+          onfocus="this.select()"
+          x-bind:value="query"></input>
+      </form>
+      <div class="grow text-right">
+        Foo
+      </div>
+    </div>
+
+    <div id="search-main" class="mx-auto w-2/3">
+      <div id="search-info" class="flex">
+        <p class="grow"></p>
+        <p>Page <span x-text="page"></span> of <span x-text="pages"></span>,
+        <span x-text="total"></span> results.</p>
+      </div>
+
+      <div id="search-results">
+        <template x-for="result in results">
+          <div class="p-4 m-4">
+            <div class="m-2 flex">
+            <img class="w-16 h-16 m-2" x-bind:src="'/icons/' + result.mtype.replace('/', '-') + '.svg'"></img>
+              <div>
+                <a class="text-xl text-red-900" x-text="result.title" x-bind:href="'/docs/' + result.fpath" target="_blank"></a><br/>
+                <span class="text-sm" x-text="result.relevancyrating"></span>
+              </div>
+            </div>
+            <div>
+              <template x-for="snippet in result.snippets">
+                <span class="text-sm"><span x-html="snippet[2]"></span><br/></span>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div id="search-footer" class="text-sm">
+        XQuery: <span x-text="xquery"></span>
+      </div>
+    </div>
+<div>
+<script>
+var query = {{ search|tojson }};
+</script>
+
+{% endblock %}