### Build from source command to run Pagefind

Source: https://pagefind.app/docs

Build and install Pagefind from source, then run it to index your site and serve a preview.

```bash
cargo install pagefind
pagefind --site public --serve

```

--------------------------------

### pip command to run Pagefind

Source: https://pagefind.app/docs

Install the Python wrapper and then run Pagefind to index your site and serve a preview.

```bash
python3 -m pip install 'pagefind[extended]'
python3 -m pagefind --site public --serve

```

--------------------------------

### Download binary command to run Pagefind

Source: https://pagefind.app/docs

Run the downloaded binary directly to index your site and serve a preview.

```bash
./pagefind --site public --serve

```

--------------------------------

### Installing the smaller standard release via Python

Source: https://pagefind.app/docs/installation

To install the smaller standard release, run:

```bash
python3 -m pip install 'pagefind[bin]'
```

--------------------------------

### npx command to run Pagefind

Source: https://pagefind.app/docs

Run this command from your terminal to index your site and serve a preview.

```bash
npx -y pagefind --site public --serve

```

--------------------------------

### Building from source

Source: https://pagefind.app/docs/installation

If you have Rust and Cargo installed, you can run `cargo install pagefind` to build from source.

```bash
cargo install pagefind
pagefind --site "public"
```

--------------------------------

### Installing specific versions via Python

Source: https://pagefind.app/docs/installation

Specific versions can be installed by passing a version.

```bash
python3 -m pip install 'pagefind[extended]==1.1.1'
```

--------------------------------

### Example usage

Source: https://pagefind.app/docs/node-api

This example demonstrates how to create a Pagefind search index, add content from a directory and custom records, and then either get the index files in-memory or write them to disk.

```javascript
import * as pagefind from "pagefind";

// Create a Pagefind search index to work with
const { index } = await pagefind.createIndex();

// Index all HTML files in a directory
await index.addDirectory({
    path: "public"
});

// Add extra content
await index.addCustomRecord({
    url: "/resume.pdf",
    content: "Aenean lacinia bibendum nulla sed consectetur",
    language: "en",
});

// Get the index files in-memory
const { files } = await index.getFiles();

// Or, write the index to disk
await index.writeFiles({
    outputPath: "public/pagefind"
});

```

--------------------------------

### Building the extended version from source

Source: https://pagefind.app/docs/installation

To build and install the extended version of Pagefind:

```bash
cargo install pagefind --features extended
pagefind --site "public"
```

--------------------------------

### Downloading a precompiled binary

Source: https://pagefind.app/docs/installation

If you prefer to install Pagefind yourself, you can download a precompiled release from GitHub and run the binary directly:

```bash
./pagefind --site "public"
# or
./pagefind_extended --site "public"
```

--------------------------------

### Capabilities Example

Source: https://pagefind.app/docs/custom-components

Example of registering a results component with both keyboard navigation and announcement capabilities.

```javascript
instance.registerResults(this, {
  keyboardNavigation: true,
  announcements: true
});

```

--------------------------------

### Install pagefind Python wrapper and extended binary

Source: https://pagefind.app/docs/py-api

To install the Python wrapper as well as the extended binary for your platform:

```bash
python3 -m pip install 'pagefind[extended]'
```

--------------------------------

### Running via Python

Source: https://pagefind.app/docs/installation

For users with a Python toolchain already installed, Pagefind publishes a wrapper package through pypi.

```bash
python3 -m pip install 'pagefind[extended]'
python3 -m pagefind --site "public"
```

--------------------------------

### Pagefind UI Snippet

Source: https://pagefind.app/docs

Add this snippet to a page to include the Pagefind search UI.

```html
<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>

<pagefind-modal-trigger></pagefind-modal-trigger>
<pagefind-modal></pagefind-modal>

```

--------------------------------

### Install pagefind Python wrapper

Source: https://pagefind.app/docs/py-api

To install just the Python wrapper, and use a `pagefind` executable from your system:

```bash
python3 -m pip install 'pagefind'
```

--------------------------------

### Include Characters Example

Source: https://pagefind.app/docs/config-options

Example of how to specify characters to be included during Pagefind indexing in a configuration file.

```yaml
include_characters: "<>$"

```

--------------------------------

### Running via npx

Source: https://pagefind.app/docs/installation

For users with a NodeJS toolchain already installed, Pagefind publishes a wrapper package through npm.

```bash
npx pagefind --site "public"
```

--------------------------------

### Install Package

Source: https://pagefind.app/docs/search-ui

Install the Pagefind Component UI package using npm.

