app/layouts/DocsLayout.tsx

@@ -22,8 +22,11 @@ export function DocsLayout(props: DocsLayoutProps) {
 
 	return (
 		<>
-			<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">
+			<main
-				<article id="article-content">
+				id="article-content"
+				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>
 					<DocsHeader
 						title={pageContext.exports.frontmatter?.title}
 						estimatedReadingTime={pageContext.exports.readingTime?.text}

app/partials/ReadProgressBar.tsx

@@ -9,24 +9,17 @@ export function ReadProgressBar() {
 
 	const handleScroll = () => {
 		const articleHeight = articleContentElement.scrollHeight;
-		const articleTopPosition =
+		const topPosition = articleContentElement.getBoundingClientRect().top;
-			articleContentElement.getBoundingClientRect().top;
 		const windowHeight = window.innerHeight;
 
-		// Calculer la hauteur visible de l'élément dans la fenêtre
+		if (articleHeight <= windowHeight) {
-		const visibleHeight = Math.min(
+			setWidth("100%");
-			articleHeight,
+			return;
-			windowHeight + articleTopPosition,
+		}
-		);
 
-		// Calculer la position de défilement relative à l'élément
+		const elementScrollTop = -topPosition;
-		const elementScrollTop = -articleTopPosition;
+		const scrollableHeight = articleHeight - windowHeight;
-
+		const percentage = (elementScrollTop / scrollableHeight) * 100;
-		// Calculer le pourcentage de défilement relatif à l'élément
-		const percentage =
-			(elementScrollTop / (articleHeight - windowHeight)) * 100;
-
-		// Limiter le pourcentage entre 0 et 100
 		const clampedPercentage = Math.max(0, Math.min(100, percentage));
 
 		setWidth(`${clampedPercentage}%`);
@@ -34,11 +27,13 @@ export function ReadProgressBar() {
 
 	createEffect(() => {
 		window.addEventListener("scroll", handleScroll);
+		window.addEventListener("resize", handleScroll);
 
 		handleScroll();
 
 		return () => {
 			window.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("resize", handleScroll);
 		};
 	});