From ad44f0ceb6e8d1d8365891545a14531b48d8a591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96mer=20Faruk=20Demirel?= <omerfdmrl@gmail.com>
Date: Sun, 29 Mar 2026 19:28:12 +0300
Subject: [PATCH] feat: add article's title to toc

---
 src/components/TableOfContents.astro | 16 ++++++++++++++--
 src/pages/articles/[slug].astro      |  7 +++++--
 src/pages/en/articles/[slug].astro   |  7 +++++--
 src/styles/global.css                | 10 ++++++++++
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index 19be069..458be58 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -2,9 +2,10 @@
 interface Props {
 	headings: Array<{ depth: number; slug: string; text: string }>
 	label: string
+	title?: string
 }
 
-const { headings, label } = Astro.props
+const { headings, label, title } = Astro.props
 
 const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3)
 ---
@@ -23,6 +24,17 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3)
 						style="top: 0; left: -9px;"
 					/>
 					<ul id="toc-list" class="space-y-1 text-sm border-l border-transparent">
+						{title && (
+							<li data-depth={1}>
+								<a
+									href="#title"
+									data-slug="title"
+									class="toc-link block py-1 transition-colors duration-200 text-foreground dark:text-foreground-dark font-medium"
+								>
+									{title}
+								</a>
+							</li>
+						)}
 						{tocHeadings.map((h) => (
 							<li data-depth={h.depth}>
 								<a
@@ -70,7 +82,7 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3)
 			if (top === undefined) return
 
 			const depth = depths.get(slug) || 2
-			const indent = depth === 3 ? 12 : 0
+			const indent = depth >= 3 ? 12 : 0
 
 			indicator.style.top = `${top}px`
 			indicator.style.left = `${-9 + indent}px`
diff --git a/src/pages/articles/[slug].astro b/src/pages/articles/[slug].astro
index e6d72b3..b9d7dc1 100644
--- a/src/pages/articles/[slug].astro
+++ b/src/pages/articles/[slug].astro
@@ -118,7 +118,10 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 						{article.data.category}
 					</a>
 				</div>
-				<h1 class="text-3xl font-bold tracking-tight text-foreground dark:text-foreground-dark mb-4">
+				<h1
+					id="title"
+					class="text-3xl font-bold tracking-tight text-foreground dark:text-foreground-dark mb-4 scroll-mt-60"
+				>
 					{article.data.title}
 				</h1>
 				<div
@@ -153,6 +156,6 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 			<ShareButtons title={article.data.title} url={articleUrl} labels={labels} />
 		</div>
 
-		<TableOfContents headings={tocHeadings} label={onThisPageLabel} />
+		<TableOfContents headings={tocHeadings} label={onThisPageLabel} title={article.data.title} />
 	</div>
 </DocsLayout>
diff --git a/src/pages/en/articles/[slug].astro b/src/pages/en/articles/[slug].astro
index 37fbb26..856c651 100644
--- a/src/pages/en/articles/[slug].astro
+++ b/src/pages/en/articles/[slug].astro
@@ -117,7 +117,10 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 						{article.data.category}
 					</a>
 				</div>
-				<h1 class="text-3xl font-bold tracking-tight text-foreground dark:text-foreground-dark mb-4">
+				<h1
+					id="title"
+					class="text-3xl font-bold tracking-tight text-foreground dark:text-foreground-dark mb-4 scroll-mt-60"
+				>
 					{article.data.title}
 				</h1>
 				<div
@@ -152,6 +155,6 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 			<ShareButtons title={article.data.title} url={articleUrl} labels={labels} />
 		</div>
 
-		<TableOfContents headings={tocHeadings} label={onThisPageLabel} />
+		<TableOfContents headings={tocHeadings} label={onThisPageLabel} title={article.data.title} />
 	</div>
 </DocsLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index ba0e342..734f7ec 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,10 @@
 	border-color: hsl(var(--border));
 }
 
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	background-color: hsl(var(--background));
 	color: hsl(var(--foreground));
@@ -77,3 +81,9 @@ html .astro-code span {
 	color: var(--shiki-light) !important;
 	background-color: var(--shiki-light-bg) !important;
 }
+
+.prose h2,
+.prose h3,
+.prose h4 {
+	scroll-margin-top: 5rem;
+}