Enhance title stickiness

Author: ryuheechul

src/components/app/Title.astro

@@ -0,0 +1,35 @@
+---
+const { title } = Astro.props;
+---
+
+<!-- to stick to the header -->
+<div
+  data-stuck-small
+  class="sticky -top-1 z-30 h-0 opacity-0 transtion-duration-300 transition-opacity"
+>
+  <h5 class="absolute mt-5 text-sm ml-30">
+    {title}
+  </h5>
+</div>
+
+<!-- persistent one -->
+<h1 class="text-3xl sm:text-4xl mb-3">
+  {title}
+</h1>
+
+<!-- thanks to https://davidwalsh.name/detect-sticky -->
+<script>
+  const el = document.querySelector('[data-stuck-small]');
+
+  const observer = new IntersectionObserver(
+    ([e]) => {
+      el &&
+        ['opacity-100'].forEach((cls) => {
+          el.classList.toggle(cls, e.intersectionRatio < 1);
+        });
+    },
+    { threshold: [1] }
+  );
+
+  el && observer.observe(el);
+</script>

src/layouts/Post.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from './Layout.astro';
+import Title from '../components/app/Title.astro';
 import { format } from '../lib/date';
 import { links } from '@lib/links';
 
@@ -36,7 +37,7 @@ const formattedDate = dates.map((date, idx) => `${prefixes[idx]} ${date}`).join(
 <Layout title={title}>
   <!-- .prose seems to with weird gap without margin so mitigate that with `-my-[n]` -->
   <article class="prose -my-3">
-    <h1 class="sticky top-0 z-10 text-3xl sm:text-4xl mb-3">{title}</h1>
+    <Title title={title} />
     {
       !toy && (
         <small class="text-slate">