diff --git a/README.md b/README.md index 7c78227b..d46c0248 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ 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` | +| toggles | (optional) Modify the behaviour and contents of the radar. See config below. | | 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. | @@ -81,6 +82,15 @@ Open the `config.json` file and configure the radar to your needs. | 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` + +| Attribute | Description | +| ---------------- | ------------------------------------------------------- | +| showChart | Render the radar visualization on the homepage? | +| showTagFilter | Render the tag filter below the radar? | +| showQuadrantList | Render the items below the radar? | +| showEmptyRings | If set to `true` it will render empty rings in the list | + #### `config.quadrants` | Attribute | Description | diff --git a/data/config.default.json b/data/config.default.json index 8572ff9d..45cc7312 100644 --- a/data/config.default.json +++ b/data/config.default.json @@ -1,6 +1,12 @@ { "basePath": "/techradar", "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md", + "toggles": { + "showChart": true, + "showTagFilter": true, + "showQuadrantList": true, + "showEmptyRings": false + }, "colors": { "foreground": "#fcf2e6", "background": "#113521", diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx index 69e8cf1d..b151a811 100644 --- a/src/components/Tags/Tags.tsx +++ b/src/components/Tags/Tags.tsx @@ -35,9 +35,10 @@ interface TagsProps { } export function Tags({ tags, activeTag, className }: TagsProps) { + const label = getLabel("filterByTag"); return (
-

{getLabel("filterByTag")}

+ {!!label &&

{label}

} {tags.map((tag) => ( ))} diff --git a/src/lib/config.ts b/src/lib/config.ts index 838f245f..15976a0c 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -9,4 +9,8 @@ if (userConfig.colors) if (userConfig.labels) config.labels = { ...defaultConfig.labels, ...userConfig.labels }; + +if (userConfig.toggles) + config.toggles = { ...defaultConfig.toggles, ...userConfig.toggles }; + export default config; diff --git a/src/lib/data.ts b/src/lib/data.ts index 9cd63254..53359ef0 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -8,6 +8,10 @@ export function getLabel(key: keyof typeof config.labels) { return config.labels[key] || ""; } +export function getToggle(key: keyof typeof config.toggles) { + return config.toggles[key] || false; +} + export function getAppName() { return getLabel("title"); } @@ -80,10 +84,11 @@ export const sortByFeaturedAndTitle = (a: Item, b: Item) => Number(b.featured) - Number(a.featured) || a.title.localeCompare(b.title); export const groupItemsByRing = (items: Item[]) => { + const showEmptyRings = getToggle("showEmptyRings"); return getRings().reduce( (acc, ring) => { const ringItems = items.filter((item) => item.ring === ring.id); - if (ringItems.length) acc[ring.id] = ringItems; + if (ringItems.length || showEmptyRings) acc[ring.id] = ringItems; return acc; }, {} as { [ringId: string]: Item[] }, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 38a5f306..195843ca 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,6 +11,7 @@ import { getReleases, getRings, getTags, + getToggle, } from "@/lib/data"; import { CustomPage } from "@/pages/_app"; @@ -35,14 +36,18 @@ const Home: CustomPage = () => { Version #{version} - - {tags.length > 0 && } - + {getToggle("showChart") && ( + + )} + {getToggle("showTagFilter") && tags.length > 0 && ( + + )} + {getToggle("showQuadrantList") && } ); };