```bash
npm install @pagefind/component-ui

```

--------------------------------

### Example Usage

Source: https://pagefind.app/docs/py-api

Example of how to use the PagefindIndex class to add files, custom records, and directories to the index.

```python
import asyncio
import json
import logging
import os
from pagefind.index import PagefindIndex, IndexConfig

logging.basicConfig(level=os.environ.get("LOG_LEVEL", "INFO"))
log = logging.getLogger(__name__)
html_content = (
    "<html>"
    "  <body>"
    "    <main>"
    "      <h1>Example HTML</h1>"
    "      <p>This is an example HTML page.</p>"
    "    </main>"
    "  </body>"
    "</html>"
)


def prefix(pre: str, s: str) -> str:
    return pre + s.replace("\n", f"\n{pre}")


async def main():
    config = IndexConfig(
        root_selector="main", logfile="index.log", output_path="./output", verbose=True
    )
    async with PagefindIndex(config=config) as index:
        log.debug("opened index")
        new_file, new_record, new_dir = await asyncio.gather(
            index.add_html_file(
                content=html_content,
                url="https://example.com",
                source_path="other/example.html",
            ),
            index.add_custom_record(
                url="/elephants/",
                content="Some testing content regarding elephants",
                language="en",
                meta={"title": "Elephants"},
            ),
            index.add_directory("./public"),
        )
        print(prefix("new_file    ", json.dumps(new_file, indent=2)))
        print(prefix("new_record  ", json.dumps(new_record, indent=2)))
        print(prefix("new_dir     ", json.dumps(new_dir, indent=2)))

        files = await index.get_files()
        for file in files:
            print(prefix("files", f"{len(file['content']):10}B {file['path']}"))


if __name__ == "__main__":
    asyncio.run(main())

```

--------------------------------

### Running specific versions via npx

Source: https://pagefind.app/docs/installation

Specific versions can be run by passing a version tag.

```bash
npx pagefind@latest --site "public"
```

```bash
npx pagefind@v1.1.1 --site "public"
```

--------------------------------

### Exclude Selectors Example

Source: https://pagefind.app/docs/config-options

Example of how to specify multiple selectors to be excluded from Pagefind indexing in a configuration file.

```yaml
exclude_selectors:
  - "#my_navigation"
  - "blockquote > span"
  - "[id^='prefix-']"

```

--------------------------------

### Running Pagefind with default configuration

Source: https://pagefind.app/docs/config-sources

This is an example of running the pagefind command with default configuration.

```bash
npx pagefind

```

--------------------------------

### Grid Layout Example

Source: https://pagefind.app/docs/components/results

Example of using CSS variables to set search results to a grid layout with responsive columns and a gap.

```css
:root {
    --pf-results-display: grid;
    --pf-results-columns: repeat(auto-fill, minmax(250px, 1fr));
    --pf-results-gap: 16px;
}

```

--------------------------------

### Accessing Translations

Source: https://pagefind.app/docs/custom-components

Examples of using the instance's translation system to get translated strings, override detected language, and add custom translation overrides.

```javascript
// Get a translated string
const text = instance.translate('zero_results', {
  SEARCH_TERM: 'hello'
});

// Override the detected language
instance.setLanguage('fr');

// Add custom translation overrides
instance.setTranslations({
  'placeholder': 'Search documentation...', 
  'zero_results': 'Nothing found for [SEARCH_TERM]'
});

```

--------------------------------

### External Bundle

Source: https://pagefind.app/docs/components/config

Example of loading Pagefind from another domain.

```html
<pagefind-config bundle-path="https://example.com/pagefind/"></pagefind-config>
```

--------------------------------

### Get raw data of all files in the Pagefind index

Source: https://pagefind.app/docs/py-api

Example of retrieving raw data for all indexed files, useful for custom integrations.

```python
for file in (await index.get_files()):
    path: str = file["path"]
    content: str = file["content"]
    ...
```

--------------------------------

### Preload

Source: https://pagefind.app/docs/components/config

Example of using the 'preload' attribute to load Pagefind immediately on page load.

```html
<pagefind-config preload></pagefind-config>
```

--------------------------------

### Programmatic Configuration

Source: https://pagefind.app/docs/components/config

Example of configuring Pagefind instances programmatically using JavaScript.

```javascript
<script>
  const { configureInstance } = window.PagefindComponents;

  configureInstance("default", {
    bundlePath: "/pagefind/",
    mergeIndex: [
      { bundlePath: "/other-site/pagefind/" }
    ],
    ranking: {
      termFrequency: 0.8
    }
  });
</script>

<pagefind-input></pagefind-input>
<pagefind-results></pagefind-results>
```

