search ux

DavidVollmers · May 22, 2024 · 0efd673 · 0efd673
1 parent b6f2a3e
commit 0efd673
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/website/Ignis.Website/Components/HighlightText.razor b/website/Ignis.Website/Components/HighlightText.razor
@@ -1,6 +1,10 @@
-@inherits IgnisComponentBase
+@using System.Text
+@using System.Text.RegularExpressions
+@inherits IgnisComponentBase
 
-@Text
+<span>
+    @HighlightedText
+</span>
 
 @code
 {
@@ -9,4 +13,27 @@
     [Parameter, EditorRequired] public string Query { get; set; } = null!;
 
     [Parameter] public string? HighlightClass { get; set; }
+
+    public MarkupString HighlightedText
+    {
+        get
+        {
+            var parts = Regex.Split(Text, $"({Regex.Escape(Query)})", RegexOptions.IgnoreCase);
+
+            var sb = new StringBuilder();
+            foreach (var part in parts)
+            {
+                if (string.Equals(part, Query, StringComparison.OrdinalIgnoreCase))
+                {
+                    sb.Append($"<mark class=\"{HighlightClass}\">{part}</mark>");
+                }
+                else
+                {
+                    sb.Append($"<span>{part}</span>");
+                }
+            }
+
+            return (MarkupString)sb.ToString();
+        }
+    }
 }
diff --git a/website/Ignis.Website/Components/SearchDialog.razor b/website/Ignis.Website/Components/SearchDialog.razor
@@ -4,6 +4,7 @@
 @inherits IgnisAsyncComponentBase
 @implements IHandleAfterRender
 @inject ISearchService SearchService
+@inject NavigationManager Router
 @inject IJSRuntime JSRuntime
 
 <Dialog IsOpen="IsOpen" IsOpenChanged="IsOpenChanged" class="fixed inset-0 z-50">
@@ -40,12 +41,13 @@
                             <ul>
                                 @foreach (var result in _results)
                                 {
-                                    <li class="group block cursor-default rounded-lg px-3 py-2 aria-selected:bg-slate-100 dark:aria-selected:bg-slate-700/30">
-                                        <div class="text-sm text-slate-700 group-aria-selected:text-sky-600 dark:text-slate-300 dark:group-aria-selected:text-sky-400">
-                                            <HighlightText Text="@result.Title" Query="_searchQuery" HighlightClass="group-aria-selected:underline bg-transparent text-sky-600 dark:text-sky-400"/>
+                                    <li onclick="@(() => OnClick(result))"
+                                        class="group block cursor-default rounded-lg px-3 py-2 hover:bg-slate-100 dark:hover:bg-slate-700/30">
+                                        <div class="text-sm text-slate-700 group-hover:text-sky-600 dark:text-slate-300 dark:group-hover:text-sky-400">
+                                            <HighlightText Text="@result.Title" Query="@_searchQuery" HighlightClass="group-hover:underline bg-transparent text-sky-600 dark:text-sky-400"/>
                                         </div>
                                         <div class="mt-0.5 truncate whitespace-nowrap text-xs text-slate-500 dark:text-slate-400">
-                                            <HighlightText Text="@result.Section" Query="_searchQuery" HighlightClass="group-aria-selected:underline bg-transparent text-sky-600 dark:text-sky-400"/>
+                                            <HighlightText Text="@result.Section" Query="@_searchQuery" HighlightClass="group-hover:underline bg-transparent text-sky-600 dark:text-sky-400"/>
                                         </div>
                                     </li>
                                 }
@@ -64,7 +66,7 @@
     private readonly IAsyncDebounce _debounce;
 
     private SearchResult[]? _results;
-    private ElementReference _input;
+    private ElementReference? _input;
     private string? _searchQuery;
 
     [Parameter] public bool IsOpen { get; set; }
@@ -111,6 +113,15 @@
 
     public async Task OnAfterRenderAsync()
     {
-        await JSRuntime.InvokeVoidAsync("OnKeyUp", CancellationToken, _input, DotNetObjectReference.Create(this));
+        if (!_input.HasValue) return;
+
+        await JSRuntime.InvokeVoidAsync("OnKeyUp", CancellationToken, _input.Value, DotNetObjectReference.Create(this));
+    }
+
+    private void OnClick(SearchResult result)
+    {
+        IsOpenChanged.InvokeAsync(IsOpen = false);
+
+        Router.NavigateTo(result.Url);
     }
 }
diff --git a/website/Ignis.Website/Scripts/website.js b/website/Ignis.Website/Scripts/website.js
@@ -16,6 +16,7 @@ window.OnPageLoad = () => {
 }
 
 window.OnKeyUp = (input, dotNetRef) => {
+  if (!input) return
   input.onkeyup = (event) => {
     dotNetRef.invokeMethodAsync('OnKeyUpAsync', event.key, input.value)
   }

diff --git a/website/Ignis.Website/Services/SearchResult.cs b/website/Ignis.Website/Services/SearchResult.cs
@@ -14,7 +14,7 @@ public record SearchResult
     public SearchResult(Page page, Section section)
     {
         Title = page.Title;
-        Url = page.Link;
+        Url = $"/docs{page.Link}";
         Section = section.Title;
     }
 

diff --git a/website/Ignis.Website/Services/SearchService.cs b/website/Ignis.Website/Services/SearchService.cs
@@ -69,7 +69,8 @@ public async IAsyncEnumerable<SearchResult> SearchAsync(string query,
             {
                 foreach (var typeDocumentation in namespaceDocumentation.Types)
                 {
-                    if (typeDocumentation.Name.Contains(query, StringComparison.OrdinalIgnoreCase))
+                    if (typeDocumentation.Name.Contains(query, StringComparison.OrdinalIgnoreCase)
+                        || typeDocumentation.Namespace!.Contains(query, StringComparison.OrdinalIgnoreCase))
                     {
                         yield return new SearchResult(typeDocumentation);
                     }