From c844e6dcbe50db6bae69fe92c37cda1064532d6a Mon Sep 17 00:00:00 2001 From: "felix.ruf" Date: Thu, 13 Mar 2025 14:49:00 +0100 Subject: [PATCH] feat: add configuration options for fuse --- README.md | 41 ++++++++++++++++++++++------------------ data/config.default.json | 6 ++++++ src/lib/config.ts | 6 ++++++ src/lib/data.ts | 4 ++++ src/pages/overview.tsx | 5 ++--- 5 files changed, 41 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index aab5bea..a52d129 100644 --- a/README.md +++ b/README.md @@ -70,24 +70,25 @@ 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`) | -| 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. | -| flags | Config of the flags of the radar. See config below | -| chart | If you hava a lot of items, you can increase the `size` to scale down the radar | -| social | Social links in the footer. See config below | -| imprint | URL to the legal information | -| labels | Configure the labels to change the texts and labels of the radar | -| tags | (optional) Use to render only items, which contain at least one of the specified tags. e.g `["frontend", "backend"]` | -| editUrl | (optional) If set, an edit button will be shown next to the revision.
You can use placeholders for `{id}` and `{release}` | +| 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. | +| flags | Config of the flags of the radar. See config below | +| chart | If you hava a lot of items, you can increase the `size` to scale down the radar | +| social | Social links in the footer. See config below | +| imprint | URL to the legal information | +| labels | Configure the labels to change the texts and labels of the radar | +| tags | (optional) Use to render only items, which contain at least one of the specified tags. e.g `["frontend", "backend"]` | +| editUrl | (optional) If set, an edit button will be shown next to the revision.
You can use placeholders for `{id}` and `{release}` | #### `config.toggles` @@ -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 | diff --git a/data/config.default.json b/data/config.default.json index be74bb4..5443b9c 100644 --- a/data/config.default.json +++ b/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 } } diff --git a/src/lib/config.ts b/src/lib/config.ts index 15976a0..45b9fa1 100644 --- a/src/lib/config.ts +++ b/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; diff --git a/src/lib/data.ts b/src/lib/data.ts index b693ba7..cc32fe8 100644 --- a/src/lib/data.ts +++ b/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; } diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx index ee9921c..798d465 100644 --- a/src/pages/overview.tsx +++ b/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, - distance: 600, - includeScore: true, + ...getFuzzySearchConfig(), keys: [ { name: "title",