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

---
import { type CollectionEntry, getCollection, getEntry } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import { formatDate, readingTime } from '@lib/utils'
import PostNavigation from '@components/PostNavigation.astro'
import TableOfContents from '@components/TableOfContents.astro'
import { Image } from 'astro:assets'
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'))
    .filter((post) => !post.data.draft)
    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }))
}
type Props = CollectionEntry<'blog'>

const posts = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())

function getPostIndex(slug: string): number {
  return posts.findIndex((post) => post.slug === slug)
}

function getNextPost(slug: string): Props | null {
  const postIndex = getPostIndex(slug)
  return postIndex !== -1 && postIndex < posts.length - 1
    ? posts[postIndex + 1]
    : null
}

function getPrevPost(slug: string): Props | null {
  const postIndex = getPostIndex(slug)
  return postIndex > 0 ? posts[postIndex - 1] : null
}

const currentPostSlug = Astro.params.slug
const nextPost = getNextPost(currentPostSlug)
const prevPost = getPrevPost(currentPostSlug)

const post = Astro.props
const { Content, headings } = await post.render()

let author = null
if (
  post.data.author &&
  typeof post.data.author === 'object' &&
  'collection' in post.data.author
) {
  author = await getEntry(post.data.author)
} else if (typeof post.data.author === 'string') {
  author = {
    data: {
      name: post.data.author,
      avatar: '/favicons/android-chrome-512x512.png',
    },
  }
}
---

<Layout title={post.data.title} description={post.data.description}>
  <Container>
    <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 && (
        <Image
          src={post.data.image}
          alt={post.data.title}
          width={1200}
          height={630}
          class="mb-8 rounded-xl object-cover shadow-lg"
        />
      )
    }

    <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 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" />
            </>
          )
        }
        <span>{formatDate(post.data.date)}</span>
        <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) => (
              <a
                href={`/tags/${tag}`}
                class={badgeVariants({ variant: 'outline' })}
              >
                {tag}
              </a>
            ))
          ) : (
            <span class="text-sm text-muted-foreground">No tags available</span>
          )
        }
      </div>

      <PostNavigation prevPost={prevPost} nextPost={nextPost} />
    </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>