use create react app to simplify the application

This commit is contained in:
dennis.ludwig
2021-06-10 10:08:45 +02:00
parent 630e03a92d
commit 8231afa50f
47 changed files with 1288 additions and 12936 deletions

69
tasks/create-static.js Normal file
View File

@@ -0,0 +1,69 @@
#!/usr/bin/env node
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { createRadar } from "./radar";
import { copyFileSync, mkdirSync } from "fs";
import { quadrants } from "../src/config";
(function () { return __awaiter(void 0, void 0, void 0, function () {
var radar, e_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
console.log('starting static');
return [4 /*yield*/, createRadar()];
case 1:
radar = _a.sent();
copyFileSync('build/index.html', 'build/overview.html');
copyFileSync('build/index.html', 'build/help-and-about-tech-radar.html');
quadrants.forEach(function (quadrant) {
copyFileSync('build/index.html', 'build/' + quadrant + '.html');
mkdirSync('build/' + quadrant);
});
radar.items.forEach(function (item) {
copyFileSync('build/index.html', 'build/' + item.quadrant + '/' + item.name + '.html');
});
console.log('created static');
return [3 /*break*/, 3];
case 2:
e_1 = _a.sent();
console.error('error:', e_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); })();

86
tasks/file.js Normal file
View File

@@ -0,0 +1,86 @@
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
import { outputFile } from 'fs-extra';
import path from 'path';
import { walk } from 'walk';
export var relativePath = function () {
var relativePath = [];
for (var _i = 0; _i < arguments.length; _i++) {
relativePath[_i] = arguments[_i];
}
return (
// path.resolve(__dirname, '..', ...relativePath)
path.resolve.apply(
// path.resolve(__dirname, '..', ...relativePath)
path, relativePath));
};
export var radarPath = function () {
var pathInSrc = [];
for (var _i = 0; _i < arguments.length; _i++) {
pathInSrc[_i] = arguments[_i];
}
return (relativePath.apply(void 0, __spreadArray(['radar'], pathInSrc)));
};
export var stylesPath = function () {
var pathInSrc = [];
for (var _i = 0; _i < arguments.length; _i++) {
pathInSrc[_i] = arguments[_i];
}
return (relativePath.apply(void 0, __spreadArray(['styles'], pathInSrc)));
};
export var assetsPath = function () {
var pathInSrc = [];
for (var _i = 0; _i < arguments.length; _i++) {
pathInSrc[_i] = arguments[_i];
}
return (relativePath.apply(void 0, __spreadArray(['assets'], pathInSrc)));
};
export var faviconPath = function () {
var pathInSrc = [];
for (var _i = 0; _i < arguments.length; _i++) {
pathInSrc[_i] = arguments[_i];
}
return (relativePath.apply(void 0, __spreadArray(['assets/favicon.ico'], pathInSrc)));
};
export var jsPath = function () {
var pathInSrc = [];
for (var _i = 0; _i < arguments.length; _i++) {
pathInSrc[_i] = arguments[_i];
}
return (relativePath.apply(void 0, __spreadArray(['js'], pathInSrc)));
};
export var distPath = function () {
var pathInDist = [];
for (var _i = 0; _i < arguments.length; _i++) {
pathInDist[_i] = arguments[_i];
}
return (relativePath.apply(void 0, __spreadArray(['src'], pathInDist)));
};
export var getAllMarkdownFiles = function (folder) { return (getAllFiles(folder, isMarkdownFile)); };
var getAllFiles = function (folder, predicate) { return (new Promise(function (resolve, reject) {
var walker = walk(folder, { followLinks: false });
var files = [];
walker.on("file", function (root, fileStat, next) {
if (predicate(fileStat.name)) {
files.push(path.resolve(root, fileStat.name));
}
next();
});
walker.on("errors", function (root, nodeStatsArray, next) {
nodeStatsArray.forEach(function (n) {
console.error("[ERROR] " + n.name);
if (n.error) {
console.error(n.error.message || (n.error.code + ": " + n.error.path));
}
});
next();
});
walker.on("end", function () {
resolve(files.sort());
});
})); };
var isMarkdownFile = function (name) { return name.match(/\.md$/) !== null; };
export var save = function (data, fileName) { return outputFile(distPath(fileName), data); };

View File

@@ -1,41 +1,42 @@
import { outputFile } from 'fs-extra';
import path from 'path';
import { walk } from 'walk';
import { outputFile } from "fs-extra";
import path from "path";
import { walk } from "walk";
export const relativePath = (...relativePath: string[]): string => (
export const relativePath = (...relativePath: string[]): string =>
// path.resolve(__dirname, '..', ...relativePath)
path.resolve(...relativePath)
);
path.resolve(...relativePath);
export const radarPath = (...pathInSrc: string[]) => (
relativePath('radar', ...pathInSrc)
);
export const radarPath = (...pathInSrc: string[]) =>
relativePath("radar", ...pathInSrc);
export const stylesPath = (...pathInSrc: string[]) => (
relativePath('styles', ...pathInSrc)
);
export const stylesPath = (...pathInSrc: string[]) =>
relativePath("styles", ...pathInSrc);
export const assetsPath = (...pathInSrc: string[]) => (
relativePath('assets', ...pathInSrc)
);
export const assetsPath = (...pathInSrc: string[]) =>
relativePath("assets", ...pathInSrc);
export const faviconPath = (...pathInSrc: string[]) => (
relativePath('assets/favicon.ico', ...pathInSrc)
);
export const faviconPath = (...pathInSrc: string[]) =>
relativePath("assets/favicon.ico", ...pathInSrc);
export const jsPath = (...pathInSrc: string[]) => (
relativePath('js', ...pathInSrc)
);
export const jsPath = (...pathInSrc: string[]) =>
relativePath("js", ...pathInSrc);
export const distPath = (...pathInDist: string[]) => (
relativePath('src', ...pathInDist)
);
export const publicPath = (...pathInDist: string[]) =>
relativePath("public", ...pathInDist);
export const getAllMarkdownFiles = (folder: string) => (
getAllFiles(folder, isMarkdownFile)
);
export const buildPath = (...pathInDist: string[]) =>
relativePath("build", ...pathInDist);
const getAllFiles = (folder: string, predicate: (s: string) => boolean): Promise<string[]> => (
export const builderPath = (...pathInDist: string[]) =>
relativePath("node_modules", "aoe_technology_radar", "src", ...pathInDist);
export const getAllMarkdownFiles = (folder: string) =>
getAllFiles(folder, isMarkdownFile);
const getAllFiles = (
folder: string,
predicate: (s: string) => boolean
): Promise<string[]> =>
new Promise((resolve, reject) => {
const walker = walk(folder, { followLinks: false });
const files: string[] = [];
@@ -49,9 +50,9 @@ const getAllFiles = (folder: string, predicate: (s: string) => boolean): Promise
walker.on("errors", (root, nodeStatsArray, next) => {
nodeStatsArray.forEach(function (n) {
console.error("[ERROR] " + n.name)
console.error("[ERROR] " + n.name);
if (n.error) {
console.error(n.error.message || (n.error.code + ": " + n.error.path));
console.error(n.error.message || n.error.code + ": " + n.error.path);
}
});
next();
@@ -60,9 +61,9 @@ const getAllFiles = (folder: string, predicate: (s: string) => boolean): Promise
walker.on("end", () => {
resolve(files.sort());
});
})
);
});
const isMarkdownFile = (name: string) => name.match(/\.md$/) !== null;
export const save = (data: string | Buffer | DataView, fileName: string) => outputFile(distPath(fileName), data);
export const save = (data: string | Buffer | DataView, fileName: string) =>
outputFile(buildPath(fileName), data);

186
tasks/radar.js Normal file
View File

@@ -0,0 +1,186 @@
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
import { readFile } from 'fs-extra';
import path from 'path';
import frontmatter from 'front-matter';
import marked from 'marked';
import hljs from 'highlight.js';
import { quadrants, rings } from '../src/config';
import { radarPath, getAllMarkdownFiles } from './file';
marked.setOptions({
highlight: function (code) { return hljs.highlightAuto(code).value; },
});
export var createRadar = function () { return __awaiter(void 0, void 0, void 0, function () {
var fileNames, revisions, allReleases, items, flaggedItems;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, getAllMarkdownFiles(radarPath())];
case 1:
fileNames = _a.sent();
return [4 /*yield*/, createRevisionsFromFiles(fileNames)];
case 2:
revisions = _a.sent();
allReleases = getAllReleases(revisions);
items = createItems(revisions);
flaggedItems = flagItem(items, allReleases);
return [2 /*return*/, {
items: flaggedItems,
releases: allReleases,
}];
}
});
}); };
var checkAttributes = function (fileName, attributes) {
if (attributes.ring && !rings.includes(attributes.ring)) {
throw new Error("Error: " + fileName + " has an illegal value for 'ring' - must be one of " + rings);
}
if (attributes.quadrant && !quadrants.includes(attributes.quadrant)) {
throw new Error("Error: " + fileName + " has an illegal value for 'quadrant' - must be one of " + quadrants);
}
return attributes;
};
var createRevisionsFromFiles = function (fileNames) {
return Promise.all(fileNames.map(function (fileName) {
return new Promise(function (resolve, reject) {
readFile(fileName, 'utf8', function (err, data) {
if (err) {
reject(err);
}
else {
var fm = frontmatter(data);
// add target attribute to external links
// todo: check path
var html = marked(fm.body.replace(/\]\(\//g, '](/techradar/'));
html = html.replace(/a href="http/g, 'a target="_blank" rel="noopener noreferrer" href="http');
resolve(__assign(__assign(__assign({}, itemInfoFromFilename(fileName)), checkAttributes(fileName, fm.attributes)), { fileName: fileName, body: html }));
}
});
});
}));
};
var itemInfoFromFilename = function (fileName) {
var _a = fileName.split(path.sep).slice(-2), release = _a[0], name = _a[1];
return {
name: path.basename(name, '.md'),
release: release,
};
};
var getAllReleases = function (revisions) {
return revisions
.reduce(function (allReleases, _a) {
var release = _a.release;
if (!allReleases.includes(release)) {
return __spreadArray(__spreadArray([], allReleases), [release]);
}
return allReleases;
}, [])
.sort();
};
var createItems = function (revisions) {
var itemMap = revisions.reduce(function (items, revision) {
var _a;
return __assign(__assign({}, items), (_a = {}, _a[revision.name] = addRevisionToItem(items[revision.name], revision), _a));
}, {});
return Object.values(itemMap).map(function (item) {
var _a;
return (__assign(__assign({}, item), (_a = {}, _a['title'] = item.title || item.name, _a)));
}).sort(function (x, y) { return (x.name > y.name ? 1 : -1); });
};
var ignoreEmptyRevisionBody = function (revision, item) {
if (!revision.body || revision.body.trim() === '') {
return item.body;
}
return revision.body;
};
var addRevisionToItem = function (item, revision) {
if (item === void 0) { item = {
flag: 'default',
featured: true,
revisions: [],
name: '',
title: '',
ring: 'trial',
quadrant: '',
body: '',
info: '',
}; }
var newItem = __assign(__assign(__assign({}, item), revision), { body: ignoreEmptyRevisionBody(revision, item) });
if (revisionCreatesNewHistoryEntry(revision)) {
newItem = __assign(__assign({}, newItem), { revisions: __spreadArray([revision], newItem.revisions) });
}
return newItem;
};
var revisionCreatesNewHistoryEntry = function (revision) {
return revision.body.trim() !== '' || typeof revision.ring !== 'undefined';
};
var flagItem = function (items, allReleases) {
return items.map(function (item) { return (__assign(__assign({}, item), { flag: getItemFlag(item, allReleases) })); }, []);
};
var isInLastRelease = function (item, allReleases) {
return item.revisions[0].release === allReleases[allReleases.length - 1];
};
var isNewItem = function (item, allReleases) {
return item.revisions.length === 1 && isInLastRelease(item, allReleases);
};
var hasItemChanged = function (item, allReleases) {
return item.revisions.length > 1 && isInLastRelease(item, allReleases);
};
var getItemFlag = function (item, allReleases) {
if (isNewItem(item, allReleases)) {
return 'new';
}
if (hasItemChanged(item, allReleases)) {
return 'changed';
}
return 'default';
};

61
tasks/radarjson.js Normal file
View File

@@ -0,0 +1,61 @@
#!/usr/bin/env node
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { createRadar } from "./radar";
import { save } from "./file";
export var radarJsonGenerator = function () { return __awaiter(void 0, void 0, void 0, function () {
var radar, e_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
console.log("start");
return [4 /*yield*/, createRadar()];
case 1:
radar = _a.sent();
save(JSON.stringify(radar), "rd.json");
save("import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from 'aoe_technology_radar/src/components/App';\nimport 'aoe_technology_radar/src/index.scss';\nimport radardata from './rd.json';\n\nReactDOM.render(\n <React.StrictMode>\n <App items={radardata.items as Item[]} releases={radardata.releases as string[]} />\n </React.StrictMode>,\n document.getElementById('root')\n);\n", "index.tsx");
console.log("Built radar");
return [3 /*break*/, 3];
case 2:
e_1 = _a.sent();
console.error("error:", e_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };

View File

@@ -1,36 +1,14 @@
#!/usr/bin/env node
import {createRadar} from "./radar";
import {save} from "./file";
import {copyFileSync, mkdir, mkdirSync} from "fs";
import {quadrants} from "../src/config";
import { createRadar } from "./radar";
import { save } from "./file";
export const radarJsonGenerator = async () => {
try {
const radar = await createRadar();
export const radarJsonGenerator = (async () => {
try {
console.log('start')
const radar = await createRadar();
// console.log(radar);
save(JSON.stringify(radar), 'rd.json')
save(`import React from 'react';
import ReactDOM from 'react-dom';
import App from 'aoe_technology_radar/src/components/App';
import 'aoe_technology_radar/src/index.scss';
import {Item} from "aoe_technology_radar/src/model";
import radardata from './rd.json';
ReactDOM.render(
<React.StrictMode>
<App items={radardata.items as Item[]} releases={radardata.releases as string[]} />
</React.StrictMode>,
document.getElementById('root')
);
`, 'index.tsx')
console.log('Built radar');
} catch (e) {
console.error('error:', e);
}
})
await save(JSON.stringify(radar), "rd.json");
} catch (e) {
console.error("error:", e);
}
};