# 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](https://pagefind.app/docs/installation/). Below is the `npx` method.
1. Install `nvm` from the [git repo](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) 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](https://pagefind.app/docs/):
```
<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.