add option to customize the logo, favicon and add images.

This commit is contained in:
dennis.ludwig
2021-06-14 13:44:17 +02:00
parent 144d5f621c
commit 897bd5a084
11 changed files with 39 additions and 35 deletions

1
.env
View File

@@ -1 +1,2 @@
RADAR_NAME=AOE Technology Radar
PUBLIC_URL=/techradar PUBLIC_URL=/techradar

View File

@@ -1,15 +1,12 @@
# AOE Technology Radar # AOE Technology Radar
A static site generator for AOE Technology Radar A static site generator for AOE Technology Radar
## Looking for the AOE Tech Radar content? ## Looking for the AOE Tech Radar content?
The repository is now found here: https://github.com/AOEpeople/techradar The repository is now found here: https://github.com/AOEpeople/techradar
The AOE Tech radar is deployed here: https://www.aoe.com/techradar/index.html The AOE Tech radar is deployed here: https://www.aoe.com/techradar/index.html
## Usage for your own radar? ## Usage for your own radar?
The generator is free to use under Open Source License - in fact there are already some other Radars published based on our Radar and there are also Contributions back. The generator is free to use under Open Source License - in fact there are already some other Radars published based on our Radar and there are also Contributions back.
(There is a list of planned features below in case someone wants to contribute :-) (There is a list of planned features below in case someone wants to contribute :-)
@@ -18,7 +15,6 @@ However, please be aware:
* Also, when you want to reuse the CSS and Styling: Change the font (it is a licensed font) and the colors (It using AOE CI) * Also, when you want to reuse the CSS and Styling: Change the font (it is a licensed font) and the colors (It using AOE CI)
## Use and build ## Use and build
Add the tech radar as a dependency Add the tech radar as a dependency
``` ```
yarn add https://github.com/aoepeople/aoe_technology_radar.git yarn add https://github.com/aoepeople/aoe_technology_radar.git
@@ -43,7 +39,6 @@ python3 -m http.server 8080
Then open here: http://localhost:8080 Then open here: http://localhost:8080
## Run a prepared static version ## Run a prepared static version
In most cases you have the tech radar available at `/techradar`, and for reasons want all correct pages to be accessible. In most cases you have the tech radar available at `/techradar`, and for reasons want all correct pages to be accessible.
Until this setup improves, you can use the following way to generate the correct tech radar: Until this setup improves, you can use the following way to generate the correct tech radar:
@@ -57,14 +52,32 @@ cp -r build techradar
(This is rather workaroundish for now, but does the job.) (This is rather workaroundish for now, but does the job.)
## Usage ## Customize the tech radar
You can customize the following parts of the tech radar.
### Change title, description and headline
Set the environment variable `RADAR_NAME`. The default is "AOE Technology Radar".
### Host the application under a sub path
To host the application under a sub path, set the environment variable `PUBLIC_URL`, e.g. "/techradar".
### Change the favicon
To change the favicon, create a public folder in your application and put your favicon.ico in it.
### Change the logo
To change the logo, create a public folder in your application and put your logo.svg in it.
For reference have a look at [public/logo.svg](./public/logo.svg).
### Change the index.html
To change the index.html, create a public folder in your application and put your index.html in it.
For reference have a look at [public/index.html](./public/index.html).
## Usage
For a new Technology Radar release, create a folder of the release date For a new Technology Radar release, create a folder of the release date
(YYYY-MM-DD) under `/radar`. In each release folder create a folder for every (YYYY-MM-DD) under `/radar`. In each release folder create a folder for every
quadrant and place the items there. quadrant and place the items there.
### Maintaining items ### Maintaining items
The items are written in Markdown format (.md) The items are written in Markdown format (.md)
Each file has a [front-matter](https://github.com/jxson/front-matter) header Each file has a [front-matter](https://github.com/jxson/front-matter) header
@@ -97,24 +110,12 @@ the same name from older releases.
If an item is overwritten in a new release, the attributes from the new item are If an item is overwritten in a new release, the attributes from the new item are
merged with the old ones, and a new history entry is created for that item. merged with the old ones, and a new history entry is created for that item.
## Open points You can integrate images in your markdown. Put the image files in your public folder and reference them
```
![nice image](/images/nice-image.png)
```
* dotenv necessary? -> Could be necessary for other companies ## Development
* measure file sizes necessary? -> no ### Change scripts
* check browsers necessary? -> no If you change one of the scripts in the scripts' folder, you have to compile them to JavaScript.
* copy public folder necessary? -> no Therefore, run `yarn build:scripts` and commit the results in dist_scripts.
* specific webpack configurations necessary? -> no
## TODOs
* add dist folder for precompiled builder
* add default envs to .env file
** add envs to readme
* Check package.json scripts
* Add documentation for build dist_scripts folder
* prettier on all files
* check lint staged and prettier
* Rename package to make more clear that this is a tech radar builder?
* provide only one bin script with subcommands like react-scripts?
* add tests for scripts
* add tests for components

View File

@@ -63,6 +63,7 @@ var buildTemplate = function () {
if (fs.existsSync(paths.appRdJson)) { if (fs.existsSync(paths.appRdJson)) {
buildTemplate().then(function () { buildTemplate().then(function () {
fs.copySync(paths.templateBuild, paths.appBuild); fs.copySync(paths.templateBuild, paths.appBuild);
fs.copySync(paths.appPublic, paths.appBuild);
console.log(paths.appBuild + " was created and can be deployed."); console.log(paths.appBuild + " was created and can be deployed.");
}); });
} }

View File

@@ -1,6 +1,6 @@
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
exports.appYarnLock = exports.appBuild = exports.appRdJson = exports.templateBuild = exports.template = exports.radarJson = void 0; exports.appYarnLock = exports.appPublic = exports.appBuild = exports.appRdJson = exports.templateBuild = exports.template = exports.radarJson = void 0;
var path_1 = require("path"); var path_1 = require("path");
var fs_1 = require("fs"); var fs_1 = require("fs");
exports.radarJson = "rd.json"; exports.radarJson = "rd.json";
@@ -12,10 +12,11 @@ var resolveApp = function (relativePath) {
var templateDirectory = fs_1.realpathSync(__dirname); var templateDirectory = fs_1.realpathSync(__dirname);
var resolveTemplate = function (relativePath) { var resolveTemplate = function (relativePath) {
if (relativePath === void 0) { relativePath = ""; } if (relativePath === void 0) { relativePath = ""; }
return path_1.resolve(templateDirectory, "..", relativePath); return path_1.resolve(templateDirectory, "../..", relativePath);
}; };
exports.template = resolveTemplate(); exports.template = resolveTemplate();
exports.templateBuild = resolveTemplate("build"); exports.templateBuild = resolveTemplate("build");
exports.appRdJson = resolveApp("build/" + exports.radarJson); exports.appRdJson = resolveApp("build/" + exports.radarJson);
exports.appBuild = resolveApp("build"); exports.appBuild = resolveApp("build");
exports.appPublic = resolveApp("public");
exports.appYarnLock = resolveApp("yarn.lock"); exports.appYarnLock = resolveApp("yarn.lock");

View File

@@ -16,13 +16,11 @@
}, },
"scripts": { "scripts": {
"prepare": "husky install && yarn build:scripts", "prepare": "husky install && yarn build:scripts",
"start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"build:scripts": "tsc --project tsconfig.scripts.json", "build:scripts": "tsc --project tsconfig.scripts.json",
"test": "react-scripts test", "test": "react-scripts test",
"ts:check": "tsc --noEmit", "ts:check": "tsc --noEmit",
"lint": "yarn ts:check", "lint": "yarn ts:check"
"eject": "react-scripts eject"
}, },
"dependencies": { "dependencies": {
"classnames": "^2.3.1", "classnames": "^2.3.1",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

View File

@@ -50,6 +50,7 @@ const buildTemplate = () => {
if (fs.existsSync(paths.appRdJson)) { if (fs.existsSync(paths.appRdJson)) {
buildTemplate().then(() => { buildTemplate().then(() => {
fs.copySync(paths.templateBuild, paths.appBuild); fs.copySync(paths.templateBuild, paths.appBuild);
fs.copySync(paths.appPublic, paths.appBuild);
console.log(`${paths.appBuild} was created and can be deployed.`); console.log(`${paths.appBuild} was created and can be deployed.`);
}); });
} else { } else {

View File

@@ -6,10 +6,11 @@ const appDirectory = realpathSync(process.cwd());
const resolveApp = (relativePath = "") => resolve(appDirectory, relativePath); const resolveApp = (relativePath = "") => resolve(appDirectory, relativePath);
const templateDirectory = realpathSync(__dirname); const templateDirectory = realpathSync(__dirname);
const resolveTemplate = (relativePath = "") => const resolveTemplate = (relativePath = "") =>
resolve(templateDirectory, "..", relativePath); resolve(templateDirectory, "../..", relativePath);
export const template = resolveTemplate(); export const template = resolveTemplate();
export const templateBuild = resolveTemplate("build"); export const templateBuild = resolveTemplate("build");
export const appRdJson = resolveApp(`build/${radarJson}`); export const appRdJson = resolveApp(`build/${radarJson}`);
export const appBuild = resolveApp("build"); export const appBuild = resolveApp("build");
export const appPublic = resolveApp("public");
export const appYarnLock = resolveApp("yarn.lock"); export const appYarnLock = resolveApp("yarn.lock");