added highlight for searched posts

Author: foderking

VinePlus.Web/Pages/Queries.cs

@@ -298,7 +298,8 @@ public static IEnumerable<PostSummary> searchUserPosts(ComicvineContext context,
                     )
             )
             .Skip(Util.ThreadPerPage * (page - 1))
-            .Take(Util.ThreadPerPage);
+            .Take(Util.ThreadPerPage)
+            .ToList();
     }
 
     public static IEnumerable<Parsers.Post> getUserPosts(ComicvineContext context, string user, int page=1) {

VinePlus.Web/Pages/Search/Posts/Results.cshtml.cs

@@ -9,7 +9,11 @@ public class Results(ComicvineContext context) : Pagination<PostSummary>
     public void OnGet(bool searchPost, string query, string creator, int p) {
         string s_query = $"searchPost={searchPost}&query={query}" + (creator==null ? "" : "&creator=takenstew22");
         NavRecord = new(p, int.MaxValue, s_query);
-        Entities = Queries.searchUserPosts(context, query, creator, p);
+        Entities = Queries.searchUserPosts(context, query, creator, p)
+            .Select(entity => 
+                entity with { post_content = entity.post_content.Replace(query, $"<span class=\"search-highlight\">{query}</span>")}
+            );
+            
     }
 
     public override Func<string, int, string> PageDelegate() {

VinePlus.Web/README.md

@@ -82,7 +82,7 @@ The first can be time consuming - especially on low internet speed, while the ba
 - [ ] "How to search" UI
 - [x] pagination for search
 - [x] add ability to search posts
-- [ ] highlight search term
+- [x] highlight search term
 
 ### Stats
 - [ ] add stats UI

VinePlus.Web/wwwroot/css/main.css

@@ -889,4 +889,10 @@ figure[data-size="small"] {
 }
 .error-img > img {
     margin: auto;
+}
+.search-highlight {
+    background-color: yellow;
+    font-weight: bold;
+    color: gray;
+    padding: 0 0.2rem;
 }