diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 8158861..29971dc 100644 --- a/src/components/Footer/Footer.tsx +++ b/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 { getMessages } from "@/lib/data"; +import { getAppName, getMessages } from "@/lib/data"; export function Footer() { const appName = getAppName(); diff --git a/src/components/Logo/Logo.module.css b/src/components/Logo/Logo.module.css index 31b4117..807fd33 100644 --- a/src/components/Logo/Logo.module.css +++ b/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 { diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx index a4743b7..3df856c 100644 --- a/src/components/Logo/Logo.tsx +++ b/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() { diff --git a/src/components/Navigation/Navigation.module.css b/src/components/Navigation/Navigation.module.css index 639c8e6..8d68278 100644 --- a/src/components/Navigation/Navigation.module.css +++ b/src/components/Navigation/Navigation.module.css @@ -11,3 +11,9 @@ width: 22px; margin: 0 10px 0 0; } + +@media (max-width: 900px) { + .label { + display: none; + } +} diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx index cf6774f..43eb1f0 100644 --- a/src/components/Navigation/Navigation.tsx +++ b/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() {
  • - How to use {getAppName()}? + How to use {getAppName()}?
  • - Filter + Filter
  • - Technologies Overview + Technologies Overview
  • - Search + Search
    • diff --git a/src/data/config.json b/src/data/config.json new file mode 100644 index 0000000..bbee01f --- /dev/null +++ b/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" + } + ] +} diff --git a/public/messages.json b/src/data/messages.json similarity index 100% rename from public/messages.json rename to src/data/messages.json diff --git a/src/lib/config.ts b/src/lib/config.ts deleted file mode 100644 index 80bc059..0000000 --- a/src/lib/config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import messages from "../../public/messages.json"; - -export function getAppName() { - return messages.radarName; -} diff --git a/src/lib/data.ts b/src/lib/data.ts index 05c9f41..62d1da7 100644 --- a/src/lib/data.ts +++ b/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); +} diff --git a/src/lib/types.ts b/src/lib/types.ts new file mode 100644 index 0000000..21c1f95 --- /dev/null +++ b/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[]; +} diff --git a/src/pages/[quadrant]/index.tsx b/src/pages/[quadrant]/index.tsx new file mode 100644 index 0000000..deea09a --- /dev/null +++ b/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 ( + <> + + Quadrant Page + + +

    Quadrant: {query.quadrant}

    + 
    {JSON.stringify(quadrant)}
    + + ); +}; + +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: {} }; +};