+
{pageContext.urlPathname === "/" &&
}
diff --git a/app/partials/ReadProgressBar.tsx b/app/partials/ReadProgressBar.tsx
new file mode 100644
index 0000000..5f51ba4
--- /dev/null
+++ b/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 (
+
+ );
+}