--------------------------------

### Full Template Example

Source: https://pagefind.app/docs/components/searchbox

The built-in template for the Pagefind searchbox, which can be copied and customized.

```html
<pagefind-searchbox>
  <script type="text/pagefind-template">
    {{#if and(options.show_sub_results, sub_results)}}<div class="pf-searchbox-group" role="group" aria-label="{{ meta.title | default('Untitled') }}">{{/if}}
    <a class="pf-searchbox-result" id="{{ aria.result_id }}" href="{{ meta.url | default(url) | safeUrl }}" role="option" aria-selected="false" aria-labelledby="{{ aria.title_id }}"{{#if excerpt}} aria-describedby="{{ aria.excerpt_id }}"{{/if}}>
      <p class="pf-searchbox-result-title" id="{{ aria.title_id }}">{{ meta.title | default("Untitled") }}</p>
      {{#if excerpt}}
      <p class="pf-searchbox-result-excerpt" id="{{ aria.excerpt_id }}">{{+ excerpt +}}</p>
      {{/if}}
    </a>
    {{#if and(options.show_sub_results, sub_results)}}
    {{#each sub_results as sub}}
    <a class="pf-searchbox-result pf-searchbox-subresult" id="{{ sub.aria.result_id }}" href="{{ sub.url | safeUrl }}" role="option" aria-selected="false" aria-labelledby="{{ sub.aria.title_id }}"{{#if sub.excerpt}} aria-describedby="{{ sub.aria.excerpt_id }}"{{/if}}>
      <p class="pf-searchbox-result-title" id="{{ sub.aria.title_id }}">{{ sub.title | default("Section") }}</p>
      {{#if sub.excerpt}}
      <p class="pf-searchbox-result-excerpt" id="{{ sub.aria.excerpt_id }}">{{+ sub.excerpt +}}</p>
      {{/if}}
    </a>
    {{/each}}
    </div>{{/if}}
  </script>
  <script type="text/pagefind-template" data-template="placeholder">
    <div class="pf-searchbox-result pf-searchbox-placeholder" aria-hidden="true">
      <p class="pf-searchbox-result-title pf-skeleton pf-skeleton-title"></p>
      <p class="pf-searchbox-result-excerpt pf-skeleton pf-skeleton-excerpt"></p>
    </div>
  </script>
</pagefind-searchbox>
```

--------------------------------

### Programmatic UI Control

Source: https://pagefind.app/docs/ui-usage

Examples of initializing the Pagefind UI and triggering searches and filters programmatically.

```javascript
let search = new PagefindUI({ element: "#search", showSubResults: true });

search.triggerFilters({ "Category": [ "Documentation", "Marketing" ] });

search.triggerSearch("preloaded search term");

```

--------------------------------

### Re-initializing Pagefind UI after destroy

Source: https://pagefind.app/docs/ui-usage

Example of destroying an existing Pagefind UI instance and then re-initializing it with potentially new options.

```javascript
let search = new PagefindUI({ element: "#search", showSubResults: true });
search.destroy();
search = new PagefindUI({ element: "#search", /* new options */ });

```

--------------------------------

### UI (programmatic) - Bundle Path

Source: https://pagefind.app/docs/search-config

Example of overriding the bundle directory programmatically.

```javascript
configureInstance("default", {
    bundlePath: "/subpath/pagefind/"
});
```

--------------------------------

### UI (declarative) - Bundle Path

Source: https://pagefind.app/docs/search-config

Example of overriding the bundle directory declaratively.

```html
<pagefind-config bundle-path="/subpath/pagefind/"></pagefind-config>
```

--------------------------------

### UI (programmatic) - Highlight Query Parameter

Source: https://pagefind.app/docs/search-config

Example of configuring the highlight query parameter programmatically.

```javascript
configureInstance("default", {
    highlightParam: "highlight"
});
```

--------------------------------

### Focus Management Helpers

Source: https://pagefind.app/docs/custom-components

Examples of using instance helpers for keyboard navigation between components, such as focusing the next results or previous input.

```javascript
// Find the next results component (in tab order) after this element,
// then focus its first result link
instance.focusNextResults(this);

// Find the previous input component (in tab order) before this element,
// then focus it
instance.focusPreviousInput(this);

// Find the previous input, append a character to its value,
// focus it, and dispatch an input event (triggers search)
instance.focusInputAndType(this, 'a');

// Find the previous input, remove the last character from its value,
// focus it, and dispatch an input event (triggers search)
instance.focusInputAndDelete(this);

```

