z0xca/blog.z0x.ca
Code Activity Actions

feat: breadcrumbs and more

Browse source
This commit is contained in:
enscribe 2024-09-10 22:09:57 -07:00
parent 43e35a3f8b
commit 051e466b6d
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
19 changed files with 529 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/pages/authors/[...slug].astro
View file

@ -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} />

43
src/pages/authors/index.astro
View file

@ -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>