feat: sticky position toc below header

youwen5 · May 6, 2024 · de78d82 · de78d82
1 parent 7f3a524
commit de78d82
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 29 deletions.
diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte
@@ -1,34 +1,8 @@
 <script lang="ts">
-  import PostMetadata from './PostMetadata.svelte'
-  import Crumbs from './Crumbs.svelte'
-
   export let doc: BlogDocument
 </script>
 
 <article>
-  <Crumbs slug={doc.slug} title={doc.title} />
-  <header class="space-y-6">
-    <div class="space-y-2">
-      <h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
-        {doc.title}
-      </h1>
-      <p class="text-balance text-lg text-muted-foreground">
-        {doc.blurb}
-      </p>
-      <PostMetadata
-        primaryTags={doc.primaryTags}
-        secondaryTags={doc.secondaryTags}
-        date={doc.date}
-        length={doc.content.length}
-        reverseDateAndRest
-      />
-    </div>
-    <figure class="w-full lg:w-[80%]">
-      <img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
-      <figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
-    </figure>
-  </header>
-
   <div class="markdown-body mb-8 font-serif">
     {@html doc.content}
   </div>

diff --git a/src/lib/components/Blog/ArticleHeader.svelte b/src/lib/components/Blog/ArticleHeader.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import PostMetadata from './PostMetadata.svelte'
+  import Crumbs from './Crumbs.svelte'
+
+  export let doc: BlogDocument
+</script>
+
+<Crumbs slug={doc.slug} title={doc.title} />
+<header class="space-y-6">
+  <div class="space-y-2">
+    <h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
+      {doc.title}
+    </h1>
+    <p class="text-balance text-lg text-muted-foreground">
+      {doc.blurb}
+    </p>
+    <PostMetadata
+      primaryTags={doc.primaryTags}
+      secondaryTags={doc.secondaryTags}
+      date={doc.date}
+      length={doc.content.length}
+      reverseDateAndRest
+    />
+  </div>
+  <figure class="w-full lg:w-[80%]">
+    <img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
+    <figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
+  </figure>
+</header>
diff --git a/src/routes/blog/[...slug]/+page.svelte b/src/routes/blog/[...slug]/+page.svelte
@@ -7,6 +7,7 @@
   import '$lib/styles/katex.css'
   import '$lib/styles/markdown.css'
   import '$lib/styles/tokyo-night-dark.min.css'
+  import ArticleHeader from '$lib/components/Blog/ArticleHeader.svelte'
 
   const tocStore = createTocStore()
 
@@ -33,7 +34,13 @@
 
 <TocHeader {tocStore} placeholder="On this page" />
 
-<div class="lg:flex mx-auto mt-24 lg:mt-14 px-4">
+<div class="max-w-3xl 2xl:max-w-3xl px-4 xl:px-0 xl:mx-auto mt-14">
+  <div class="flex-grow basis-3/4 xl:basis-2/4 flex-shrink">
+    <ArticleHeader {doc} />
+  </div>
+</div>
+
+<div class="lg:flex mx-auto px-4">
   <div class="flex-shrink xl:basis-1/4" />
   <main
     class="flex-grow basis-3/4 xl:basis-2/4 flex-shrink"
@@ -51,8 +58,8 @@
     <Article {doc} />
   </main>
 
-  <aside class="basis-1/4 relative hidden lg:block">
-    <div class="fixed mx-8">
+  <aside class="basis-1/4 relative hidden lg:block mt-10">
+    <div class="sticky top-32 mx-8">
       <StickyToc {tocStore} />
     </div>
   </aside>