add static generation

PaperCutSoftware · Jun 11, 2021 · e2aec44 · e2aec44
1 parent 02c81de
commit e2aec44
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 117 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-PUBLIC_URL=techradar/
+PUBLIC_URL=/techradar
diff --git 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
@@ -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
@@ -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>

diff --git 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<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>

diff --git 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<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>
   );

diff --git 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;
-
-    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    return width < 1200;
+  // 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;
 }
 
 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
@@ -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);
+  }
+})();