feat(PageHelp): make PageHelp messages configurable

medic · Nov 10, 2021 · 1e34332 · 1e34332
1 parent 265a831
commit 1e34332
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/messages_example.json b/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"

diff --git a/public/messages.json b/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"

diff --git a/src/components/PageHelp/PageHelp.tsx b/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} />
- <HeroHeadline>How to use the {radarName}</HeroHeadline>
+ <SetTitle title={title}/>
+ <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}>

diff --git a/src/context/MessagesContext/index.tsx b/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 {