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

add static generation

Browse Source
This commit is contained in:
dennis.ludwig
2021-06-11 11:48:05 +02:00
parent 02c81de12e
commit e2aec44ad7
8 changed files with 132 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@@ -1 +1 @@
PUBLIC_URL=techradar/
PUBLIC_URL=/techradar

41
bin/src/config.js
View File

@@ -1,42 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.assetUrl = exports.isMobileViewport = exports.translate = exports.showEmptyRings = exports.getItemPageNames = exports.rings = exports.quadrants = exports.radarNameShort = exports.radarName = void 0;
exports.radarName = process.env.RADAR_NAME || 'AOE Technology Radar';
exports.radarName = process.env.RADAR_NAME || "AOE Technology Radar";
exports.radarNameShort = exports.radarName;
exports.quadrants = [
'languages-and-frameworks',
'methods-and-patterns',
'platforms-and-aoe-services',
'tools',
"languages-and-frameworks",
"methods-and-patterns",
"platforms-and-aoe-services",
"tools",
];
exports.rings = [
'all',
'adopt',
'trial',
'assess',
'hold'
];
var getItemPageNames = function (items) { return items.map(function (item) { return item.quadrant + "/" + item.name; }); };
exports.rings = ["all", "adopt", "trial", "assess", "hold"];
var getItemPageNames = function (items) {
return items.map(function (item) { return item.quadrant + "/" + item.name; });
};
exports.getItemPageNames = getItemPageNames;
exports.showEmptyRings = false;
var messages = {
'languages-and-frameworks': 'Languages & Frameworks',
'methods-and-patterns': 'Methods & Patterns',
'platforms-and-aoe-services': 'Platforms and Operations',
'tools': 'Tools',
"languages-and-frameworks": "Languages & Frameworks",
"methods-and-patterns": "Methods & Patterns",
"platforms-and-aoe-services": "Platforms and Operations",
tools: "Tools",
};
var translate = function (key) { return (messages[key] || '-'); };
var translate = function (key) { return messages[key] || "-"; };
exports.translate = translate;
function isMobileViewport() {
// return false for server side rendering
if (typeof window == 'undefined')
if (typeof window == "undefined")
return false;
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
return width < 1200;
}
exports.isMobileViewport = isMobileViewport;
function assetUrl(file) {
return process.env.PUBLIC_URL + '/' + file;
// return `/techradar/assets/${file}`
return process.env.PUBLIC_URL + "/" + file;
}
exports.assetUrl = assetUrl;

19
bin/tasks/create-static.js
View File

@@ -46,24 +46,27 @@ var config_1 = require("../src/config");
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
console.log('starting static');
console.log("starting static");
return [4 /*yield*/, radar_1.createRadar()];
case 1:
radar = _a.sent();
fs_1.copyFileSync('build/index.html', 'build/overview.html');
fs_1.copyFileSync('build/index.html', 'build/help-and-about-tech-radar.html');
fs_1.copyFileSync("build/index.html", "build/overview.html");
fs_1.copyFileSync("build/index.html", "build/help-and-about-tech-radar.html");
config_1.quadrants.forEach(function (quadrant) {
fs_1.copyFileSync('build/index.html', 'build/' + quadrant + '.html');
fs_1.mkdirSync('build/' + quadrant);
var destFolder = "build/" + quadrant;
fs_1.copyFileSync("build/index.html", destFolder + ".html");
if (!fs_1.existsSync(destFolder)) {
fs_1.mkdirSync(destFolder);
}
});
radar.items.forEach(function (item) {
fs_1.copyFileSync('build/index.html', 'build/' + item.quadrant + '/' + item.name + '.html');
fs_1.copyFileSync("build/index.html", "build/" + item.quadrant + "/" + item.name + ".html");
});
console.log('created static');
console.log("created static");
return [3 /*break*/, 3];
case 2:
e_1 = _a.sent();
console.error('error:', e_1);
console.error("error:", e_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}

8
src/components/App.tsx
View File

