mirror of
https://github.com/docker/docs.git
synced 2026-03-27 14:28:47 +07:00
site: remove /search page, redirect to homepage
The search functionality is now handled entirely by the modal. Assisted-By: cagent
This commit is contained in:
David Karlsson
@@ -1,191 +0,0 @@
|
||||
{{ define "left" }}{{ partial "sidebar/mainnav.html" . }}{{ end }} {{ define
|
||||
"main" }}
|
||||
<article class="prose dark:prose-invert max-w-none">
|
||||
<h1 class="py-4">{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<div class="not-prose">
|
||||
<div class="flex flex-col items-center justify-between gap-8 lg:flex-row">
|
||||
<input
|
||||
type="search"
|
||||
id="search-page-input"
|
||||
class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] outline-hidden w-full min-w-0 rounded-sm bg-white px-4 py-2 lg:max-w-xl"
|
||||
placeholder="Search…"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Not finding what you're looking for? Try
|
||||
</p>
|
||||
<button
|
||||
onclick="askAI('search-page-input')"
|
||||
class="topbar-button open-kapa-widget"
|
||||
>
|
||||
<span>Ask AI</span>
|
||||
<span class="icon-svg">
|
||||
{{ partial "utils/svg.html" "/icons/sparkle.svg" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-divider-light dark:border-divider-dark" />
|
||||
<div id="search-page-results">
|
||||
<!-- results -->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<script type="module">
|
||||
// Global variable to hold the pagefind module
|
||||
let pagefind;
|
||||
|
||||
// Initialize the pagefind module and fire a search if the query parameter exists
|
||||
window.addEventListener("load", async function () {
|
||||
// Hydrate pagefind
|
||||
pagefind = await import("/pagefind/pagefind.js");
|
||||
await pagefind.options({
|
||||
ranking: {
|
||||
termFrequency: 0.2,
|
||||
pageLength: 0.75,
|
||||
termSaturation: 1.4,
|
||||
termSimilarity: 6.0,
|
||||
},
|
||||
});
|
||||
|
||||
// Get the query parameter from the URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const query = urlParams.get("q");
|
||||
|
||||
// If no query parameter is set, return
|
||||
if (!query) {
|
||||
return;
|
||||
}
|
||||
|
||||
const searchInput = document.getElementById("search-page-input");
|
||||
|
||||
// Set the value of the input field to the query parameter
|
||||
searchInput.value = query;
|
||||
|
||||
// Trigger the input event to simulate user typing
|
||||
const event = new Event("input", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
// Trigger the input event for the search input
|
||||
searchInput.dispatchEvent(event);
|
||||
searchInput.focus();
|
||||
});
|
||||
|
||||
const searchPageInput = document.querySelector("#search-page-input");
|
||||
const searchPageResults = document.querySelector("#search-page-results");
|
||||
|
||||
// onPageSearch returns 10 results per query
|
||||
async function onPageSearch(e) {
|
||||
pagefind.init();
|
||||
const query = e.target.value;
|
||||
|
||||
// Set the query parameter in the URL
|
||||
const params = new URLSearchParams(document.location.search);
|
||||
params.set("q", query);
|
||||
|
||||
// Default the current page to 1
|
||||
let currentPage = 1;
|
||||
|
||||
// Check if the page parameter exists
|
||||
const page = params.get("page");
|
||||
// Calculate the range start based on the page parameter
|
||||
if (page) {
|
||||
currentPage = parseInt(page);
|
||||
}
|
||||
const rangeStart = (currentPage - 1) * 10;
|
||||
const rangeEnd = rangeStart + 10;
|
||||
|
||||
// Execute the search
|
||||
const search = await pagefind.debouncedSearch(query);
|
||||
// If no search results are found, exit
|
||||
if (search === null) {
|
||||
return;
|
||||
} else {
|
||||
// total number of results
|
||||
const resultsLength = search.results.length;
|
||||
// Get the data for the search results
|
||||
// Slice the results based on the range start + 10
|
||||
const resultsData = await Promise.all(
|
||||
search.results.slice(rangeStart, rangeEnd).map((r) => r.data()),
|
||||
);
|
||||
// If the range does not have any results, display a message
|
||||
if (resultsData.length === 0) {
|
||||
searchPageResults.innerHTML = `<div class="p-4">No results found</div>`;
|
||||
return;
|
||||
}
|
||||
// Add an index to the results, for heap tracking
|
||||
const results = resultsData.map((item, index) => ({
|
||||
...item,
|
||||
index: index + 1,
|
||||
}));
|
||||
|
||||
// If the query is not empty, display the search results container
|
||||
if (query) {
|
||||
searchPageResults.classList.remove("hidden");
|
||||
} else {
|
||||
searchPageResults.classList.add("hidden");
|
||||
}
|
||||
|
||||
// Generate the search results HTML
|
||||
let resultsHTML = `<div class="text-gray-400 dark:text-gray-500 p-2">${resultsLength} results</div>`;
|
||||
|
||||
// Map results to HTML
|
||||
resultsHTML += results
|
||||
.map((item) => {
|
||||
return `<div class="p-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-gray-400 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
|
||||
<a class="link" style="word-break: break-word; overflow-wrap: anywhere;" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
|
||||
<p class="text-black dark:text-white overflow-hidden" style="word-break: break-word; overflow-wrap: anywhere;">…${item.excerpt}…</p>
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
// If the results length is greater than 10, display links to show more results
|
||||
if (resultsLength > 10) {
|
||||
resultsHTML += `<hr class="border-divider-light dark:border-divider-dark">`;
|
||||
resultsHTML += `<ul class="flex flex-wrap gap-1 pt-4 pb-8 justify-center text-sm">`;
|
||||
for (let i = 1; i <= resultsLength / 10; i++) {
|
||||
if (i == currentPage) {
|
||||
resultsHTML += `<li class="flex items-center justify-center">
|
||||
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-200 dark:bg-gray-800 dark:text-gray-200">${i}</a>
|
||||
</li>`;
|
||||
} else {
|
||||
resultsHTML += `<li class="flex items-center justify-center">
|
||||
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-100 dark:bg-gray-900 dark:text-gray-400">${i}</a>
|
||||
</li>`;
|
||||
}
|
||||
}
|
||||
resultsHTML += `</ul>`;
|
||||
}
|
||||
|
||||
searchPageResults.innerHTML = resultsHTML;
|
||||
}
|
||||
}
|
||||
|
||||
searchPageInput.addEventListener("input", (e) => onPageSearch(e));
|
||||
|
||||
// Event delegation for tracking link clicks
|
||||
if (window.heap !== undefined) {
|
||||
searchPageResults.addEventListener("click", function (event) {
|
||||
if (event.target.tagName === "A" && event.target.closest(".link")) {
|
||||
const searchQuery = event.target.getAttribute("data-query");
|
||||
const resultIndex = event.target.getAttribute("data-index");
|
||||
const url = new URL(event.target.href);
|
||||
const properties = {
|
||||
docs_search_target_path: url.pathname,
|
||||
docs_search_target_title: event.target.textContent,
|
||||
docs_search_query_text: searchQuery,
|
||||
docs_search_target_index: resultIndex,
|
||||
docs_search_source_path: window.location.pathname,
|
||||
docs_search_source_title: document.title,
|
||||
};
|
||||
heap.track("Docs - Search - Click - Result Link", properties);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user