Update meta tags and redirect handling for improved SPA support

Dave3130 · Dave3130 · commit a49de81d6baf · 2025-12-04T18:15:00.000+05:30
diff --git a/index.html b/index.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>browserstack-demo</title>
-    <meta name="description" content="Browserstack Demo Project" />
+    <meta name="description" content="Test Case Selection Demo Project" />
     <meta name="author" content="cia-dev" />
 
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta property="og:title" content="Browserstack Demo" />
-    <meta property="og:description" content="Browserstack Demo Project" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <meta property="og:title" content="Test Case Selection Demo" />
+    <meta property="og:description" content="Test Case Selection Demo Project" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="/favicon.svg" />
+    <meta property="og:image" content="./favicon.svg" />
 
     <!-- GitHub Pages SPA redirect handling -->
     <script>
@@ -30,6 +30,6 @@
 
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "test-selection-demo-app-browserstack",
   "version": "0.0.0",
   "type": "module",
-  "homepage": "https://browserstack.github.io/test-selection-demo-app-browserstack",
+  "homepage": "https://browserstack.github.io/test-selection-demo-app-browserstack/",
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
diff --git a/public/404.html b/public/404.html
@@ -3,24 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Loading...</title>
+    <title>Redirecting...</title>
     <script>
-      // Surge serves 404.html for unknown routes unless a 200 fallback is provided.
-      // Instead of mutating the URL (which produced /?/… redirects), load the main
-      // SPA shell in-place so React Router can hydrate the correct route.
-      fetch('/index.html', { credentials: 'same-origin' })
-        .then((response) => response.text())
-        .then((html) => {
-          document.open();
-          document.write(html);
-          document.close();
-        })
-        .catch(() => {
-          window.location.replace('/');
-        });
+      // SPA redirect for GitHub Pages: move path into query so index.html can restore it
+      (function () {
+        var l = window.location;
+        // derive base path like /owner/repo or /repo depending on hosting
+        var parts = l.pathname.split('/').filter(Boolean);
+        // assume repo is the first path segment when hosted on browserstack.github.io
+        var repoIndex = parts.indexOf('test-selection-demo-app-browserstack');
+        var base = '/test-selection-demo-app-browserstack/';
+        // If repo not found, fall back to root
+        if (repoIndex === -1) {
+          base = '/';
+        }
+        var newPath = base + '?/' + l.pathname.slice(base.length).replace(/&/g, '~and~') + (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash;
+        l.replace(l.protocol + '//' + l.host + newPath);
+      })();
     </script>
   </head>
   <body>
-    <p>Loading the application…</p>
+    <p>Redirecting to the app...</p>
   </body>
 </html>
diff --git a/public/_redirects b/public/_redirects
diff --git a/src/App.tsx b/src/App.tsx
@@ -120,7 +120,7 @@ const App = () => (
     <CartProvider>
       <QueryClientProvider client={queryClient}>
         <TooltipProvider>
-          <BrowserRouter>
+          <BrowserRouter basename={import.meta.env.BASE_URL}>
             <AppContent />
           </BrowserRouter>
         </TooltipProvider>
