fix: posts anchor on index

routes/index.tsx

@@ -41,7 +41,7 @@ function Hero() {
 }
 
 function PostItem(
-  { title, publishedAt, html }:
+  { slug, title, publishedAt, html }:
     & Pick<Post, "slug" | "title" | "publishedAt">
     & {
       html: string; // this should be the post.markdown rendered as HTML
@@ -50,10 +50,20 @@ function PostItem(
   return (
     <div class="min-w-0 w-full md:max-w-[80ch]">
       <div class="flex items-center justify-between">
-        <a // href={`/blog/${slug}`}
-         class="text-4xl text-gray-900 tracking-tight font-bold md:mt-0 px-4 md:px-0 mb-4">
-          {title}
-        </a>
+        <span class="group">
+          <a // href={`/blog/${slug}`}
+           class="text-4xl text-gray-900 tracking-tight font-bold md:mt-0 px-4 md:px-0 mb-4">
+            {title}
+          </a>
+          <a
+            id={slug}
+            class="invisible group-hover:visible ml-1 text-[#0969da] text-4xl font-bold"
+            tabindex={-1}
+            href={`#${slug}`}
+          >
+            <span aria-hidden="true">#</span>
+          </a>
+        </span>
         <span class="text-gray-500">
           {format(publishedAt, "yyyy-MM-dd")}
         </span>

static/styles.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a /* on the index, posts title are A tag */ {
+  scroll-margin-top: 6rem;
+}