https://github.com/zwbetz-gh/hugo-client-side-search-template

A lightweight, fuzzy, client-side search template for Hugo
https://github.com/zwbetz-gh/hugo-client-side-search-template

fusejs

Last synced: about 1 month ago
JSON representation

A lightweight, fuzzy, client-side search template for Hugo

• Host: GitHub
• URL: https://github.com/zwbetz-gh/hugo-client-side-search-template
• Owner: zwbetz-gh
• License: mit
• Created: 2022-07-14T03:21:38.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-16T13:29:35.000Z (8 months ago)
• Last Synced: 2024-08-04T01:12:59.407Z (5 months ago)
• Topics: fusejs
• Language: JavaScript
• Homepage: https://hugo-client-side-search-template.netlify.app/
• Size: 1.16 MB
• Stars: 17
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hugo - A lightweight, fuzzy, client-side search template for Hugo - By Zachary Betz. (Articles / Non-Official)

README

        
# Hugo client-side search template

[![Netlify Status](https://api.netlify.com/api/v1/badges/bb28781b-4732-4e74-b3de-c5f27ac37d14/deploy-status)](https://app.netlify.com/sites/hugo-client-side-search-template/deploys)

A lightweight, fuzzy, client-side search template for Hugo.

## Links

- Demo: 

- Forum: 

## Dependencies

Just one, [Fuse.js](https://fusejs.io/), which allows fuzzy matching, among other cool things.

## How it Works

At a high-level:

1. A JSON index is generated by hugo during the site build

1. You navigate to the deployed site

1. The DOMContentLoaded event fires

1. The JSON index is fetched

1. Fuse.js is instantiated with the JSON index

1. You do a search which fires the keyup event

1. Fuse.js is queried for hits

1. Matched substrings are highlighted (with CSS that you craft)

1. The DOM is updated with hits (with HTML that you craft)

## Relevant Files

### config.yaml

The `outputs.home` config must be set to allow JSON.

### layouts/index.json.json

Iterate all regular pages. For each page, build a dict of relevant keys, then append the dict to a slice. jsonify the slice.

### layouts/partials/scripts.html

Get the JS resource, build it, then bundle it. Put this right before your closing `