Fix separate search results page (#8707)

* Fix separate search results page * First pass at search result page theme * Finish search results pager * Update search.css Styles for if/when number-of-results becomes an h2 --------- Co-authored-by: M Miller <[email protected]>
pantheon-systems · Oct 5, 2023 · 8bfa249 · 8bfa249
1 parent 2b5e08e
commit 8bfa249
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 38 deletions.
diff --git a/src/layout/SearchBar/index.js b/src/layout/SearchBar/index.js
@@ -17,7 +17,7 @@ const SearchBar = ({ page }) => (
     className="pds-spacing-pad-block-start-l pds-spacing-pad-block-end-2xl"
   >
     <InputText
-      id="search-field"
+      id="search"
       aria-label="Search Pantheon Documentation"
       placeholder="Search Pantheon Documentation"
       type="search"

diff --git a/src/pages/search.js b/src/pages/search.js
@@ -4,57 +4,78 @@ import SEO from "../layout/seo"
 
 import { Container } from "@pantheon-systems/pds-toolkit-react"
 
+import "./styles/search.css"
+
 class Search extends React.Component {
   componentDidMount() {
     //On page load...
+    const addsearch_js_client = document.createElement("script") // Loads the Addsearch JS blob from them
+    addsearch_js_client.setAttribute(
+      "src",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-js-client.min.js`
+    )
+    addsearch_js_client.setAttribute("defer", true)
+    document.body.appendChild(addsearch_js_client)
 
-    window.addsearch_settings = {
-      search_widget: {
-        placeholder: "Search Pantheon Docs",
-        show_search_suggestions: true,
-        search_suggestion_position: "left",
-        default_sortby: "relevance",
-        display_date: false,
-        display_meta_description: true,
-        display_result_image: false,
-        link_target: "_blank",
-        hide_logo: false,
-        direction: "ltr",
-        api_throttle_time: 2000,
-        automatic_filter_results_by_site_language: false,
-        analytics_enabled: true,
-      },
-    }
-
-    const script = document.createElement("script") // Loads the Addsearch JS blob from them
-    script.setAttribute(
+    const addsearch_search_ui = document.createElement("script") // Loads the Addsearch JS blob from them
+    addsearch_search_ui.setAttribute(
       "src",
-      `https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=a7b957b7a8f57f4cc544c54f289611c6&id=search_widget`
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-search-ui.min.js`
+    )
+    addsearch_search_ui.setAttribute("defer", true)
+    addsearch_search_ui.onload = () => this.addSearchStuff()
+    document.body.appendChild(addsearch_search_ui)
+
+    const addsearch_styles = document.createElement("script") // Loads the Addsearch JS blob from them
+    addsearch_styles.setAttribute(
+      "href",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-search-ui.min.css`
     )
-    script.setAttribute("defer", true)
+    addsearch_styles.setAttribute("defer", true)
+    addsearch_styles.setAttribute("rel", "stylesheet")
 
-    document.body.appendChild(script)
+    document.body.appendChild(addsearch_styles)
+  }
+  addSearchStuff() {
+    var client = new AddSearchClient("a7b957b7a8f57f4cc544c54f289611c6")
+
+    var searchui_conf = {
+      searchResultsPageUrl: "search",
+    }
+    // Search UI instance
+    var searchui = new AddSearchUI(client, searchui_conf)
+
+    // Add components
+    searchui.searchField({
+      containerId: "search",
+      searchAsYouType: true,
+      selectorToBind: ".pds-input-field__input",
+      ignoreSearchResultsPageUrl: true,
+    })
+    searchui.searchResults({
+      containerId: "results",
+    })
+    searchui.pagination({
+      containerId: "pagination",
+    })
+
+    // All components added. Start
+    searchui.start()
   }
 
   render() {
     return (
       <Layout>
         <SEO image={"/images/assets/default-thumb-doc.png"} title="Search" />
-        <Container width="wide">
-          <main className=" doc-content-well" id="docs-main">
-            <div className="">
-              <h1 className="title">Search Results</h1>
-            </div>
-            <div className="" style={{ marginBottom: "15px" }}></div>
-            <div className=" mb-70">
-              <div className="">
-                <div className="container">
-                  <div className="row"></div>
-                </div>
-              </div>
+        <main id="docs-main">
+          <Container width="standard" className="search-results">
+            <div className="search-results__heading">
+              <h1>Search Results</h1>
             </div>
-          </main>
-        </Container>
+            <div className="addsearch search-results__items" id="results"></div>
+            <div className="search-results__pager" id="pagination"></div>
+          </Container>
+        </main>
       </Layout>
     )
   }

diff --git a/src/pages/styles/search.css b/src/pages/styles/search.css
@@ -0,0 +1,132 @@
+.number-of-results {
+  border-bottom: 1px solid var(--pds-color-border-default);
+  font-size: var(--pds-typography-size-m);
+  font-weight: var(--pds-typography-font-weight-semibold);
+  padding-block: var(--pds-spacing-l);
+}
+
+.addsearch-searchresults-no-results h2,
+.addsearch-searchresults .number-of-results,
+.addsearch-searchresults .number-of-results h2 {
+  font-size: var(--pds-typography-size-m);
+  font-weight: var(--pds-typography-font-weight-regular);
+  padding-block: var(--pds-spacing-l);
+}
+
+.addsearch-searchresults-no-results h2 em {
+  font-weight: var(--pds-typography-font-weight-semibold);
+}
+
+/* Individual results */
+.search-results__items .hit {
+  line-height: var(--pds-typography-line-height-l);
+  padding-block: var(--pds-spacing-xl);
+}
+
+.search-results__items .hit .category {
+  background-color: var(--pds-color-tag-4-background);
+  border-radius: var(--pds-border-radius-default);
+  color: var(--pds-color-tag-4-foreground);
+  display: inline-flex;
+  font-size: var(--pds-typography-size-s);
+  font-weight: var(--pds-typography-font-weight-semibold);
+  line-height: var(--pds-typography-line-height-s);
+  margin-block-start: var(--pds-spacing-m);
+  padding-block: var(--pds-spacing-4xs);
+  padding-inline: var(--pds-spacing-2xs);
+}
+
+.search-results__items .hit img {
+  display: none;
+}
+
+.search-results__items .hit h2,
+.search-results__items .hit h3 {
+  line-height: 1;
+}
+
+.search-results__items .hit h2 a,
+.search-results__items .hit h3 a {
+  font-size: var(--pds-typography-size-l);
+  font-weight: var(--pds-typography-font-weight-semibold);
+  text-decoration: none;
+}
+
+.search-results__items .hit h2 a:hover,
+.search-results__items .hit h3 a:hover {
+  text-decoration: underline;
+}
+
+.search-results__items .hit .highlight {
+  background-color: transparent;
+}
+
+.search-results__items .hit .highlight em {
+  background-color: #fff1a9;
+  font-weight: var(--pds-typography-font-weight-semibold);
+  padding-inline: var(--pds-spacing-4xs);
+}
+
+/* Pagination */
+.search-results__pager {
+  padding-block: var(--pds-spacing-m) var(--pds-spacing-4xl);
+}
+
+.addsearch-pagination {
+  align-items: center;
+  color: var(--pds-color-text-default);
+  column-gap: var(--pds-spacing-3xs);
+  display: flex;
+  font-family: var(--pds-typography-font-default);
+  font-weight: var(--pds-typography-font-weight-semibold);
+  justify-content: center;
+  list-style-type: none;
+}
+
+.addsearch-pagination button {
+  align-items: center;
+  border-radius: var(--pds-border-radius-default);
+  color: var(--pds-color-text-default);
+  display: flex;
+  font-weight: var(--pds-typography-font-weight-semibold);
+  justify-content: center;
+  line-height: 1;
+  min-width: var(--pds-spacing-2xl);
+  padding: var(--pds-spacing-2xs) 0;
+  text-decoration: none;
+  transition: var(--pds-animation-button-transition);
+}
+
+.addsearch-pagination button:hover {
+  background-color: var(--pds-color-pager-background-hover);
+}
+
+.addsearch-pagination button:focus-visible {
+  outline: 2px solid var(--pds-color-interactive-focus);
+}
+
+.addsearch-pagination button[aria-current="true"] {
+  background-color: var(--pds-color-pager-background-active);
+  color: var(--pds-color-pager-foreground-active);
+}
+
+/* Hack to add previous/next icons from PDS.  */
+/* TODO: Remove if this can be configured in Addsearch instead */
+.addsearch-pagination button[data-page="previous"],
+.addsearch-pagination button[data-page="next"] {
+  color: transparent;
+  padding-block-end: var(--pds-spacing-4xs);
+}
+
+.addsearch-pagination button[data-page="previous"]:before,
+.addsearch-pagination button[data-page="next"]:before {
+  padding-inline-start: var(--pds-spacing-2xs);
+}
+
+.addsearch-pagination button[data-page="previous"]:before {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512" height="1rem" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet" focusable="false" class="pds-icon pds-icon--md pds-icon--arrowLeft" classes="pds-page__icon"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" fill="currentColor"></path></svg>');
+}
+
+.addsearch-pagination button[data-page="next"]:before {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512" height="1rem" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet" focusable="false" class="pds-icon pds-icon--md pds-icon--arrowRight" classes="pds-page__icon"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" fill="currentColor"></path></svg>');
+}