feat: allow to define format for page title

respect this config option also when generating static content. closes AOEpeople#376
medic · Jun 28, 2023 · 810db6a · 810db6a
1 parent 8876d3b
commit 810db6a
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -102,6 +102,14 @@ You can customize the following parts of the tech radar.
 ### Change title, description and headline
 Set the environment variable `REACT_APP_RADAR_NAME`. The default is "AOE Technology Radar".
 
+Set the environment variable `REACT_APP_RADAR_TITLE_FORMAT` to define the title format for each technology page.
+You can use two placeholders here:
+
+- `%TECHNOLOGY_NAME%`: The name of the technology will be inserted
+- `%APP_TITLE%`: The base app name (from `REACT_APP_RADAR_NAME`) will be inserted
+
+For example: `%TECHNOLOGY_NAME% | %APP_TITLE%`
+
 ### Host the application under a sub path
 To host the application under a sub path, set the environment variable `PUBLIC_URL`, e.g. "/techradar". The default is "/".
 

diff --git a/dist_scripts/scripts/buildRadar.js b/dist_scripts/scripts/buildRadar.js
@@ -55,7 +55,7 @@ var runCommand = function (command) {
         var executedCommand = (0, child_process_1.spawn)(command, {
             stdio: "inherit",
             shell: true,
-            env: __assign({ REACT_APP_RADAR_NAME: "AOE Technology Radar", REACT_APP_BUILDHASH: (0, crypto_1.randomBytes)(10).toString("hex"), GENERATE_SOURCEMAP: "false" }, process.env),
+            env: __assign({ REACT_APP_RADAR_NAME: "AOE Technology Radar", REACT_APP_RADAR_TITLE_FORMAT: "%TECHNOLOGY_NAME% | %APP_TITLE%", REACT_APP_BUILDHASH: (0, crypto_1.randomBytes)(10).toString("hex"), GENERATE_SOURCEMAP: "false" }, process.env),
         });
         executedCommand.on("error", function (error) {
             reject(error);

diff --git a/dist_scripts/scripts/createStaticFiles.js b/dist_scripts/scripts/createStaticFiles.js
@@ -86,6 +86,8 @@ var createStaticFiles = function () { return __awaiter(void 0, void 0, void 0, f
                     jsdom_1.JSDOM.fromFile(targetPath).then(function (dom) {
                         var document = dom.window.document;
                         var rootEl = document.getElementById("root");
+                        document.title = "test";
+                        (0, config_1.setTitle)(document, item.title);
                         if (rootEl) {
                             var textNode = document.createElement("div");
                             var bodyFragment = jsdom_1.JSDOM.fragment(item.body);

diff --git a/dist_scripts/src/config.js b/dist_scripts/src/config.js
@@ -1,8 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translate = exports.assetUrl = exports.publicUrl = exports.isMobileViewport = exports.getItemPageNames = exports.radarNameShort = exports.radarName = void 0;
+exports.translate = exports.assetUrl = exports.publicUrl = exports.isMobileViewport = exports.getItemPageNames = exports.setTitle = exports.titleFormat = exports.radarNameShort = exports.radarName = void 0;
 exports.radarName = process.env.REACT_APP_RADAR_NAME || "AOE Technology Radar";
 exports.radarNameShort = exports.radarName;
+exports.titleFormat = process.env.REACT_APP_RADAR_TITLE_FORMAT || "%TECHNOLOGY_NAME% | %APP_TITLE%";
+function setTitle(document, title) {
+    document.title = exports.titleFormat
+        .replace("%TECHNOLOGY_NAME%", title)
+        .replace("%APP_TITLE%", exports.radarName);
+}
+exports.setTitle = setTitle;
 var getItemPageNames = function (items) {
     return items.map(function (item) { return "".concat(item.quadrant, "/").concat(item.name); });
 };

diff --git a/scripts/buildRadar.ts b/scripts/buildRadar.ts
@@ -26,6 +26,7 @@ const runCommand = (command: string) =>
       shell: true,
       env: {
         REACT_APP_RADAR_NAME: "AOE Technology Radar",
+        REACT_APP_RADAR_TITLE_FORMAT: "%TECHNOLOGY_NAME% | %APP_TITLE%",
         REACT_APP_BUILDHASH: randomBytes(10).toString("hex"),
         GENERATE_SOURCEMAP: "false",
         ...process.env,

diff --git a/scripts/createStaticFiles.ts b/scripts/createStaticFiles.ts
@@ -9,7 +9,7 @@ import {
 import { JSDOM } from "jsdom";
 import XmlSitemap from "xml-sitemap";
 
-import { publicUrl } from "../src/config";
+import { publicUrl, setTitle } from "../src/config";
 import { createRadar } from "./generateJson/radar";
 
 // Do this as the first thing so that any code reading it knows the right env.
@@ -56,6 +56,10 @@ const createStaticFiles = async () => {
       const document = dom.window.document;
       const rootEl = document.getElementById("root");
 
+      document.title = 'test'
+
+      setTitle(document, item.title)
+
       if (rootEl) {
         const textNode = document.createElement("div");
         const bodyFragment = JSDOM.fragment(item.body);

diff --git a/src/components/SetTitle.tsx b/src/components/SetTitle.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from "react";
 
-import { radarName } from "../config";
+import { setTitle } from "../config";
 
 type SetTitleProps = {
   title: string;
 };
 
 export default function SetTitle({ title }: SetTitleProps) {
   useEffect(() => {
-    document.title = `${title} | ${radarName}`;
+    setTitle(document, title)
   }, [title]);
 
   return null;

diff --git a/src/config.ts b/src/config.ts
@@ -23,6 +23,13 @@ export interface ConfigData {
 export const radarName =
   process.env.REACT_APP_RADAR_NAME || "AOE Technology Radar";
 export const radarNameShort = radarName;
+export const titleFormat = process.env.REACT_APP_RADAR_TITLE_FORMAT || "%TECHNOLOGY_NAME% | %APP_TITLE%"
+
+export function setTitle(document: Document, title: string) {
+  document.title = titleFormat
+    .replace('%TECHNOLOGY_NAME%', title)
+    .replace('%APP_TITLE%', radarName)
+}
 
 export const getItemPageNames = (items: Item[]) =>
   items.map((item) => `${item.quadrant}/${item.name}`);