Improve search results page

myhpi/search/templates/search/search_result.html

@@ -1,19 +1,20 @@
 {% load static wagtailcore_tags %}
 {% load bootstrap_icons %}
+{% load search %}
 
 <a href="{% pageurl result %}">
     <div class="search-result">
         <hgroup class="d-flex justify-content-between">
-            <h5 class="text-break">{{ result.title }}</h5>
+            <h5 class="text-break">{{ result.title|highlight_title:search_query }}</h5>
             <time datetime="{{ result.specific.date|date:"c" }}">
                 {{ result.specific.date|date:"SHORT_DATE_FORMAT" }}
             </time>
         </hgroup>
-        <span class="text-dark">
+        <span class="text-dark search-preview">
             {% if result.search_description %}
                 {{ result.search_description }}
             {% else %}
-                {{ result.specific.body|truncatewords:20 }}
+                {{ result.specific.body|highlight_query_markdown:search_query }}
             {% endif %}
         </span>
     </div>

myhpi/search/templatetags/search.py

@@ -0,0 +1,57 @@
+import re
+
+from django import template
+from django.utils.html import escape
+from django.utils.safestring import mark_safe
+
+from myhpi.core.markdown.utils import render_markdown
+
+register = template.Library()
+
+
+@register.filter(name="highlight_query_markdown")
+# select 3 lines around first match and highlight query match
+def highlight_query(content, search_query, surrounding_lines=1):
+    lines = content.split("\n")
+    for i, line in enumerate(lines):
+        if search_query.lower() in line.lower():
+            lines[i] = line
+            # try finding the last leading heading to include it in the snippet
+            trailing_heading = None
+            # skip if the current line already is a heading
+            if not line.startswith("#"):
+                for j in range(i - 1, -1, -1):
+                    if lines[j].startswith("#"):
+                        trailing_heading = lines[j]
+                        break
+            # take 3 lines around match
+            start = max(0, i - 1)
+            end = min(len(lines), i + 2)
+            lines = lines[start:end]
+            if trailing_heading:
+                lines.insert(0, trailing_heading)
+            break
+    excerpt_max_length = surrounding_lines * 2 + 1
+    if len(lines) > excerpt_max_length:
+        lines = lines[:excerpt_max_length]
+    markdown = "\n".join(lines)
+    # Replace search query with bold version but preserve case from markdown
+    markdown = re.sub(
+        re.compile(f"({search_query})", re.IGNORECASE),
+        r"**\1**",
+        markdown,
+    )
+    rendered_markdown = render_markdown(markdown, None, False)[0]
+    return rendered_markdown
+
+
+@register.filter(name="highlight_title")
+def highlight_title(title, search_query):
+    title = escape(title)
+    return mark_safe(
+        re.sub(
+            re.compile(f"({search_query})", re.IGNORECASE),
+            r"<strong>\1</strong>",
+            title,
+        )
+    )

myhpi/search/views.py

@@ -19,6 +19,7 @@ def search(request):
             BasePage.objects.live()
             .filter(Q(visible_for__in=user_groups) | Q(is_public=True))
             .distinct()
+            .order_by("-last_published_at")
         )
         search_results = allowed_pages.search(search_query)
         query = Query.get(search_query)

myhpi/static/scss/myHPI.scss

@@ -186,6 +186,12 @@ h1.side-panel-title::after {
     padding: 0;
     margin: -0.5rem -0.8rem;
 
+    .search-preview {
+        h1, h2, h3, h4, h5, h6{
+            font-size: 1rem;
+        }
+    }
+
     .search-result {
         h5 {
           hyphens: auto;
@@ -251,6 +257,8 @@ img {
     margin: 0 5px;
 }
 
+
+
 @import "./navbar.scss";
 @import "./footer.scss";