feat: add config, types and add basic quadrant page

src/components/Footer/Footer.tsx

@@ -1,8 +1,7 @@
 import logo from "../../../public/logo.svg";
 import styles from "./Footer.module.css";
 
-import { getAppName } from "@/lib/config";
+import { getAppName, getMessages } from "@/lib/data";
-import { getMessages } from "@/lib/data";
 
 export function Footer() {
   const appName = getAppName();

src/components/Logo/Logo.module.css

@@ -31,6 +31,10 @@
   font-size: 18px;
   opacity: 0;
   transition: opacity 200ms ease-in-out;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
 }
 
 .logo.small {

src/components/Logo/Logo.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import logo from "../../../public/logo.svg";
 import styles from "./Logo.module.css";
 
-import { getAppName } from "@/lib/config";
+import { getAppName } from "@/lib/data";
 import { cn } from "@/lib/utils";
 
 export function Logo() {

src/components/Navigation/Navigation.module.css

@@ -11,3 +11,9 @@
   width: 22px;
   margin: 0 10px 0 0;
 }
+
+@media (max-width: 900px) {
+  .label {
+    display: none;
+  }
+}

src/components/Navigation/Navigation.tsx

@@ -6,7 +6,7 @@ import IconFilter from "@/components/Icons/Filter";
 import IconOverview from "@/components/Icons/Overview";
 import IconQuestion from "@/components/Icons/Question";
 import IconSearch from "@/components/Icons/Search";
-import { getAppName } from "@/lib/config";
+import { getAppName } from "@/lib/data";
 
 export function Navigation() {
   return (
@@ -15,22 +15,22 @@ export function Navigation() {
         <li className={styles.item}>
           <Link href="/help-and-about-tech-radar">
             <IconQuestion className={styles.icon} />
-            How to use {getAppName()}?
+            <span className={styles.label}>How to use {getAppName()}?</span>
           </Link>
         </li>
         <li className={styles.item}>
           <IconFilter className={styles.icon} />
-          Filter
+          <span className={styles.label}>Filter</span>
         </li>
         <li className={styles.item}>
           <Link href="/overview">
             <IconOverview className={styles.icon} />
-            Technologies Overview
+            <span className={styles.label}>Technologies Overview</span>
           </Link>
         </li>
         <li className={styles.item}>
           <IconSearch className={styles.icon} />
-          Search
+          <span className={styles.label}>Search</span>
         </li>
       </ul>
     </nav>

src/data/config.json

@@ -0,0 +1,58 @@
+{
+  "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",
+      "position": 1
+    },
+    {
+      "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",
+      "position": 2
+    },
+    {
+      "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",
+      "position": 3
+    },
+    {
+      "id": "tools",
+      "title": "Tools",
+      "description": "Here we put different software tools - from small helpers to bigger software projects.",
+      "color": "#F2A25C",
+      "position": 4
+    }
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

src/lib/config.ts

@@ -1,5 +0,0 @@
-import messages from "../../public/messages.json";
-
-export function getAppName() {
-  return messages.radarName;
-}

src/lib/data.ts

@@ -1,5 +1,24 @@
-import messages from "../../public/messages.json";
+import config from "../data/config.json";
+import messages from "../data/messages.json";
+
+import { Quadrant, Ring } from "@/lib/types";
 
 export function getMessages() {
   return messages;
 }
+
+export function getAppName() {
+  return messages.radarName;
+}
+
+export function getRings(): Ring[] {
+  return config.rings;
+}
+
+export function getQuadrants(): Quadrant[] {
+  return config.quadrants;
+}
+
+export function getQuadrant(id: string): Quadrant | undefined {
+  return getQuadrants().find((q) => q.id === id);
+}

src/lib/types.ts

@@ -0,0 +1,41 @@
+export enum Flag {
+  New = "new",
+  Changed = "changed",
+  Default = "default",
+}
+
+export type Release = string;
+
+export interface Revision {
+  release: Release;
+  ring: string;
+  body?: string;
+}
+
+export interface Item {
+  id: string;
+  title: string;
+  info?: string;
+  body: string;
+  featured: boolean;
+  ring: string;
+  quadrant: string;
+  flag: Flag;
+  revisions?: Revision[];
+}
+
+export interface Ring {
+  id: string;
+  title: string;
+  description: string;
+  color: string;
+}
+
+export interface Quadrant {
+  id: string;
+  title: string;
+  description: string;
+  color: string;
+  position: number;
+  items?: Item[];
+}

src/pages/[quadrant]/index.tsx

@@ -0,0 +1,35 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+
+import { getQuadrant, getQuadrants } from "@/lib/data";
+import { CustomPage } from "@/pages/_app";
+
+const QuadrantPage: CustomPage = () => {
+  const { query } = useRouter();
+  const quadrant = getQuadrant(query.quadrant as string);
+  return (
+    <>
+      <Head>
+        <title>Quadrant Page</title>
+      </Head>
+
+      <h1>Quadrant: {query.quadrant}</h1>
+      <pre>{JSON.stringify(quadrant)}</pre>
+    </>
+  );
+};
+
+export default QuadrantPage;
+
+export const getStaticPaths = async () => {
+  const quadrants = getQuadrants();
+  const paths = quadrants.map((quadrant) => ({
+    params: { quadrant: quadrant.id },
+  }));
+
+  return { paths, fallback: false };
+};
+
+export const getStaticProps = async () => {
+  return { props: {} };
+};