feat: allow to change order of sections on main page

closes #445

README.md

@@ -71,6 +71,7 @@ Open the `config.json` file and configure the radar to your needs.
 | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | 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.                                                   |
+| 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.                                                                            |
@@ -91,6 +92,10 @@ Open the `config.json` file and configure the radar to your needs.
 | showQuadrantList | Render the items below the radar?                       |
 | showEmptyRings   | If set to `true` it will render empty rings in the list |
 
+#### `config.sections`
+
+An array with of `radar`, `tags`, `list` in order you want them to appear on the page.
+
 #### `config.quadrants`
 
 | Attribute   | Description                                                 |

data/config.default.json

@@ -7,6 +7,7 @@
     "showQuadrantList": true,
     "showEmptyRings": false
   },
+  "sections": ["radar", "tags", "list"],
   "colors": {
     "foreground": "#fcf2e6",
     "background": "#113521",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aoe_technology_radar",
-  "version": "4.1.0-rc.1",
+  "version": "4.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aoe_technology_radar",
-      "version": "4.1.0-rc.1",
+      "version": "4.1.0",
       "hasInstallScript": true,
       "bin": {
         "techradar": "bin/techradar.js"

src/lib/config.ts

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

src/lib/data.ts

@@ -12,6 +12,10 @@ export function getToggle(key: keyof typeof config.toggles) {
   return config.toggles[key] || false;
 }
 
+export function getSections() {
+  return config.sections;
+}
+
 export function getAppName() {
   return getLabel("title");
 }

src/pages/index.tsx

@@ -10,6 +10,7 @@ import {
   getQuadrants,
   getReleases,
   getRings,
+  getSections,
   getTags,
   getToggle,
 } from "@/lib/data";
@@ -20,6 +21,7 @@ const Home: CustomPage = () => {
   const tag = router.query.tag as string | undefined;
   const appName = getAppName();
   const chartConfig = getChartConfig();
+  const sections = getSections();
   const version = getReleases().length;
   const rings = getRings();
   const quadrants = getQuadrants();
@@ -36,18 +38,32 @@ const Home: CustomPage = () => {
           Version #{version}
         </span>
       </h1>
-      {getToggle("showChart") && (
+      {sections.map((section) => {
-        <Radar
+        switch (section) {
-          size={chartConfig.size}
+          case "radar":
-          quadrants={quadrants}
+            return (
-          rings={rings}
+              getToggle("showChart") && (
-          items={items}
+                <Radar
-        />
+                  size={chartConfig.size}
-      )}
+                  quadrants={quadrants}
-      {getToggle("showTagFilter") && tags.length > 0 && (
+                  rings={rings}
-        <Tags tags={tags} activeTag={tag} />
+                  items={items}
-      )}
+                />
-      {getToggle("showQuadrantList") && <QuadrantList items={items} />}
+              )
+            );
+          case "tags":
+            return (
+              getToggle("showTagFilter") &&
+              tags.length > 0 && <Tags tags={tags} activeTag={tag} />
+            );
+          case "list":
+            return (
+              getToggle("showQuadrantList") && <QuadrantList items={items} />
+            );
+          default:
+            return null;
+        }
+      })}
     </>
   );
 };