libertytoolsio/pagefind_instructions.md

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.