feat: breadcrumbs and more

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">
-      <h4 class="text-2xl font-semibold">404: Page not found</h4>
-      <span>
-        <a href="/">
-          <Button variant="outline"> Go to home page </Button>
-        </a>
-      </span>
-    </div>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </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">
-      <h1 class="mb-8 text-3xl font-bold">About Us</h1>
-      <p class="mb-4">
-        Welcome to {SITE.TITLE}, a platform dedicated to sharing insights,
-        knowledge, and experiences in the world of technology and beyond. Our
-        mission is to provide valuable content that informs, inspires, and
-        engages our readers.
-      </p>
-      <p class="mb-8">
-        Founded in 2023, we've grown into a community of passionate writers and
-        tech enthusiasts. Our team brings diverse expertise to the table,
-        covering topics ranging from software development and artificial
-        intelligence to digital culture and tech ethics.
-      </p>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>About</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
 
-      <h2 class="mb-4 text-2xl font-semibold">Get in Touch</h2>
-      <p class="mb-4">
-        We love hearing from our readers! Whether you have a question,
-        suggestion, or just want to say hello, don't hesitate to reach out.
-      </p>
-      <p>
-        <Link href="/contact" class="font-semibold">Contact Us</Link>
-      </p>
-    </article>
+    <section class="space-y-6">
+      <div class="min-w-full">
+        <h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
+        <p class="prose dark:prose-invert">
+          {SITE.TITLE} is an opinionated, no-frills static blogging template built
+          with Astro.
+        </p>
+      </div>
+    </section>
   </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">
-      <Button variant="ghost" className="mb-8">&larr; Back to authors</Button>
-    </a>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <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,23 +3,42 @@ 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">
-      <h1 class="text-3xl font-semibold">Authors</h1>
-      <ul class="not-prose flex flex-col gap-4">
-        {
-          authors.map((author) => (
-            <li>
-              <AuthorCard author={author} />
-            </li>
-          ))
-        }
-      </ul>
-    </div>
+    <Breadcrumb className="mb-4">
+      <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) => (
+          <li>
+            <AuthorCard author={author} />
+          </li>
+        ))
+      }
+    </ul>
   </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">
-      <Button variant="ghost" className="mb-8">&larr; Back to blog</Button>
-    </a>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <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"
-          />
-        </div>
+        <Image
+          src={post.data.image}
+          alt={post.data.title}
+          width={1200}
+          height={630}
+          class="mb-8 rounded-lg object-cover shadow-lg"
+        />
       )
     }
-    <div class="mb-8 flex flex-col items-center gap-y-4">
-      <div class="flex items-center gap-3 text-sm text-muted-foreground">
-        <FormattedDate date={post.data.date} />
-        <span>&bull;</span>
-        <span>{readingTime(post.body)}</span>
-      </div>
-      <h1 class="text-4xl font-bold leading-tight sm:text-5xl">
+
+    <section class="mb-8 text-center">
+      <h1 class="mb-4 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 href={`/tags/${tag}`}>
-                  <Badge variant="outline">{tag}</Badge>
-                </a>
-              </Button>
+              <a
+                href={`/tags/${tag}`}
+                class={badgeVariants({ variant: 'outline' })}
+              >
+                {tag}
+              </a>
             ))
           ) : (
             <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>
+
+      <PostNavigation prevPost={prevPost} nextPost={nextPost} />
+    </section>
+
     {headings.length > 0 && <TableOfContents headings={headings} />}
-    <article class="max-w-full">
+
+    <article class="prose max-w-none dark:prose-invert">
       <Content />
-      <div class="mt-24">
-        <PostNavigation prevPost={prevPost} nextPost={nextPost} />
-      </div>
     </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>
-        <Link href="/blog"> See all posts </Link>
+        <h2 class="text-2xl font-bold">Latest posts</h2>
       </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>