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