feat(search): ✨ add inline search field

www/src/db_handler/mysql_handler.php

@@ -439,7 +439,7 @@ class MySQLHandler
         if(strlen($options['text']) > 0) {
             $text_search_scores = [0];
             $text_search_wheres = [];
-            foreach([['title', 6], ['brief', 4], ['markdown', 1]] as $arg) {
+            foreach([['title', 15], ['brief', 6], ['markdown', 1]] as $arg) {
                 $text_search_scores []= "((MATCH(post_" . $arg[0] . ") AGAINST (?)) * " . $arg[1] . ')';
                 $qry_select_data    []= $options['text'];
                 $qry_select_types   .= 's';
@@ -462,7 +462,7 @@ class MySQLHandler
         }
 
         if(count($qry_wheres) == 0) {
-            throw new Exception("No search filtering options supplied!");
+            return [];
         }
 
         $options['offset'] ??= 0;

www/src/fontawesome.php

@@ -10,7 +10,8 @@ $FONT_AWESOME_ARRAY=[
     'folder-tree' => '<svg xmlns="http://www.w3.org/2000/svg" class="fa-icn" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32v96V384c0 35.3 28.7 64 64 64H256V384H64V160H256V96H64V32zM288 192c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H445.3c-8.5 0-16.6-3.4-22.6-9.4L409.4 9.4c-6-6-14.1-9.4-22.6-9.4H320c-17.7 0-32 14.3-32 32V192zm0 288c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32H445.3c-8.5 0-16.6-3.4-22.6-9.4l-13.3-13.3c-6-6-14.1-9.4-22.6-9.4H320c-17.7 0-32 14.3-32 32V480z"/></svg>',
     'folder' => '<svg xmlns="http://www.w3.org/2000/svg" class="fa-icn" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/></svg>',
     'folder-open' => '<svg xmlns="http://www.w3.org/2000/svg" class="fa-icn" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M88.7 223.8L0 375.8V96C0 60.7 28.7 32 64 32H181.5c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7H416c35.3 0 64 28.7 64 64v32H144c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224H544c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480H32c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z"/></svg>',
-    'rss' => '<svg xmlns="http://www.w3.org/2000/svg" height="16" class="fa-icn" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>'
+    'rss' => '<svg xmlns="http://www.w3.org/2000/svg" height="16" class="fa-icn" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>',
+    'magnifying-glass' => '<svg xmlns="http://www.w3.org/2000/svg" class="fa-icn" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>'
 ];
 
 ?>

www/src/serve/ajax.php

@@ -17,8 +17,13 @@ if(isset($REQUEST_QUERY['page'])) {
     $ajax_args['page'] = $adapter->get_post($REQUEST_QUERY['page']);
 }
 
+if(isset($REQUEST_QUERY['query'])) {
+    $REQUEST_QUERY['search'] ??= $REQUEST_QUERY['query'];
+}
+
 if(isset($REQUEST_QUERY['search'])) {
-    $ajax_args['search_results'] = $post->handler->search_posts($REQUEST_QUERY['search']);
+    $ajax_args['search_query'] = $REQUEST_QUERY['search'];
+    $ajax_args['search_results'] = $adapter->search_posts($REQUEST_QUERY['search']);
 }
 
 

www/static/dergstyle.css

@@ -29,6 +29,7 @@ body {
 
 	--highlight_0: #ee9015b1;
 	--highlight_1: #ee9015;
+	--highlight_1a: #ee901540;
 	--highlight_2: #edd29e;
 
 	--text_1: #FFFFFF;
@@ -39,8 +40,10 @@ body {
 
 	  --content-padding: 	max(0.5rem, min(1rem, var(--content-total-margin)));
 	  --content-margin:   max(0px, calc(var(--content-total-margin) - 1rem));
-	
+	  
-    color: var(--text_1);
+	width: 100vw;
+    
+	color: var(--text_1);
     background: var(--bg_1);
     margin: 0px;
 
@@ -48,6 +51,11 @@ body {
 	
     min-height: 100vh;
 	padding-bottom: 4rem;
+
+	overflow-y: overlay;
+	overflow-x: clip;
+
+	scrollbar-gutter: stable;
 }
 
 @media only screen and (max-width: 600px) {
@@ -68,6 +76,23 @@ body {
 	}
 }
 
+/* width */
+::-webkit-scrollbar {
+width: 3px;
+height: 3px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+background: var(--highlight_1);
+}
+  
+
 :link {
 	color: var(--highlight_1);
 	font-style: italic;
@@ -174,6 +199,7 @@ a:hover {
 	min-height: 100%;
 
 	background: var(--bg_2);
+	min-width: 0;
 }
 
 body::before {
@@ -197,10 +223,37 @@ body::before {
 	z-index: 10;
 	pointer-events: none;
 	
-  transition: opacity 0.2s;
+	transition: opacity 0.2s;
 }
-body.htmx-request::before {
+.htmx-indicator {
-	opacity: 1;	
+	position: relative;
+}
+.htmx-indicator::before {
+	content: '';
+
+	position: absolute;
+
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	
+	width: 100%;
+	height: 100%;
+	
+	background-image: url('/static/three-dots.svg');
+	background-repeat: no-repeat;
+	background-position: center;
+	
+	opacity: 0;
+	
+	z-index: 10;
+	pointer-events: none;
+	
+	transition: opacity 0.2s;
+}
+.htmx-request::before {
+	opacity: 0.5;	
 	
 	transition-delay: 0.5s;
 }

www/static/modest.css

@@ -200,4 +200,7 @@ article {
     & ol {
         padding-left: 2em;
     }
+    & li {
+        margin-bottom: 1em;
+    }
 }

www/static/styles/post_navbar.css

@@ -30,12 +30,112 @@
         }
     }
 
-    & > ._path {
+    & ._search_field {
+        position: relative;
+        
+        width: 1.3em;
+        height: auto;
+        
+        margin-right: 0.2em;
+
+        overflow-x: clip;
+        
+        /*transition: width 0.5s ease;*/
+        
+        & > input {
+            color: var(--text_1);
+
+            height: 1em;
+            width: 100%;
+
+            font-size: 1em;
+
+            background-color: transparent;
+            
+            outline: none;
+
+            border: none;
+
+            padding-left: 1.3rem;
+        }
+        
+        & .fa-icn {
+            position: absolute;
+            left: 0.1em;
+            top: 0.3em;
+            
+            pointer-events: none;
+        }
+        
+        &:focus-within, &:hover, &:has(:focus) {
+            width: min(20em, 60vw);
+            min-width: min(20em, 60vw);
+            
+            & ._search_list {
+                display: block;
+                opacity: 1;
+            }
+            & input {
+                border-bottom: 0.15em solid var(--bg_2);
+            }
+        }
+        
+        & ._search_list {
+            display: none;
+            opacity: 0;
+            
+            background: var(--bg_2);
+            
+            transition: opacity 0.3s ease 0.5s;
+            transition: visibility 0s none 1s;
+            
+            width: 100%
+            max-height: 50vh;
+            overflow-y: scroll;
+            
+            padding: 0.5em;
+            
+            z-index: 6;
+            
+            & li {
+                border-bottom: 1px solid var(--highlight_1);
+                
+                &:hover {
+                    background: var(--highlight_1a);
+                }
+            }
+        }
+    }
+
+    & ._path {
         width: 100%;
         height: 1.5rem;
+        padding-left: 0.5rem;
+        padding-right: 0.6rem;
+
+        background: var(--highlight_1);
+        
+        font-size: 1.1rem;
+    
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+    
+        white-space: nowrap; 
+        
+        & > a {
+            color: var(--text_1);
+            padding-right: 0.2rem;
+        }
+    }
+    
+    & ._path_list {
+        width: 100%;
+        height: 100%;
+        
+        margin-right: 1em;
         
         font-style: italic;
-        padding-left: 0.5rem;
     
         background: var(--highlight_1);
         
@@ -49,7 +149,7 @@
         overflow-y: hidden;
     
         white-space: nowrap; 
-
+        
         & a {
             color: var(--text_1);
             padding-right: 0.2rem;

www/static/styles/toc.css

@@ -15,7 +15,7 @@
   box-shadow: -0.2em 0.2em 0.2em black;
   
   --toc-fg: #cecece;
-  --toc-bg: #EE901544;
+  --toc-bg: var(--highlight_1a);
   
   background-color: var(--bg_2);
   

www/static/toc.js

@@ -182,21 +182,19 @@ class TocNavBarUpdater {
   trackingRebuildCallback() {
     this._removeNavbarElements();
 
-    this.navbar_dom = document.querySelector('#main_navbar_path');
+    this.navbar_dom = document.querySelector('#main_navbar_path_list');
   }
 
   trackingUpdateCallback(element) {
     this._removeNavbarElements();
     
-    const navbar_prev_node = this.navbar_dom.children[this.navbar_dom.children.length -1];
-
     element.path.forEach(pathItem => {
       let newNode = document.createElement('li');
 
       const pathURL = location.pathname + '#' + pathItem.id + location.search;
       newNode.innerHTML = "<a href=" + pathURL + "> #<sub>" + pathItem.level + '</sub>' + pathItem.name + '</a>'
       
-      this.navbar_dom.insertBefore(newNode, navbar_prev_node);
+      this.navbar_dom.appendChild(newNode);
       this.added_navbar_elements.push(newNode);
     });
     

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