fix: breadcrumbs and marquee not observing clones

src/config/styling/marquee.ts

@@ -192,13 +192,16 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }, observerOptions);
 
-  videos.forEach(v => {
-    videoObserver.observe(v);
-    v.addEventListener("ended", () => {
-      targetScrollX += itemWidth;
-      startAnimation();
+  const startObserving = () => {
+    const allVideos = scroller.querySelectorAll("video");
+    allVideos.forEach(v => {
+      videoObserver.observe(v);
+      v.addEventListener("ended", () => {
+        targetScrollX += itemWidth;
+        startAnimation();
+      });
     });
-  });
+  };
 
   // events
   btnLeft?.addEventListener("click", () => {
@@ -211,15 +214,15 @@ document.addEventListener("DOMContentLoaded", () => {
     startAnimation();
   });
 
-  container.addEventListener(
-    "wheel",
-    e => {
-      e.preventDefault();
-      targetScrollX += e.deltaY;
-      startAnimation();
-    },
-    { passive: false }
-  );
+  // container.addEventListener(
+  //   "wheel",
+  //   e => {
+  //     e.preventDefault();
+  //     targetScrollX += e.deltaY;
+  //     startAnimation();
+  //   },
+  //   { passive: false }
+  // );
 
   container.addEventListener("touchstart", e => {
     isDown = true;
@@ -260,6 +263,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // init
   setupClones();
+  startObserving();
   setTimeout(() => {
     updateDimensions();
     container.classList.add("initialized");

src/layouts/DocsLayout.astro

@@ -21,8 +21,9 @@ let url = Astro.url.pathname.split("/").filter((s: string) => s !== "");
 
 const breadcrumbs = [
   {
-    text: "custom",
+    text: "Home",
     href: "/",
+    slot: "index",
   },
 ];
 
@@ -69,7 +70,6 @@ for (const segment of url) {
           data-pagefind-ignore
         >
           <svg
-            <!-- @ts-expect-error -->
             slot="index"
             xmlns="http://www.w3.org/2000/svg"
             width="1em"
@@ -83,7 +83,6 @@ for (const segment of url) {
             ></path>
           </svg>
           <svg
-            <!-- @ts-expect-error -->
             slot="separator"
             xmlns="http://www.w3.org/2000/svg"
             width="1em"