Highlight directly using meilisearch

Author: skalahonza

Components/Pages/Home.razor

@@ -291,7 +291,11 @@ else
             return;
         }
 
-        var results = await SearchService.SearchRepositories(GithubUsername, searchQuery);
+        var results = await SearchService.SearchRepositories(GithubUsername, searchQuery, new SearchOptions
+        {
+            HighlightPreTag = """<b class="pa-1 mud-elevation-2 mud-theme-primary">""",
+            HighlightPostTag = "</b>",
+        });
         _searchResults.AddRange(results);
 
         if (_searchResults.Count == 0)

Searching/DependencyInjectionExtensions.cs

@@ -8,19 +8,19 @@ public static class DependencyInjectionExtensions
     public static WebApplicationBuilder AddMeilisearch(this WebApplicationBuilder builder)
     {
         builder.Services
-            .AddOptions<SearchOptions>()
+            .AddOptions<MeilisearchOptions>()
             .Bind(builder.Configuration.GetSection("Meilisearch"));
-        
+
         builder.Services.AddScoped<SearchService>();
         builder.Services.AddScoped<MeilisearchMessageHandler>();
         builder.Services.AddHttpClient(nameof(MeilisearchClient), (serviceProvider, client) =>
         {
-            var url = serviceProvider.GetRequiredService<IOptions<SearchOptions>>().Value.MeilisearchUrl;
+            var url = serviceProvider.GetRequiredService<IOptions<MeilisearchOptions>>().Value.MeilisearchUrl;
             client.BaseAddress = new Uri(url);
         }).AddTypedClient<MeilisearchClient>(
             (client, serviceProvider) =>
             {
-                var apiKey = serviceProvider.GetRequiredService<IOptions<SearchOptions>>().Value.ApiKey;
+                var apiKey = serviceProvider.GetRequiredService<IOptions<MeilisearchOptions>>().Value.ApiKey;
                 return new MeilisearchClient(client, apiKey);
             });
         return builder;

Searching/SearchOptions.cs Searching/MeilisearchOptions.csSearching/SearchOptions.cs renamed to Searching/MeilisearchOptions.cs

@@ -1,6 +1,6 @@
 namespace GithubStarSearch.Searching;
 
-public class SearchOptions
+public class MeilisearchOptions
 {
     public required string MeilisearchUrl { get; set; }
     public required string ApiKey { get; set; }

Searching/SearchService.cs

@@ -8,8 +8,14 @@ namespace GithubStarSearch.Searching;
 // We need to get _formated part of the response, but the dotnet SDK does not implement it.
 // https://github.com/meilisearch/meilisearch-dotnet/issues/315
 
+public record SearchOptions
+{
+    public string HighlightPreTag { get; init; } = "<em>";
+    public string HighlightPostTag { get; init; } = "</em>";
+}
+
 public class SearchService(
-    IOptions<SearchOptions> searchOptions,
+    IOptions<MeilisearchOptions> searchOptions,
     MeilisearchClient client,
     ILogger<SearchService> logger)
 {
@@ -37,7 +43,8 @@ public async Task IndexRepositories(IEnumerable<Repository> repositories)
     }
 
     public async Task<IReadOnlyCollection<Repository>> SearchRepositories(string starredBy,
-        string term)
+        string term,
+        SearchOptions options)
     {
         await MakeSureIndexExists();
         await SetupIndex();
@@ -62,7 +69,9 @@ public async Task<IReadOnlyCollection<Repository>> SearchRepositories(string sta
                 nameof(Repository.Readme).ToCamelCase()
             ],
             AttributesToCrop = [nameof(Repository.Description).ToCamelCase(), nameof(Repository.Readme).ToCamelCase()],
-            CropLength = searchOptions.Value.CropLength
+            CropLength = searchOptions.Value.CropLength,
+            HighlightPreTag = options.HighlightPreTag,
+            HighlightPostTag = options.HighlightPostTag
         };
 
         var results = await index.SearchAsync<FormattedSearchableRepository>(term, searchQuery);