Restore AddSearch Experiences (Mostly)

src/components/addSearch.js

@@ -13,7 +13,7 @@ class AddSearch extends React.Component {
         "display_meta_description": true,
         "display_result_image": false,
         "link_target": "_blank",
-        "hide_logo": false,
+        "hide_logo": true,
         "direction": "ltr",
         "api_throttle_time": 2000,
         "automatic_filter_results_by_site_language": false,

src/components/addSearch2023.js

@@ -0,0 +1,42 @@
+import React from "react"
+
+
+class AddSearch extends React.Component {
+  componentDidMount() {
+    const resultPage = "/hi-rachel"
+    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")
+ //alert(resultPage);
+
+    script.setAttribute(
+      "src",
+      `https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=a7b957b7a8f57f4cc544c54f289611c6&id=search_widget${
+        resultPage.includes("hello") ? "&type=resultpage" : ""
+      }`
+    )
+    script.setAttribute("defer", true)
+
+    document.body.appendChild(script)
+  }
+  render() {
+    return <div className="addsearch-container" />
+  }
+}
+
+export default AddSearch

src/components/searchResults.js

@@ -1,45 +0,0 @@
-import React from "react"
-import { Helmet } from "react-helmet"
-
-class SearchResults extends React.Component {
-  render() {
-    return (
-      <div className="addsearch-container">
-        <Helmet>
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-                        function parseParamsFromUrl() {
-                        var queryString = window.location.search;
-                            queryString = queryString.substring(11);
-                            queryString = queryString.split("+").join(" ");
-                        return queryString;
-                        }
-                        var urlParams = parseParamsFromUrl();
-                        document.getElementById('piodocsearch').setAttribute('value', urlParams);
-                    `,
-            }}
-          />
-        </Helmet>
-
-        <div id="addsearch-results"></div>
-
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-                    window.addsearch_settings = {
-                        display_url: true,
-                        display_resultscount: true,
-                        display_date: true,
-                        display_sortby: true,
-                        display_category: true
-                    }
-                    `,
-          }}
-        />
-      </div>
-    )
-  }
-}
-
-export default SearchResults

src/layout/header/index.js

@@ -2,6 +2,7 @@ import React from "react"
 import { StaticQuery, graphql, Link } from "gatsby"
 import './style.css';
 import AddSearch from "../../components/addSearch"
