added scrolling progress bar below header to blog posts

Author: Kyle-Undefined

src/layouts/Layout.astro

@@ -71,11 +71,19 @@ const { title, description = "Just a dude who enjoys writing code & learning;" }
 						button.style.right = `${nextRight}px`;
 					};
 
+					const progressBar = document.querySelector('[data-reading-progress]');
+
 					const updateVisibility = () => {
 						const shouldShow = window.scrollY > threshold;
 						button.classList.toggle('opacity-0', !shouldShow);
 						button.classList.toggle('translate-y-2', !shouldShow);
 						button.classList.toggle('pointer-events-none', !shouldShow);
+
+						if (progressBar) {
+							const scrollable = document.documentElement.scrollHeight - window.innerHeight;
+							const progress = scrollable > 0 ? Math.min(window.scrollY / scrollable, 1) : 1;
+							progressBar.style.transform = `scaleX(${progress})`;
+						}
 					};
 
 					button.addEventListener('click', () => {

src/pages/blog/[...slug].astro

@@ -21,6 +21,11 @@ const readingTime = getReadingTimeLabel(post.body);
 
 <PostHogLayout>
   <Layout title={post.data.title} description={post.data.description}>
+    <div
+      data-reading-progress
+      style="transform: scaleX(0);"
+      class="fixed top-16 left-0 w-full z-50 h-[3px] bg-blog-accent origin-left"
+    ></div>
     <section class="py-10 max-w-3xl mx-auto">
       <article>
           <div class="mb-10 text-center">