
This post documents adding search to next.js powered static sites using [fuse.js](https://fusejs.io/). When deciding how to implement search functionality, I ended up choosing between a custom implementation (basically just filtering arrays) and using a dedicated library. While I tend not to reach for off the shelf solutions, I chose fuse because it has UMD and commonJS support and will likely be helpful to eventually build out the cli.

1. initialize fuse to search through the posts
2. hook up the search function to text input
3. return filtered list of posts

### initialize fuse

I'm adding search to the [garden page](/garden) because it already has access to all the post data needed to actually search. I have an array of posts with the following shape:

```js
  post = {
    content,
    frontmatter: {
      tags: [],
      title
    }
  }
```

Because it's searching a nested list, we need to tell fuse which fields to search for:

```js
  const options = {
    keys: ['content', 'frontmatter.title', 'frontmatter.tags']
  };
  const fuse = new Fuse(posts, options);
```

### hook up search input

We'll use a hook to keep track of the search value. The one extra piece here is [debouncing](https://css-tricks.com/debouncing-throttling-explained-examples/) the input. I like this a bit better than throttling since I'm guessing users will be entering single words rather than phrases.

```js
  import debounce from 'lodash.debounce';

  const [searchVal, setSearchVal] = useState('');

  const debounceQuery = debounce(val => setSearchVal(val), 333);
  const updateSearchVal = e => {
    const { value } = e.target;
    debounceQuery(value);
  };

  ...

  <input value={searchVal} onChange={updateSearchVal} />
```

### return filtered list of posts

Last thing to do is filter the posts based on the search criteria. The `else` statement resets the `postState` back to its initial state when the search field is empty.

```js
  const [postState, setPostState] = useState(posts);
  useEffect(() => {
    if (searchVal) {
      const filteredPosts = fuse.search(searchVal).map(p => p.item);
      setPostState(filteredPosts);
    } else {
      setPostState(posts);
    }
  }, [searchVal]);
```

### wrapping up

A tribute to fuse, to be sure, this was extremely easy. This logic will need to be extended at some point to do tag filtering, too, but that can wait until there's more content.

One thing that came up while working on this was the lack of syntax highlighting -- something I wholesale forgot -- so I'll be adding that next.

### up next

- [x] [syntax highlighting](/garden/02-syntax-highlighting)
- [x] [content directories](/garden/04-content-directories)
- [ ] templating


adding search to next.js powered static sites with fuse.js

01 - searching with fuse.js


> 'This is an experiment, not a judgement,' (Kathleen Stewart, *Ordinary Affects*)

### introduction

Garden is an opinionated, batteries included boilerplate for next.js digital gardens. It offers low friction authoring via markdown and mdx, static generation via next.js, and easy styling using theme-ui and styled-components. In this way, Garden tries to solve some low level problems for users, helping them to start writing and/or augment what's provided here. Use this as a starting point to build whatever you need.

### features

Garden tries to take some of the thinking out of starting a digital garden. Here's some of the stuff it comes with:

- `getStaticPaths` and `getStaticProps` to render local mdx.
- `next-mdx-remote` to handle server and client side hydration
- `markdown-link-extractor` to help build relations between mdx files ('mentioned in')
- tags page(s) to aggregate related content
- extensive but minimal `theme-ui` object -- style mdx and hook into and extend theme-ui components
- SEO defaults and extendable config

More features to come include:

- search and tag filtering
- `styled-system` controlled components
- source data from multiple sources
- customizable templates for different data
- cli for scaffolding content

### gardening // experimentation

In a [previous post about gardening](/garden/00-rethinking-digital-gardening), I ended up asking a lot of questions about what might come from reevaluating the garden metaphor, transposing it into a verb, and thinking about the act of gardening rather than the particular place or form of the garden. Something that emerged as important was the relation between learning in public and gardening:

> What I'm trying to think through is the relation between public, ecology, and gardening (as a practice). This is what I mean when I say I am thinking about gardening as a socio-spatial metaphor and practice -- can we use gardening to develop a more robust ecology for learning? How is the practice of learning in public related to the co-constitution of what we might call 'alternative ecological arrangements'?

One way of practicing this relation might be an experiment in self-documentation. What can be gleaned from and what can be learned from documenting garden's development? What can be learned from the public use of something that's in progress? How does learning in public shape and reshape the form and function of this project? My plan is to gradually implement new features while writing about their implementation. It's an experimentation in self-documentation or an effort to work through the problem of building and learning in public. It's a kind of meta-gardening (though maybe it'll turn out that all gardening is meta-gardening).

Because this is an experiment and I don't know what exactly will be needed, I'm leaving the feature list open. New things might be added, while some functionality might be abandoned. I'm interested in letting things grow organically on a needed basis.

### up next

- [x] documentation
- [x] [search implementation](/garden/01-nextjs-search-with-fuse)


a brief introduction to garden, an opinionated and batteries included boilerplate for nextjs digital gardens

posts tagged 'nextjs'

01 - searching with fuse.js

00 - digital garden