From 810db6aea618e471a219a4898d083a5bc7011255 Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Mon, 19 Jun 2023 14:44:28 +0200 Subject: [PATCH] feat: allow to define format for page title respect this config option also when generating static content. closes #376 --- README.md | 8 ++++++++ dist_scripts/scripts/buildRadar.js | 2 +- dist_scripts/scripts/createStaticFiles.js | 2 ++ dist_scripts/src/config.js | 9 ++++++++- scripts/buildRadar.ts | 1 + scripts/createStaticFiles.ts | 6 +++++- src/components/SetTitle.tsx | 4 ++-- src/config.ts | 7 +++++++ 8 files changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 5cd6b24..9126a6c 100644 --- 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 index b13af2f..0b985fd 100755 --- 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 index 6173627..94d6a33 100755 --- 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 index 4880d0a..2f83e0f 100644 --- 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 index e817e9b..f898558 100644 --- 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 index aa778d4..2a24af8 100644 --- 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 index feec9be..9da3a27 100644 --- a/src/components/SetTitle.tsx +++ b/src/components/SetTitle.tsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; -import { radarName } from "../config"; +import { setTitle } from "../config"; type SetTitleProps = { title: string; @@ -8,7 +8,7 @@ type SetTitleProps = { 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 index 0eca0d2..04dad0c 100644 --- 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}`);