feat: progress bar

src/components/ReadingProgress.astro

@@ -0,0 +1,52 @@
+<div id="reading-progress" class="fixed top-14 z-20 h-[3px] pointer-events-none" style="left:0;right:0">
+	<div
+		id="reading-progress-bar"
+		class="h-full bg-primary dark:bg-primary-dark w-0 transition-[width] duration-100 ease-out"
+	>
+	</div>
+</div>
+
+<script>
+	import { onHydration } from '../utils/hydration'
+
+	function initReadingProgress() {
+		const barEl = document.getElementById('reading-progress-bar')
+		const container = document.getElementById('reading-progress')
+		if (!barEl || !container) return
+
+		const contentCol = container.closest('.flex-1.min-w-0')
+		const articleEl = contentCol?.querySelector('article')
+		if (!(articleEl instanceof HTMLElement) || !(contentCol instanceof HTMLElement)) return
+
+		const bar = barEl
+		const article = articleEl
+
+		function updateLayout() {
+			const rect = contentCol.getBoundingClientRect()
+			container.style.left = rect.left + 'px'
+			container.style.width = rect.width + 'px'
+		}
+
+		function updateProgress() {
+			const rect = article.getBoundingClientRect()
+			const articleTop = rect.top + window.scrollY
+			const articleHeight = rect.height
+			const windowHeight = window.innerHeight
+			const scrolled = window.scrollY - articleTop + windowHeight
+			const total = articleHeight
+
+			let progress = (scrolled / total) * 100
+			progress = Math.max(0, Math.min(100, progress))
+
+			bar.style.width = `${progress}%`
+		}
+
+		updateLayout()
+		updateProgress()
+
+		window.addEventListener('scroll', updateProgress, { passive: true })
+		window.addEventListener('resize', updateLayout, { passive: true })
+	}
+
+	onHydration(initReadingProgress)
+</script>

src/pages/articles/[slug].astro

@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro'
 import ShareButtons from '../../components/ShareButtons.astro'
 import GitHubUserCard from '../../components/GitHubUserCard.astro'
+import ReadingProgress from '../../components/ReadingProgress.astro'
 import { getCollection, render } from 'astro:content'
 import { SITE } from '../../config.mjs'
 import { getLangFromUrl, t } from '../../i18n/index.ts'
@@ -82,6 +83,7 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 	<script type="application/ld+json" set:html={JSON.stringify(jsonLdArticle)} slot="head" />
 
 	<div class="flex">
+		<ReadingProgress />
 		<div class="flex-1 px-8 py-12 max-w-4xl mx-auto min-w-0">
 			<nav
 				aria-label="Breadcrumb"

src/pages/en/articles/[slug].astro

@@ -2,6 +2,7 @@
 import DocsLayout from '../../../layouts/DocsLayout.astro'
 import ShareButtons from '../../../components/ShareButtons.astro'
 import GitHubUserCard from '../../../components/GitHubUserCard.astro'
+import ReadingProgress from '../../../components/ReadingProgress.astro'
 import { getCollection, render } from 'astro:content'
 import { SITE } from '../../../config.mjs'
 import { t } from '../../../i18n/index.ts'
@@ -83,6 +84,7 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 	<script type="application/ld+json" set:html={JSON.stringify(jsonLdArticle)} slot="head" />
 
 	<div class="flex">
+		<ReadingProgress />
 		<div class="flex-1 px-8 py-12 max-w-4xl mx-auto min-w-0">
 			<nav
 				aria-label="Breadcrumb"