AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: allow to define format for page title

Browse Source 
respect this config option also when generating static content.

closes #376
This commit is contained in:
Danny Koppenhagen
2023-06-19 14:44:28 +02:00
committed by Stefan Rotsch
parent 8876d3b1c7
commit 810db6aea6
8 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -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 "/".

2
dist_scripts/scripts/buildRadar.js
View File

@@ -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);

2
dist_scripts/scripts/createStaticFiles.js
View File

@@ -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);

9
dist_scripts/src/config.js
View File

@@ -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); });
};

1
scripts/buildRadar.ts
View File

@@ -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,

6
scripts/createStaticFiles.ts
View File

@@ -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);

4
src/components/SetTitle.tsx
View File

@@ -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;

7
src/config.ts
View File

@@ -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}`);