Redirect to root when starting demo (#3323)

* Redirect to root when starting demo

* Update package.json

* Update index.astro

* Update index.astro

Author: RobbieTheWagner

docs-src/src/content/docs/guides/install.mdx

@@ -50,11 +50,11 @@ with:
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/shepherd.js@15.0.0/dist/js/shepherd.mjs"
+  src="https://cdn.jsdelivr.net/npm/shepherd.js@17.0.0/dist/js/shepherd.mjs"
 ></script>
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/shepherd.js@15.0.0/dist/css/shepherd.css"
+  href="https://cdn.jsdelivr.net/npm/shepherd.js@17.0.0/dist/css/shepherd.css"
 />
 ```
 

landing/src/components/Header.astro

@@ -162,3 +162,34 @@ const { isHome } = Astro.props;
     }
   </div>
 </header>
+
+<script>
+  // Handle demo button click - redirect to home if not already there
+  function setupDemoButton() {
+    const showTourBtn = document.querySelector('#showTour');
+    
+    if (!showTourBtn) return;
+    
+    // Remove any existing listeners
+    const newBtn = showTourBtn.cloneNode(true) as HTMLElement;
+    showTourBtn.parentNode?.replaceChild(newBtn, showTourBtn);
+    
+    newBtn.addEventListener('click', () => {
+      // Check if we're on the home page
+      if (window.location.pathname !== '/') {
+        // Store flag to start tour after navigation
+        sessionStorage.setItem('startTourOnLoad', 'true');
+        window.location.href = '/';
+      } else {
+        // We're already on home page, dispatch event to start tour
+        window.dispatchEvent(new CustomEvent('startTour'));
+      }
+    });
+  }
+  
+  // Run on initial load
+  document.addEventListener('DOMContentLoaded', setupDemoButton);
+  
+  // Run on Astro page transitions
+  document.addEventListener('astro:page-load', setupDemoButton);
+</script>

landing/src/pages/index.astro

@@ -24,7 +24,7 @@ import MainPage from '@layouts/MainPage.astro';
         <Code
           code={`
 	<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
-	<script type="module" src="shepherd.js/dist/shepherd.mjs"></script>
+	<script type="module" src="shepherd.js/dist/js/shepherd.mjs"></script>
   
 `}
           lang="js"
@@ -94,9 +94,25 @@ import MainPage from '@layouts/MainPage.astro';
       // wait for shepherd to be ready
       setTimeout(function () {
         const shepherd = setupShepherd();
-        const startBtn = document.querySelector('#showTour');
-
-        startBtn?.addEventListener('click', () => shepherd.start());
+        
+        // Check if we should auto-start the tour (after redirect from another page)
+        const shouldStartTour = sessionStorage.getItem('startTourOnLoad');
+        if (shouldStartTour) {
+          sessionStorage.removeItem('startTourOnLoad');
+          shepherd.start();
+        }
+        
+        // Clean up previous listener if it exists
+        if ((window as any).__startTourAbortController) {
+          (window as any).__startTourAbortController.abort();
+        }
+        
+        // Create new AbortController for this listener
+        const controller = new AbortController();
+        (window as any).__startTourAbortController = controller;
+        
+        // Listen for custom event from Demo button when already on home page
+        window.addEventListener('startTour', () => shepherd.start(), { signal: controller.signal });
       }, 400);
     }
 
@@ -296,7 +312,8 @@ import MainPage from '@layouts/MainPage.astro';
     }
 
     function ready() {
-      document.addEventListener('DOMContentLoaded', init);
+      // Only listen for astro:page-load which fires on both initial load and transitions
+      document.addEventListener('astro:page-load', init);
     }
 
     ready();

shepherd.js/dummy/index.html

@@ -122,7 +122,7 @@ <h3>Example</h3>
 
     <!-- Shepherd -->
     <script type="module">
-      import Shepherd from '../dist/esm/shepherd.mjs';
+      import Shepherd from '../dist/js/shepherd.mjs';
 
       window.Shepherd = Shepherd;
 

shepherd.js/package.json

@@ -18,7 +18,7 @@
     "Robbie Wagner <rwwagner90@gmail.com>",
     "Chuck Carpenter <chuck@shipshape.io>"
   ],
-  "main": "./dist/cjs/shepherd.cjs",
+  "main": "./dist/js/shepherd.mjs",
   "module": "./dist/js/shepherd.mjs",
   "exports": {
     ".": {