feat: reintroduce config.toggles to hide parts of the radar and cha…

…nge behaviour
medic · Mar 13, 2024 · 92b7c28 · 92b7c28
1 parent 3c98242
commit 92b7c28
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 10 deletions.
diff --git 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.<br/> 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
@@ -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
@@ -35,9 +35,10 @@ interface TagsProps {
 }
 
 export function Tags({ tags, activeTag, className }: TagsProps) {
+ const label = getLabel("filterByTag");
  return (
  <div className={cn(styles.tags, className)}>
- <h3>{getLabel("filterByTag")}</h3>
+ {!!label && <h3>{label}</h3>}
  {tags.map((tag) => (
  <Tag key={tag} tag={tag} isActive={activeTag == tag} scroll={false} />
  ))}

diff --git 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
@@ -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
@@ -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}
  </span>
  </h1>
- <Radar
- size={chartConfig.size}
- quadrants={quadrants}
- rings={rings}
- items={items}
- />
- {tags.length > 0 && <Tags tags={tags} activeTag={tag} />}
- <QuadrantList items={items} />
+ {getToggle("showChart") && (
+ <Radar
+ size={chartConfig.size}
+ quadrants={quadrants}
+ rings={rings}
+ items={items}
+ />
+ )}
+ {getToggle("showTagFilter") && tags.length > 0 && (
+ <Tags tags={tags} activeTag={tag} />
+ )}
+ {getToggle("showQuadrantList") && <QuadrantList items={items} />}
  </>
  );
 };