Website Search Functionality

Website search functionality

I recently integrated pagefind, a static-site search library, to achieve an integrated website search and to provide tailored search functionalities across different sections of my content.

One of the initial steps was configuring pagefind to index the correct content. Given the structure of my website, which includes a blog alongside other sections like projects, mathematics, and physics notes, I needed a precise glob pattern. The complexity arose from the need to include various directories while specifically excluding sitemap files and blog archive pages, focusing solely on individual blog posts. The resulting glob configuration became quite complex to accurately target all relevant HTML files across my diverse content sections.

To enable filtered searches, I leveraged pagefind’s filtering capabilities through data attributes. For blog posts, I implemented a data attribute data-section="blog" within the <article> tag.

<article ... data-section="blog" data-pagefind-filter="section[data-section]">
 <!-- Blog post content -->
</article>

For other website sections, I used a similar data-section attribute along with tag attributes like data-tag-1, data-tag-2, to categorize content by topic. This approach allows for multifaceted filtering beyond just content type.

<div class="section" data-section="website" data-tag-1="physics" data-tag-2="quantum-mechanics" data-pagefind-filter="section[data-section], tag[data-tag-1], tag[data-tag-2]">
 <!-- Website section content -->
</div>

I implemented two distinct search interfaces using PagefindUI. The first is a site-wide search, encompassing all indexed content. This is achieved with the standard PagefindUI initialisation.

/* global PagefindUI */
'use strict';
document.addEventListener('DOMContentLoaded', function() {
 new PagefindUI({
    element: "#search-site",
    showSubResults: true,
    showEmptyFilters: false,
    showImages: false
  });
});

The second search interface is specifically for the blog section. For this, I configured PagefindUI with a pre-applied filter for section: blog. This ensures that users searching within the blog interface only see blog post results, streamlining their search within that specific content category. The filter panel is hidden for the blog-specific search as the filter is pre-set, simplifying the user interface.

/* global PagefindUI */
'use strict';
document.addEventListener('DOMContentLoaded', function() {
  const search = new PagefindUI({
    element: "#search-blog",
    showSubResults: true,
    showImages: false,
    filters: {
      section: [
        { filter: "blog", display: "Blog Posts" }
      ]
    }
  });
  search.triggerFilters({ "section": ["blog"] });
});

.pagefind-ui__filter-panel {
  display: none !important;
}

Finally, to ensure pagefind’s search interface aligned with my website’s visual style, I applied custom CSS. This involved overriding PagefindUI’s default CSS variables to match my site’s color scheme, typography, and overall aesthetic. Adjustments were made to input field heights, font weights, result title sizes, and highlight colors to create a cohesive and integrated search experience.

:root {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-primary: #0083B3;
  --pagefind-ui-text: #606060;
}

.pagefind-ui__search-input.svelte-e9gkc3 {
  height:50px !important;
  font-weight:300 !important;
}

/* ... other CSS rules ... */

.pagefind-ui mark {
  background-color: #0083B3 !important;
  color: #F8F8F2 !important;
}

Through these configurations and customisations, I successfully integrated pagefind into my website, providing users with enhanced search functionality tailored to different content sections and visually consistent with my site’s design.