feat: add contents of about page

.gitignore

@@ -17,6 +17,7 @@
 /src/components/Icons/
 
 /data/*
+!/data/about.md
 !/data/config.json
 !/data/messages.json
 

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

scripts/buildData.ts

@@ -25,7 +25,7 @@ function dataPath(...paths: string[]): string {
 
 function convertToHtml(markdown: string): string {
   if (config.basePath) {
-    markdown = markdown.replace(/\]\(\//g, `](${config.basePath}`);
+    markdown = markdown.replace(/]\(\//g, `](${config.basePath}/`);
   }
 
   let html = marked.parse(markdown.trim()) as string;
@@ -36,6 +36,15 @@ function convertToHtml(markdown: string): string {
   return html;
 }
 
+function readMarkdownFile(filePath: string) {
+  const id = path.basename(filePath, ".md");
+  const fileContent = fs.readFileSync(filePath, "utf8");
+  const { data, content } = matter(fileContent);
+  const body = convertToHtml(content);
+
+  return { id, data, body };
+}
+
 // Function to recursively read Markdown files and parse them
 async function parseDirectory(dirPath: string): Promise<Item[]> {
   const items: Record<string, Item> = {};
@@ -48,12 +57,8 @@ async function parseDirectory(dirPath: string): Promise<Item[]> {
       if (entry.isDirectory()) {
         await readDir(fullPath);
       } else if (entry.isFile() && entry.name.endsWith(".md")) {
-        const fileContent = fs.readFileSync(fullPath, "utf8");
-
         const releaseDate = path.basename(path.dirname(fullPath));
-        const id = path.basename(fullPath, ".md");
+        const { id, data, body } = readMarkdownFile(fullPath);
-        const { data, content } = matter(fileContent);
-        const body = convertToHtml(content);
 
         if (!items[id]) {
           items[id] = {
@@ -153,9 +158,13 @@ function postProcessItems(items: Item[]): {
   return { releases, tags, items: processedItems };
 }
 
-// Parse the data and write it to JSON file
+// Parse the data and write radar data to JSON file
 parseDirectory(dataPath("radar")).then((items) => {
   const data = postProcessItems(items);
   const json = JSON.stringify(data, null, 2);
   fs.writeFileSync(dataPath("data.json"), json);
 });
+
+// write about data to JSON file
+const about = readMarkdownFile(dataPath("about.md"));
+fs.writeFileSync(dataPath("about.json"), JSON.stringify(about, null, 2));

src/pages/help-and-about-tech-radar.tsx

@@ -1,5 +1,7 @@
 import Head from "next/head";
 
+import about from "../../data/about.json";
+
 import { formatTitle } from "@/lib/format";
 import { CustomPage } from "@/pages/_app";
 
@@ -10,7 +12,7 @@ const HelpAndAbout: CustomPage = () => {
         <title>{formatTitle("Help and About")}</title>
       </Head>
 
-      <h1>Help and about</h1>
+      <div dangerouslySetInnerHTML={{ __html: about.body }} />
     </>
   );
 };

src/styles/globals.css

@@ -84,6 +84,10 @@ h3 {
   font-size: 20px;
 }
 
+h4 {
+  font-size: 18px;
+}
+
 ul,
 ol {
   padding-left: 16px;