Add smooth scrolling to TOC

web/src/components/post/toc.astro

@@ -16,6 +16,20 @@
         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'
         li.appendChild(lnk)

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">
+    <div id="post-content" slot="content" class="md:py-12 border-t border-gray-200 md:border-0">
         <Fragment set:html={content} />
-</div>
+    </div>
+
+    <style is:global>
+        html {
+            scroll-behavior: smooth;
+        }
         
-<style is:global>
         #post-content img {
             width: 90%;
             margin-inline: auto;
             display: block;
         }
-</style>
+    </style>
 
 </Base>