search results (#159)

* search results * fix(search): algolia search results * fix(search): algolia search results - breadcrumbs * fix(search): remove header from search * fix(search): remove header from search results --------- Co-authored-by: Vega <[email protected]>
Teradata · Nov 19, 2024 · 5361484 · 5361484
1 parent 040652c
commit 5361484
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
@@ -40,13 +40,11 @@
 
 .DocSearch-Form {
   --docsearch-spacing: 1rem;
-  --docsearch-highlight-color: var(--cv-theme-tertiary);
   border-radius: 0;
   border-bottom: 1px solid #ebedee;
 }
 
 .DocSearch-Hit a {
-  --docsearch-highlight-color: var(--cv-theme-tertiary);
   box-shadow: none;
   padding-left: 0;
 }
@@ -130,6 +128,11 @@
   top: 1px;
 }
 
+.DocSearch-Hits mark {
+  background: rgb(243 116 64 / 20%);
+  color: var(--docsearch-hit-color);
+}
+
 .DocSearch-Button {
   --docsearch-searchbox-shadow: none;
   --docsearch-searchbox-background: transparent;

diff --git a/src/theme/SearchPage/index.tsx b/src/theme/SearchPage/index.tsx
@@ -228,31 +228,28 @@ function SearchPageContent(): JSX.Element {
           /algolia-docsearch-suggestion--highlight/g,
           'search-result-match'
         );
-
-      const items = hits.map(
-        ({
-          url,
-          _highlightResult: { hierarchy },
-          _snippetResult: snippet = {},
-        }: {
-          url: string;
-          _highlightResult: { hierarchy: { [key: string]: { value: string } } };
-          _snippetResult: { content?: { value: string } };
-        }) => {
+
+      const items = hits.reduce((filteredItems, { url, _highlightResult: { hierarchy }, _snippetResult: snippet = {}, anchor }) => {
+        if (anchor === "site-header" || !anchor) {
+          return filteredItems;  
+        }
+
+        if (snippet.content) {
           const titles = Object.keys(hierarchy).map((key) =>
             sanitizeValue(hierarchy[key]!.value)
           );
-          return {
+
+          filteredItems.push({
             title: titles.pop()!,
             url: processSearchResultUrl(url),
-            summary: snippet.content
-              ? `${sanitizeValue(snippet.content.value)}...`
-              : '',
+            summary: `${sanitizeValue(snippet.content.value)}...`,
             breadcrumbs: titles,
-          };
+          });
         }
-      );
-
+        return filteredItems;
+      }, []);
+
+
       searchResultStateDispatcher({
         type: 'update',
         value: {
@@ -473,7 +470,26 @@ function SearchPageContent(): JSX.Element {
                         className={styles.searchResultItemHeading}
                         dangerouslySetInnerHTML={{ __html: title }}
                       ></Heading>
-
+                       {breadcrumbs.length > 0 && (
+                        <nav aria-label="breadcrumbs">
+                          <ul
+                            className={clsx(
+                              'breadcrumbs',
+                              styles.searchResultItemPath
+                            )}
+                          >
+                            {breadcrumbs.map((html, index) => (
+                              <li
+                                key={index}
+                                className="breadcrumbs__item"
+                                // Developer provided the HTML, so assume it's safe.
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{ __html: html }}
+                              />
+                            ))}
+                          </ul>
+                        </nav>
+                      )}
                       {summary && (
                         <p
                           className={styles.searchResultItemSummary}

diff --git a/src/theme/SearchPage/styles.module.css b/src/theme/SearchPage/styles.module.css
@@ -160,6 +160,6 @@
 
 :global(.search-result-match) {
   color: var(--docsearch-hit-color);
-  background: rgb(255 215 142 / 25%);
+  background: rgb(243 116 64 / 20%);
   padding: 0.09em 0;
 }