--------------------------------

### Full Template Example

Source: https://pagefind.app/docs/components/results

The built-in template for pagefind-results, which can be copied and customized.

```html
<pagefind-results>
  <script type="text/pagefind-template">
    <li class="pf-result">
      <div class="pf-result-card">
        {{#if and(options.show_images, meta.image)}}
        <img class="pf-result-image" src="{{ meta.image | resolveUrl(meta.url | default(url)) }}" alt="{{ meta.image_alt | default(meta.title) }}">
        {{/if}}
        <div class="pf-result-content">
          <p class="pf-result-title">
            <a class="pf-result-link" href="{{ meta.url | default(url) | safeUrl }}"{{#if options.link_target}} target="{{ options.link_target }}"{{/if}}{{#if eq(options.link_target, "_blank")}} rel="noopener"{{/if}}>{{ meta.title }}</a>
          </p>
          {{#if excerpt}}
          <p class="pf-result-excerpt">{{+ excerpt +}}</p>
          {{/if}}
        </div>
      </div>
      {{#if sub_results}}
      <ul class="pf-heading-chips">
        {{#each sub_results as sub}}
        <li class="pf-heading-chip">
          <a class="pf-heading-link" href="{{ sub.url | safeUrl }}"{{#if options.link_target}} target="{{ options.link_target }}"{{/if}}{{#if eq(options.link_target, "_blank")}} rel="noopener"{{/if}}>{{ sub.title }}</a>
          <p class="pf-heading-excerpt">{{+ sub.excerpt +}}</p>
        </li>
        {{/each}}
      </ul>
      {{/if}}
    </li>
  </script>
  <script type="text/pagefind-template" data-template="placeholder">
    <li class="pf-result" aria-hidden="true">
      <div class="pf-result-card">
        <div class="pf-skeleton pf-skeleton-image"></div>
        <div class="pf-result-content">
          <p class="pf-result-title pf-skeleton pf-skeleton-title"></p>
          <p class="pf-result-excerpt pf-skeleton pf-skeleton-excerpt"></p>
        </div>
      </div>
    </li>
  </script>
</pagefind-results>
```

--------------------------------

### UI (programmatic) - Base URL

Source: https://pagefind.app/docs/search-config

Example of setting the base URL programmatically.

```javascript
configureInstance("default", {
    baseUrl: "/docs/"
});
```

--------------------------------

### UI (declarative) - Base URL

Source: https://pagefind.app/docs/search-config

Example of setting the base URL declaratively.

```html
<pagefind-config base-url="/docs/"></pagefind-config>
```

--------------------------------

### Registering Components

Source: https://pagefind.app/docs/custom-components

Example of registering a custom input component with the instance, enabling features like keyboard navigation.

```javascript
class MyCustomInput extends HTMLElement {
  connectedCallback() {
    const instance = getInstanceManager().getInstance('default');

    // Register as an input component with capabilities
    instance.registerInput(this, {
      keyboardNavigation: true  // Participates in arrow-key navigation
    });
  }
}

```

--------------------------------

### Named Instance

Source: https://pagefind.app/docs/components/config

Example of configuring and using named Pagefind instances for different sections of a website.

```html
<pagefind-config instance="docs" preload bundle-path="/docs/pagefind/"></pagefind-config>
<pagefind-config instance="blog" bundle-path="/blog/pagefind/"></pagefind-config>

<!-- Use each instance -->
<pagefind-input instance="docs" placeholder="Search docs..."></pagefind-input>
<pagefind-input instance="blog" placeholder="Search blog..."></pagefind-input>
```

--------------------------------

### Querying Registered Components

Source: https://pagefind.app/docs/custom-components

Examples of how to query registered components, filtering by capability or component type.

```javascript
// Get all inputs that support keyboard navigation
const inputs = instance.getInputs('keyboardNavigation');

// Get all components of a given type
const results = instance.getResults();
const summaries = instance.getSummaries();
const filters = instance.getFilters();
const sorts = instance.getSorts();
const utilities = instance.getUtilities('modal');

```

--------------------------------

### Searchbox Component

Source: https://pagefind.app/docs/search-ui

Example of using the Pagefind searchbox component.

```html
<pagefind-searchbox></pagefind-searchbox>

```

--------------------------------

### Basic Template

Source: https://pagefind.app/docs/components/searchbox

Example of a basic custom template for search results.

