feat(PageHelp): make PageHelp messages configurable

messages_example.json

@@ -42,6 +42,7 @@
         ]
       }
     ],
+    "quadrantsPreDescription": "The quadrants are:",
     "quadrants": [
       {
         "name": "Languages and Frameworks",
@@ -60,6 +61,7 @@
         "description": "(including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of."
       }
     ],
+    "ringsPreDescription": "Each of the items is classified in one of these rings:",
     "rings": [
       {
         "name": "Adopt",
@@ -82,7 +84,8 @@
       "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:"
-    }
+    },
+    "headlinePrefix": "How to use the"
   },
   "pageOverview": {
     "title": "Technologies Overview"

public/messages.json

@@ -42,6 +42,7 @@
         ]
       }
     ],
+    "quadrantsPreDescription": "The quadrants are:",
     "quadrants": [
       {
         "name": "Languages and Frameworks",
@@ -60,6 +61,7 @@
         "description": "(including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of."
       }
     ],
+    "ringsPreDescription": "Each of the items is classified in one of these rings:",
     "rings": [
       {
         "name": "Adopt",
@@ -82,7 +84,8 @@
       "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:"
-    }
+    },
+    "headlinePrefix": "How to use the"
   },
   "pageOverview": {
     "title": "Technologies Overview"

src/components/PageHelp/PageHelp.tsx

@@ -14,11 +14,12 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
   const { pageHelp } = useMessages();
 
   if (pageHelp) {
-    const { paragraphs, quadrants, rings, sourcecodeLink } = pageHelp;
+    const { paragraphs, quadrants, rings, sourcecodeLink, headlinePrefix, quadrantsPreDescription, ringsPreDescription } = pageHelp;
+    const title = `${headlinePrefix || 'How to use the'} ${radarName}`;
     return (
       <Fadeable leaving={leaving} onLeave={onLeave}>
-        <SetTitle title={"How to use the " + radarName} />
+        <SetTitle title={title}/>
-        <HeroHeadline>How to use the {radarName}</HeroHeadline>
+        <HeroHeadline>{title}</HeroHeadline>
         <div className="fullpage-content">
           {paragraphs.map(({ headline, values }) => (
             <React.Fragment key={headline}>
@@ -29,7 +30,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
             </React.Fragment>
           ))}
 
-          <p>The quadrants are:</p>
+          <p>{quadrantsPreDescription ?? "The quadrants are:"}</p>
           <ul>
             {quadrants.map(({ name, description }) => (
               <li key={name}>
@@ -38,7 +39,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
             ))}
           </ul>
 
-          <p>Each of the items is classified in one of these rings:</p>
+          <p>{ringsPreDescription ?? "Each of the items is classified in one of these rings:"}</p>
           <ul>
             {rings.map(({ name, description }) => (
               <li key={name}>

src/context/MessagesContext/index.tsx

@@ -18,13 +18,16 @@ interface Paragraph {
 
 interface PageHelp {
   paragraphs: Paragraph[];
+  quadrantsPreDescription?: string;
   quadrants: Quadrant[];
   rings: Ring[];
+  ringsPreDescription?: string;
   sourcecodeLink?: {
     href: string;
     name: string;
     description: string;
   };
+  headlinePrefix?: string
 }
 
 interface PageOverview {