AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add configuration options for fuse

Browse Source
This commit is contained in:
felix.ruf
2025-03-13 14:49:00 +01:00
committed by Mathias Schopmans
parent 864ab22583
commit c844e6dcbe
5 changed files with 41 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
README.md
View File

@@ -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. Open the `config.json` file and configure the radar to your needs.
| Attribute | Description | | Attribute | Description |
| --------- | ------------------------------------------------------------------------------------------------------------------------------ | | ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
| basePath | Set if hosting under a sub-path, otherwise set it to `/`. Default is `/techradar` | | 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` | | 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` | | logoFile | (optional) Filepath in public folder. Default is `logo.svg` |
| jsFile | (optional) Filepath in public folder or URL to enable include of custom script | | 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. | | toggles | (optional) Modify the behaviour and contents of the radar. See config below. |
| sections | (optional) Modify the order of sections (`radar`, `tags`, `list`) | | 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 | | fuzzySearch | (optional) Modify the fuse.js options (https://www.fusejs.io/api/options.html) |
| quadrants | Config of the 4 quadrants of the radar. See config below. | | colors | A map of colors for the radar. Can be any valid CSS color value |
| rings | Config of the rings of the radar. See config below. | | quadrants | Config of the 4 quadrants of the radar. See config below. |
| flags | Config of the flags of the radar. See config below | | rings | Config of the rings of the radar. See config below. |
| chart | If you hava a lot of items, you can increase the `size` to scale down the radar | | flags | Config of the flags of the radar. See config below |
| social | Social links in the footer. See config below | | chart | If you hava a lot of items, you can increase the `size` to scale down the radar |
| imprint | URL to the legal information | | social | Social links in the footer. See config below |
| labels | Configure the labels to change the texts and labels of the radar | | imprint | URL to the legal information |
| tags | (optional) Use to render only items, which contain at least one of the specified tags. e.g `["frontend", "backend"]` | | labels | Configure the labels to change the texts and labels of the radar |
| editUrl | (optional) If set, an edit button will be shown next to the revision.<br/> You can use placeholders for `{id}` and `{release}` | | 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.<br/> You can use placeholders for `{id}` and `{release}` |
#### `config.toggles` #### `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. 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` #### `config.quadrants`
| Attribute | Description | | Attribute | Description |

6
data/config.default.json
View File

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

6
src/lib/config.ts
View File

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

4
src/lib/data.ts
View File

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

5
src/pages/overview.tsx
View File

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