```html
<pagefind-searchbox>
  <script type="text/pagefind-template">
    <a class="my-result" id="{{ aria.result_id }}" href="{{ meta.url | default(url) | safeUrl }}" role="option" aria-selected="false" aria-labelledby="{{ aria.title_id }}">
      <p id="{{ aria.title_id }}">{{ meta.title }}</p>
      {{#if excerpt}}
      <p>{{+ excerpt +}}</p>
      {{/if}}
    </a>
  </script>
</pagefind-searchbox>
```

--------------------------------

### Page Length Configuration

Source: https://pagefind.app/docs/ranking

Example of configuring the `pageLength` parameter.

```javascript
await pagefind.options({
    ranking: {
        pageLength: 0.75 // default value
    }
});

```

--------------------------------

### UI (declarative) - Highlight Query Parameter

Source: https://pagefind.app/docs/search-config

Example of configuring the highlight query parameter declaratively.

```html
<pagefind-config highlight-param="highlight"></pagefind-config>
```

--------------------------------

### Custom Bundle Path

Source: https://pagefind.app/docs/components/config

Example of setting a custom bundle path when Pagefind files are in a non-standard location.

```html
<pagefind-config bundle-path="/docs/search/pagefind/"></pagefind-config>
```

--------------------------------

### Search API - Bundle Path

Source: https://pagefind.app/docs/search-config

Example of overriding the bundle directory via the Search API.

```javascript
await pagefind.options({
    basePath: "/subpath/pagefind/"
});
```

--------------------------------

### UI (declarative) - Excerpt Length

Source: https://pagefind.app/docs/search-config

Example of setting the maximum excerpt length declaratively.

```html
<pagefind-config excerpt-length="15"></pagefind-config>
```

--------------------------------

### Custom Search Trigger Usage

Source: https://pagefind.app/docs/custom-components

Example of how to use the custom 'quick-search-button' element in HTML.

```html
<quick-search-button term="getting started">Quick Start</quick-search-button>
```

--------------------------------

### UI (programmatic) - Excerpt Length

Source: https://pagefind.app/docs/search-config

Example of setting the maximum excerpt length programmatically.

```javascript
configureInstance("default", {
    excerptLength: 15
});
```

--------------------------------

### Changing index weighting with Component UI and JS API

Source: https://pagefind.app/docs/multisite

Examples demonstrating how to change the weighting of individual indexes for both Component UI and the JS API.

```javascript
// Component UI:
const { configureInstance } = window.PagefindComponents;

configureInstance("default", {
    indexWeight: 2,
    mergeIndex: [{
        bundlePath: "https://docs.example.com/pagefind",
        indexWeight: 0.5
    }]
});

// JS API:
const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({ indexWeight: 2 });
await pagefind.mergeIndex("https://docs.example.com/pagefind", {
    indexWeight: 0.5
});

```

--------------------------------

### Customising the styles with CSS custom properties

Source: https://pagefind.app/docs/ui-usage

Example of CSS custom properties that can be used to tweak the Pagefind UI's appearance.

```css
--pagefind-ui-scale: 1;
--pagefind-ui-primary: #034ad8;
--pagefind-ui-text: #393939;
--pagefind-ui-background: #ffffff;
--pagefind-ui-border: #eeeeee;
--pagefind-ui-tag: #eeeeee;
--pagefind-ui-border-width: 2px;
--pagefind-ui-border-radius: 8px;
--pagefind-ui-image-border-radius: 8px;
--pagefind-ui-image-box-ratio: 3 / 2;
--pagefind-ui-font: sans-serif;

```

--------------------------------

### Metadata Weights Configuration (Custom Boosts)

Source: https://pagefind.app/docs/ranking

Example of configuring custom boosts for author and description metadata fields.

```javascript
await pagefind.options({
    ranking: {
        metaWeights: {
            author: 3.0,
            description: 2.0
        }
    }
});
```

--------------------------------

### Merging additional indexes with Component UI with options

Source: https://pagefind.app/docs/multisite

Example of configuring the Component UI to merge an additional index with specific options.

```javascript
// Running on blog.example.com

const { configureInstance } = window.PagefindComponents;

configureInstance("default", {
    // ... options for the blog.example.com index
    mergeIndex: [{
        bundlePath: "https://docs.example.com/pagefind",
        // ... options for the docs.example.com index
    }]
});

```

--------------------------------

### Search API - Highlight Query Parameter

Source: https://pagefind.app/docs/search-config

Example of configuring the highlight query parameter via the Search API.

```javascript
await pagefind.options({
    highlightParam: "highlight"
});
```

--------------------------------

### Search API - Base URL

Source: https://pagefind.app/docs/search-config

Example of setting the base URL via the Search API.