+import AddSearch2023 from "../../components/addSearch2023"
 
 const Header = ({ data, page }) => (
   <>

src/pages/404.js

@@ -2,62 +2,100 @@ import React from "react"
 import Layout from "../layout/layout"
 import SEO from "../layout/seo"
 import SVG404 from "../../source/images/404_dark.svg"
+import { Link, graphql } from "gatsby"
+
 
 class NotFoundPage extends React.Component {
 
-componentDidMount() { //On page load...
-
-      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(
+  componentDidMount() { //On page load...
+    const { pathname } = this.props.location // pull the "location" prop and save it as 'pathname'
+    var searchPath = pathname.replace(/\//g, " ").replace(/-/g, " ") // define searchPath as pathname by removing the slash and replacing dashes w with spaces
+
+    window.location.href.toString().includes("search") // If the current page address includes "addsearch"...
+    ? null // Do nothing
+    : window.location = `/404?search=${searchPath}` // Otherwise, rewrite the URL (which I think inits a reload) to form the UTM parameters Addsearch needs to run a query.
+
+    const script1 = document.createElement("script") // Loads the Addsearch JS blob from them
+    script1.setAttribute(
+      "src",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-js-client.min.js`
+    )
+    //script2.setAttribute("defer", true)
+    document.body.appendChild(script1)
+
+    const script2 = document.createElement("script") // Loads the Addsearch JS blob from them
+    script2.setAttribute(
       "src",
-      `https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=a7b957b7a8f57f4cc544c54f289611c6&id=search_widget`
+      `https://cdn.jsdelivr.net/npm/addsearch[email protected]/dist/addsearch-search-ui.min.js`
     )
-    script.setAttribute("defer", true)
+    // script3.setAttribute("defer", true)
+    script2.onload = () => this.addSearchStuff();
+    document.body.appendChild(script2)
+
+    const link = document.createElement("script") // Loads the Addsearch JS blob from them
+    link.setAttribute(
+      "href",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-search-ui.min.css`
+    )
+    link.setAttribute("rel", 'stylesheet')
+
+    //alert('mount up');
+    document.body.appendChild(link)
 
-    document.body.appendChild(script)
   }
 
-  render() {
-    const { pathname } = this.props.location
+  addSearchStuff() {
+    //alert('add it');
+    var client = new AddSearchClient('a7b957b7a8f57f4cc544c54f289611c6');
+
+    var searchui_conf = {
+      searchResultsPageUrl: '/search?search=${searchPath}'
+    }
 
+    // Search UI instance
+    var searchui = new AddSearchUI(client, searchui_conf);
+
+    // Add components
+    searchui.searchField({
+      searchAsYouType: true,
+      selectorToBind: '.addsearch',
+    });
+    searchui.searchResults({
+      containerId: 'addsearch-results'
+    });
+    searchui.pagination({
+      containerId: 'addsearch-pagination'
+    });
+
+    // All components added. Start
+    searchui.start();
+
+  }
+
+  render() {
     return (
       <Layout type="404">
         <SEO
           title="404"
           description="Zoinks! You've hit a URL that doesn't exist. Let's try a search:"
-        />
+          />
         <div style={{ marginTop: "-20px" }} className="container">
           <main className=" doc-content-well" id="docs-main">
             <div className="mb-70">
               <img className="notfound" src={SVG404} />
-
               <h2>Sorry, there's no page at that URL.</h2>
-
+              <h3>
+                You can try the search above, or go{" "}
+                <Link to="/"> back to all docs</Link>?
+              </h3>
+              <div id="addsearch-results"></div>
+              <div id="addsearch-pagination"></div>
             </div>
           </main>
         </div>
       </Layout>
     )
-    return <div className="addsearch-container" />
   }
-}
 
+}
 export default NotFoundPage

src/pages/search.js

@@ -6,7 +6,7 @@ import SEO from "../layout/seo"
 
 class Search extends React.Component {
   componentDidMount() { //On page load...
-
+/*
     window.addsearch_settings = {
       "search_widget": {
         "placeholder": "Search Pantheon Docs",
@@ -33,7 +33,74 @@ class Search extends React.Component {
   script.setAttribute("defer", true)
 
   document.body.appendChild(script)
+*/
+    const script2 = document.createElement("script") // Loads the Addsearch JS blob from them
+    script2.setAttribute(
+      "src",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-js-client.min.js`
+    )
+    //script2.setAttribute("defer", true)
+    document.body.appendChild(script2)
+
+
+    const script3 = document.createElement("script") // Loads the Addsearch JS blob from them
+    script3.setAttribute(
+      "src",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-search-ui.min.js`
+    )
+   // script3.setAttribute("defer", true)
+    script3.onload = () => this.addSearchStuff();
+   document.body.appendChild(script3)
+
+
+    const link = document.createElement("script") // Loads the Addsearch JS blob from them
+    link.setAttribute(
+      "href",
+      `https://cdn.jsdelivr.net/npm/[email protected]/dist/addsearch-search-ui.min.css`
+    )
+    link.setAttribute("rel", 'stylesheet')
+
+    //alert('mount up');
+    document.body.appendChild(link)
+
+
+
+
+
+
 }
+ addSearchStuff() {
+  //alert('add it');
+   var client = new AddSearchClient('a7b957b7a8f57f4cc544c54f289611c6');
+
+
+   var searchui_conf = {
+     //searchResultsPageUrl: 'search'
+     searchResultsPageUrl: 'search'
+   }
+   // Search UI instance
+   var searchui = new AddSearchUI(client, searchui_conf);
+
+   // Add components
+   searchui.searchField({
+     containerId: 'searchfield',
+     placeholder: 'Keyword..',
+     button: 'Search',
+     searchAsYouType: true,
+     selectorToBind: '.addsearch',
+     ignoreSearchResultsPageUrl: true,
+   });
+   searchui.searchResults({
+     containerId: 'results'
+   });
+   searchui.pagination({
+     containerId: 'pagination'
+   });
+
+   // All components added. Start
+   searchui.start();
+
+ }
 
 
 
@@ -44,13 +111,17 @@ class Search extends React.Component {
         <div style={{ marginTop: "-20px" }} className="container">
           <main className=" doc-content-well" id="docs-main">
             <div className="">
-              <h1 className="title">Search Results</h1>
+              <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 className="row" id="searchfield">
+                  </div>
+                  <div className="row addsearch" id="results">
+                  </div>
+                  <div className="row" id="pagination">
                   </div>
                 </div>
               </div>
@@ -62,4 +133,4 @@ class Search extends React.Component {
   }
 }
 
-export default Search
+export default Search