feat: reintroduce config.toggles to hide parts of the radar and change behaviour

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                                                 |

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",

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} />
       ))}

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;

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[] },

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