From 1ba6012c7af5e190a910fb638ef72c0091428733 Mon Sep 17 00:00:00 2001 From: Rachel Whitton Date: Thu, 31 Aug 2023 15:23:13 -0500 Subject: [PATCH] Fix up AddSearch for /search and 404s For /search, bind existing search form via CSS selector, first pass style alignment for separate results page For 404s, Generate ${searchpath} query paramater based on requested URL, then upon entering the form - load that query in the separate /search results page --- src/components/addSearch.js | 2 +- src/pages/404.js | 102 +++++++++++++++++++++++++----------- src/pages/search.js | 8 ++- src/styles/global.css | 55 +++++++++++++++++++ 4 files changed, 132 insertions(+), 35 deletions(-) diff --git a/src/components/addSearch.js b/src/components/addSearch.js index 85e6c33e02..2231670b08 100644 --- a/src/components/addSearch.js +++ b/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, diff --git a/src/pages/404.js b/src/pages/404.js index 5549c772ed..dfcf141ab8 100644 --- a/src/pages/404.js +++ b/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/addsearch-js-client@0.8/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-search-ui@0.7/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/addsearch-search-ui@0.7/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 ( + />
-

Sorry, there's no page at that URL.

- +

+ You can try the search above, or go{" "} + back to all docs? +

+
+
) - return
} -} +} export default NotFoundPage diff --git a/src/pages/search.js b/src/pages/search.js index 6e3a625893..c6439a77b4 100644 --- a/src/pages/search.js +++ b/src/pages/search.js @@ -86,7 +86,9 @@ class Search extends React.Component { containerId: 'searchfield', placeholder: 'Keyword..', button: 'Search', - searchAsYouType: true + searchAsYouType: true, + selectorToBind: '.addsearch', + ignoreSearchResultsPageUrl: true, }); searchui.searchResults({ containerId: 'results' @@ -117,7 +119,9 @@ class Search extends React.Component {
-
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css index c32667fa36..492e8d3c4e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -612,3 +612,58 @@ a.release-update::before { font-family: 'Glyphicons Regular'; src: url(/fonts/glyphicons/glyphicons-regular-v192.woff2) format('woff2'); } +.addsearch-searchresults h3{ + color: #000 !important; + font-size: 18px!important; + font-weight: 700; + line-height: normal; + margin: 0 0 10px; + padding: 0; + text-align: left; +} +.addsearch-searchresults .highlight{ + color: #000 !important; + font-size: 16px!important; + font-weight: 700; + line-height: normal; + margin: 0 0 10px; + padding: 0; + text-align: left; + background: none; +} + +.addsearch-searchresults img, .addsearch-searchresults .category { + display: none; +} + +.addsearch-searchresults .hit:hover { + background-color: #f5f5f5; + border-color: #c9c9c9; + outline: none; +} +.addsearch-searchresults .hit { + border: 1px solid transparent; + border-left: none; + border-right: none; + color: #000; + font-size: 18px; + line-height: normal; + margin: 0; + padding: 1em; + text-align: left; +} +.addsearch-searchresults .highlight { + font-weight: normal; + border: 1px solid transparent; + border-left: none; + border-right: none; + color: #000; + font-size: 16px; + line-height: normal; + margin: 0; + padding: 1em; + text-align: left; + text-transform: none; + font-weight: normal; + +}