feat: use techradar v4 pre-release

.github/workflows/main.yml

@@ -16,8 +16,14 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.npm
+            .techradar
+          key: ${{ runner.os }}-techradar-${{ hashFiles('**/package-lock.json') }}
       - run: npm ci
-      - run: PUBLIC_URL=/techradar npm run build:static
+      - run: npm run build
       - run: if [ -n "$(git status --porcelain)" ]; then echo 'workspace is dirty after rebuilding' ; git status ; git diff ; exit 1 ; fi
       - name: Upload Artifact
         uses: actions/upload-artifact@v4
@@ -32,7 +38,7 @@ jobs:
     # if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
     environment:
       name: techradar-test-aoe
-      url: http://techradar-test-aoe.s3-website.eu-central-1.amazonaws.com/techradar/index.html
+      url: http://techradar-test-aoe.s3-website.eu-central-1.amazonaws.com/techradar/
     permissions:
       id-token: write
       contents: read

.gitignore

@@ -1,5 +1,6 @@
 .idea
 .DS_Store
+.techradar
 dist
 node_modules
 npm-debug.log

.nvmrc

@@ -1 +0,0 @@
-18.18.2

Readme.md

@@ -1,6 +1,6 @@
 # AOE Technology Radar - Content
 
-This is the location of AOE techradar content - published under: https://www.aoe.com/techradar/index.html
+This is the location of AOE techradar content - published under: https://www.aoe.com/techradar/
 
 If you want to build your own techradar you may want to have a look at https://github.com/AOEpeople/aoe_technology_radar instead.
 
@@ -27,32 +27,16 @@ tags: [devops, security]
 
 ## Development
 
-### Host the application under a sub path
-To host the application under a sub path, set the environment variable `PUBLIC_URL`, e.g. "/techradar".
-The default is `/`.
-
-> For local development I recommend using `/build` and use this for the following steps. 
-
 ### Build the radar
 ```
 npm i
-PUBLIC_URL=/build npm run start
+npm run serve
 ```
 
-Then open here: http://localhost:8080/build
+Then open here: http://localhost:3000/techradar
 
 ### Build the radar with static files
 ```
 npm i
-PUBLIC_URL=/build npm run start:static
+npm run build
 ```
-
-Then open here: http://localhost:8080/build
-
-### Regenerate the json file based on your changes on md files
-```
-npm run generateJson
-```
-
-You can do this while the server is running.
-You can find the newly created rd.json in "/build/rd.json". 

about.md

