lucidergs/dragon_fire
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(search): ✨ add inline search field

Browse source
This commit is contained in:
David Bailey 2025-02-03 10:47:32 +01:00
parent de1f1446a3
commit 05996b2ebf
10 changed files with 231 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

4
www/src/db_handler/mysql_handler.php
View file

@ -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;

3
www/src/fontawesome.php
View file

@ -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>'
];
?>

7
www/src/serve/ajax.php
View file

@ -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']);
}

63
www/static/dergstyle.css
View file

@ -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 {
opacity: 1;
.htmx-indicator {
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;
}

3
www/static/modest.css
View file

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

106
www/static/styles/post_navbar.css
View file

@ -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;

2
www/static/styles/toc.css
View file

@ -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);

6
www/static/toc.js
View file

@ -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);
});

59
www/templates/fragments/decoration/navbar.html
View file

@ -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}}">

10
www/templates/fragments/search/inline.html Normal file
View file

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