fix: replace floating reading-time pill with in-sidebar Reading Progress bar on blog posts

src/components/scroll/bottom-to-top.tsx

@@ -44,7 +44,7 @@ export default function ScrollBottomToTop() {
   }
 
   return (
-    <div className="scroll-to-top fixed right-5 bottom-5 z-50 flex flex-col gap-3">
+    <div className="scroll-to-top fixed right-5 bottom-24 z-50 flex flex-col gap-3 sm:bottom-20">
       {showTopButton && (
         <button
           aria-label="Scroll to top"

src/css/custom.css

@@ -2480,7 +2480,6 @@ html[data-theme="dark"] {
   top: calc(var(--ifm-navbar-height, 60px) + 1rem) !important;
   max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 2rem) !important;
   overflow-y: auto !important;
-  border-left: 2px solid var(--ifm-toc-border-color) !important;
   scrollbar-width: none !important;
 }
 

src/theme/BlogPostItem/Footer/index.tsx

@@ -8,7 +8,7 @@ import type { WrapperProps } from "@docusaurus/types";
 import GiscusComments from "../../../components/giscus";
 import SocialShare from "../../../components/SocialShare";
 import { getAuthorProfile } from "../../../utils/authors";
-import ReadingTimeIndicator from "../../../components/ReadingTimeIndicator";
+
 
 import styles from "./styles.module.css";
 
@@ -100,13 +100,7 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
       {!isBlogPostPage && <BlogPostItemFooterOriginal {...props} />}
       {isBlogPostPage && (
         <SocialShare permalink={metadata.permalink} title={metadata.title} />
-      )}
-      {isBlogPostPage && (
-        <ReadingTimeIndicator
-          totalReadTime={roundedReadTime}
-          authorCardRef={authorCardRef}
-        />
-      )}
+       )}
       {showAuthorCard && (
         <section ref={authorCardRef} className={styles.authorCard} aria-label="Post author details">
           <div className={styles.authorBody}>

src/theme/TOC/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import clsx from "clsx";
+import { useLocation } from "@docusaurus/router";
+import TOCItems from "@theme/TOCItems";
+import type { Props } from "@theme/TOC";
+
+import styles from "./styles.module.css";
+
+const LINK_CLASS_NAME = "table-of-contents__link toc-highlight";
+const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active";
+
+function ReadingProgress(): JSX.Element {
+  const [progress, setProgress] = useState(0);
+  const rafRef = useRef<number | null>(null);
+
+  const computeProgress = useCallback(() => {
+    const scrollY = window.scrollY;
+    const winHeight = window.innerHeight;
+    const docHeight = document.documentElement.scrollHeight;
+    const maxScroll = docHeight - winHeight;
+    const percent =
+      maxScroll > 0 ? Math.min(100, Math.max(0, (scrollY / maxScroll) * 100)) : 0;
+    setProgress(Math.round(percent));
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    if (rafRef.current !== null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      computeProgress();
+    });
+  }, [computeProgress]);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    computeProgress();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [handleScroll, computeProgress]);
+
+  return (
+    <div
+      className={styles.progressContainer}
+      role="status"
+      aria-label={`Reading progress: ${progress}%`}
+      aria-live="polite"
+    >
+      <div className={styles.progressHeader}>
+        <span className={styles.progressLabel}>
+          <svg
+            className={styles.progressIcon}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z" />
+            <path d="M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" />
+          </svg>
+          Reading Progress
+        </span>
+        <span className={styles.progressPercent}>{progress}%</span>
+      </div>
+      <div className={styles.progressTrack}>
+        <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+      </div>
+    </div>
+  );
+}
+
+export default function TOC({ className, ...props }: Props): JSX.Element {
+  const { pathname } = useLocation();
+  const isBlogPost = pathname.includes("/blog/") && pathname !== "/blog/";
+
+  return (
+    <div className={clsx(styles.tableOfContents, "thin-scrollbar", className)}>
+      {isBlogPost && <ReadingProgress />}
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}

src/theme/TOC/styles.module.css

@@ -0,0 +1,64 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  padding: 12px;
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+}
+
+.progressContainer {
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}
+
+.progressHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.progressLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+}
+
+.progressIcon {
+  flex-shrink: 0;
+  color: var(--ifm-color-primary);
+}
+
+.progressPercent {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.progressTrack {
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--ifm-color-emphasis-200);
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--ifm-color-primary);
+  transition: width 0.1s linear;
+}