Skip to content

Commit a7ba5cb

Browse files
pateketruekepateketrueke
committed
fix: refine inline search
1 parent a836ac5 commit a7ba5cb

File tree

2 files changed

+73
-73
lines changed

2 files changed

+73
-73
lines changed

‎public/index.html‎

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -532,63 +532,59 @@ <h3 class="text-xl font-semibold mb-2 fraunces">
532532
>
533533
<!-- Dialog Header -->
534534
<div class="p-4 border-b border-green-500/30">
535-
<div class="flex items-center justify-between">
536-
<div class="flex gap-6">
537-
<a
538-
href="#docs"
539-
class="text-gray-400 flex gap-2 items-center"
540-
onclick="openDocsDialog()">
541-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
542-
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
543-
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
544-
<line x1="8" y1="7" x2="16" y2="7"/>
545-
<line x1="8" y1="11" x2="14" y2="11"/>
546-
</svg>
547-
Docs
548-
</a>
549-
<a
550-
href="#examples"
551-
class="text-gray-400 flex gap-2 items-center"
552-
onclick="openDocsDialog()">
553-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
554-
<polyline points="16 18 22 12 16 6"/>
555-
<polyline points="8 6 2 12 8 18"/>
556-
<line x1="12" y1="2" x2="12" y2="22" stroke-dasharray="2 2"/>
557-
</svg>
558-
Examples
559-
</a>
560-
<a
561-
href="#playground"
562-
class="text-gray-400 flex gap-2 items-center"
563-
onclick="openDocsDialog()">
564-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
565-
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
566-
</svg>
567-
Playground
568-
</a>
569-
</div>
570-
<div>
571-
<button
572-
id="x-close-dialog"
573-
class="text-gray-200 hover:text-gray-400"
574-
>
575-
<svg
576-
xmlns="http://www.w3.org"
577-
class="h-6 w-6"
578-
fill="none"
579-
viewBox="0 0 24 24"
580-
stroke="currentColor"
581-
>
582-
<path
583-
stroke-linecap="round"
584-
stroke-linejoin="round"
585-
stroke-width="2"
586-
d="M6 18L18 6M6 6l12 12"
587-
/>
588-
</svg>
589-
</button>
590-
</div>
535+
<div class="flex gap-6 items-center justify-center">
536+
<a
537+
href="#docs"
538+
class="text-gray-400 flex gap-2 items-center"
539+
onclick="openDocsDialog()">
540+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
541+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
542+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
543+
<line x1="8" y1="7" x2="16" y2="7"/>
544+
<line x1="8" y1="11" x2="14" y2="11"/>
545+
</svg>
546+
Docs
547+
</a>
548+
<a
549+
href="#examples"
550+
class="text-gray-400 flex gap-2 items-center"
551+
onclick="openDocsDialog()">
552+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
553+
<polyline points="16 18 22 12 16 6"/>
554+
<polyline points="8 6 2 12 8 18"/>
555+
<line x1="12" y1="2" x2="12" y2="22" stroke-dasharray="2 2"/>
556+
</svg>
557+
Examples
558+
</a>
559+
<a
560+
href="#playground"
561+
class="text-gray-400 flex gap-2 items-center"
562+
onclick="openDocsDialog()">
563+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
564+
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
565+
</svg>
566+
Playground
567+
</a>
591568
</div>
569+
<button
570+
id="x-close-dialog"
571+
class="text-gray-200 hover:text-gray-400 absolute right-6 top-6"
572+
>
573+
<svg
574+
xmlns="http://www.w3.org"
575+
class="h-6 w-6"
576+
fill="none"
577+
viewBox="0 0 24 24"
578+
stroke="currentColor"
579+
>
580+
<path
581+
stroke-linecap="round"
582+
stroke-linejoin="round"
583+
stroke-width="2"
584+
d="M6 18L18 6M6 6l12 12"
585+
/>
586+
</svg>
587+
</button>
592588
</div>
593589

594590
<!-- Dialog Body (main content area, can scroll) -->
@@ -915,7 +911,7 @@ <h3 class="text-lg font-semibold text-blue-400">maxDepth</h3>
915911
<pre><code><span class="text-purple-400">const</span> schema = {
916912
<span class="text-blue-300">type</span>: <span class="text-yellow-300">'object'</span>,
917913
<span class="text-blue-300">properties</span>: {
918-
<span class="text-blue-300">child</span>: { <span class="text-blue-300">$ref</span>: <span class="text-yellow-300">'#'</span> }
914+
<span class="text-blue-300">child</span>: { <span class="text-blue-300">$ref</span>: <span class="text-yellow-300">'#'</span> }
919915
}
920916
};
921917

‎public/main.js‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1002,54 +1002,55 @@ const defaultSchema = {
10021002
return el;
10031003
}
10041004

1005-
function filterSections(query) {
1005+
function filterSections(query) {
10061006
const normalizedQuery = query.trim().toLowerCase();
10071007

10081008
if (!normalizedQuery) {
1009-
// Reset - show all
1009+
// Reset dimmed class
10101010
sectionIds.forEach(id => {
10111011
const el = getSectionContainer(id);
10121012
if (el) {
1013-
el.classList.remove('hidden');
1014-
el.style.display = '';
1013+
el.classList.remove('search-dimmed');
1014+
el.style.opacity = '';
10151015
}
10161016
});
10171017
// Reset TOC links
10181018
const tocLinks = document.querySelectorAll('#docsToc > a');
10191019
tocLinks.forEach(link => {
1020-
link.classList.remove('hidden');
1021-
link.style.display = '';
1020+
link.classList.remove('search-dimmed');
1021+
link.style.opacity = '';
10221022
});
10231023
return;
10241024
}
10251025

10261026
const results = fuse.search(normalizedQuery);
10271027
const matchedIds = new Set(results.map(r => r.item.id));
10281028

1029+
// Dim non-matching sections (keep visible but gray)
10291030
sectionIds.forEach(id => {
10301031
const el = getSectionContainer(id);
10311032
if (el) {
10321033
if (matchedIds.has(id)) {
1033-
el.classList.remove('hidden');
1034-
el.style.display = '';
1034+
el.classList.remove('search-dimmed');
1035+
el.style.opacity = '';
10351036
} else {
1036-
el.classList.add('hidden');
1037-
el.style.display = 'none';
1037+
el.classList.add('search-dimmed');
1038+
el.style.opacity = '0.3';
10381039
}
10391040
}
10401041
});
10411042

1042-
// Filter sidebar TOC links
1043+
// Dim non-matching TOC links
10431044
const tocLinks = document.querySelectorAll('#docsToc > a');
10441045
tocLinks.forEach(link => {
10451046
const href = link.getAttribute('href');
10461047
const linkId = href.replace('#', '');
10471048
if (matchedIds.has(linkId)) {
1048-
link.classList.remove('hidden');
1049-
link.style.display = '';
1049+
link.classList.remove('search-dimmed');
1050+
link.style.opacity = '';
10501051
} else {
1051-
link.classList.add('hidden');
1052-
link.style.display = 'none';
1052+
link.classList.add('search-dimmed');
1053+
link.style.opacity = '0.3';
10531054
}
10541055
});
10551056
}
@@ -1079,7 +1080,10 @@ function filterSections(query) {
10791080
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
10801081
e.preventDefault();
10811082
// Open dialog if closed
1082-
if (!isOpen) openDocsDialog();
1083+
if (!isOpen) {
1084+
openDocsDialog();
1085+
}
1086+
location.hash = 'docs';
10831087
searchInput.focus();
10841088
searchInput.select();
10851089
}

0 commit comments

Comments
 (0)