```javascript
await pagefind.options({
    baseUrl: "/docs/"
});
```

--------------------------------

### UI (programmatic) - Meta Cache Tag

Source: https://pagefind.app/docs/search-config

Example of setting a meta cache tag programmatically.

```javascript
configureInstance("default", {
    metaCacheTag: "abc123"
});
```

--------------------------------

### UI (declarative) - Meta Cache Tag

Source: https://pagefind.app/docs/search-config

Example of setting a meta cache tag declaratively.

```html
<pagefind-config meta-cache-tag="abc123"></pagefind-config>
```

--------------------------------

### Search API - Excerpt Length

Source: https://pagefind.app/docs/search-config

Example of setting the maximum excerpt length via the Search API.

```javascript
await pagefind.options({
    excerptLength: 15
});
```

--------------------------------

### UI (programmatic) - Component UI

Source: https://pagefind.app/docs/search-config

Options can be passed through to Pagefind via `configureInstance`. Import the function based on how you installed the Component UI.

```javascript
// If installed via a package manager:
import { configureInstance } from '@pagefind/component-ui';
// If loaded via script tag:
const { configureInstance } = window.PagefindComponents;

configureInstance("default", {
    baseUrl: "/",
    // ... more search options
});
```

--------------------------------

### Vanilla JavaScript Debounced Search with Preload

Source: https://pagefind.app/docs/api

An example of implementing debounced search with preloading in vanilla JavaScript using an event listener.

```javascript
const search = (term) => { /* your main search code */ };
const debouncedSearch = _.debounce(search, 300);

inputElement.addEventListener('input', (e) => {
    pagefind.preload(e.target.value);
    debouncedSearch(e.target.value)
})
```

--------------------------------

### Merging additional indexes with Component UI

Source: https://pagefind.app/docs/multisite

Example of configuring the Component UI to merge an additional index from a different domain.

```javascript
// Running on blog.example.com

const { configureInstance } = window.PagefindComponents;

configureInstance("default", {
    mergeIndex: [{
        bundlePath: "https://docs.example.com/pagefind"
    }]
});

```

--------------------------------

### Getting metadata from a search result

Source: https://pagefind.app/docs/js-api-metadata

This code snippet demonstrates how to get metadata from a search result using the Pagefind JavaScript API.

```javascript
const pagefind = await import("/pagefind/pagefind.js");
const search = await pagefind.search("static");
const oneResult = await search.results[0].data();
```

```json
{
  /* ... other result keys ... */
  "url": "/url-of-the-page/",
  "excerpt": "A small snippet of the <mark>static</mark> content, from the &lt;body&gt; of the page.",
  "plain_excerpt": "A small snippet of the static content, from the &lt;body&gt; of the page.",
  "meta": {
    "title": "The title from the first h1 element on the page",
    "image": "/weka.png",
    "my-custom-key": "My custom metadata content",
  }
}
```

--------------------------------

### Merging additional indexes with Pagefind JS API with options

Source: https://pagefind.app/docs/multisite

Example of using the Pagefind JS API to merge an additional index with specific options.

```javascript
// Running on blog.example.com

const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({/* ... options for the blog.example.com index */});
await pagefind.mergeIndex(
  "https://docs.example.com/pagefind",
  {/* ... options for the docs.example.com index */}
);

```

--------------------------------

### Metadata Weights Configuration (Default Title Boost)

Source: https://pagefind.app/docs/ranking

Example of how to configure the metaWeights option, specifically for the title field.

```javascript
await pagefind.options({
    ranking: {
        metaWeights: {
            title: 5.0 // default value
        }
    }
});
```

--------------------------------

### Basic Component Connection

Source: https://pagefind.app/docs/components

This example shows how Pagefind components automatically connect to each other on the same page. The `pagefind-input` triggers searches, `pagefind-summary` shows the count, and `pagefind-results` displays the matches.

```html
<pagefind-input></pagefind-input>
<pagefind-summary></pagefind-summary>
<pagefind-results></pagefind-results>
```

--------------------------------

### Specifying metadata inline

Source: https://pagefind.app/docs/metadata

If your metadata doesn’t already exist on the page, you can use the syntax `key:value`

```html
<h1 data-pagefind-meta="date:2022-06-01">Hello World</h1>
```

--------------------------------

### Indexing special characters example

Source: https://pagefind.app/docs/indexing

Demonstrates how Pagefind indexes content with special characters and how the 'Include Characters' option affects indexing and search.

```html
<p>The &lt;head&gt; tag</p>
```

--------------------------------

### Write index files to disk

