diff --git a/README.md b/README.md
index 5bad48a..7d9f7c5 100644
--- a/README.md
+++ b/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 |
diff --git a/data/config.default.json b/data/config.default.json
index 45cc731..c28a8ee 100644
--- a/data/config.default.json
+++ b/data/config.default.json
@@ -7,6 +7,7 @@
"showQuadrantList": true,
"showEmptyRings": false
},
+ "sections": ["radar", "tags", "list"],
"colors": {
"foreground": "#fcf2e6",
"background": "#113521",
diff --git a/package-lock.json b/package-lock.json
index f5064a9..26a77e8 100644
--- a/package-lock.json
+++ b/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"
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 15976a0..a86176c 100644
--- a/src/lib/config.ts
+++ b/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;
diff --git a/src/lib/data.ts b/src/lib/data.ts
index 53359ef..f0955a8 100644
--- a/src/lib/data.ts
+++ b/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");
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 195843c..b700583 100644
--- a/src/pages/index.tsx
+++ b/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}
- {getToggle("showChart") && (
-
- )}
- {getToggle("showTagFilter") && tags.length > 0 && (
-
- )}
- {getToggle("showQuadrantList") && }
+ {sections.map((section) => {
+ switch (section) {
+ case "radar":
+ return (
+ getToggle("showChart") && (
+
+ )
+ );
+ case "tags":
+ return (
+ getToggle("showTagFilter") &&
+ tags.length > 0 &&
+ );
+ case "list":
+ return (
+ getToggle("showQuadrantList") &&
+ );
+ default:
+ return null;
+ }
+ })}
>
);
};