From bdf9ec549185cd8f01a32c0ea477eb4308e6be2e Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Thu, 15 Aug 2024 21:31:36 +0000 Subject: [PATCH] Add new results landing page for website search (#7942) (#8011) --- _layouts/search_layout.html | 195 ++++++++++++++++++++++++++++++++++++ _sass/custom/custom.scss | 65 ++++++++++++ assets/js/search.js | 81 ++++++++++++++- search.md | 12 +++ 4 files changed, 349 insertions(+), 4 deletions(-) create mode 100644 _layouts/search_layout.html create mode 100644 search.md diff --git a/_layouts/search_layout.html b/_layouts/search_layout.html new file mode 100644 index 0000000000..47b8f25d1c --- /dev/null +++ b/_layouts/search_layout.html @@ -0,0 +1,195 @@ +--- +layout: table_wrappers +--- + + + + +{% include head.html %} + + + + Expand + + + + + + +{% include header.html %} + +
+
+ + + + Results Page Head from layout + +
+ +
+
+ + + + + +
+
+

+
+ +
+
+
+
+ + + +
+
+ +{% include footer.html %} + + + + + + + + diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 905e1b171d..6346005b04 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -1005,6 +1005,71 @@ body { border-bottom: 1px solid #eeebee; } +.search-page { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 20px; + margin: 0 auto; +} + +.search-page--sidebar { + flex: 1; + max-width: 200px; + flex: 0 0 200px; +} + +.search-page--sidebar--category-filter--checkbox-child { + padding-left: 20px; +} + +.search-page--results { + flex: 3; + display: flex; + flex-direction: column; + align-items: center; + max-width: 60%; +} + +.search-page--results--input { + width: 100%; + position: relative; +} + +.search-page--results--input-box { + width: 100%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.search-page--results--input-icon { + position: absolute; + top: 35%; + right: 10px; + transform: translateY(-50%); + pointer-events: none; + color: #333; +} + +.search-page--results--diplay { + width: 100%; + position: relative; + flex-flow: column nowrap; +} + +.search-page--results--diplay--header { + text-align: center; + margin-bottom: 20px; + background-color: transparent; +} + +.search-page--results--diplay--container--item { + margin-bottom: 1%; + display: block; +} + @mixin body-text($color: #000) { color: $color; font-family: 'Open Sans'; diff --git a/assets/js/search.js b/assets/js/search.js index 37de270ebd..8d9cab2ec5 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -13,7 +13,11 @@ const CLASSNAME_HIGHLIGHTED = 'highlighted'; const canSmoothScroll = 'scrollBehavior' in document.documentElement.style; - const docsVersion = elInput.getAttribute('data-docs-version'); + + //Extract version from the URL path + const urlPath = window.location.pathname; + const versionMatch = urlPath.match(/(\d+\.\d+)/); + const docsVersion = versionMatch ? versionMatch[1] : elInput.getAttribute('data-docs-version'); let _showingResults = false, animationFrame, @@ -46,7 +50,7 @@ case 'Enter': e.preventDefault(); - navToHighlightedResult(); + navToResult(); break; } }); @@ -247,9 +251,19 @@ } }; - const navToHighlightedResult = () => { + const navToResultsPage = () => { + const query = encodeURIComponent(elInput.value); + window.location.href = `/docs/${docsVersion}/search.html?q=${query}`; + } + + const navToResult = () => { const searchResultClassName = 'top-banner-search--field-with-results--field--wrapper--search-component--search-results--result'; - elResults.querySelector(`.${searchResultClassName}.highlighted a[href]`)?.click?.(); + const element = elResults.querySelector(`.${searchResultClassName}.highlighted a[href]`); + if (element) { + element.click?.(); + } else { + navToResultsPage(); + } }; const recordEvent = (name, data) => { @@ -261,3 +275,62 @@ }; }); })(); + + +window.doResultsPageSearch = async (query, type, version) => { + console.log("Running results page search!"); + + const searchResultsContainer = document.getElementById('searchPageResultsContainer'); + + try { + const response = await fetch(`https://search-api.opensearch.org/search?q=${query}&v=${version}&t=${type}`); + const data = await response.json(); + // Clear any previous search results + searchResultsContainer.innerHTML = ''; + + if (data.results && data.results.length > 0) { + data.results.forEach(result => { + const resultElement = document.createElement('div'); + resultElement.classList.add('search-page--results--diplay--container--item'); + + const contentCite = document.createElement('cite'); + const crumbs = [...result.ancestors]; + if (result.type === 'DOCS') crumbs.unshift(`OpenSearch ${result.versionLabel || result.version}`); + else if (result.type) crumbs.unshift(result.type); + contentCite.textContent = crumbs.join(' › ')?.replace?.(/