feat: breadcrumbs and more

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>
-      <nav class="flex items-center gap-4 text-sm sm:gap-6">
-        {
-          items.map((item, index) => (
-            <Fragment key={item.href}>
+      <div class="flex items-center gap-4">
+        <nav class="flex items-center gap-4 text-sm sm:gap-6">
+          {
+            items.map((item) => (
               <Link
                 href={item.href}
                 class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
               >
                 {item.label}
               </Link>
-            </Fragment>
-          ))
-        }
-      </nav>
+            ))
+          }
+        </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">
-  {
-    prevPost?.slug ? (
-      <a
-        href={`/blog/${prevPost?.slug}`}
-        class="group relative flex flex-nowrap rounded-lg border px-4 py-3 pl-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 left-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 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 class="mt-8 flex justify-between gap-4">
+  <Link
+    href={prevPost ? `/blog/${prevPost.slug}` : '#'}
+    class={cn(
+      buttonVariants({ variant: 'outline' }),
+      'group flex items-center justify-start gap-2 w-1/2',
+      !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!prevPost}
+  >
+    <ArrowLeft
+      className="h-4 w-4 transition-transform group-hover:-translate-x-1"
+    />
+    <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}
+  >
+    <span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
+    <ArrowRight
+      className="h-4 w-4 transition-transform group-hover:translate-x-1"
+    />
+  </Link>
 </div>

src/components/SocialIcons.astro

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