From e2aec44ad75f34523da741111510df36cf12b26b Mon Sep 17 00:00:00 2001 From: "dennis.ludwig" Date: Fri, 11 Jun 2021 11:48:05 +0200 Subject: [PATCH] add static generation --- .env | 2 +- bin/src/config.js | 41 +++++++++----------- bin/tasks/create-static.js | 19 +++++---- src/components/App.tsx | 8 ++-- src/components/Header/Header.tsx | 66 ++++++++++++++++++-------------- src/components/Link/Link.tsx | 15 +++++--- src/config.ts | 49 +++++++++++------------- tasks/create-static.ts | 48 ++++++++++++----------- 8 files changed, 132 insertions(+), 116 deletions(-) diff --git a/.env b/.env index e491e9a..2460154 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -PUBLIC_URL=techradar/ \ No newline at end of file +PUBLIC_URL=/techradar \ No newline at end of file diff --git a/bin/src/config.js b/bin/src/config.js index f05b826..fb7c270 100644 --- a/bin/src/config.js +++ b/bin/src/config.js @@ -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; diff --git a/bin/tasks/create-static.js b/bin/tasks/create-static.js index bd5def7..996b5c2 100644 --- a/bin/tasks/create-static.js +++ b/bin/tasks/create-static.js @@ -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*/]; } diff --git a/src/components/App.tsx b/src/components/App.tsx index 35096c8..bfb76a1 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -61,7 +61,7 @@ interface Data { export default function App() { const [data, setData] = React.useState(); 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 ( - + - +
@@ -92,7 +92,7 @@ export default function App() {
- + diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a183423..61438c6 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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(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) => { @@ -44,27 +44,37 @@ export default function Header({ pageName }: { pageName: string }) { }, 0); }; - const smallLogo = pageName !== 'index'; + const smallLogo = pageName !== "index"; return ( }> -
-
- - How to Use {radarNameShort}? +
+
+ + + How to Use {radarNameShort}?
-
- - Technologies Overview +
+ + + Technologies Overview
-
- -
- +
+
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 8a4eb11..6388705 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -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) { +function Link({ + pageName, + children, + className, + style = {}, +}: React.PropsWithChildren) { return ( - + {children} ); diff --git a/src/config.ts b/src/config.ts index 3ae5ed1..9980bf0 100644 --- a/src/config.ts +++ b/src/config.ts @@ -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; } diff --git a/tasks/create-static.ts b/tasks/create-static.ts index f83d9cb..f09b8f2 100644 --- a/tasks/create-static.ts +++ b/tasks/create-static.ts @@ -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); + } +})();