feat: allow to change order of sections on main page

closes AOEpeople#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",

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") && (
- <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} />}
+ {sections.map((section) => {
+ switch (section) {
+ case "radar":
+ return (
+ getToggle("showChart") && (
+ <Radar
+ size={chartConfig.size}
+ quadrants={quadrants}
+ rings={rings}
+ 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;
+ }
+ })}
  </>
  );
 };