0.0.4

Site Search

A pure vanilla JS implementation based of Combobox and Pagefind API Opens in a new window

It allows indexing and searching static sites without third parties and no database

Anatomy

The Site Search component consists of the following data-part

root label control title input trigger positioner content 
<div class="site-search-js site-search" data-placeholder="Search documentation">
                  <div data-part="root">
                  <div data-part="control">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="site-search__icon">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                  </svg>
                  <input data-part="input">
                  </div>
                  <div data-part="positioner">
                  <ul data-part="content" class="scrollbar">
                  </ul>
                  </div>
                  </div>
                  </div>

Before using Pagefind, you need to build your site and run the indexing process.

If you're using Vite, start by building your site:

npm run build

Once the build is complete, run Pagefind to index your site:

npm install -D pagefind

npx pagefind --site "dist"

Finally, make sure to initialize Pagefind in your main TypeScript file.

                  import { initializeSiteSearch } from "@netoum/corex/components/site-search";
                      (async () => {
                      try {
                      // @ts-ignore
                      const pagefind = await import("../dist/pagefind/pagefind.js");
                      await pagefind.options({
                      bundlePath: "../dist/pagefind/pagefind.js",
                      baseUrl: "/",
                      });
                      await pagefind.init();
                      console.log("Pagefind initialized");
                      initializeSiteSearch(pagefind);
                      } catch (error) {
                      console.error("Failed to initialize Pagefind:", error);
                      }
                      })();

Data attributes

Each site-search can be set with different settings with the following data-attribute.

Refer to the Comboxbox component for more details

Templates

Site Search components is available in the followng templates

Collapsible Date Picker