Updated search result styling and preview

_pages/search.md

@@ -6,7 +6,7 @@ permalink: /search
 
 <input type="text" id="search-input" placeholder="Search blog posts..">
 
-<ul id="results-container"></ul>
+<div id="results-container"></div>
 
 <script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
 
@@ -15,7 +15,8 @@ permalink: /search
         searchInput: document.getElementById('search-input'),
         resultsContainer: document.getElementById('results-container'),
         json:'{{ site.baseurl }}/search.json',
-        searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',
+        searchResultTemplate: '<div class="search-result-box"><a class="internal-link" href="{url}?query={query}" title="{desc}">{title}</a><br><div class="search-excerpt">{excerpt}</div></div>',
+        // searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',
         noResultsText: 'No results found',
         limit: 10
     });

_sass/_style.scss

@@ -121,12 +121,16 @@ nav {
   }
 }
 
-.backlink-box {
+.backlink-box, .search-result-box {
   background: $color-box-background;
   padding: 1em;
   border-radius: $border-radius;
 }
 
+.search-result-box {
+  margin-bottom: 1em;
+}
+
 code {
   background: #f5f5f5;
   padding: 0.1em 0.2em;

search.json

@@ -9,7 +9,8 @@ layout: none
       "tags"     : "{{ post.tags | join: ', ' }}",
       "url"      : "{{ site.baseurl }}{{ post.url }}",
       "date"     : "{{ post.date }}",
-      "content"  : "{{ post.content | strip_html | strip_newlines | smartify }}"
+      "content"  : "{{ post.content | strip_html | strip_newlines | smartify }}",
+      "excerpt"  : "{{ post.content | strip_html | strip_newlines | smartify | truncatewords: 10}}"
     } {% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]