add static generation

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>

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>

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

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;
 }