feat: breadcrumbs and more

package-lock.json

@@ -20,6 +20,7 @@
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
@@ -2201,6 +2202,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",

src/components/AuthorCard.astro

@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from 'astro:content'
 import { Image } from 'astro:assets'
+import Link from '@components/Link.astro'
 
 type Props = {
   author: CollectionEntry<'authors'>
@@ -13,7 +14,7 @@ const { name, avatar, bio } = author.data
 <div
   class="rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
 >
-  <a href={`/authors/${author.slug}`} class="flex flex-wrap gap-4">
+  <Link href={`/authors/${author.slug}`} class="flex flex-wrap gap-4">
     <Image
       src={avatar}
       alt={`Avatar of ${name}`}
@@ -25,5 +26,5 @@ const { name, avatar, bio } = author.data
       <h3 class="mb-1 text-lg font-semibold">{name}</h3>
       <p class="text-sm text-muted-foreground">{bio}</p>
     </div>
-  </a>
+  </Link>
 </div>

src/components/BlogCard.astro

@@ -3,6 +3,8 @@ import type { CollectionEntry } from 'astro:content'
 import { formatDate, readingTime } from '@lib/utils'
 import { Image } from 'astro:assets'
 import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import Link from './Link.astro'
 
 type Props = {
   entry: CollectionEntry<'blog'>
@@ -19,7 +21,10 @@ const readTime = readingTime(entry.body)
 <div
   class="not-prose rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
 >
-  <a href={`/${entry.collection}/${entry.slug}`} class="flex flex-wrap gap-4">
+  <Link
+    href={`/${entry.collection}/${entry.slug}`}
+    class="flex flex-wrap gap-4"
+  >
     {
       entry.data.image && (
         <div class="flex-shrink-0">
@@ -44,7 +49,7 @@ const readTime = readingTime(entry.body)
         class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
       >
         <span>{formattedDate}</span>
-        <span>&bull;</span>
+        <Separator orientation="vertical" className="h-4" />
         <span>{readTime}</span>
       </div>
       {
@@ -57,5 +62,5 @@ const readTime = readingTime(entry.body)
         )
       }
     </div>
-  </a>
+  </Link>
 </div>

src/components/Footer.astro

@@ -1,7 +1,6 @@
 ---
 import Container from '@components/Container.astro'
 import SocialIcons from './SocialIcons.astro'
-import { ModeToggle } from '@components/ui/mode-toggle'
 ---
 
 <footer class="py-4">
@@ -10,9 +9,6 @@ import { ModeToggle } from '@components/ui/mode-toggle'
       class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:justify-between"
     >
       <div class="flex items-center">
-        <div class="mr-2 hidden sm:block">
-          <ModeToggle client:load />
-        </div>
         <p class="text-sm text-muted-foreground">
           &copy; {new Date().getFullYear()} All rights reserved.
         </p>

src/components/Header.astro

@@ -2,6 +2,7 @@
 import Container from '@components/Container.astro'
 import Link from '@components/Link.astro'
 import { SITE } from '@consts'
+import { ModeToggle } from '@/components/ui/mode-toggle'
 
 const items = [
   { href: '/blog', label: 'blog' },
@@ -22,20 +23,21 @@ const items = [
       >
         {SITE.TITLE}
       </Link>
+      <div class="flex items-center gap-4">
         <nav class="flex items-center gap-4 text-sm sm:gap-6">
           {
-          items.map((item, index) => (
+            items.map((item) => (
-            <Fragment key={item.href}>
               <Link
                 href={item.href}
                 class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
               >
                 {item.label}
               </Link>
-            </Fragment>
             ))
           }
         </nav>
+        <ModeToggle client:load />
+      </div>
     </div>
   </Container>
 </header>

src/components/Link.astro

@@ -5,6 +5,7 @@ type Props = {
   href: string
   external?: boolean
   class?: string
+  underline?: boolean
   'data-heading'?: string
 }
 
@@ -12,6 +13,7 @@ const {
   href,
   external,
   class: className,
+  underline,
   'data-heading': dataHeading,
   ...rest
 } = Astro.props
@@ -21,7 +23,8 @@ const {
   href={href}
   target={external ? '_blank' : '_self'}
   class={cn(
-    'inline-block transition-colors duration-300 ease-in-out hover:underline underline-offset-[3px]',
+    'inline-block transition-colors duration-300 ease-in-out',
+    underline && 'hover:underline hover:underline-offset-[3px]',
     className,
   )}
   data-heading={dataHeading}

src/components/PostNavigation.astro

@@ -1,65 +1,39 @@
 ---
+import Link from '@components/Link.astro'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
 const { prevPost, nextPost } = Astro.props
 ---
 
-<div class="grid grid-cols-2 gap-1.5 sm:gap-3">
+<div class="mt-8 flex justify-between gap-4">
-  {
+  <Link
-    prevPost?.slug ? (
+    href={prevPost ? `/blog/${prevPost.slug}` : '#'}
-      <a
+    class={cn(
-        href={`/blog/${prevPost?.slug}`}
+      buttonVariants({ variant: 'outline' }),
-        class="group relative flex flex-nowrap rounded-lg border px-4 py-3 pl-10 no-underline transition-colors duration-300 ease-in-out"
+      'group flex items-center justify-start gap-2 w-1/2',
+      !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!prevPost}
   >
-        <svg
+    <ArrowLeft
-          xmlns="http://www.w3.org/2000/svg"
+      className="h-4 w-4 transition-transform group-hover:-translate-x-1"
-          viewBox="0 0 24 24"
+    />
-          class="absolute left-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
+    <span class="truncate">{prevPost?.data.title || 'Latest post!'}</span>
+  </Link>
+  <Link
+    href={nextPost ? `/blog/${nextPost.slug}` : '#'}
+    class={cn(
+      buttonVariants({ variant: 'outline' }),
+      'group flex items-center justify-end gap-2 w-1/2',
+      !nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!nextPost}
   >
-          <line
+    <span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
-            x1="5"
+    <ArrowRight
-            y1="12"
+      className="h-4 w-4 transition-transform group-hover:translate-x-1"
-            x2="19"
-            y2="12"
-            class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out"
     />
-          <polyline
+  </Link>
-            points="12 5 5 12 12 19"
-            class="translate-x-1 transition-transform duration-300 ease-in-out"
-          />
-        </svg>
-        <div class="flex items-center text-sm">{prevPost?.data.title}</div>
-      </a>
-    ) : (
-      <div class="invisible" />
-    )
-  }
-
-  {
-    nextPost?.slug ? (
-      <a
-        href={`/blog/${nextPost?.slug}`}
-        class="group relative flex flex-grow flex-row-reverse flex-nowrap rounded-lg border px-4 py-4 pr-10 no-underline transition-colors duration-300 ease-in-out"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="absolute right-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
-        >
-          <line
-            x1="5"
-            y1="12"
-            x2="19"
-            y2="12"
-            class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out"
-          />
-          <polyline
-            points="12 5 19 12 12 19"
-            class="-translate-x-1 transition-transform duration-300 ease-in-out"
-          />
-        </svg>
-        <div class="flex items-center text-sm">{nextPost?.data.title}</div>
-      </a>
-    ) : (
-      <div class="invisible" />
-    )
-  }
 </div>

src/components/SocialIcons.astro

@@ -1,20 +1,37 @@
 ---
-import {
+import { Twitter, Github, Linkedin, Mail, Rss } from 'lucide-react'
-  Twitter,
-  Github,
-  Linkedin,
-  Mail,
-  GraduationCap,
-  Rss,
-} from 'lucide-react'
 import { SITE } from '@consts'
 ---
 
-<ul class="not-prose flex flex-wrap gap-2">
+<ul class="not-prose flex flex-wrap gap-2" role="list">
-  <a href="#" class="inline-block"><Twitter /></a>
+  <li>
-  <a href="#" class="inline-block"><Github /></a>
+    <a href="#" class="inline-block" aria-label="Twitter" title="Twitter">
-  <a href="#" class="inline-block"><Linkedin /></a>
+      <Twitter />
-  <a href="#" class="inline-block"><Mail /></a>
+    </a>
-  <a href="#" class="inline-block"><GraduationCap /></a>
+  </li>
-  <a href={`${SITE.SITEURL}/rss.xml`} class="inline-block"><Rss /></a>
+  <li>
+    <a href="#" class="inline-block" aria-label="GitHub" title="GitHub">
+      <Github />
+    </a>
+  </li>
+  <li>
+    <a href="#" class="inline-block" aria-label="LinkedIn" title="LinkedIn">
+      <Linkedin />
+    </a>
+  </li>
+  <li>
+    <a href="#" class="inline-block" aria-label="Email" title="Email">
+      <Mail />
+    </a>
+  </li>
+  <li>
+    <a
+      href={`${SITE.SITEURL}/rss.xml`}
+      class="inline-block"
+      aria-label="RSS feed"
+      title="RSS feed"
+    >
+      <Rss />
+    </a>
+  </li>
 </ul>

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = 'Breadcrumb'
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+      className,
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('font-normal text-foreground', className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = 'BreadcrumbPage'
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+}

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/pages/404.astro

@@ -3,18 +3,53 @@ import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import Link from '@components/Link.astro'
 import { SITE } from '@consts'
-import { Button } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 ---
 
 <Layout title="404" description={SITE.DESCRIPTION}>
   <Container>
-    <div class="mt-16 grid place-items-center gap-3">
+    <Breadcrumb className="mb-4">
-      <h4 class="text-2xl font-semibold">404: Page not found</h4>
+      <BreadcrumbList>
-      <span>
+        <BreadcrumbItem>
-        <a href="/">
+          <BreadcrumbLink href="/"
-          <Button variant="outline"> Go to home page </Button>
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
-        </a>
+          >
-      </span>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>???</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
+    <section
+      class="flex min-h-[50vh] flex-col items-center justify-center space-y-6 text-center"
+    >
+      <div class="max-w-md">
+        <h1 class="mb-4 text-3xl font-bold">404: Page not found</h1>
+        <p class="prose dark:prose-invert">
+          Oops! The page you're looking for doesn't exist.
+        </p>
       </div>
+      <div>
+        <Link
+          href="/"
+          class={buttonVariants({ variant: 'outline' }) + ' group'}
+        >
+          <span class="mr-1.5 transition-transform group-hover:-translate-x-1"
+            >&larr;</span
+          > Go to home page
+        </Link>
+      </div>
+    </section>
   </Container>
 </Layout>

src/pages/about.astro

@@ -3,33 +3,41 @@ import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import Link from '@components/Link.astro'
 import { SITE } from '@consts'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 ---
 
 <Layout title="About" description={SITE.DESCRIPTION}>
   <Container>
-    <article class="prose max-w-none dark:prose-invert">
+    <Breadcrumb className="mb-4">
-      <h1 class="mb-8 text-3xl font-bold">About Us</h1>
+      <BreadcrumbList>
-      <p class="mb-4">
+        <BreadcrumbItem>
-        Welcome to {SITE.TITLE}, a platform dedicated to sharing insights,
+          <BreadcrumbLink href="/"
-        knowledge, and experiences in the world of technology and beyond. Our
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
-        mission is to provide valuable content that informs, inspires, and
+          >
-        engages our readers.
+        </BreadcrumbItem>
-      </p>
+        <BreadcrumbSeparator />
-      <p class="mb-8">
+        <BreadcrumbItem>
-        Founded in 2023, we've grown into a community of passionate writers and
+          <BreadcrumbPage>About</BreadcrumbPage>
-        tech enthusiasts. Our team brings diverse expertise to the table,
+        </BreadcrumbItem>
-        covering topics ranging from software development and artificial
+      </BreadcrumbList>
-        intelligence to digital culture and tech ethics.
+    </Breadcrumb>
-      </p>
 
-      <h2 class="mb-4 text-2xl font-semibold">Get in Touch</h2>
+    <section class="space-y-6">
-      <p class="mb-4">
+      <div class="min-w-full">
-        We love hearing from our readers! Whether you have a question,
+        <h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
-        suggestion, or just want to say hello, don't hesitate to reach out.
+        <p class="prose dark:prose-invert">
+          {SITE.TITLE} is an opinionated, no-frills static blogging template built
+          with Astro.
         </p>
-      <p>
+      </div>
-        <Link href="/contact" class="font-semibold">Contact Us</Link>
+    </section>
-      </p>
-    </article>
   </Container>
 </Layout>

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

@@ -5,6 +5,15 @@ import Container from '@components/Container.astro'
 import AuthorCard from '@components/AuthorCard.astro'
 import BlogCard from '@components/BlogCard.astro'
 import { Button } from '@/components/ui/button'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 
 export async function getStaticPaths() {
   const authors = await getCollection('authors')
@@ -38,9 +47,24 @@ const authorPosts = allPosts
   description={author.data.bio || `Profile of ${author.data.name}`}
 >
   <Container>
-    <a href="/authors">
+    <Breadcrumb className="mb-4">
-      <Button variant="ghost" className="mb-8">&larr; Back to authors</Button>
+      <BreadcrumbList>
-    </a>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/authors">Authors</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{author.data.name}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
     <div class="space-y-10">
       <section>
         <AuthorCard author={author} />

src/pages/authors/index.astro

@@ -3,14 +3,34 @@ import { getCollection } from 'astro:content'
 import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import AuthorCard from '@components/AuthorCard.astro'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 
 const authors = await getCollection('authors')
 ---
 
 <Layout title="Authors" description="Authors">
   <Container>
-    <div class="space-y-10">
+    <Breadcrumb className="mb-4">
-      <h1 class="text-3xl font-semibold">Authors</h1>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Authors</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
     <ul class="not-prose flex flex-col gap-4">
       {
         authors.map((author) => (
@@ -20,6 +40,5 @@ const authors = await getCollection('authors')
         ))
       }
     </ul>
-    </div>
   </Container>
 </Layout>

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

@@ -7,8 +7,20 @@ import { readingTime } from '@lib/utils'
 import PostNavigation from '@components/PostNavigation.astro'
 import TableOfContents from '@components/TableOfContents.astro'
 import { Image } from 'astro:assets'
-import { Badge } from '@/components/ui/badge'
+import { Badge, badgeVariants } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+import Link from '@components/Link.astro'
 
 export async function getStaticPaths() {
   const posts = (await getCollection('blog'))
@@ -67,96 +79,102 @@ if (
 
 <Layout title={post.data.title} description={post.data.description}>
   <Container>
-    <a href="/blog">
+    <Breadcrumb className="mb-4">
-      <Button variant="ghost" className="mb-8">&larr; Back to blog</Button>
+      <BreadcrumbList>
-    </a>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/blog">Blog</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{post.data.title}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
     {
       post.data.image && (
-        <div class="mb-8 flex justify-center">
         <Image
           src={post.data.image}
           alt={post.data.title}
           width={1200}
           height={630}
-            class="rounded-lg object-cover shadow-lg"
+          class="mb-8 rounded-lg object-cover shadow-lg"
         />
-        </div>
       )
     }
-    <div class="mb-8 flex flex-col items-center gap-y-4">
+
-      <div class="flex items-center gap-3 text-sm text-muted-foreground">
+    <section class="mb-8 text-center">
-        <FormattedDate date={post.data.date} />
+      <h1 class="mb-4 text-4xl font-bold leading-tight sm:text-5xl">
-        <span>&bull;</span>
-        <span>{readingTime(post.body)}</span>
-      </div>
-      <h1 class="text-4xl font-bold leading-tight sm:text-5xl">
         {post.data.title}
       </h1>
-      <div class="flex flex-wrap gap-2">
+
+      <div
+        class="flex items-center justify-center gap-3 text-sm text-muted-foreground"
+      >
+        {
+          author && (
+            <>
+              <div class="flex items-center gap-2">
+                <Image
+                  src={author.data.avatar}
+                  alt={author.data.name}
+                  width={24}
+                  height={24}
+                  class="rounded-full"
+                />
+                {typeof post.data.author === 'object' &&
+                'collection' in post.data.author ? (
+                  <a
+                    href={`/authors/${post.data.author.slug}`}
+                    class="hover:text-primary"
+                  >
+                    {author.data.name}
+                  </a>
+                ) : (
+                  <span>{author.data.name}</span>
+                )}
+              </div>
+              <Separator orientation="vertical" className="h-4" />
+            </>
+          )
+        }
+        <FormattedDate date={post.data.date} />
+        <Separator orientation="vertical" className="h-4" />
+        <span>{readingTime(post.body)}</span>
+      </div>
+
+      <div class="mt-4 flex flex-wrap justify-center gap-2">
         {
           post.data.tags && post.data.tags.length > 0 ? (
             post.data.tags.map((tag) => (
-              <Button variant="outline" asChild>
+              <a
-                <a href={`/tags/${tag}`}>
+                href={`/tags/${tag}`}
-                  <Badge variant="outline">{tag}</Badge>
+                class={badgeVariants({ variant: 'outline' })}
+              >
+                {tag}
               </a>
-              </Button>
             ))
           ) : (
             <span class="text-sm text-muted-foreground">No tags available</span>
           )
         }
       </div>
-      {
+
-        author && (
-          <div>
-            {typeof post.data.author === 'object' &&
-            'collection' in post.data.author ? (
-              <Button variant="ghost" asChild>
-                <a
-                  class="group flex items-center gap-3 rounded-xl p-2 transition-colors duration-300 ease-in-out hover:bg-secondary"
-                  href={`/authors/${post.data.author.slug}`}
-                >
-                  <Image
-                    src={author.data.avatar}
-                    alt={`Avatar of ${author.data.name}`}
-                    width={48}
-                    height={48}
-                    class="rounded-full"
-                  />
-                  <div>
-                    <span class="font-medium group-hover:text-primary">
-                      {author.data.name}
-                    </span>
-                    <p class="text-sm text-muted-foreground">Author</p>
-                  </div>
-                </a>
-              </Button>
-            ) : (
-              <div class="flex items-center gap-3 rounded-xl p-2">
-                <Image
-                  src={author.data.avatar || '/default-avatar.png'}
-                  alt={`Avatar of ${author.data.name}`}
-                  width={48}
-                  height={48}
-                  class="rounded-full"
-                />
-                <div>
-                  <span class="font-medium">{author.data.name}</span>
-                  <p class="text-sm text-muted-foreground">Author</p>
-                </div>
-              </div>
-            )}
-          </div>
-        )
-      }
-    </div>
-    {headings.length > 0 && <TableOfContents headings={headings} />}
-    <article class="max-w-full">
-      <Content />
-      <div class="mt-24">
       <PostNavigation prevPost={prevPost} nextPost={nextPost} />
-      </div>
+    </section>
+
+    {headings.length > 0 && <TableOfContents headings={headings} />}
+
+    <article class="prose max-w-none dark:prose-invert">
+      <Content />
     </article>
+
+    <PostNavigation prevPost={prevPost} nextPost={nextPost} />
   </Container>
 </Layout>

src/pages/blog/index.astro

@@ -3,6 +3,15 @@ import { type CollectionEntry, getCollection } from 'astro:content'
 import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import BlogCard from '@components/BlogCard.astro'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 
 const data = (await getCollection('blog'))
   .filter((post) => !post.data.draft)
@@ -26,6 +35,20 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
 
 <Layout title="Blog" description="Blog">
   <Container>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Blog</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
     <div class="space-y-10">
       <div class="space-y-4">
         {

src/pages/index.astro

@@ -3,8 +3,9 @@ import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import { SITE } from '@consts'
 import BlogCard from '@components/BlogCard.astro'
-import Link from '@components/Link.astro'
+import { buttonVariants } from '@/components/ui/button'
 import { getCollection } from 'astro:content'
+import Link from '@components/Link.astro'
 
 const blog = (await getCollection('blog'))
   .filter((post) => !post.data.draft)
@@ -14,10 +15,16 @@ const blog = (await getCollection('blog'))
 
 <Layout title="Home" description="Home">
   <Container>
-    <section class="space-y-4">
+    <section class="space-y-6">
+      <div class="min-w-full">
+        <h1 class="mb-4 text-3xl font-bold">Occasionally, less is more</h1>
+        <p class="prose min-w-full dark:prose-invert">
+          {SITE.TITLE} is an opinionated, no-frills static blogging template built
+          with Astro.
+        </p>
+      </div>
       <div class="flex flex-wrap items-center justify-between gap-y-2">
-        <h2 class="font-semibold">Latest posts</h2>
+        <h2 class="text-2xl font-bold">Latest posts</h2>
-        <Link href="/blog"> See all posts </Link>
       </div>
       <ul class="not-prose flex flex-col gap-4">
         {
@@ -28,6 +35,17 @@ const blog = (await getCollection('blog'))
           ))
         }
       </ul>
+      <div class="flex justify-center">
+        <Link
+          href="/blog"
+          class={buttonVariants({ variant: 'ghost' }) + ' group'}
+        >
+          See all posts <span
+            class="ml-1.5 transition-transform group-hover:translate-x-1"
+            >&rarr;</span
+          >
+        </Link>
+      </div>
     </section>
   </Container>
 </Layout>