# pagefind_instructions

# Instructions for Installing and Running PageFind

## Install `nvm` and `npx`

There are a few ways to install PageFind. I used the `npx` method, but you can check out other ways from their website. Below is the `npx` method. 1. Install `nvm` from the git repo using the `Install and Update Script`. - `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash` - `nvm install --lts` 2. Install `npm` - `sudo apt install npm` 3. Verify Installations - `which npx` should print out the path to the `npx` binary. - `npx --version` should give you the version that was installed.

## Include PageFind Script into Website

1. In the `config.toml` file of the root of the `libertytools.io` project, set the following:
   - `BookSearch = true`
2. `cd libertytoolsio/themes/hugo-book/layouts/_partials/docs`
3. Make a backup of `search.html`:
   - `cp search.html search.html.bkup`
4. Open `search.html` and delete the contents. Replace the contents with the following script from the pagefind website:

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

## Index the Website

Once the pagefind script has been copied into the `libertytoolsio/themes/hugo-book/layouts/_partials/docs/search.html`, the search bar should persist across all pages created. To index the website for pagefind we first have to build the site using `hugo`, then we will have to index the contents of the site using the `npx` wrapper. 1. Build the site: - From the project root (i.e. `libertytoolsio/`), - `hugo serve` 2. Building the site will publish the html and shit to the `public/` directory. We now have to index and rebuild the site in order for pagefind to persist: - From the project root, `npx -y pagefind --site public --serve` - If all goes well, you should see something like `Serving "public" at http://localhost:1414` at the bottom of the output. Paste the address `http://localhost:1414` into a browser. You should now see the search bar in the upper left, and it should be available on all pages.