@@ -0,0 +1,79 @@
+# How to use the AOE Technology Radar
+
+### Introduction
+
+Technology is advancing rapidly, with new technologies and innovations constantly emerging.
+
+It is essential for a development and technology company like AOE to continually improve and keep
+track of the latest valuable innovations. It is important to actively seek out innovations and new
+technologies and periodically question established technologies and methods.
+
+But, it is also important to wisely choose which technologies to use in our daily work and in the
+different projects we are carrying out. As we all know: There is no silver bullet.
+
+### What is the AOE Technology Radar?
+
+The Tech Radar provides an overview of different technologies, including languages, frameworks,
+tools, and patterns, as well as platforms, that we consider 'new or noteworthy.' The radar does not
+cover all established technologies; instead, it focuses on items that have recently gained
+significance or undergone changes. Items previously featured in the radar are not listed on the
+homepage but remain available in the complete overview and search.
+
+### How it is created
+
+The items in the technology radar are suggested by different teams, many of which are related to the
+work and challenges faced by the teams in various projects. In fact, we do not include anything on
+the radar that we haven't personally tested at least once.
+
+Numerous valuable discussions have taken place in various expert groups regarding the classification
+and details of each technology and innovation. The culmination of these discussions is reflected in
+the latest technology radar.
+
+### How should it be used
+
+The radar serves as an overview of technologies that we believe everyone in the teams should be
+aware of at present.
+
+Its goal is to guide and inspire daily work within the teams. Additionally, it aims to provide
+valuable information and a high-level perspective to enable decisions to be made with a deeper
+understanding of the subject matter, resulting in more informed and coordinated choices.
+
+We also hope that developers outside of AOE will find the information in our technology overview
+inspiring.
+
+We categorize the items into four quadrants, and sometimes, when it's not entirely clear where an
+item belongs, we choose the best fit.
+
+#### The quadrants are:
+
+- **Languages & Frameworks:** In this category, we include development languages like Scala or
+  Golang, as well as low-level development frameworks such as Play or Symfony. These are valuable
+  for implementing various types of custom software.
+- **Tools:** This section is dedicated to a wide range of software tools, from small utilities to
+  more extensive software projects.
+- **Methods & Patterns:** Patterns hold enduring significance, with many of them standing the test
+  of time compared to some tools or frameworks. This category is where we provide information on
+  methods and patterns related to development, continuous integration, testing, organization,
+  architecture, and more.
+- **Platforms & Operations:** In this quadrant, we group technologies related to the operation of
+  software, infrastructure, and platform-related tools and services.
+
+#### Each of the items is classified in one of these rings:
+
+- **Adopt:** We wholeheartedly recommend this technology. It has been extensively used in many teams
+  for an extended period, proving its stability and utility.
+- **Trial:** We have successfully implemented this technology and suggest taking a closer look at it
+  in this category. The aim here is to scrutinize these items more closely with the intention of
+  elevating them to the 'Adopt' level.
+- **Assess:** We have experimented with this technology and find it promising. We recommend
+  exploring these items when you encounter a specific need for the technology in your project.
+- **Hold:** This category is somewhat unique. Unlike the others, it advises discontinuing or
+  refraining from using certain technologies. This does not necessarily imply that they are
+  inherently bad; it often may be acceptable to use them in existing projects. However, we move
+  items here when we believe they should no longer be employed, as we have identified better options
+  or alternatives.
+
+### Contributing to the AOE Technology Radar
+
+Contributions and source code of the AOE Tech Radar are on
+GitHub: [AOE Tech Radar on GitHub](https://github.com/AOEpeople/aoe_technology_radar)

config.json

@@ -0,0 +1,141 @@
+{
+  "basePath": "/techradar",
+  "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md",
+  "colors": {
+    "foreground": "#fff",
+    "background": "#173d7a",
+    "highlight": "#029df7",
+    "content": "#fff",
+    "text": "#575757",
+    "link": "#029df7",
+    "border": "rgba(255, 255, 255, 0.1)",
+    "tag": "rgba(255, 255, 255, 0.1)"
+  },
+  "quadrants": [
+    {
+      "id": "languages-and-frameworks",
+      "title": "Languages & Frameworks",
+      "description": "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds.",
+      "color": "#84BFA4"
+    },
+    {
+      "id": "methods-and-patterns",
+      "title": "Methods & Patterns",
+      "description": "Here we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.",
+      "color": "#248EA6"
+    },
+    {
+      "id": "platforms-and-aoe-services",
+      "title": "Platforms & Operations",
+      "description": "This quadrant clusters technologies around the operation of software and infrastructure related platforms, tools and services.",
+      "color": "#F25244"
+    },
+    {
+      "id": "tools",
+      "title": "Tools",
+      "description": "Here we put different software tools - from small helpers to bigger software projects.",
+      "color": "#F2A25C"
+    }
+  ],
+  "rings": [
+    {
+      "id": "adopt",
+      "title": "Adopt",
+      "description": "We can clearly recommend this technology. We have used it for longer period of time in many teams and it has proven to be stable and useful.",
+      "color": "#5cb449",
+      "radius": 0.5,
+      "strokeWidth": 5
+    },
+    {
+      "id": "trial",
+      "title": "Trial",
+      "description": "We have used it with success and recommend to have a closer look at the technology in this ring. The goal of items here is to look at them more closely, with the goal to bring them to the adopt level.",
+      "color": "#faa03d",
+      "radius": 0.69,
+      "strokeWidth": 3
+    },
+    {
+      "id": "assess",
+      "title": "Assess",
+      "description": "We have tried it out and we find it promising. We recommend having a look at these items when you face a specific need for the technology in your project.",
+      "color": "#029df7",
+      "radius": 0.85,
+      "strokeWidth": 2
+    },
+    {
+      "id": "hold",
+      "title": "Hold",
+      "description": "This category is a bit special. Unlike the others, we recommend to stop doing or using something. That does not mean that they are bad and it often might be ok to use them in existing projects. But we move things here if we think we shouldn't do them anymore - because we see better options or alternatives now.",
+      "color": "#688190",
+      "radius": 1,
+      "strokeWidth": 0.75
+    }
+  ],
+  "flags": {
+    "new": {
+      "color": "#f1235a",
+      "title": "New",
+      "titleShort": "N",
+      "description": "New in this version"
+    },
+    "changed": {
+      "color": "#40a7d1",
+      "title": "Changed",
+      "titleShort": "C",
+      "description": "Recently changed"
+    },
+    "default": {
+      "description": "Unchanged"
+    }
+  },
+  "chart": {
+    "size": 800,
+    "blipSize": 12
+  },
+  "social": [
+    {
+      "href": "https://www.facebook.com/aoepeople",
+      "icon": "facebook"
+    },
+    {
+      "href": "https://twitter.com/aoepeople",
+      "icon": "x"
+    },
+    {
+      "href": "https://www.linkedin.com/company/aoe",
+      "icon": "linkedIn"
+    },
+    {
+      "href": "https://www.xing.com/company/aoe",
+      "icon": "xing"
+    },
+    {
+      "href": "https://www.instagram.com/aoepeople",
+      "icon": "instagram"
+    },
+    {
+      "href": "https://www.youtube.com/user/aoepeople",
+      "icon": "youtube"
+    },
+    {
+      "href": "https://github.com/aoepeople",
+      "icon": "github"
+    }
+  ],
+  "imprint": "https://www.aoe.com/en/imprint.html",
+  "labels": {
+    "title": "AOE Technology Radar",
+    "imprint": "Legal Information",
+    "quadrant": "Quadrant",
+    "quadrantOverview": "Quadrant Overview",
+    "zoomIn": "Zoom in",
+    "filterByTag": "Filter by Tag",
+    "footer": "AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers.",
+    "notUpdated": "This item was not updated in last three versions of the Radar. Should it have appeared in one of the more recent editions, there is a good chance it remains pertinent. However, if the item dates back further, its relevance may have diminished and our current evaluation could vary. Regrettably, our capacity to consistently revisit items from past Radar editions is limited.",
+    "notFound": "404 - Page not found",
+    "pageAbout": "How to use AOE Technology Radar?",
+    "pageOverview": "Technologies Overview",
+    "pageSearch": "Search",
+    "searchPlaceholder": "What are you looking for?"
+  }
+}

package.json

@@ -1,36 +1,14 @@
 {
-  "name": "aoe",
+  "name": "aoe-techradar",
+  "private": true,
   "version": "4.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build": "npx aoe_technology_radar-buildRadar",
+    "build": "techradar build",
-    "postbuild": "npm run generateJson",
+    "serve": "techradar serve"
-    "prebuild:static": "npm run build",
-    "build:static": "npx aoe_technology_radar-createStaticFiles",
-    "generateJson": "npx aoe_technology_radar-generateJson",
-    "prestart": "npm run build:static",
-    "start": "npm run start:server",
-    "prestart:static": "npm run build:static",
-    "start:static": "npm run start:server",
-    "start:server": "python3 -m http.server 8080"
   },
   "dependencies": {
-    "aoe_technology_radar": "github:AOEpeople/aoe_technology_radar#aoe-blue"
+    "aoe_technology_radar": "github:AOEpeople/aoe_technology_radar#feature/v4"
-  },
-  "overrides": {
-    "@svgr/webpack": "6.5.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

public/config.json

@@ -1,69 +0,0 @@
-{
-    "quadrants": {
-      "languages-and-frameworks": "Languages & Frameworks",
-      "methods-and-patterns": "Methods & Patterns",
-      "platforms-and-aoe-services": "Platforms & Operations",
-      "tools": "Tools"
-    },
-    "rings": [
-      "adopt",
-      "trial",
-      "assess",
-      "hold"
-    ],
-    "showEmptyRings": false,
-    "homepageContent": "both",
-    "quadrantsMap": {
-      "languages-and-frameworks": {
-        "colour": "#84BFA4",
-        "txtColour": "#444444",
-        "position": 1,
-        "description": "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds."
-      },
-      "methods-and-patterns": {
-        "colour": "#248EA6",
-        "txtColour": "white",
-        "position": 2,
-        "description": "Here we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc."
-      },
-      "platforms-and-aoe-services": {
-        "colour": "#F25244",
-        "txtColour": "#444444",
-        "position": 3,
-        "description": "This quadrant clusters technologies around the operation of software and infrastructure related platforms, tools and services."
-      },
-      "tools": {
-        "colour": "#F2A25C",
-        "txtColour": "white",
-        "position": 4,
-        "description": "Here we put different software tools - from small helpers to bigger software projects."
-      }
-    },
-    "chartConfig": {
-      "size": 800,
-      "scale": [
-        -16,
-        16
-      ],
-      "blipSize": 12,
-      "ringsAttributes": [
-        {
-          "radius": 8,
-          "arcWidth": 6
-        },
-        {
-          "radius": 11,
-          "arcWidth": 4
-        },
-        {
-          "radius": 14,
-          "arcWidth": 2
-        },
-        {
-          "radius": 16,
-          "arcWidth": 2
-        }
-      ]
-    },
-    "dateFormat": "MMMM YYYY"
-  }

public/fonts.css

@@ -1,11 +0,0 @@
-@font-face {
-    font-family: "Roboto";
-    src: url("fonts/roboto-v30-latin-regular.woff2");
-    font-weight: normal;
-}
-
-@font-face {
-    font-family: "Roboto";
-    src: url("fonts/roboto-v30-latin-bold.woff2");
-    font-weight: bold;
-}

public/messages.json

@@ -1,109 +0,0 @@
-{
-  "footerFootnote": "AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers.",
-  "socialLinks": [
-    {
-      "href": "https://www.facebook.com/aoepeople",
-      "iconName": "facebook"
-    },
-    {
-      "href": "https://twitter.com/aoepeople",
-      "iconName": "twitter"
-    },
-    {
-      "href": "https://www.linkedin.com/company/aoe",
-      "iconName": "linkedIn"
-    },
-    {
-      "href": "https://www.xing.com/company/aoe",
-      "iconName": "xing"
-    },
-    {
-      "href": "https://www.instagram.com/aoepeople",
-      "iconName": "instagram"
-    },
-    {
-      "href": "https://www.youtube.com/user/aoepeople",
-      "iconName": "youtube"
-    },
-    {
-      "href": "https://github.com/aoepeople",
-      "iconName": "github"
-    }
-  ],
-  "pageHelp": {
-    "paragraphs": [
-      {
-        "headline": "Introduction",
-        "values": [
-          "Technology is advancing rapidly, with new technologies and innovations constantly emerging.",
-          "It is essential for a development and technology company like AOE to continually improve and keep track of the latest valuable innovations. It is important to actively seek out innovations and new technologies and periodically question established technologies and methods.",
-          "But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all know: There is no silver bullet."
-        ]
-      },
-      {
-        "headline": "What is the AOE Technology Radar",
-        "values": [
-          "The Tech Radar provides an overview of different technologies, including languages, frameworks, tools, and patterns, as well as platforms, that we consider 'new or noteworthy.' The radar does not cover all established technologies; instead, it focuses on items that have recently gained significance or undergone changes. Items previously featured in the radar are not listed on the homepage but remain available in the complete overview and search."
-        ]
-      },
-      {
-        "headline": "How it is created",
-        "values": [
-          "The items in the technology radar are suggested by different teams, many of which are related to the work and challenges faced by the teams in various projects. In fact, we do not include anything on the radar that we haven't personally tested at least once.",
-          "Numerous valuable discussions have taken place in various expert groups regarding the classification and details of each technology and innovation. The culmination of these discussions is reflected in the latest technology radar."
-        ]
-      },
-      {
-        "headline": "How should it be used",
-        "values": [
-          "The radar serves as an overview of technologies that we believe everyone in the teams should be aware of at present.",
-          "Its goal is to guide and inspire daily work within the teams. Additionally, it aims to provide valuable information and a high-level perspective to enable decisions to be made with a deeper understanding of the subject matter, resulting in more informed and coordinated choices.",
-          "We also hope that developers outside of AOE will find the information in our technology overview inspiring.",
-          "We categorize the items into four quadrants, and sometimes, when it's not entirely clear where an item belongs, we choose the best fit."
-        ]
-      }
-    ],
-    "quadrants": [
-      {
-        "name": "Languages & Frameworks",
-        "description": "In this category, we include development languages like Scala or Golang, as well as low-level development frameworks such as Play or Symfony. These are valuable for implementing various types of custom software."
-      },
-      {
-        "name": "Tools",
-        "description": "This section is dedicated to a wide range of software tools, from small utilities to more extensive software projects."
-      },
-      {
-        "name": "Methods & Patterns",
-        "description": "Patterns hold enduring significance, with many of them standing the test of time compared to some tools or frameworks. This category is where we provide information on methods and patterns related to development, continuous integration, testing, organization, architecture, and more."
-      },
-      {
-        "name": "Platforms & Operations",
-        "description": "In this quadrant, we group technologies related to the operation of software, infrastructure, and platform-related tools and services."
-      }
-    ],
-    "rings": [
-      {
-        "name": "Adopt",
-        "description": "We wholeheartedly recommend this technology. It has been extensively used in many teams for an extended period, proving its stability and utility."
-      },
-      {
-        "name": "Trial",
-        "description": "We have successfully implemented this technology and suggest taking a closer look at it in this category. The aim here is to scrutinize these items more closely with the intention of elevating them to the 'Adopt' level."
-      },
-      {
-        "name": "Assess",
-        "description": "We have experimented with this technology and find it promising. We recommend exploring these items when you encounter a specific need for the technology in your project."
-      },
-      {
-        "name": "Hold",
-        "description": "This category is somewhat unique. Unlike the others, it advises discontinuing or refraining from using certain technologies. This does not necessarily imply that they are inherently bad; it often may be acceptable to use them in existing projects. However, we move items here when we believe they should no longer be employed, as we have identified better options or alternatives."
-      }
-    ],
-    "sourcecodeLink": {
-      "href": "https://github.com/AOEpeople/aoe_technology_radar",
-      "name": "AOE Tech Radar on GitHub",
-      "description": "Contributions and source code of the AOE Tech Radar are on GitHub:"
-    }
-  },
-  "legalInformationLink": "https://www.aoe.com/en/imprint.html"
-}