working version of slider with table of contents

docs/jumpstart/faq.mdx

@@ -1,7 +1,7 @@
 ---
 title: FAQ
 sidebar_label: FAQ
-sidebar_position: 15
+sidebar_position: 4
 description: Frequently Asked Questions
 tags:
   - faq

docs/jumpstart/handoffs.mdx

@@ -1,7 +1,7 @@
 ---
 title: Watch All Handoffs
 sidebar_label: Watch All Handoffs
-sidebar_position: 4
+sidebar_position: 5
 icon: false
 ---
 import Slider, { Slide } from '@site/src/components/Slider'
@@ -10,9 +10,18 @@ import Step from '@site/src/components/Step'
 import StepNumber from '@site/src/components/StepNumber'
 import PrimaryCTA from '@site/src/components/PrimaryCTA'
 import ReactPlayer from 'react-player'
+import Intro from '@site/src/components/Intro'
+
+<Intro>
+  We've organized everything into "layers" that represent the different concerns of our infrastructure. Watch these short videos to get an overview of each layer, the problems we faced, and how we solved them.
+</Intro>
+
+<div class="hidden">
+## Placeholder {#hidden}
+</div>
 
 <Slider>
-  <Slide>
+  <Slide title="Introduction to Toolchain">
     <figure>
       <ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/introduction-to-toolchain.mp4" />
       <figcaption>AI generated voice</figcaption>
@@ -23,7 +32,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/project">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="Account Management">
     <figure>
       <ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/account-management.mp4" />
       <figcaption>AI generated voice</figcaption>
@@ -34,7 +43,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/accounts">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="Identity and Authentication">
     <figure>
       <ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/identity-and-authentication.mp4" />
       <figcaption>AI generated voice</figcaption>
@@ -45,7 +54,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/identity">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="Network & DNS">
     <figure>
       <ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/network-and-dns.mp4" />
       <figcaption>AI generated voice</figcaption>
@@ -57,7 +66,7 @@ import ReactPlayer from 'react-player'
 
   </Slide>
 
-  <Slide>
+  <Slide title="Software Delivery">
     <figure>
       <ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/release-engineering.mp4' />
 
@@ -67,7 +76,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/software-delivery">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="GitOps with GitHub Actions">
     <figure>
       <ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/gitops.mp4' />
       <figcaption>AI generated voice</figcaption>
@@ -76,7 +85,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/gitops">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="ECS Platform">
     <figure>
       <ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/ecs.mp4" />
       <figcaption>AI generated voice</figcaption>
@@ -85,7 +94,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/ecs">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="Monitoring & SRE">
     <figure>
       <ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/monitoring.mp4' />
       <figcaption>AI generated voice</figcaption>
@@ -94,7 +103,7 @@ import ReactPlayer from 'react-player'
     <PrimaryCTA to="/layers/observability">Get Started</PrimaryCTA>
   </Slide>
 
-  <Slide>
+  <Slide title="Component Development">
     <figure>
       <ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/component-development.mp4" />
       <figcaption>AI generated voice</figcaption>

docs/jumpstart/jumpstart.mdx

@@ -44,8 +44,11 @@ import StepNumber from '@site/src/components/StepNumber';
   </Step>
 
   <Step>
-    ## <StepNumber/> Watch All Videos
-    <PrimaryCTA to="/layers/foundation">Get Started</PrimaryCTA>
+    ## <StepNumber/> Watch the Overview Videos
+
+    We've organized everything into "layers" that represent the different concerns of our infrastructure. Watch these short videos to get an overview of each layer, the problems we faced, and how we solved them.
+
+    <PrimaryCTA to="/jumpstart/handoffs">Get Started</PrimaryCTA>
   </Step>
 
   <Step>

docs/jumpstart/support.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Support"
 sidebar_label: "Getting Support"
-sidebar_position: 14
+sidebar_position: 6
 description: Learn about Cloud Posse’s paid and free support options
 ---
 import Intro from '@site/src/components/Intro';

docs/quickstart/handoffs.mdx

@@ -0,0 +1,7 @@
+---
+title: Handoffs
+sidebar_label: Watch Handoffs
+---
+import Handoffs from '@site/docs/jumpstart/handoffs.mdx';
+
+<Handoffs/>

src/components/Slider/index.css

