Added router basename for navigation on Github Pages

Author: makaroni4

src/Visualizer/components/DatabaseMenuPopup.tsx

@@ -4,6 +4,10 @@ import { DatabaseMenuPopupProps } from "../types";
 import databases from "../../config/databases";
 
 export function DatabaseMenuPopup(props: DatabaseMenuPopupProps) {
+  const databaseHref = ((databaseName: string) => {
+    return `/databases/${databaseName}`;
+  });
+
   return (
     <div
       className="info-popup">
@@ -27,7 +31,7 @@ export function DatabaseMenuPopup(props: DatabaseMenuPopupProps) {
                 <h3
                   className="info-popup__database-name">
                   { /* design_notes/0001_using_regular_links.md */}
-                  <a href={`/databases/${databaseName}`}>{databases[databaseName].name}</a>
+                  <a href={databaseHref(databaseName)}>{databases[databaseName].name}</a>
                 </h3>
 
                 <p

src/index.tsx

@@ -8,9 +8,11 @@ import "./index.css";
 
 const root = (document.getElementById("root") as HTMLElement);
 
+const basename = process.env.NODE_ENV === "production" ? "/sql_schema_visualizer" : "/";
+
 ReactDOM.createRoot(root).render(
   <React.StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename={basename}>
       <App />
     </BrowserRouter>
   </React.StrictMode>