From fce49082c167ffed086100abb5e9dff67bb85435 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Tue, 20 May 2025 22:29:15 +0200 Subject: [PATCH 1/3] Make Pagefind result ID debug output prettier Signed-off-by: Julius Volz --- src/components/SpotlightSearch.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/SpotlightSearch.tsx b/src/components/SpotlightSearch.tsx index d9e6cb48..b989a3f1 100644 --- a/src/components/SpotlightSearch.tsx +++ b/src/components/SpotlightSearch.tsx @@ -48,6 +48,9 @@ const SearchResult = ({ return ( + + Pagefind result ID: {result.id} + {data.sub_results.slice(0, 4).map((subResult, subIdx) => ( 0 ? ( results.map((result, idx) => ( - |{result.id}|{idx > 0 && } + {idx > 0 && } )) From 2ef8feaa866d9fc719c57b3d2754f6d52b6b8f7e Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Tue, 20 May 2025 22:39:14 +0200 Subject: [PATCH 2/3] Include more debug output Signed-off-by: Julius Volz --- src/components/SpotlightSearch.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SpotlightSearch.tsx b/src/components/SpotlightSearch.tsx index b989a3f1..14bd099a 100644 --- a/src/components/SpotlightSearch.tsx +++ b/src/components/SpotlightSearch.tsx @@ -185,6 +185,7 @@ export default function SpotlightSearch() { return; } console.log(`Found ${search.results.length} results`); + console.log("All results:", search.results); setResults(search.results as PagefindResult[]); }} > From 887746868d263976993f840cb58737185c536774 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Wed, 21 May 2025 01:01:35 +0200 Subject: [PATCH 3/3] Fix and clean up Spotlight Pagefind search Signed-off-by: Julius Volz --- README.md | 14 +++++++---- src/components/SpotlightSearch.tsx | 37 +++++++++++++++--------------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 14de408e..b540684f 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This repository contains both the content and the static-site generator code for the Prometheus documentation site and associated landing pages. -This is a [Next.js](https://nextjs.org)-based website. +This is a [Next.js](https://nextjs.org)-based website with some custom code to integrate documentation from other repositories and fetch information about available Prometheus component downloads from GitHub. ## Contributing Changes @@ -52,14 +52,16 @@ To build the website, run: npm run build-all ``` -This cleans any previous build artifacts, fetches the latest documentation from the Prometheus and Alertmanager repositories, fetches information about available downloads (for the Download page) and builds the website. The output is a static website in the `out` directory. +This cleans any previous build artifacts, fetches the latest documentation from the Prometheus and Alertmanager repositories, fetches information about available downloads (for the Download page), builds the website, and then indexes it (for the built-in [Pagefind](https://pagefind.app/)-based search functionality). + +The final output is a static website in the `out` directory. You can also run each of these build steps separately: -* `npm run clean` - Cleans the `out` directory. +* `npm run clean` - Cleans any build output and generated files from previous runs. * `npm run fetch-repo-docs` - Fetches the latest documentation from the Prometheus and Alertmanager repositories. * `npm run fetch-downloads-info` - Fetches information about available downloads (for the Download page). -* `npm run build` - Builds the website. +* `npm run build` - Builds the website. Note: This also runs the `postbuild` script, which generates [Pagefind](https://pagefind.app/) search indexes. ### Serving the static output @@ -83,9 +85,11 @@ This will start a web server on port 3000. You can access the website at [http:/ The website will automatically reload when you make changes to the source files. +NOTE: Spotlight search is not available in development mode, as it requires building a [Pagefind](https://pagefind.app/) index on the static output and then loading the generated `/pagefind/pagefind.js` file. This only happens when building the app for production via `npm run build` (part of `npm run build-all`). + ## Configuration -Some high-level settings for the documentation website are configured using the [`docs-config.ts`](docs-config.ts) file in the root of the repository. This file configures: +You can configure some high-level settings for the documentation website in the [`docs-config.ts`](docs-config.ts) file in the root of the repository. This file configures: * The base URL of the website. * Which repositories to fetch documentation from. diff --git a/src/components/SpotlightSearch.tsx b/src/components/SpotlightSearch.tsx index 14bd099a..15f6defe 100644 --- a/src/components/SpotlightSearch.tsx +++ b/src/components/SpotlightSearch.tsx @@ -3,14 +3,14 @@ import { Spotlight } from "@mantine/spotlight"; import { IconSearch } from "@tabler/icons-react"; import { useRouter } from "next/navigation"; -import { Divider, Group, Highlight, Loader, Space, Text } from "@mantine/core"; +import { Divider, Group, Highlight, Loader, Space } from "@mantine/core"; import React, { useState, useEffect } from "react"; import { decode } from "html-entities"; // Extend Window interface to include pagefind declare global { interface Window { - /* eslint-disable @typescript-eslint/no-explicit-any */ + /* eslint-disable @typescript-eslint/no-explicit-any */ pagefind: any; } } @@ -47,17 +47,14 @@ const SearchResult = ({ } return ( - - - Pagefind result ID: {result.id} - + {data.sub_results.slice(0, 4).map((subResult, subIdx) => ( { router.push( subResult.url.replace(/(\/[^?#]+)\.html(?=[?#]|$)/, "$1") @@ -120,7 +117,7 @@ type PagefindResult = { }; export default function SpotlightSearch() { - const [searchInput, setSearchInput] = useState(""); + const [activeQuery, setActiveQuery] = useState(""); const [results, setResults] = useState([]); useEffect(() => { @@ -138,7 +135,7 @@ export default function SpotlightSearch() { }); } catch (e) { window.pagefind = { - search: () => ({ + debouncedSearch: () => ({ results: [ { id: "error", @@ -176,17 +173,13 @@ export default function SpotlightSearch() { maxHeight="90vh" scrollable onQueryChange={async (query) => { - setSearchInput(query); - console.log("searching for", query); const search = await window.pagefind.debouncedSearch(query); if (search === null) { // A more recent search call has been made, nothing to do. - console.log("search cancelled"); return; } - console.log(`Found ${search.results.length} results`); - console.log("All results:", search.results); setResults(search.results as PagefindResult[]); + setActiveQuery(query); }} > {results.length > 0 ? ( results.map((result, idx) => ( - + // The result ID can be the same between search terms and is not sufficient + // as a React key, see https://github.com/CloudCannon/pagefind/issues/816 + {idx > 0 && } - + )) ) : ( - Nothing found... + + {activeQuery.trim() === "" + ? "Type to search the documentation and blog content..." + : "Nothing found..."} + )}