deploy to subdirectory

matthen · Oct 26, 2023 · 85832ff · 85832ff
1 parent 45a7b52
commit 85832ff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "smoothstep",
+  "homepage": "/smoothstep",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#282a36" />
     <script type="text/javascript" src="CCapture.all.min.js"></script>
     <title>smoothstep</title>
   </head>

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { Link, RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import Hypocycloids from './animations/hypocycloids';
 import './index.css';
@@ -20,28 +20,31 @@ const AnimationList = () => {
             <ul className="list-inside list-disc pt-2 ">
                 {animations.map((animation) => (
                     <li key={animation.name}>
-                        <a href={`/${animation.name}`} className="text-pink hover:text-pink-200 hover:underline">
+                        <Link to={`/${animation.name}`} className="text-pink hover:text-pink-200 hover:underline">
                             {animation.name}
-                        </a>
+                        </Link>
                     </li>
                 ))}
             </ul>
         </div>
     );
 };
 
-const router = createBrowserRouter([
-    {
-        path: '/',
-        element: <AnimationList />,
-    },
-    ...animations.map((animation) => {
-        return {
-            path: `/${animation.name}`,
-            element: <animation.component />,
-        };
-    }),
-]);
+const router = createBrowserRouter(
+    [
+        {
+            path: '/',
+            element: <AnimationList />,
+        },
+        ...animations.map((animation) => {
+            return {
+                path: `/${animation.name}`,
+                element: <animation.component />,
+            };
+        }),
+    ],
+    { basename: '/smoothstep' },
+);
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(