Merge pull request #2 from luandro/mentat-1-1-fix-github-pages-routing

Fix routing issues for GitHub Pages and development environment
digidem · Oct 9, 2024 · c488410 · c488410
2 parents 53ba576 + 84ef718
commit c488410
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 37 deletions.
diff --git a/.github/workflows/github-pages.yaml b/.github/workflows/github-pages.yaml
@@ -19,4 +19,4 @@ jobs:
       - name: Build and Deploy
         uses: ./.github/actions/build-and-deploy
         with:
-          base_url: /${{ github.event.repository.name }}
+          BASE_URL: /${{ github.event.repository.name }}/
diff --git a/index.html b/index.html
@@ -1,16 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Brazil Program</title>
-    <meta name="description" content="Awana Digital Brazil Program" />
-    <meta name="author" content="Awana Digital" />
-    <meta property="og:image" content="/og-image.svg" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="/.gpt_engineer/index.js" type="module"></script>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Brazil Program</title>
+  <meta name="description" content="Awana Digital Brazil Program" />
+  <meta name="author" content="Awana Digital" />
+  <meta property="og:image" content="/og-image.svg" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="/.gpt_engineer/index.js" type="module"></script>
+  <script type="module" src="/src/main.jsx"></script>
+  <!-- Catch-all redirect for SPA routing -->
+  <script type="text/javascript">
+    if (location.pathname !== '/' && !location.pathname.includes('.')) {
+      location.href = '/index.html';
+    }
+  </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-project",
+  "name": "partner-profile",
   "private": true,
   "version": "0.0.0",
   "type": "module",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,25 +1,26 @@
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { HashRouter, Routes, Route, Navigate } from "react-router-dom";
 import Home from "./pages/Home";
 import PartnerDetail from "./pages/PartnerDetail";
 
 const queryClient = new QueryClient();
 
 // Get the base URL from the environment variable or use a default
-const baseUrl = import.meta.env.BASE_URL || '/';
+const baseUrl = import.meta.env.BASE_URL || `/`;
 
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
       <Toaster />
-      <BrowserRouter basename={baseUrl}>
+      <HashRouter basename={baseUrl}>
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="partners/:slug" element={<PartnerDetail />} />
+          <Route path="/partners/:slug" element={<PartnerDetail />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </TooltipProvider>
   </QueryClientProvider>
 );

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -140,7 +140,7 @@ const Home = () => {
                   <p className="text-sm">{partner.description}</p>
                   <button 
                     className="mt-2 bg-green-500 text-white px-4 py-1 rounded hover:bg-green-600 transition-colors"
-                    onClick={() => window.location.href = `${baseUrl}partners/${partner.slug}`}
+                    onClick={() => window.location.href = `#partners/${partner.slug}`}
                   >
                     Learn More
                   </button>
@@ -198,7 +198,7 @@ const Home = () => {
                     </div>
                   </div>
                   <a
-                    href={`/partners/${partner.slug}`}
+                    href={`/#partners/${partner.slug}`}
                     className="mt-2 block text-center bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"
                   >
                     View Details

diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx