From 4e13311a8adf9dc3fcb20b63dac2aa88bbed8962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96mer=20Faruk=20Demirel?= <omerfdmrl@gmail.com>
Date: Thu, 26 Mar 2026 21:47:15 +0300
Subject: [PATCH] feat: progress bar

---
 src/components/ReadingProgress.astro | 52 ++++++++++++++++++++++++++++
 src/pages/articles/[slug].astro      |  2 ++
 src/pages/en/articles/[slug].astro   |  2 ++
 3 files changed, 56 insertions(+)
 create mode 100644 src/components/ReadingProgress.astro

diff --git a/src/components/ReadingProgress.astro b/src/components/ReadingProgress.astro
new file mode 100644
index 0000000..600a58c
--- /dev/null
+++ b/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>
diff --git a/src/pages/articles/[slug].astro b/src/pages/articles/[slug].astro
index 95a0cec..800a88d 100644
--- a/src/pages/articles/[slug].astro
+++ b/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"
diff --git a/src/pages/en/articles/[slug].astro b/src/pages/en/articles/[slug].astro
index 658b85c..ada17c4 100644
--- a/src/pages/en/articles/[slug].astro
+++ b/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"