blog.z0x.ca/src/pages/authors/[...slug].astro
2024-09-12 16:34:38 -07:00

87 lines
2.4 KiB
Text

---
import { type CollectionEntry, getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
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')
return authors.map((author) => ({
params: { slug: author.slug },
props: { author },
}))
}
type Props = {
author: CollectionEntry<'authors'>
}
const { author } = Astro.props
const allPosts = await getCollection('blog')
const authorPosts = allPosts
.filter((post) => {
return post.data.authors && post.data.authors.includes(author.slug)
})
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
---
<Layout
title={`${author.data.name} - Author`}
description={author.data.bio || `Profile of ${author.data.name}.`}
>
<Container>
<Breadcrumb className="mb-6">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/"
><HomeIcon className="size-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} />
</section>
<section class="space-y-4">
<h2 class="text-2xl font-semibold">Posts by {author.data.name}</h2>
{
authorPosts.length > 0 ? (
<ul class="not-prose flex flex-col gap-4">
{authorPosts.map((post) => (
<li>
<BlogCard entry={post} />
</li>
))}
</ul>
) : (
<p class="text-muted-foreground">
No posts available from this author.
</p>
)
}
</section>
</div>
</Container>
</Layout>