feat: replace static labels with configurable values

src/components/Filter/QueryFilter.tsx

@@ -3,10 +3,13 @@ import { ChangeEvent, useEffect, useState } from "react";
 import Search from "../Icons/Search";
 import styles from "./QueryFilter.module.css";
 
+import { getLabel } from "@/lib/data";
+
 interface QueryFilterProps {
   value?: string;
   onChange: (value: string) => void;
 }
+
 export function QueryFilter({ value, onChange }: QueryFilterProps) {
   const [val, setVal] = useState(value);
   const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -24,6 +27,7 @@ export function QueryFilter({ value, onChange }: QueryFilterProps) {
         className={styles.input}
         id="search"
         type="search"
+        placeholder={getLabel("searchPlaceholder")}
         value={val}
         onChange={_onChange}
       />

src/components/Footer/Footer.tsx

@@ -2,17 +2,14 @@ import logo from "../../../public/logo.svg";
 import styles from "./Footer.module.css";
 
 import { SocialLinks } from "@/components/SocialLinks/SocialLinks";
-import { getAppName, getMessages } from "@/lib/data";
+import { getAppName, getLabel } from "@/lib/data";
 
 export function Footer() {
-  const appName = getAppName();
-  const { footerFootnote } = getMessages();
-
   return (
     <div className={styles.footer}>
       <div className={styles.branding}>
-        <img src={logo.src} className={styles.logo} alt={appName} />
-        <p className={styles.description}>{footerFootnote}</p>
+        <img src={logo.src} className={styles.logo} alt={getAppName()} />
+        <p className={styles.description}>{getLabel("footer")}</p>
         <SocialLinks className={styles.socialLinks} />
       </div>
     </div>

src/components/ItemDetail/ItemDetail.tsx

@@ -3,7 +3,7 @@ import styles from "./ItemDetail.module.css";
 import { RingBadge } from "@/components/Badge/Badge";
 import Attention from "@/components/Icons/Attention";
 import { Tag } from "@/components/Tags/Tags";
-import { getReleases } from "@/lib/data";
+import { getLabel, getReleases } from "@/lib/data";
 import { Item } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -18,6 +18,7 @@ interface ItemProps {
 }
 
 export function ItemDetail({ item }: ItemProps) {
+  const notMaintainedText = getLabel("notUpdated");
   return (
     <>
       <div className={styles.header}>
@@ -27,19 +28,12 @@ export function ItemDetail({ item }: ItemProps) {
         ))}
       </div>
       <div className={styles.revisions}>
-        {isNotMaintained(item.release) && (
+        {notMaintainedText && isNotMaintained(item.release) && (
           <div className={cn(styles.revision, styles.hint)}>
             <span className={styles.release}>
               <Attention className={styles.icon} />
             </span>
-            <div className={styles.content}>
-              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.
-            </div>
+            <div className={styles.content}>{notMaintainedText}</div>
           </div>
         )}
         <Revision release={item.release} ring={item.ring} body={item.body} />

src/components/Navigation/Navigation.tsx

@@ -5,7 +5,7 @@ import styles from "./Navigation.module.css";
 import IconOverview from "@/components/Icons/Overview";
 import IconQuestion from "@/components/Icons/Question";
 import IconSearch from "@/components/Icons/Search";
-import { getAppName } from "@/lib/data";
+import { getAppName, getLabel } from "@/lib/data";
 
 export function Navigation() {
   return (
@@ -14,36 +14,19 @@ export function Navigation() {
         <li className={styles.item}>
           <Link href="/help-and-about-tech-radar">
             <IconQuestion className={styles.icon} />
-            <span className={styles.label}>How to use {getAppName()}?</span>
+            <span className={styles.label}>{getLabel("pageAbout")}</span>
           </Link>
         </li>
-        {/*
-        <li className={styles.item}>
-          <Dialog>
-            <DialogTrigger asChild>
-              <a href="#">
-                <IconFilter className={styles.icon} />
-                <span className={styles.label}>Filter</span>
-              </a>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Filter by Tags</DialogTitle>
-              </DialogHeader>
-            </DialogContent>
-          </Dialog>
-        </li>
-        */}
         <li className={styles.item}>
           <Link href="/overview">
             <IconOverview className={styles.icon} />
-            <span className={styles.label}>Technologies Overview</span>
+            <span className={styles.label}>{getLabel("pageOverview")}</span>
           </Link>
         </li>
         <li className={styles.item}>
           <Link href="/overview">
             <IconSearch className={styles.icon} />
-            <span className={styles.label}>Search</span>
+            <span className={styles.label}>{getLabel("pageSearch")}</span>
           </Link>
         </li>
       </ul>

src/components/QuadrantLink/QuadrantLink.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import styles from "./QuadrantLink.module.css";
 
 import Pie from "@/components/Icons/Pie";
+import { getLabel } from "@/lib/data";
 import { Quadrant } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -13,7 +14,7 @@ interface QuadrantLinkProps {
 }
 export function QuadrantLink({
   quadrant,
-  label = "Zoom in",
+  label = getLabel("zoomIn"),
   className,
 }: QuadrantLinkProps) {
   return (

src/components/Radar/Label.tsx

@@ -4,6 +4,7 @@ import { CSSProperties, useMemo } from "react";
 import styles from "./Label.module.css";
 
 import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
+import { getLabel } from "@/lib/data";
 import { Quadrant } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -23,7 +24,9 @@ export function Label({ quadrant }: LabelProps) {
       style={style}
     >
       <div className={styles.header}>
-        <span>Quadrant {quadrant.position}</span>
+        <span>
+          {getLabel("quadrant")} {quadrant.position}
+        </span>
         <QuadrantLink quadrant={quadrant} />
       </div>
       <h3 className={styles.title}>{quadrant.title}</h3>

src/components/Tags/Tags.tsx

@@ -5,6 +5,7 @@ import styles from "./Tags.module.css";
 
 import IconRemove from "@/components/Icons/Close";
 import IconTag from "@/components/Icons/Tag";
+import { getLabel } from "@/lib/data";
 import { cn } from "@/lib/utils";
 
 type TagProps = {
@@ -36,7 +37,7 @@ interface TagsProps {
 export function Tags({ tags, activeTag, className }: TagsProps) {
   return (
     <div className={cn(styles.tags, className)}>
-      <h3>Filter by Tag</h3>
+      <h3>{getLabel("filterByTag")}</h3>
       {tags.map((tag) => (
         <Tag key={tag} tag={tag} isActive={activeTag == tag} scroll={false} />
       ))}

src/lib/data.ts

@@ -1,15 +1,14 @@
 import config from "../../data/config.json";
 import data from "../../data/data.json";
-import messages from "../../data/messages.json";
 
 import { Flag, Item, Quadrant, Ring } from "@/lib/types";
 
-export function getMessages() {
-  return messages;
+export function getLabel(key: keyof typeof config.labels) {
+  return config.labels[key] || "";
 }
 
 export function getAppName() {
-  return messages.radarName;
+  return getLabel("title");
 }
 
 export function getChartConfig() {

src/pages/[quadrant]/[id].tsx

@@ -11,6 +11,7 @@ import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
 import {
   getItem,
   getItems,
+  getLabel,
   getQuadrant,
   sortByFeaturedAndTitle,
 } from "@/lib/data";
@@ -45,7 +46,10 @@ const ItemPage: CustomPage = () => {
           <h3>{quadrant.title}</h3>
           <div className={styles.ringAndQuadrant}>
             <RingBadge ring={item.ring} />
-            <QuadrantLink quadrant={quadrant} label="Quadrant Overview" />
+            <QuadrantLink
+              quadrant={quadrant}
+              label={getLabel("quadrantOverview")}
+            />
           </div>
 
           <ItemList items={relatedItems} activeId={item.id} />

src/pages/overview.tsx

@@ -5,11 +5,12 @@ import { useCallback, useMemo } from "react";
 
 import { Filter } from "@/components/Filter/Filter";
 import { ItemList } from "@/components/ItemList/ItemList";
-import { getItems } from "@/lib/data";
+import { getItems, getLabel } from "@/lib/data";
 import { formatTitle } from "@/lib/format";
 import { CustomPage } from "@/pages/_app";
 
 const Overview: CustomPage = () => {
+  const title = getLabel("pageOverview");
   const router = useRouter();
   const ring = router.query.ring as string | undefined;
   const query = (router.query.query as string) || "";
@@ -65,10 +66,10 @@ const Overview: CustomPage = () => {
   return (
     <>
       <Head>
-        <title>{formatTitle("Technologies Overview")}</title>
+        <title>{formatTitle(title)}</title>
       </Head>
 
-      <h1>Technologies Overview</h1>
+      <h1>{title}</h1>
       <Filter
         query={query}
         ring={ring}