Merge pull request #30 from 4byte-dev/feat/article-tod-title

feat: add article's title to toc

Author: omerfdmrl

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`

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>

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>

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;
+}