auto-pagefind

Use Pagefind with any live server.

Insallation

Install the modules required for the program.

1. cargo install spider_cli
2. cargo install pagefind
3. cargo install auto-pagefind

Getting Started

1. Start the dev or prod instance on port 3000 and run auto-pagefind at the root directory of your next application to create your search index's and output the content into the public folder.

2. Optional: Add data-pagefind-meta="url[href]" on your meta hrefLang links example: <link rel="alternate" hrefLang="en" href="https://a11ywatch.com/blog/version-your-proto-definitions-for-stablity" data-pagefind-meta="url[href]"/> to replace the location of the links.

3. Setup pagefind client loading in the your project. The example before uses the layout to setup the PageFindUI wasm module once for next.js.

```tsx // pagefind.tsx import { useEffect, useRef } from "react";

export const PageFind = () => { const loaded = useRef(false);

useEffect(() => { if (!loaded.current) { loaded.current = true; let observer: MutationObserver;

  const PagefindUI =
    // @ts-ignore
    typeof window.PagefindUI !== "undefined" && window.PagefindUI;

  if (PagefindUI) {
    try {
      new PagefindUI({
        element: "#search",
        resetStyles: false,
        showImages: false,
        showEmptyFilters: false,
      });

      // delete the observer code below if you did step 2 and target production websites
      const pagefindDrawer = document.querySelector(".pagefind-ui__drawer");

      // replace the .html from links with path
      if (pagefindDrawer) {
        const callback = () => {
          const links: NodeListOf<HTMLAnchorElement> =
            document.querySelectorAll(".pagefind-ui__result-link");

          for (const link of links) {
            link.href = link.href.replace(".html", "");
          }
        };

        observer = new MutationObserver(callback);

        observer.observe(pagefindDrawer, {
          attributes: false,
          childList: true,
          subtree: true,
        });
      }
    } catch (e) {
      console.error(e);
    }
  }

  return () => {
    if (observer) {
      observer.disconnect();
    }
  };
}

}, [loaded]);

return

```tsx // layout.tsx import React from "react";

// use layout for scripts _pagefind export function Layout({ children }) { return ( <>