enhance(client): visualize scroll depth

Adds scroll depth visualization.

Author: caugner

client/src/app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Navigate,
   Routes,
@@ -43,9 +43,12 @@ const WritersHomepage = React.lazy(() => import("./writers-homepage"));
 const Sitemap = React.lazy(() => import("./sitemap"));
 const Playground = React.lazy(() => import("./playground"));
 const Observatory = React.lazy(() => import("./observatory"));
+const Debug = React.lazy(
+  /* webpackChunkName: "debug" */ () => import("./ui/molecules/debug")
+);
 
 function Layout({ pageType, children }) {
-  const { pathname } = useLocation();
+  const { pathname, hash } = useLocation();
   const [category, setCategory] = React.useState<string | null>(
     getCategoryByPathname(pathname)
   );
@@ -71,6 +74,11 @@ function Layout({ pageType, children }) {
         {children}
       </div>
       <Footer />
+      {hash === "#debug" && (
+        <React.Suspense>
+          <Debug />
+        </React.Suspense>
+      )}
     </>
   );
 }
@@ -387,6 +395,7 @@ function useScrollDepthMeasurement(thresholds = [25, 50, 75]) {
         );
 
         matchingThresholds.forEach((threshold) => {
+          console.log({ threshold });
           gtag("event", "scroll", {
             percent_scrolled: String(threshold),
           });

client/src/ui/molecules/debug/index.scss

@@ -0,0 +1,23 @@
+.debug {
+  .scroll-depth {
+    --color: #f00;
+
+    .depth {
+      background-color: var(--color);
+      height: 1px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+
+      &::after {
+        background-color: var(--background-primary);
+        border: 1px solid var(--color);
+        content: attr(data-text);
+        left: 50%;
+        padding: 0 5px;
+        position: absolute;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
+  }
+}

client/src/ui/molecules/debug/index.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+
+import "./index.scss";
+
+export default function Debug() {
+  return (
+    <div className="debug">
+      <DebugScrollDepth />
+    </div>
+  );
+}
+
+function DebugScrollDepth() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [scrollHeight, setScrollHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const root = ref.current;
+
+    if (!root || !scrollHeight) {
+      return;
+    }
+
+    const depths = [25, 50, 75, 90];
+    depths.forEach((depth) => {
+      const div = document.createElement("div");
+      div.className = "depth";
+      div.dataset.text = `${depth}%`;
+      div.style.top = `${(depth / 100) * scrollHeight}px`;
+      root.appendChild(div);
+    });
+
+    return () =>
+      Array.from(root.children).forEach((child) => root.removeChild(child));
+  }, [ref, scrollHeight]);
+
+  useEffect(() => {
+    const handler = () => {
+      setScrollHeight(document.documentElement.scrollHeight);
+    };
+
+    const observer = new MutationObserver(handler);
+
+    observer.observe(document.body, {
+      childList: true, // Monitor for added/removed elements
+      subtree: true, // Monitor all descendants of body
+      attributes: true, // Monitor attribute changes (can affect size)
+      characterData: true, // Monitor text content changes
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return <div ref={ref} className="scroll-depth" />;
+}