Source: https://pagefind.app/docs/py-api

Examples of explicitly writing index files to disk, including specifying output paths and managing context behavior.

```python
config = IndexConfig(
    output_path="./public/pagefind",
)
async with PagefindIndex(config=config) as index:
    # ... add content to index

    # write files to the configured output path for the index:
    await index.write_files()

    # write files to a different output path:
    await index.write_files(output_path="./custom/pagefind")

    # prevent also writing files when closing the `PagefindIndex`:
    await index.delete_index()
```

--------------------------------

### Resolve URL Filter Example

Source: https://pagefind.app/docs/components/results

Example of using the resolveUrl filter to resolve a relative URL.

```javascript
"images/hero.png" | resolveUrl("/blog/post/")  →  /blog/post/images/hero.png
```

--------------------------------

### Capturing metadata from an attribute

Source: https://pagefind.app/docs/metadata

If your metadata exists as an attribute, you can use the syntax `key[html_attribute]`

```html
<img data-pagefind-meta="image[src]" src="/hero.png" />
```

--------------------------------

### Specifying multiple filters on a single element

Source: https://pagefind.app/docs/filtering

Shows how to apply multiple filters to a single element, including inline filters.

```html
<h1
    data-section="Documentation"
    data-category="Article"
    data-pagefind-filter="heading, tag[data-section], tag[data-category], author:Freeform text, captured to the end">
        Hello World
</h1>

```

--------------------------------

### Multiple values per page

Source: https://pagefind.app/docs/filtering

Demonstrates how a page can have multiple values for a single filter.

```html
<h1>Hello World</h1>
<p>
    Authors:
    <span data-pagefind-filter="author">Pagefind</span>
    and
    <span data-pagefind-filter="author">Liam Bigelow</span>
</p>

```

--------------------------------

### Basic Usage

Source: https://pagefind.app/docs/components/filter-dropdown

A basic example of the filter dropdown component.

```html
<pagefind-filter-dropdown filter="section" label="Section"></pagefind-filter-dropdown>

```

--------------------------------

### Output of multiple sorts

Source: https://pagefind.app/docs/sorts

This will produce the sort tags for the page:

```json
{
    "heading": "Hello World",
    "weight": "10",
    "date": "2022-06-01",
    "author": "Freeform text, captured to the end"
}

```

--------------------------------

### Show images

Source: https://pagefind.app/docs/ui

Whether to show an image alongside each search result. Defaults to `true`.

```javascript
new PagefindUI({
    element: "#search",
    showImages: false
});
```

--------------------------------

### Defining default metadata

Source: https://pagefind.app/docs/metadata

All of the above tags can also be supplied as a `data-pagefind-default-meta` attribute. All logic is the same, except that automatic metadata and any `data-pagefind-meta` attributes will take priority.

```html
<head>
    <meta data-pagefind-default-meta="image[content]" content="/social.png" property="og:image">
</head>
```

--------------------------------

### Import Approach

Source: https://pagefind.app/docs/custom-components

Importing and using the instance manager to interact with Pagefind components programmatically.

```javascript
import { getInstanceManager } from '@pagefind/component-ui';

// Get the instance (creates one if it doesn't exist)
const manager = getInstanceManager();
const instance = manager.getInstance('default');

// Listen to search events
instance.on('results', (searchResult) => {
  console.log(`Found ${searchResult.results.length} results`);
});

// Trigger a search
instance.triggerSearch('hello world');
```

--------------------------------

### Term Saturation Configuration

Source: https://pagefind.app/docs/ranking

Example of configuring the `termSaturation` parameter.

```javascript
await pagefind.options({
    ranking: {
        termSaturation: 1.4 // default value
    }
});

```

--------------------------------

### Term Similarity Configuration

Source: https://pagefind.app/docs/ranking

Example of configuring the `termSimilarity` parameter.

```javascript
await pagefind.options({
    ranking: {
        termSimilarity: 1.0 // default value
    }
});

```

--------------------------------

### Term Frequency Configuration

Source: https://pagefind.app/docs/ranking

Example of configuring the `termFrequency` parameter.

```javascript
await pagefind.options({
    ranking: {
        termFrequency: 1.0 // default value
    }
});

```

--------------------------------

### Minimal Pagefind CLI command

Source: https://pagefind.app/docs/running-pagefind

The basic command to index a static site with Pagefind. The `--site` flag should point to the directory containing static HTML files.

```bash
npx pagefind --site public
```

--------------------------------

### Adding the Pagefind UI to a page

Source: https://pagefind.app/docs/ui-usage

