Quartz sync: May 21, 2025, 12:11 AM

Author: codeyoma

package-lock.json

@@ -40,6 +40,7 @@
         "@myriaddreamin/rehype-typst": "^0.6.0",
         "@napi-rs/simple-git": "0.1.19",
         "@tweenjs/tween.js": "^25.0.0",
+        "@types/nprogress": "^0.2.3",
         "@webgpu/types": "^0.1.60",
         "ansi-truncate": "^1.2.0",
         "async-mutex": "^0.5.0",
@@ -63,6 +64,7 @@
         "mdast-util-to-string": "^4.0.0",
         "micromorph": "^0.4.5",
         "minimatch": "^10.0.1",
+        "nprogress": "^0.2.0",
         "pixi.js": "^8.9.2",
         "preact": "^10.26.6",
         "preact-render-to-string": "^6.5.13",

package.json

@@ -20,6 +20,7 @@ export const sharedPageComponents: SharedLayout = {
                 // loading: 'lazy',
             }
         }),
+        Component.ScrollProgress()
     ],
     footer: Component.Footer({
         links: {

quartz.layout.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+import scrollProgressScript from "./scripts/scrollProgress.inline"
+import scrollStyle from "./styles/scrollProgress.scss"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+const ScrollProgress: QuartzComponent = ({ children }: QuartzComponentProps) => {
+    return <div id="scroll-progress">{children}</div>
+}
+
+ScrollProgress.afterDOMLoaded = scrollProgressScript
+ScrollProgress.css = scrollStyle
+
+export default (() => ScrollProgress) satisfies QuartzComponentConstructor

quartz/components/ScrollProgress.tsx

@@ -23,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
 import ConditionalRender from "./ConditionalRender"
+import ScrollProgress from "./ScrollProgress"
 
 export {
     ArticleTitle,
@@ -50,4 +51,5 @@ export {
     Comments,
     Flex,
     ConditionalRender,
+    ScrollProgress,
 }

quartz/components/index.ts

@@ -0,0 +1,19 @@
+import NProgress from "nprogress"
+
+NProgress.configure({
+    showSpinner: false,
+    trickle: false
+})
+
+let started = false
+
+window.addEventListener("scroll", () => {
+    if (!started) {
+        NProgress.start()
+        started = true
+    }
+    const scrollTop = window.scrollY
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight
+    const progress = scrollTop / docHeight
+    NProgress.set(progress)
+})

quartz/components/scripts/scrollProgress.inline.ts

@@ -0,0 +1,9 @@
+#nprogress .bar {
+    background: var(--tertiary) !important;
+    height: 4px !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+}