add reading progess indicator (#1815)

Co-authored-by: Nick DeJesus <[email protected]>
TBD54566975 · Oct 15, 2024 · 7d8e455 · 7d8e455
1 parent 108b70b
commit 7d8e455
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 1 deletion.
diff --git a/site-new/assets/icons/RocketProgress.tsx b/site-new/assets/icons/RocketProgress.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const RocketProgress = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={46}
+    height={36}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#FFEC19"
+      d="M2.421 20.571v2.572H0V20.57h2.421ZM2.421 12.857v2.572H0v-2.572h2.421ZM2.421 2.571v2.572H0V2.57h2.421ZM2.421 30.857v2.572H0v-2.572h2.421ZM9.684 2.571v2.572H4.842V2.57h4.842ZM9.684 30.857v2.572H4.842v-2.572h4.842ZM46 20.571h-2.421V15.43H46v5.142ZM41.158 12.857h2.42v2.572h-2.42v-2.572ZM38.737 10.286h2.42v2.571h-2.42v-2.571Z"
+    />
+    <path
+      fill="#FFEC19"
+      fillRule="evenodd"
+      d="M38.737 25.714H19.368V10.286h19.369V7.714H26.632V5.143H24.21V2.57h-2.42V0h-7.264v2.571h-2.42v2.572h2.42v2.571h2.421v2.572h-4.842v2.571h-2.42v2.572H7.262v5.142h2.421v2.572h2.421v2.571h4.842v2.572h-2.42v2.571h-2.422v2.572h2.421V36h7.264v-2.571h2.42v-2.572h2.422v-2.571h12.105v-2.572ZM24.21 30.857h-2.42v2.572h-7.264v-2.572h2.421v-2.571h7.264v2.571Zm-12.105-7.714V20.57h-2.42V15.43h2.42v-2.572h4.842v10.286h-4.842Zm4.842-15.429V5.143h-2.42V2.57h7.263v2.572h2.42v2.571h-7.263Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#FFEC19"
+      d="M41.158 23.143v2.571h-2.421v-2.571h2.42ZM41.158 23.143h2.42V20.57h-2.42v2.572ZM36.316 15.429h-4.842v-2.572h4.842v2.572ZM36.316 20.571V15.43h2.42v5.142h-2.42ZM31.474 20.571h4.842v2.572h-4.842V20.57ZM31.474 20.571V15.43h-2.421v5.142h2.42Z"
+    />
+  </svg>
+);
+export default RocketProgress;
diff --git a/site-new/src/components/ReadingProgress/ReadingProgress.tsx b/site-new/src/components/ReadingProgress/ReadingProgress.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from "react";
+import RocketProgress from "@site/assets/icons/RocketProgress";
+
+const ReadingProgress = () => {
+  const rocketRef = useRef<HTMLSpanElement | null>(null);
+  const rocketBgRef = useRef<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    const updateProgressBar = () => {
+      const { scrollTop, scrollHeight } = document.documentElement;
+      const scrollPercent =
+        (scrollTop / (scrollHeight - window.innerHeight)) * 100;
+
+      if (rocketRef.current) {
+        rocketRef.current.style.left = `calc(${Math.max(scrollPercent)}%)`;
+      }
+
+      if (rocketBgRef.current) {
+        rocketBgRef.current.style.width = `calc(${Math.max(scrollPercent)}%)`;
+      }
+    };
+    document.addEventListener("scroll", updateProgressBar);
+
+    return () => {
+      document.removeEventListener("scroll", updateProgressBar);
+    };
+  }, [rocketRef, rocketBgRef]);
+
+  return (
+    <div className="fixed top-[--ifm-navbar-height] z-20 h-[36px] w-full bg-black">
+      <div className="relative w-full">
+        <span
+          className="absolute inline-block h-[36px] w-0 bg-tbd-yellow"
+          ref={rocketBgRef}
+        />
+        <span ref={rocketRef} className="absolute inline-block">
+          <RocketProgress />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ReadingProgress;
diff --git a/site-new/src/components/ReadingProgress/index.ts b/site-new/src/components/ReadingProgress/index.ts
@@ -0,0 +1 @@
+export { default as ReadingProgress } from "./ReadingProgress";
diff --git a/site-new/src/pages/index.tsx b/site-new/src/pages/index.tsx
@@ -9,6 +9,7 @@ import tbdRex from "@site/static/img/tbd-rex";
 import { PixelBorderWrapper } from "../components/PixelBorder";
 import { useEffect, useRef } from "react";
 import { typeWriter, TypeWriterWordType } from "@site/lib/utils";
+import { ReadingProgress } from "../components/ReadingProgress";
 
 const TYPE_WRITER_VARIABLE_TEXT = [
   {
@@ -47,6 +48,7 @@ export default function Home(): JSX.Element {
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />"
     >
+      <ReadingProgress />
       <Background className="pt-20" bgColor="black">
         <div className="container mx-auto px-4 py-12">
           <div className="flex flex-wrap">
@@ -60,7 +62,7 @@ export default function Home(): JSX.Element {
                   className="mb-4 mt-twist-core-spacing-7 text-[48px] font-medium lg:text-[80px]"
                 >
                   The future of finance is{" "}
-                  <span className="text-highlight-full mb-twist-core-spacing-7">
+                  <span className="mb-twist-core-spacing-7 text-highlight-full">
                     Open
                   </span>
                 </Heading>