feat: add configuration options for fuse

README.md

@@ -71,13 +71,14 @@ file as `logoFile` inside the `config.json`. e.g. `"logoFile": "acme-logo.png"`
 Open the `config.json` file and configure the radar to your needs.
 
 | Attribute   | Description                                                                                                                    |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | basePath    | Set if hosting under a sub-path, otherwise set it to `/`. Default is `/techradar`                                              |
 | baseUrl     | Set to the full URL, where the radar will be hosted. Will be used for sitemap.xml. `https://www.aoe.com/techradar`             |
 | logoFile    | (optional) Filepath in public folder. Default is `logo.svg`                                                                    |
 | jsFile      | (optional) Filepath in public folder or URL to enable include of custom script                                                 |
 | toggles     | (optional) Modify the behaviour and contents of the radar. See config below.                                                   |
 | sections    | (optional) Modify the order of sections (`radar`, `tags`, `list`)                                                              |
+| fuzzySearch | (optional) Modify the fuse.js options (https://www.fusejs.io/api/options.html)                                                 |
 | colors      | A map of colors for the radar. Can be any valid CSS color value                                                                |
 | quadrants   | Config of the 4 quadrants of the radar. See config below.                                                                      |
 | rings       | Config of the rings of the radar. See config below.                                                                            |
@@ -103,6 +104,10 @@ Open the `config.json` file and configure the radar to your needs.
 
 An array with of `radar`, `tags`, `list` in order you want them to appear on the page.
 
+#### `config.fuzzySearch`
+
+An object that represents the fuse.js options, which is used to search the radar.
+
 #### `config.quadrants`
 
 | Attribute   | Description                                                 |

data/config.default.json

@@ -137,5 +137,11 @@
     "pageSearch": "Search",
     "searchPlaceholder": "What are you looking for?",
     "metaDescription": ""
+  },
+  "fuzzySearch": {
+    "threshold": 0.4,
+    "distance": 600,
+    "ignoreLocation": false,
+    "includeScore": true
   }
 }

src/lib/config.ts

@@ -13,4 +13,10 @@ if (userConfig.labels)
 if (userConfig.toggles)
   config.toggles = { ...defaultConfig.toggles, ...userConfig.toggles };
 
+if (userConfig.fuzzySearch)
+  config.fuzzySearch = {
+    ...defaultConfig.fuzzySearch,
+    ...userConfig.fuzzySearch,
+  };
+
 export default config;

src/lib/data.ts

@@ -46,6 +46,10 @@ export function getFlag(flag: Flag) {
   return config.flags[flag];
 }
 
+export const getFuzzySearchConfig = () => {
+  return config.fuzzySearch;
+};
+
 export function getRings(): Ring[] {
   return config.rings;
 }

src/pages/overview.tsx

@@ -6,6 +6,7 @@ import { useCallback, useMemo } from "react";
 import { Filter } from "@/components/Filter/Filter";
 import { ItemList } from "@/components/ItemList/ItemList";
 import { getItems, getLabel } from "@/lib/data";
+import { getFuzzySearchConfig } from "@/lib/data";
 import { formatTitle } from "@/lib/format";
 import { CustomPage } from "@/pages/_app";
 
@@ -32,9 +33,7 @@ const Overview: CustomPage = () => {
   const { items, index } = useMemo(() => {
     const items = getItems().filter((item) => !ring || item.ring === ring);
     const index = new Fuse(items, {
-      threshold: 0.4,
+      ...getFuzzySearchConfig(),
-      distance: 600,
-      includeScore: true,
       keys: [
         {
           name: "title",