feat(search): ✨ add inline search field

www/templates/fragments/decoration/navbar.html

@@ -4,22 +4,51 @@
             {{ page.basename }}
         </li>
     </menu>
-    <menu class="_path" id="main_navbar_path">
-        {% set split_post = page.path |split('/') %}
-        {% for i in range(0, split_post|length - 1) %}
-            <li>
-                {% if i != 0 %}
-                    <a href="{{split_post|slice(0,i+1)|join('/')}}">
-                        > {{ split_post[i] }}
-                    </a>
-                {% else %}
-                    <a href="/">root</a>
-                {% endif %}
-            </li>
-        {% endfor %}
-        
 
-        <li style="margin-left: auto;">
+    <menu class="_path" id="main_navbar_path">
+        <ul class="_path_list" id="main_navbar_path_list">
+            {% set split_post = page.path |split('/') %}
+            {% for i in range(0, split_post|length - 1) %}
+                <li>
+                    {% if i != 0 %}
+                        <a href="{{split_post|slice(0,i+1)|join('/')}}">
+                            > {{ split_post[i] }}
+                        </a>
+                    {% else %}
+                        <a href="/">root</a>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+        
+        <form class="_search_field"
+            action="/search"
+            method="GET"
+            style="margin-left: auto;">
+
+            {{ fa['magnifying-glass']|raw }}
+            
+            <input class="_search_input"
+                type="text"
+                id="inline_search_query" name="query"
+                autocomplete="off"
+                
+                hx-target="#inline_search_result_list"
+                hx-indicator="#inline_search_result_list"
+                hx-sync="this:replace"
+                hx-trigger="keypress changed delay:0.25s, input changed delay:0.25s"
+                hx-get="/ajax/fragments/search/inline.html">
+
+            </input>
+
+            <ul class="_search_list htmx-indicator"
+                id="inline_search_result_list"
+                tabindex="1">
+
+                Type to search...
+            </ul>
+        </form>
+        <li>
             <label for="navbar-expander" class="expandable"> {{ fa['bars'] | raw }} </label>
             <a rel="alternate" type="application/rss+xml" target="_blank"
             style="padding-left: 0.3rem;" href="/feed/rss{{page.path}}">

www/templates/fragments/search/inline.html

@@ -0,0 +1,10 @@
+
+{% for post in search_results %} 
+    <a href="{{post.url}}#:~:text={{ search_query|url_encode }}"
+        rel="noopener"
+        hx-boost="off"> {# We can't boost because text-fragments HAVE to be user-inited! #}
+        <li>
+            {{post.title}} 
+        </li>
+    </a>
+{% endfor %}