feat: polishing

src/pages/404.astro

@@ -22,7 +22,7 @@ import { cn } from '@lib/utils'
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
-            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+            ><HomeIcon className="size-4" /></BreadcrumbLink
           >
         </BreadcrumbItem>
         <BreadcrumbSeparator />
@@ -37,7 +37,7 @@ import { cn } from '@lib/utils'
     >
       <div class="max-w-md">
         <h1 class="mb-4 text-3xl font-bold">404: Page not found</h1>
-        <p class="prose dark:prose-invert">
+        <p class="prose prose-neutral dark:prose-invert">
           Oops! The page you're looking for doesn't exist.
         </p>
       </div>

src/pages/about.astro

@@ -20,7 +20,7 @@ import { HomeIcon } from 'lucide-react'
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
-            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+            ><HomeIcon className="size-4" /></BreadcrumbLink
           >
         </BreadcrumbItem>
         <BreadcrumbSeparator />
@@ -33,7 +33,7 @@ import { HomeIcon } from 'lucide-react'
     <section>
       <div class="min-w-full">
         <h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
-        <p class="prose dark:prose-invert">
+        <p class="prose prose-neutral dark:prose-invert">
           {SITE.TITLE} is an opinionated, no-frills static blogging template built
           with Astro.
         </p>

src/pages/authors/[...slug].astro

@@ -32,12 +32,7 @@ const { author } = Astro.props
 const allPosts = await getCollection('blog')
 const authorPosts = allPosts
   .filter((post) => {
-    if (typeof post.data.author === 'string') {
-      return post.data.author === author.data.name && !post.data.draft
-    } else if (post.data.author && 'slug' in post.data.author) {
-      return post.data.author.slug === author.slug && !post.data.draft
-    }
-    return false
+    return post.data.authors && post.data.authors.includes(author.slug)
   })
   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
 ---
@@ -51,7 +46,7 @@ const authorPosts = allPosts
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
-            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+            ><HomeIcon className="size-4" /></BreadcrumbLink
           >
         </BreadcrumbItem>
         <BreadcrumbSeparator />

src/pages/authors/index.astro

@@ -22,7 +22,7 @@ const authors = await getCollection('authors')
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
-            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+            ><HomeIcon className="size-4" /></BreadcrumbLink
           >
         </BreadcrumbItem>
         <BreadcrumbSeparator />

src/pages/blog/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { type CollectionEntry, getCollection, getEntry } from 'astro:content'
+import { type CollectionEntry, getCollection } from 'astro:content'
 import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import { formatDate, readingTime } from '@lib/utils'
@@ -59,7 +59,7 @@ const prevPost = getPrevPost(currentPostSlug)
 const post = Astro.props
 const { Content, headings } = await post.render()
 
-const authors = await parseAuthors(post.data.author ?? [])
+const authors = await parseAuthors(post.data.authors ?? [])
 ---
 
 <Layout title={post.data.title} description={post.data.description}>
@@ -68,7 +68,7 @@ const authors = await parseAuthors(post.data.author ?? [])
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
-            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+            ><HomeIcon className="size-4" /></BreadcrumbLink
           >
         </BreadcrumbItem>
         <BreadcrumbSeparator />
@@ -147,7 +147,7 @@ const authors = await parseAuthors(post.data.author ?? [])
                 href={`/tags/${tag}`}
                 class={badgeVariants({ variant: 'secondary' })}
               >
-                <Hash className="mr-0.5 h-3 w-3" />
+                <Hash className="-translate-x-0.5 size-3" />
                 {tag}
               </a>
             ))
@@ -162,7 +162,7 @@ const authors = await parseAuthors(post.data.author ?? [])
 
     {headings.length > 0 && <TableOfContents headings={headings} />}
 
-    <article class="prose max-w-none dark:prose-invert">
+    <article class="prose prose-neutral max-w-none dark:prose-invert">
       <Content />
     </article>
 
@@ -185,13 +185,21 @@ const authors = await parseAuthors(post.data.author ?? [])
   <script>
     document.addEventListener('astro:page-load', () => {
       const scrollToTopButton = document.getElementById('scroll-to-top')
-      if (scrollToTopButton) {
+      const footer = document.querySelector('footer')
+
+      if (scrollToTopButton && footer) {
         scrollToTopButton.addEventListener('click', () => {
           window.scrollTo({ top: 0, behavior: 'smooth' })
         })
 
         window.addEventListener('scroll', () => {
-          scrollToTopButton.classList.toggle('hidden', window.scrollY <= 300)
+          const footerRect = footer.getBoundingClientRect()
+          const isFooterVisible = footerRect.top <= window.innerHeight
+
+          scrollToTopButton.classList.toggle(
+            'hidden',
+            window.scrollY <= 300 || isFooterVisible,
+          )
         })
       }
     })

src/pages/blog/index.astro

@@ -39,7 +39,7 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
-            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+            ><HomeIcon className="size-4" /></BreadcrumbLink
           >
         </BreadcrumbItem>
         <BreadcrumbSeparator />

src/pages/tags/index.astro

@@ -2,7 +2,17 @@
 import { getCollection } from 'astro:content'
 import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
-import { Badge } from '@/components/ui/badge'
+import Link from '@components/Link.astro'
+import { badgeVariants } from '@components/ui/badge'
+import { Hash, HomeIcon } from 'lucide-react'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
 
 const blog = (await getCollection('blog')).filter((post) => !post.data.draft)
 
@@ -11,20 +21,38 @@ const tags = blog
   .filter((tag, index, self) => self.indexOf(tag) === index)
 ---
 
-<Layout title="Tags" description="Tags">
+<Layout title="Tags" description="A list of all tags used in blog posts">
   <Container>
-    <div class="space-y-10">
-      <h1 class="text-3xl font-semibold">Tags</h1>
-      <div class="flex flex-wrap gap-2">
-        {
-          tags.map((tag) => (
-            <a href={`/tags/${tag}`}>
-              <Badge variant="secondary" className="hover:bg-secondary/80">
-                #{tag}
-              </Badge>
-            </a>
-          ))
-        }
+    <div class="space-y-6">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/"
+              ><HomeIcon className="size-4" /></BreadcrumbLink
+            >
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Tags</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div class="flex flex-col gap-4">
+        <h1 class="text-3xl font-semibold">Tags</h1>
+        <div class="flex flex-wrap gap-2">
+          {
+            tags.map((tag) => (
+              <Link
+                href={`/tags/${tag}`}
+                class={badgeVariants({ variant: 'secondary' })}
+              >
+                <Hash className="-translate-x-0.5 size-3" />
+                {tag}
+              </Link>
+            ))
+          }
+        </div>
       </div>
     </div>
   </Container>