astro-ghostcms/packages/astro-ghostcms-brutalbyelian/src/routes/author/[slug].astro

56 lines
1.9 KiB
Plaintext

---
import Layout from '../../layouts/Default.astro';
import AuthorDetailCard from '../../components/authors/AuthorDetailCard.astro';
import { Card } from '@eliancodes/brutal-ui';
import { getAllPosts, getAllAuthors, getSettings, invariant, type Post, type Author } from "@matthiesenxyz/astro-ghostcms/api";
import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
import BlogList from "../../components/blog/BlogList.astro"
export async function getStaticPaths() {
const posts = await getAllPosts();
const { authors } = await getAllAuthors();
const settings = await getSettings();
return authors.map((author: Author) => {
const filteredPosts = posts.filter((post: Post) =>
post.authors?.map((author) => author.slug).includes(author.slug)
);
return {
params: { slug: author.slug },
props: {
posts: filteredPosts,
settings,
author,
},
};
});
}
export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { posts, settings, author } = Astro.props;
invariant(settings, "Settings are required");
const title = `Posts by author: ${author.name}`;
const description = `All of the articles we've posted and linked so far under the author: ${author.name}`;
---
<Layout
title={title}
pageTitle=`${settings.title} | ${title}`
description={description}
>
<main class='bg-pink p-6'>
<section id='about' class='col mt-4'>
<h2 class='hidden'>{title}</h2>
<div class='flex'>
<Card>
<AuthorDetailCard name={author.name} count={author.count?.posts || 0} image={author.profile_image} bio={author.bio} location={author.location} website={author.website} twitter={author.twitter} facebook={author.facebook}/>
</Card>
</div>
</section>
<br />
<BlogList posts={posts} settings={settings} />
</main>
</Layout>