@@ -23,7 +23,6 @@
 
 .slide.active {
   opacity: 1;
-  display: flex;
 }
 
 .slider-button {
@@ -37,6 +36,7 @@
   font-size: 1.5em;
   border-radius: 6px;
   border: none;
+  z-index: 1;
 }
 
 .slider-button.left {

src/components/Slider/index.js

@@ -11,17 +11,19 @@ const Slider = ({ children, loop = false }) => {
     setCurrentSlide((prev) => {
       if (loop) {
         return (prev + 1) % totalSlides;
+      } else {
+        return prev < totalSlides - 1 ? prev + 1 : prev;
       }
-      return prev < totalSlides - 1 ? prev + 1 : prev;
     });
   }, [totalSlides, loop]);
 
   const prevSlide = useCallback(() => {
     setCurrentSlide((prev) => {
       if (loop) {
         return (prev - 1 + totalSlides) % totalSlides;
+      } else {
+        return prev > 0 ? prev - 1 : prev;
       }
-      return prev > 0 ? prev - 1 : prev;
     });
   }, [totalSlides, loop]);
 
@@ -33,12 +35,92 @@ const Slider = ({ children, loop = false }) => {
     }
   }, [nextSlide, prevSlide]);
 
+  const updateSlideFromHash = useCallback(() => {
+    const hash = window.location.hash.substring(1); // Remove the '#' from the hash
+
+    if (hash) {
+      const parts = hash.split('-');
+      const slideIndex = parseInt(parts[parts.length - 1], 10) - 1; // Zero-based index
+      if (!isNaN(slideIndex) && slideIndex < totalSlides) {
+        setCurrentSlide(slideIndex);
+      }
+    }
+  }, [totalSlides]);
+
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('hashchange', updateSlideFromHash);
+    window.addEventListener('popstate', updateSlideFromHash);
+
+    // Initial check in case the page loads with a hash
+    updateSlideFromHash();
+
+    // Inject TOC entries
+    const tocContainer = document.querySelector('.table-of-contents');
+    if (tocContainer) {
+      // Clear existing TOC entries to prevent duplicates
+      tocContainer.innerHTML = '';
+
+      React.Children.forEach(children, (child, index) => {
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        a.href = `#slide-${index + 1}`; // Adjust to one-based index for the URL
+        a.textContent = child.props.title || `Slide ${index + 1}`;
+        a.className = 'table-of-contents__link toc-highlight'; // Use Docusaurus styles
+
+        a.addEventListener('click', (e) => {
+          e.preventDefault(); // Prevent the default scrolling behavior
+          // Update the URL hash without causing the page to scroll
+          history.replaceState(null, null, `#slide-${index + 1}`);
+          setCurrentSlide(index); // Set the current slide without scrolling
+        });
+
+        li.appendChild(a);
+        li.id = `toc-slide-${index}`; // Assign an ID to each TOC entry for easy access
+        tocContainer.appendChild(li); // Append the new list item to the ToC
+      });
+    }
+
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('hashchange', updateSlideFromHash);
+      window.removeEventListener('popstate', updateSlideFromHash);
     };
-  }, [handleKeyDown]);
+  }, [handleKeyDown, updateSlideFromHash, children]);
+
+  useEffect(() => {
+    // Update the active state in the TOC
+    const tocContainer = document.querySelector('.table-of-contents');
+    if (tocContainer) {
+      React.Children.forEach(children, (child, index) => {
+        const tocItem = document.getElementById(`toc-slide-${index}`);
+        if (tocItem) {
+          const link = tocItem.querySelector('a');
+          if (index === currentSlide) {
+            link.classList.add('table-of-contents__link--active');
+          } else {
+            link.classList.remove('table-of-contents__link--active');
+          }
+        }
+      });
+    }
+
+    const slider = document.querySelector('.slides');
+    if (slider) {
+      slider.style.transform = `translateX(-${currentSlide * 100}%)`;
+      slider.style.transition = 'transform 0.3s ease-in-out';
+    }
+
+    // Update the active class on the slides
+    const slides = document.querySelectorAll('.slide');
+    slides.forEach((slide, index) => {
+      if (index === currentSlide) {
+        slide.classList.add('active');
+      } else {
+        slide.classList.remove('active');
+      }
+    });
+  }, [currentSlide, children]);
 
   return (
     <div
@@ -55,9 +137,9 @@ const Slider = ({ children, loop = false }) => {
       {(loop || currentSlide > 0) && (
         <button className="slider-button left" onClick={prevSlide}>❮</button>
       )}
-      <div className="slides" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
+      <div className="slides">
         {React.Children.map(children, (child, index) => (
-          <div className={`slide ${index === currentSlide ? 'active' : ''}`}>
+          <div className="slide" id={`slide-${index + 1}`}>
             {child}
           </div>
         ))}
@@ -69,7 +151,7 @@ const Slider = ({ children, loop = false }) => {
   );
 };
 
-export const Slide = ({ children }) => {
+export const Slide = ({ children, title }) => {
   return (
     <div className="slide-content">
       {children}