Skip to content

Commit 530dd8f

Browse files
EfniliteEfnilite
committed
fix search
1 parent 090d0d2 commit 530dd8f

File tree

2 files changed

+73
-1
lines changed

2 files changed

+73
-1
lines changed

‎src/components/nav/NavMobile.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { PageType } from './Nav.astro';
33
import NavSearch from './NavSearch.astro';
4+
import NavSearchMobile from './NavSearchMobile.astro';
45
56
67
interface Props {
@@ -60,7 +61,7 @@ switch (type) {
6061
})}
6162
</div>
6263
<div id="search-mobile-container" class="w-full hidden">
63-
<NavSearch/>
64+
<NavSearchMobile/>
6465
</div>
6566
<button id="search-mobile" class="rounded-full hover:bg-l-icon-hover dark:hover:bg-d-icon-hover hover:cursor-pointer p-2">
6667
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

‎src/components/nav/NavSearchMobile.astro‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script>
2+
const container = document.getElementById("search-container-mobile")!!;
3+
const input = document.getElementById("search-input-mobile")!! as HTMLInputElement;
4+
input.focus();
5+
6+
container.addEventListener("click", () => {
7+
input.focus();
8+
});
9+
10+
input.addEventListener("input", event => {
11+
const value = input.value.toLowerCase().trim();
12+
13+
const docs = document.getElementById("docs");
14+
const syntax = document.getElementById("syntax");
15+
16+
if (docs == null) {
17+
return;
18+
}
19+
20+
[...docs.children].forEach(parent => {
21+
const elements = [...parent.querySelectorAll("a, p, h1, span")!!];
22+
23+
let contains = false
24+
for (let i = 0; i < elements.length; i++) {
25+
if (contains === true) {
26+
break;
27+
}
28+
29+
const text = elements[i].textContent?.toLowerCase() ?? "";
30+
31+
if (text.includes(value)) {
32+
contains = true;
33+
}
34+
}
35+
36+
const id = parent.querySelector(`div .id`)?.id;
37+
const a = syntax?.querySelectorAll(`a[href="#${id}"]`);
38+
39+
if (contains) {
40+
parent.classList.remove("hidden-by-search");
41+
a?.forEach(x => x.classList.remove("hidden-by-search"));
42+
} else {
43+
parent.classList.add("hidden-by-search");
44+
a?.forEach(x => x.classList.add("hidden-by-search"));
45+
}
46+
});
47+
});
48+
</script>
49+
50+
<div id="search-container-mobile"
51+
class="w-full lg:w-[500px] h-full p-1 md:p-2 flex flex-row gap-3
52+
rounded-lg bg-l-search-fill dark:bg-d-search-fill
53+
border-2 border-l-search-border dark:border-d-search-border
54+
fill-l-search-icon dark:fill-d-search-icon
55+
hover:cursor-pointer">
56+
57+
<svg class="my-auto" width="32" height="32" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
58+
<path d="M26.1333 28.5L17.7333 20.1C17.0667 20.6333 16.3 21.0556 15.4333 21.3667C14.5667 21.6778 13.6444 21.8333 12.6667 21.8333C10.2444 21.8333 8.19467 20.9942 6.51733 19.316C4.84 17.6378 4.00089 15.588 4 13.1667C3.99911 10.7453 4.83822 8.69556 6.51733 7.01733C8.19645 5.33911 10.2462 4.5 12.6667 4.5C15.0871 4.5 17.1373 5.33911 18.8173 7.01733C20.4973 8.69556 21.336 10.7453 21.3333 13.1667C21.3333 14.1444 21.1778 15.0667 20.8667 15.9333C20.5556 16.8 20.1333 17.5667 19.6 18.2333L28 26.6333L26.1333 28.5ZM12.6667 19.1667C14.3333 19.1667 15.7502 18.5836 16.9173 17.4173C18.0844 16.2511 18.6676 14.8342 18.6667 13.1667C18.6658 11.4991 18.0827 10.0827 16.9173 8.91733C15.752 7.752 14.3351 7.16844 12.6667 7.16667C10.9982 7.16489 9.58178 7.74844 8.41733 8.91733C7.25289 10.0862 6.66933 11.5027 6.66667 13.1667C6.664 14.8307 7.24756 16.2476 8.41733 17.4173C9.58711 18.5871 11.0036 19.1702 12.6667 19.1667Z"></path>
59+
</svg>
60+
61+
<input
62+
id="search-input-mobile"
63+
class="w-full text-l-search-text dark:text-d-search-text m-auto focus:outline-none"
64+
placeholder="Search"
65+
/>
66+
67+
<svg class="hidden sm:block my-auto"
68+
width="32" height="32" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
69+
<path d="M8.66667 28.5C7.37778 28.5 6.27778 28.0444 5.36667 27.1333C4.45556 26.2222 4 25.1222 4 23.8333C4 22.5444 4.45556 21.4444 5.36667 20.5333C6.27778 19.6222 7.37778 19.1667 8.66667 19.1667H10.6667V13.8333H8.66667C7.37778 13.8333 6.27778 13.3778 5.36667 12.4667C4.45556 11.5556 4 10.4556 4 9.16667C4 7.87778 4.45556 6.77778 5.36667 5.86667C6.27778 4.95556 7.37778 4.5 8.66667 4.5C9.95556 4.5 11.0556 4.95556 11.9667 5.86667C12.8778 6.77778 13.3333 7.87778 13.3333 9.16667V11.1667H18.6667V9.16667C18.6667 7.87778 19.1222 6.77778 20.0333 5.86667C20.9444 4.95556 22.0444 4.5 23.3333 4.5C24.6222 4.5 25.7222 4.95556 26.6333 5.86667C27.5444 6.77778 28 7.87778 28 9.16667C28 10.4556 27.5444 11.5556 26.6333 12.4667C25.7222 13.3778 24.6222 13.8333 23.3333 13.8333H21.3333V19.1667H23.3333C24.6222 19.1667 25.7222 19.6222 26.6333 20.5333C27.5444 21.4444 28 22.5444 28 23.8333C28 25.1222 27.5444 26.2222 26.6333 27.1333C25.7222 28.0444 24.6222 28.5 23.3333 28.5C22.0444 28.5 20.9444 28.0444 20.0333 27.1333C19.1222 26.2222 18.6667 25.1222 18.6667 23.8333V21.8333H13.3333V23.8333C13.3333 25.1222 12.8778 26.2222 11.9667 27.1333C11.0556 28.0444 9.95556 28.5 8.66667 28.5ZM8.66667 25.8333C9.22222 25.8333 9.69467 25.6391 10.084 25.2507C10.4733 24.8622 10.6676 24.3898 10.6667 23.8333V21.8333H8.66667C8.11111 21.8333 7.63911 22.028 7.25067 22.4173C6.86222 22.8067 6.66756 23.2787 6.66667 23.8333C6.66578 24.388 6.86044 24.8604 7.25067 25.2507C7.64089 25.6409 8.11289 25.8351 8.66667 25.8333ZM23.3333 25.8333C23.8889 25.8333 24.3613 25.6391 24.7507 25.2507C25.14 24.8622 25.3342 24.3898 25.3333 23.8333C25.3324 23.2769 25.1382 22.8049 24.7507 22.4173C24.3631 22.0298 23.8907 21.8351 23.3333 21.8333H21.3333V23.8333C21.3333 24.3889 21.528 24.8613 21.9173 25.2507C22.3067 25.64 22.7787 25.8342 23.3333 25.8333ZM13.3333 19.1667H18.6667V13.8333H13.3333V19.1667ZM8.66667 11.1667H10.6667V9.16667C10.6667 8.61111 10.4724 8.13911 10.084 7.75067C9.69556 7.36222 9.22311 7.16756 8.66667 7.16667C8.11022 7.16578 7.63822 7.36044 7.25067 7.75067C6.86311 8.14089 6.66844 8.61289 6.66667 9.16667C6.66489 9.72044 6.85956 10.1929 7.25067 10.584C7.64178 10.9751 8.11378 11.1693 8.66667 11.1667ZM21.3333 11.1667H23.3333C23.8889 11.1667 24.3613 10.9724 24.7507 10.584C25.14 10.1956 25.3342 9.72311 25.3333 9.16667C25.3324 8.61022 25.1382 8.13822 24.7507 7.75067C24.3631 7.36311 23.8907 7.16844 23.3333 7.16667C22.776 7.16489 22.304 7.35956 21.9173 7.75067C21.5307 8.14178 21.336 8.61378 21.3333 9.16667V11.1667Z"></path>
70+
</svg>
71+
</div>

0 commit comments

Comments
 (0)