prometheus/docs
1
0
Fork 0
mirror of https://github.com/prometheus/docs.git synced 2026-02-05 15:45:27 +01:00
Code Issues Releases Activity

Merge branch 'pagefind-debug'

Browse Source
This commit is contained in:
Julius Volz
2025-05-21 01:03:08 +02:00
parent f30a5706b7 887746868d
commit 648ab2b474
2 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -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.

36
src/components/SpotlightSearch.tsx
View File

@@ -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 (
<Spotlight.ActionsGroup label={data.meta.title}>
<Text c="red" fz="xs" px="md" py="xs">
Pagefind result ID: {result.id}
</Text>
<Spotlight.ActionsGroup
label={data.meta.title.replace("'", "\\'") || "No title"}
>
<Space h="xs" />
{data.sub_results.slice(0, 4).map((subResult, subIdx) => (
<Spotlight.Action
key={`${result.id}-${subIdx}`}
key={subIdx}
id={`${result.id}-${subIdx}`}
label={subResult.title}
description={subResult.excerpt}
onClick={() => {
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<PagefindResult[]>([]);
useEffect(() => {
@@ -138,7 +135,7 @@ export default function SpotlightSearch() {
});
} catch (e) {
window.pagefind = {
search: () => ({
debouncedSearch: () => ({
results: [
{
id: "error",
@@ -176,16 +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`);
setResults(search.results as PagefindResult[]);
setActiveQuery(query);
}}
>
<Spotlight.Search
@@ -195,13 +189,19 @@ export default function SpotlightSearch() {
<Spotlight.ActionsList>
{results.length > 0 ? (
results.map((result, idx) => (
<React.Fragment key={result.id}>
// 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
<React.Fragment key={`${activeQuery}-${result.id}`}>
{idx > 0 && <Divider my="xs" />}
<SearchResult query={searchInput} result={result} />
<SearchResult query={activeQuery} result={result} />
</React.Fragment>
))
) : (
<Spotlight.Empty>Nothing found...</Spotlight.Empty>
<Spotlight.Empty>
{activeQuery.trim() === ""
? "Type to search the documentation and blog content..."
: "Nothing found..."}
</Spotlight.Empty>
)}
</Spotlight.ActionsList>
</Spotlight.Root>