From 2e505f760649d8a9bb4cf7abd4f68c555c1b519e Mon Sep 17 00:00:00 2001
From: Oleksandr <hotdamnsucka@gmail.com>
Date: Mon, 16 Mar 2026 10:59:00 +0200
Subject: [PATCH] fix: breadcrumbs and marquee not observing clones

---
 .yarnrc.yml                   |  2 +-
 astro.config.mjs              |  1 +
 src/config/styling/marquee.ts | 34 +++++++++++++++++++---------------
 src/layouts/DocsLayout.astro  |  5 ++---
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index 09b1012..3186f3f 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1 +1 @@
-nodeLinker: pnp
+nodeLinker: node-modules
diff --git a/astro.config.mjs b/astro.config.mjs
index 37b8584..f33f429 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -11,6 +11,7 @@ import { markdownConfig } from "./src/config/io/markdown.ts";
 export default defineConfig({
   markdown: markdownConfig,
   site: "https://quickshell.org",
+  base: "/",
   integrations: [
     solidJs({
       devtools: false,
diff --git a/src/config/styling/marquee.ts b/src/config/styling/marquee.ts
index 384b84d..39ab972 100644
--- a/src/config/styling/marquee.ts
+++ b/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");
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index 073f197..e721451 100644
--- a/src/layouts/DocsLayout.astro
+++ b/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"