adjust styling, add syntax highlighting

Author: yel-hadd

docs/.vuepress/theme/drawer/DrawerSearchResult.vue

@@ -2,17 +2,26 @@
   <section v-if="data.length" class="drawer-main__search-results">
     <template v-for="(item, index) in visibleResults" :key="item.objectID || index">
       <div class="search-result" @click="gotTo(parseUrl(item.url))">
-        <div class="search-result__title" v-html="getTitleForArticle(item.title)"></div>
-        <div class="search-result__breadcrumb" v-html="getBreadcrumbsForArticle(item.title)"></div>
-        <div class="search-result__text" v-html="formatPreviewMarkdown(item.preview)"></div>
+        <div
+          class="search-result__title"
+          v-html="highlightMatchingWords(getTitleForArticle(item.title), modelValue)"
+        ></div>
+        <div
+          class="search-result__breadcrumb"
+          v-html="highlightMatchingWords(getBreadcrumbsForArticle(item.title), modelValue)"
+        ></div>
+        <div
+          class="search-result__text"
+          v-html="highlightMatchingWords(formatPreviewMarkdown(item.preview), modelValue)"
+        ></div>
       </div>
     </template>
     <div v-if="countOfHiddenResults > 0" class="show-more" @click="showAllHiddenResult">
       <p>Show {{ countOfHiddenResults }} more results</p>
     </div>
   </section>
   <div v-else>
-    <p v-if="!modelValue.length" class="no_results">Write your search query, then press Enter or click the search button.</p>
+    <p v-if="!modelValue.length" class="no_results">Please type your search query, then press Enter or click the search button.</p>
   </div>
 </template>
 
@@ -23,10 +32,7 @@ import { marked } from "marked";
 const renderer = new marked.Renderer();
 
 renderer.heading = function (text) {
-  // check if text is a string
-  if (typeof text !== "string") {
-    return "";
-  }
+  if (typeof text !== "string") return "";
   return `<strong>${text}</strong>`;
 };
 
@@ -36,8 +42,7 @@ renderer.image = function () {
 
 const formatPreviewMarkdown = (markdown) => {
   let md = marked(markdown, { renderer });
-  // remove all <br> tags
-  md = md.replace(/<br>/g, "");
+  md = md.replace(/<br>/g, ""); // Remove all <br> tags
   return md;
 };
 
@@ -52,24 +57,20 @@ const props = defineProps({
   },
 });
 
-const { MAX_VISIBLE_RESULT } = inject('themeConfig');
+const { MAX_VISIBLE_RESULT } = inject("themeConfig");
 const isShowAllResult = ref(false);
 
 const gotTo = (url) => {
-  let parsedCurrentUrl = new URL(window.location.href);
-  let parsedCurrentUrlBase = parsedCurrentUrl.origin;
-  let parsedCurrentUrlHash = parsedCurrentUrl.hash;
-  let parsedCurrentUrlPathname = parsedCurrentUrl.pathname;
-
-  if (parsedCurrentUrlPathname + parsedCurrentUrlHash === url) {
+  const parsedCurrentUrl = new URL(window.location.href);
+  if (parsedCurrentUrl.pathname + parsedCurrentUrl.hash === url) {
     window.location.reload();
     return;
   }
-  window.location.href = parsedCurrentUrlBase + url;
+  window.location.href = parsedCurrentUrl.origin + url;
 };
 
 const parseUrl = (url) => {
-  let parsed = new URL(url);
+  const parsed = new URL(url);
   return parsed.pathname + parsed.hash;
 };
 
@@ -93,19 +94,28 @@ const getTitleForArticle = (title) => {
 const getBreadcrumbsForArticle = (title) => {
   let sliced = title.split("->").map((part) => part.trim());
   sliced.pop();
-  return sliced.join(' > ');
+  return sliced.join(" > ");
 };
 
+// Function to highlight matching words
+const highlightMatchingWords = (text, query) => {
+  if (!query.trim()) return text; // If the query is empty, return the text as is
+
+  const regex = new RegExp(`(${query.split(/\s+/).join("|")})`, "gi");
+  return text.replace(regex, "<mark>$1</mark>");
+};
 </script>
 
 <style lang="stylus">
 @import "../../styles/config.styl";
 
 .drawer-main__search-results {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); // Flexible grid with min width
-  gap: 1.5rem; // Increased gap for better spacing
-  padding: 1rem; // Padding around the results area
+  grid-template-columns: repeat(3, 1fr); // Ensures exactly 3 columns on desktop
+  gap: 1.2rem;
+  padding: 0.5rem; // Padding around the results area
+  width: 80vw;
+  margin: 0 auto;
 }
 
 .search-result {
@@ -143,7 +153,7 @@ const getBreadcrumbsForArticle = (title) => {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3; // Limit preview text lines for coherence
+    -webkit-line-clamp: 5; // Limit preview text lines for coherence
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
@@ -152,6 +162,8 @@ const getBreadcrumbsForArticle = (title) => {
     font-size: $drawerSearchResultBreadcrumbTextSize;
     color: $drawerSearchResultBreadcrumbColor;
     margin: 0;
+    line-height: 1.4;
+    margin-top: 0.5rem;
   }
 }
 
@@ -180,4 +192,10 @@ const getBreadcrumbsForArticle = (title) => {
     font-size: 1.25rem;
   }
 }
-</style>
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .drawer-main__search-results {
+    grid-template-columns: repeat(2, 1fr); // 2 columns on tablets
+  }
+}
+</style>