lotsa refactoring on that :3

web/src/components/post/postInfo.astro

@@ -0,0 +1,17 @@
+---
+import { getFormattedDate } from '@utils/date'
+const { publishDate, readTime, tags } = Astro.props
+---
+
+<time datetime={publishDate}>{getFormattedDate(publishDate)}</time> |
+{readTime} min. read |
+{
+    tags.map((tag, i) => (
+    <>
+    <a class="b1-no-underline" href={`/posts/tag/${tag}/`}>
+        #{tag}
+    </a>
+    {i < tags.length - 1 && ", "}
+    </>
+    ))
+}

web/src/components/post/toc.astro

@@ -0,0 +1,56 @@
+---
+
+---
+
+<div id="toc-container" class="hidden">
+    <p class="text-lg mt-4">Table of Contents</p>
+    <ul id="toc" class="text-md"/>
+</div>
+
+<script>
+    function addLink(tag: Element, depth: number) {
+        let lnk = document.createElement('a')
+        lnk.href=`#${tag.id}`
+        lnk.className = 'b1-no-underline'
+        lnk.innerHTML = `<span class="mr-1">${"#".repeat(depth)}</span>${tag.innerHTML}`
+
+        let li = document.createElement('li')
+        li.className = 'line-clamp-1'
+        li.appendChild(lnk)
+
+        toc?.appendChild(li)
+    }
+
+    // get all titles in the page
+    const titles = document.querySelectorAll('h2, h3')
+    const toc = document.getElementById('toc') as Element
+    const toc_cnt = document.getElementById('toc-container') as Element
+
+    console.log(titles)
+
+    // if there's more than two titles (ie, there's more than just the article title and TOC title, then appropriate to show)
+    if (titles.length > 2) {
+        toc_cnt.classList.add('lg:block')
+    }
+
+    for (let i = 0; i < titles.length; i++) {
+        const t = titles[i] as Element
+
+        // Assign IDs in case they haven't been (by me)
+        t.id = t.innerHTML
+
+        let depth = 1
+
+        // determine what depth to use
+        switch (t.tagName) {
+            case 'H2':
+                depth = 1
+                break
+            case 'H3':
+                depth = 2
+                break
+        }
+
+        addLink(t, depth)
+    }
+</script>

web/src/pages/posts/[slug].astro

@@ -1,22 +1,22 @@
 ---
 import Base from "@layout/Base";
-import { getFormattedDate } from "@utils/date";
+import PostInfo from "@components/post/postInfo";
+import TableOfContents from "@components/post/toc";
+
 import { calcReadTime } from '@utils/post'
 import { authPB } from "@utils/pocketbase";
+
 const { slug } = Astro.params
 export const prerender = false
 
 const pb = await authPB()
-
 const post = await pb.collection('posts').getFirstListItem(`slug="${slug}"`)
 
 const { title, content, publishDate, description } = post
-
 const headerImage = pb.files.getURL(post, post.headerImage)
 
 const wordCount = content.split(' ').length;
 const readTime = calcReadTime(wordCount);
-const formattedPublishDate = getFormattedDate(publishDate);
 
 ---
 
@@ -28,21 +28,13 @@ const formattedPublishDate = getFormattedDate(publishDate);
         
         <p class="italic">{description}</p>
         
-        <time datetime={publishDate}>{formattedPublishDate}</time> |
+        <PostInfo
-        {readTime} min. read |
+            publishDate={publishDate},
-        {
+            readTime={readTime},
-            post.tags.map((tag, i) => (
+            tags={post.tags}
-            <>
+        />
-                <a href={`/posts/tag/${tag}/`}>
-                #{tag}
-                </a>
-                {i < post.tags.length - 1 && ", "}
-            </>
-            ))
-        }
 
-        <!-- <h2 class="text-lg mt-4">Table of Contents</h2> -->
+        <TableOfContents/>
-        <!-- <ul id="toc" class="text-md"/> -->
 
 </div>
 
@@ -50,57 +42,10 @@ const formattedPublishDate = getFormattedDate(publishDate);
     <Fragment set:html={content} />
 </div>
 
-
-</Base>
-
 <style>
     img {
         margin-inline: calc(var(--spacing) * 4);
     }
 </style>
 
-<script>
+</Base>
-    function addLink(tag: Element, depth: number) {
-        let lnk = document.createElement('a')
-        lnk.href=`#${tag.id}`
-        lnk.className = 'mt-2 text-[0.6875rem]'
-        lnk.innerHTML = `<span class="mr-1">${"#".repeat(depth)}</span>${tag.innerHTML}`
-
-        let li = document.createElement('li')
-        li.className = 'line-clamp-1 hover:text-accent'
-        li.appendChild(lnk)
-
-        toc?.appendChild(li)
-    }
-
-    // get all titles in the page
-    const titles = document.querySelectorAll('h1, h2, h3')
-    const toc = document.getElementById('toc') as Element
-    // const toc_cnt = document.getElementById('toc-container') as Element
-
-    // // if there's more than two titles (ie, there's more than just the article title and TOC title, then appropriate to show)
-    // if (titles.length > 2) {
-    //     toc_cnt.classList.add('lg:block')
-    // }
-
-    for (let i = 1; i < titles.length; i++) {
-        const t = titles[i] as Element
-
-        // Assign IDs in case they haven't been (by me)
-        t.id = t.innerHTML
-
-        let depth = 1
-
-        // determine what depth to use
-        switch (t.tagName) {
-            case 'H2':
-                depth = 2
-                break
-            case 'H3':
-                depth = 3
-                break
-        }
-
-        addLink(t, depth)
-    }
-</script>