@@ -61,7 +61,7 @@ interface Data {
export default function App() {
const [data, setData] = React.useState<Data>();
React.useEffect(() => {
fetch("rd.json")
fetch(`${process.env.PUBLIC_URL}/rd.json`)
.then((response) => response.json())
.then((data: Data) => {
setData(data);
@@ -74,9 +74,9 @@ export default function App() {
if (data) {
const { items, releases } = data;
return (
<BrowserRouter>
<BrowserRouter basename={`${process.env.PUBLIC_URL}`}>
<Switch>
<Route path={"/techradar/:page(.+).html"}>
<Route path={"/:page(.+).html"}>
<div>
<div className="page">
<div className="page__header">
@@ -92,7 +92,7 @@ export default function App() {
</div>
</Route>
<Route path={"/"}>
<Redirect to={"/techradar/index.html"} />
<Redirect to={"/index.html"} />
</Route>
</Switch>
</BrowserRouter>

66
src/components/Header/Header.tsx
View File

@@ -1,16 +1,16 @@
import React, { useState, useRef } from 'react';
import classNames from 'classnames';
import Branding from '../Branding/Branding';
import Link from '../Link/Link';
import LogoLink from '../LogoLink/LogoLink';
import Search from '../Search/Search';
import { radarNameShort } from '../../config';
import { useHistory } from 'react-router-dom';
import qs from 'query-string';
import React, { useState, useRef } from "react";
import classNames from "classnames";
import Branding from "../Branding/Branding";
import Link from "../Link/Link";
import LogoLink from "../LogoLink/LogoLink";
import Search from "../Search/Search";
import { radarNameShort } from "../../config";
import { useHistory } from "react-router-dom";
import qs from "query-string";
export default function Header({ pageName }: { pageName: string }) {
const [searchOpen, setSearchOpen] = useState(false);
const [search, setSearch] = useState('');
const [search, setSearch] = useState("");
const history = useHistory();
const searchRef = useRef<HTMLInputElement>(null);
@@ -23,17 +23,17 @@ export default function Header({ pageName }: { pageName: string }) {
};
const handleSearchChange = (value: string) => {
setSearch(value)
setSearch(value);
};
const handleSearchSubmit = () => {
history.push({
pathname: '/techradar/overview.html',
search: qs.stringify({search: search}),
})
pathname: "/overview.html",
search: qs.stringify({ search: search }),
});
setSearchOpen(false);
setSearch('');
setSearch("");
};
const handleOpenClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -44,27 +44,37 @@ export default function Header({ pageName }: { pageName: string }) {
}, 0);
};
const smallLogo = pageName !== 'index';
const smallLogo = pageName !== "index";
return (
<Branding logoContent={<LogoLink small={smallLogo} />}>
<div className='nav'>
<div className='nav__item'>
<Link pageName='help-and-about-tech-radar' className='icon-link'>
<span className='icon icon--question icon-link__icon'/>How to Use {radarNameShort}?
<div className="nav">
<div className="nav__item">
<Link pageName="help-and-about-tech-radar" className="icon-link">
<span className="icon icon--question icon-link__icon" />
How to Use {radarNameShort}?
</Link>
</div>
<div className='nav__item'>
<Link pageName='overview' className='icon-link'>
<span className='icon icon--overview icon-link__icon'/>Technologies Overview
<div className="nav__item">
<Link pageName="overview" className="icon-link">
<span className="icon icon--overview icon-link__icon" />
Technologies Overview
</Link>
</div>
<div className='nav__item'>
<button className='icon-link' onClick={handleOpenClick}>
<span className='icon icon--search icon-link__icon'/>Search
<div className="nav__item">
<button className="icon-link" onClick={handleOpenClick}>
<span className="icon icon--search icon-link__icon" />
Search
</button>
<div className={classNames('nav__search', { 'is-open': searchOpen })}>
<Search value={search} onClose={closeSearch} onSubmit={handleSearchSubmit} onChange={handleSearchChange} open={searchOpen} ref={searchRef} />
<div className={classNames("nav__search", { "is-open": searchOpen })}>
<Search
value={search}
onClose={closeSearch}
onSubmit={handleSearchSubmit}
onChange={handleSearchChange}
open={searchOpen}
ref={searchRef}
/>
</div>
</div>
</div>

15
src/components/Link/Link.tsx
View File

@@ -1,15 +1,20 @@
import React from 'react';
import { Link as RLink } from 'react-router-dom';
import './link.scss';
import React from "react";
import { Link as RLink } from "react-router-dom";
import "./link.scss";
type LinkProps = {
pageName: string;
style?: React.CSSProperties;
className?: string;
};
function Link({ pageName, children, className, style = {} }: React.PropsWithChildren<LinkProps>) {
function Link({
pageName,
children,
className,
style = {},
}: React.PropsWithChildren<LinkProps>) {
return (
<RLink to={`/techradar/${pageName}.html`} style={style} {...{ className }}>
<RLink to={`/${pageName}.html`} style={style} {...{ className }}>
{children}
</RLink>
);

49
src/config.ts
View File

@@ -1,47 +1,44 @@
import {Item} from './model';
import { Item } from "./model";
export const radarName = process.env.RADAR_NAME || 'AOE Technology Radar'
export const radarName = process.env.RADAR_NAME || "AOE Technology Radar";
export const radarNameShort = radarName;
export const quadrants = [
'languages-and-frameworks',
'methods-and-patterns',
'platforms-and-aoe-services',
'tools',
"languages-and-frameworks",
"methods-and-patterns",
"platforms-and-aoe-services",
"tools",
];
export const rings = [
'all',
'adopt',
'trial',
'assess',
'hold'
] as const;
export const rings = ["all", "adopt", "trial", "assess", "hold"] as const;
export type Ring = typeof rings[number]
export type Ring = typeof rings[number];
export const getItemPageNames = (items: Item[]) => items.map(item => `${item.quadrant}/${item.name}`);
export const getItemPageNames = (items: Item[]) =>
items.map((item) => `${item.quadrant}/${item.name}`);
export const showEmptyRings = false;
const messages: { [k: string]: string } = {
'languages-and-frameworks': 'Languages & Frameworks',
'methods-and-patterns': 'Methods & Patterns',
'platforms-and-aoe-services': 'Platforms and Operations',
'tools': 'Tools',
"languages-and-frameworks": "Languages & Frameworks",
"methods-and-patterns": "Methods & Patterns",
"platforms-and-aoe-services": "Platforms and Operations",
tools: "Tools",
};
export const translate = (key: string) => (messages[key] || '-');
export const translate = (key: string) => messages[key] || "-";
export function isMobileViewport() {
// return false for server side rendering
if (typeof window == 'undefined') return false;
// return false for server side rendering
if (typeof window == "undefined") return false;
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return width < 1200;
const width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
return width < 1200;
}
export function assetUrl(file: string) {
return process.env.PUBLIC_URL + '/' + file;
// return `/techradar/assets/${file}`
return process.env.PUBLIC_URL + "/" + file;
}

48
tasks/create-static.ts
View File

@@ -1,29 +1,33 @@
#!/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 { copyFileSync, mkdirSync, existsSync } from "fs";
import { quadrants } from "../src/config";
(async () => {
try {
console.log('starting static')
const radar = await createRadar();
try {
console.log("starting static");
const radar = await createRadar();
copyFileSync('build/index.html', 'build/overview.html')
copyFileSync('build/index.html', 'build/help-and-about-tech-radar.html')
copyFileSync("build/index.html", "build/overview.html");
copyFileSync("build/index.html", "build/help-and-about-tech-radar.html");
quadrants.forEach(quadrant => {
copyFileSync('build/index.html', 'build/' + quadrant + '.html')
mkdirSync('build/' + quadrant)
})
radar.items.forEach(item => {
copyFileSync('build/index.html', 'build/' + item.quadrant + '/' + item.name + '.html')
})
quadrants.forEach((quadrant) => {
const destFolder = `build/${quadrant}`;
copyFileSync("build/index.html", `${destFolder}.html`);
if (!existsSync(destFolder)) {
mkdirSync(destFolder);
}
});
radar.items.forEach((item) => {
copyFileSync(
"build/index.html",
`build/${item.quadrant}/${item.name}.html`
);
});
console.log('created static');
} catch (e) {
console.error('error:', e);
}
})()
console.log("created static");
} catch (e) {
console.error("error:", e);
}
})();