feat: Add ReadProgressBar component to DefaultLayout

app/layouts/DocsLayout.tsx

@@ -22,8 +22,8 @@ export function DocsLayout(props: DocsLayoutProps) {
 
 	return (
 		<>
-			<div class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
+			<main class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
-				<article>
+				<article id="article-content">
 					<DocsHeader
 						title={pageContext.exports.frontmatter?.title}
 						estimatedReadingTime={pageContext.exports.readingTime?.text}
@@ -31,7 +31,7 @@ export function DocsLayout(props: DocsLayoutProps) {
 					<Prose>{props.children}</Prose>
 				</article>
 				<PrevNextLinks />
-			</div>
+			</main>
 
 			<TableOfContents />
 		</>

app/layouts/LayoutDefault.tsx

@@ -3,6 +3,7 @@ import type { JSXElement } from "solid-js";
 import { usePageContext } from "vike-solid/usePageContext";
 import { HeroSection } from "@/partials/HeroSection";
 import { Navigation } from "@/partials/Navigation";
+import { clientOnly } from "vike-solid/clientOnly";
 import { Header } from "@/partials/Header";
 import { Footer } from "@/partials/Footer";
 import { DocsLayout } from "./DocsLayout";
@@ -10,6 +11,10 @@ import { Toaster } from "solid-toast";
 
 import "./tailwind.css";
 
+const ReadProgressBar = clientOnly(
+	async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar,
+);
+
 type DefaultLayoutProps = {
 	children: JSXElement;
 };
@@ -21,6 +26,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 		<>
 			<div class="flex w-full flex-col font-sans">
 				<Header />
+				<ReadProgressBar />
 
 				{pageContext.urlPathname === "/" && <HeroSection />}
 

app/partials/ReadProgressBar.tsx

@@ -0,0 +1,44 @@
+import { createEffect, createSignal } from "solid-js";
+
+export function ReadProgressBar() {
+	const articleContentElement: HTMLElement | null =
+		document.getElementById("article-content");
+	if (!articleContentElement) return null;
+
+	const [width, setWidth] = createSignal("0%");
+
+	const handleScroll = () => {
+		const scrollTop = window.scrollY;
+		const pageHeight = document.documentElement.scrollHeight;
+		const scrollHeight = articleContentElement.scrollHeight;
+
+		const gapWithBottom = pageHeight - scrollHeight;
+		const scrollableHeight = pageHeight - gapWithBottom;
+
+		const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);
+
+		setWidth(`${scrollPercentage}%`);
+	};
+
+	createEffect(() => {
+		window.addEventListener("scroll", handleScroll);
+
+		handleScroll();
+
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	});
+
+	return (
+		<div
+			aria-hidden
+			class="sticky inset-x-0 top-20 z-50 h-1 w-full bg-violet-50"
+		>
+			<div
+				class="bg-violet-300 h-full transition-all duration-75"
+				style={{ width: width() }}
+			/>
+		</div>
+	);
+}