From 1f499739fbe505db169f2582aae0ac3d79edc66c Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Tue, 18 Nov 2025 12:33:23 +1300
Subject: [PATCH] Add smooth scrolling to TOC

---
 web/src/components/post/toc.astro | 14 ++++++++++++++
 web/src/pages/posts/[slug].astro  | 29 ++++++++++++++++-------------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/web/src/components/post/toc.astro b/web/src/components/post/toc.astro
index bf6c008..97bf00a 100644
--- a/web/src/components/post/toc.astro
+++ b/web/src/components/post/toc.astro
@@ -15,6 +15,20 @@
         lnk.href=`#${tag.id}`
         lnk.className = 'b1-no-underline'
         lnk.innerHTML = `<span class="mr-1">${"#".repeat(depth)}</span>${tag.innerHTML}`
+        
+        // Add smooth scroll with offset
+        lnk.addEventListener('click', (e) => {
+            e.preventDefault()
+            const target = document.getElementById(tag.id)
+            if (target) {
+                const offset = 20 // pixels from top
+                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                })
+            }
+        })
 
         let li = document.createElement('li')
         li.className = 'line-clamp-1'
diff --git a/web/src/pages/posts/[slug].astro b/web/src/pages/posts/[slug].astro
index 367cda2..df31923 100644
--- a/web/src/pages/posts/[slug].astro
+++ b/web/src/pages/posts/[slug].astro
@@ -23,9 +23,8 @@ const readTime = calcReadTime(wordCount);
 <Base>
     <div slot="sidebar" class="text-left">
         <img src={headerImage}/>
+
         <p class="text-2xl pt-2">{title}</p>
-        
-        
         <p class="italic">{description}</p>
         
         <PostInfo
@@ -37,18 +36,22 @@ const readTime = calcReadTime(wordCount);
 
         <TableOfContents/>
 
-</div>
+    </div>
 
-<div id="post-content" slot="content" class="md:py-12">
-    <Fragment set:html={content} />
-</div>
+    <div id="post-content" slot="content" class="md:py-12 border-t border-gray-200 md:border-0">
+        <Fragment set:html={content} />
+    </div>
 
-<style is:global>
-    #post-content img {
-        width: 90%;
-        margin-inline: auto;
-        display: block;
-    }
-</style>
+    <style is:global>
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        #post-content img {
+            width: 90%;
+            margin-inline: auto;
+            display: block;
+        }
+    </style>
 
 </Base>
\ No newline at end of file