This snippet shows how to include the Pagefind UI CSS and JavaScript, and initialize the UI component on a page.

```html
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>

<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

```

--------------------------------

### Diacritic Similarity Configuration

Source: https://pagefind.app/docs/ranking

Example of how to configure the diacriticSimilarity option in Pagefind.

```javascript
await pagefind.options({
    ranking: {
        diacriticSimilarity: 0.8 // default value
    }
});
```

--------------------------------

### Capturing multiple metadata attributes

Source: https://pagefind.app/docs/metadata

You can comma separate multiple meta attributes.

```html
<img data-pagefind-meta="image[src], image_alt[alt]" src="/hero.png" alt="Hero Alt Text" />
```

--------------------------------

### Custom Results Counter Usage

Source: https://pagefind.app/docs/custom-components

Example of how to use the custom 'my-results-counter' element in HTML.

```html
<pagefind-input></pagefind-input>
<my-results-counter></my-results-counter>
<pagefind-results></pagefind-results>
```

--------------------------------

### markContext Option

Source: https://pagefind.app/docs/highlight-config

Example of setting the markContext option to specify the area for highlighting text.

```javascript
new PagefindHighlight({ markContext: "[data-pagefind-body]" })
```

--------------------------------

### UI (programmatic) - Exact Diacritics

Source: https://pagefind.app/docs/search-config

Example of enabling exact diacritics matching programmatically.

```javascript
configureInstance("default", {
    exactDiacritics: true
});
```

--------------------------------

### UI (declarative) - Exact Diacritics

Source: https://pagefind.app/docs/search-config

Example of enabling exact diacritics matching declaratively.

```html
<pagefind-config exact-diacritics></pagefind-config>
```

--------------------------------

### Capturing a filter value from an attribute

Source: https://pagefind.app/docs/filtering

Captures the filter value from a specified HTML attribute.

```html
<head>
    <meta
        data-pagefind-filter="author[content]"
        content="Pagefind"
        property="og:site_name">
</head>

```

--------------------------------

### Configuring the search API

Source: https://pagefind.app/docs/api

Pagefind options can be set before running pagefind.init(). Calls to pagefind.options may also be made after initialization, however passing in settings such as bundlePath after initialization will have no impact.

```javascript
const pagefind = await import("/pagefind/pagefind.js");

await pagefind.options({
    bundlePath: "/custom-pagefind-directory/"
});

pagefind.init();
```

--------------------------------

### Slash Focus with Custom Placeholder

Source: https://pagefind.app/docs/ui

Combines the "focus on slash" feature with a custom placeholder to inform users about the shortcut.

```javascript
new PagefindUI({
    element: "#search",
    focusOnSlash: true,
    translations: {
        placeholder: "Press / to search"
    }
});
```

--------------------------------

### Environment variables configuration

Source: https://pagefind.app/docs/config-sources

Pagefind will load any values via a PAGEFIND_* environment variable.

```bash
export PAGEFIND_OUTPUT_SUBDIR="pagefind"
PAGEFIND_SITE="public" npx pagefind

```

--------------------------------

### highlightParam Option

Source: https://pagefind.app/docs/highlight-config

Example of setting the highlightParam option to specify the query parameter for highlighting terms.

```javascript
new PagefindHighlight({ highlightParam: "highlight" })
```

--------------------------------

### Capturing metadata from an element

Source: https://pagefind.app/docs/metadata

An element tagged with `data-pagefind-meta` will store the contents of that element and return it alongside the search results.

```html
<h1 data-pagefind-meta="title">Hello World</h1>
```

--------------------------------

### Import CSS and Components

Source: https://pagefind.app/docs/search-ui

Import the CSS and components in your JavaScript file.

```javascript
import '@pagefind/component-ui';
import '@pagefind/component-ui/css';

```

--------------------------------

### CLI flags configuration

Source: https://pagefind.app/docs/config-sources

Pagefind can be passed CLI flags directly.

```bash
npx pagefind --site public --output-subdir pagefind

```

--------------------------------

### Capturing a filter value from an element

Source: https://pagefind.app/docs/filtering

Associates a page with a filter name and captures the element's content as the filter value.

```html
<h1>My Blog Post</h1>
<p>
    Author:
    <span data-pagefind-filter="author">bglw</span>
</p>

```

--------------------------------

### Initializing Pagefind

Source: https://pagefind.app/docs/api

Import and initialize Pagefind with the following code. Initialization can be omitted and will happen automatically when the first searching or filtering function is called.

```javascript
const pagefind = await import("/pagefind/pagefind.js");

pagefind.init();
```