feat: revamped author card
This commit is contained in:
enscribe
parent
c410c499e1
commit
2211c4bbf3
46 changed files with 566 additions and 426 deletions
|
|
@ -1,36 +1,16 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import { buttonVariants } from '@/components/ui/button'
|
||||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { SITE } from '@consts'
|
||||
import { buttonVariants } from '@/components/ui/button'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb'
|
||||
import { HomeIcon } from 'lucide-react'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { cn } from '@lib/utils'
|
||||
---
|
||||
|
||||
<Layout title="404" description={SITE.DESCRIPTION}>
|
||||
<Container class="flex grow flex-col gap-y-6">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="size-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>???</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<Breadcrumbs items={[{ label: '???' }]} />
|
||||
|
||||
<section
|
||||
class="flex flex-col items-center justify-center gap-y-4 text-center"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,13 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { SITE } from '@consts'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb'
|
||||
import { HomeIcon } from 'lucide-react'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="About" description={SITE.DESCRIPTION}>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="size-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>About</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<Breadcrumbs items={[{ label: 'About' }]} />
|
||||
|
||||
<section>
|
||||
<div class="min-w-full">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,10 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.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'
|
||||
import Container from '@components/Container.astro'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const authors = await getCollection('authors')
|
||||
|
|
@ -38,50 +29,37 @@ const authorPosts = allPosts
|
|||
---
|
||||
|
||||
<Layout
|
||||
title={`${author.data.name} - Author`}
|
||||
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>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ href: '/authors', label: 'Authors' },
|
||||
{ label: author.data.name },
|
||||
]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<section>
|
||||
<AuthorCard author={author} linkDisabled />
|
||||
</section>
|
||||
<section class="flex flex-col gap-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>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,16 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import AuthorCard from '@components/AuthorCard.astro'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb'
|
||||
import { HomeIcon } from 'lucide-react'
|
||||
import Container from '@components/Container.astro'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
const authors = await getCollection('authors')
|
||||
---
|
||||
|
||||
<Layout title="Authors" description="A list of authors on this site.">
|
||||
<Container>
|
||||
<Breadcrumb className="mb-6">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="size-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Authors</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumbs items={[{ label: 'Authors' }]} />
|
||||
<ul class="not-prose flex flex-col gap-4">
|
||||
{
|
||||
authors.map((author) => (
|
||||
|
|
|
|||
|
|
@ -1,25 +1,17 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } 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 Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import { badgeVariants } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb'
|
||||
import { Hash, HomeIcon, ArrowUp } from 'lucide-react'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { parseAuthors } from '@lib/utils'
|
||||
import PostNavigation from '@components/PostNavigation.astro'
|
||||
import TableOfContents from '@components/TableOfContents.astro'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { formatDate, parseAuthors, readingTime } from '@lib/utils'
|
||||
import { Image } from 'astro:assets'
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
import { ArrowUp, Hash } from 'lucide-react'
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = (await getCollection('blog'))
|
||||
|
|
@ -67,24 +59,10 @@ const authors = await parseAuthors(post.data.authors ?? [])
|
|||
description={post.data.description}
|
||||
image={post.data.image ?? '/static/1200x630.png'}
|
||||
>
|
||||
<Container>
|
||||
<Breadcrumb className="mb-6">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="size-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/blog">Blog</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{post.data.title}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumbs
|
||||
items={[{ href: '/blog', label: 'Blog' }, { label: post.data.title }]}
|
||||
/>
|
||||
|
||||
{
|
||||
post.data.image && (
|
||||
|
|
@ -93,72 +71,76 @@ const authors = await parseAuthors(post.data.authors ?? [])
|
|||
alt={post.data.title}
|
||||
width={1200}
|
||||
height={630}
|
||||
class="mb-8 rounded-xl object-cover"
|
||||
class="rounded-xl object-cover"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
<section class="mb-8 text-center">
|
||||
<h1 class="mb-4 text-4xl font-bold leading-tight sm:text-5xl">
|
||||
{post.data.title}
|
||||
</h1>
|
||||
<section class="flex flex-col gap-6 text-center">
|
||||
<div>
|
||||
<h1 class="mb-4 text-4xl font-bold leading-tight sm:text-5xl">
|
||||
{post.data.title}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-center gap-2 text-sm text-muted-foreground"
|
||||
>
|
||||
{
|
||||
authors.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-x-2">
|
||||
{authors.map((author) => (
|
||||
<div class="flex items-center gap-x-1.5">
|
||||
<Image
|
||||
src={author.avatar}
|
||||
alt={author.name}
|
||||
width={24}
|
||||
height={24}
|
||||
class="rounded-full"
|
||||
/>
|
||||
{author.isRegistered ? (
|
||||
<Link
|
||||
href={`/authors/${author.name}`}
|
||||
underline
|
||||
class="text-foreground"
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-center gap-2 text-sm text-muted-foreground"
|
||||
>
|
||||
{
|
||||
authors.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-x-2">
|
||||
{authors.map((author) => (
|
||||
<div class="flex items-center gap-x-1.5">
|
||||
<Image
|
||||
src={author.avatar}
|
||||
alt={author.name}
|
||||
width={24}
|
||||
height={24}
|
||||
class="rounded-full"
|
||||
/>
|
||||
{author.isRegistered ? (
|
||||
<Link
|
||||
href={`/authors/${author.name}`}
|
||||
underline
|
||||
class="text-foreground"
|
||||
>
|
||||
<span>{author.name}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span>{author.name}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span>{author.name}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{formatDate(post.data.date)}</span>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
<span>{readingTime(post.body)}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{formatDate(post.data.date)}</span>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
<span>{readingTime(post.body)}</span>
|
||||
</div>
|
||||
</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: 'secondary' })}
|
||||
>
|
||||
<Hash className="-translate-x-0.5 size-3" />
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<span class="text-sm text-muted-foreground">
|
||||
No tags available
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</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: 'secondary' })}
|
||||
>
|
||||
<Hash className="-translate-x-0.5 size-3" />
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<span class="text-sm text-muted-foreground">No tags available</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import BlogCard from '@components/BlogCard.astro'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb'
|
||||
import { HomeIcon } from 'lucide-react'
|
||||
import Container from '@components/Container.astro'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
|
||||
const data = (await getCollection('blog'))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -35,19 +27,7 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
|
|||
|
||||
<Layout title="Blog" description="Blog">
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="size-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Blog</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<Breadcrumbs items={[{ label: 'Blog' }]} />
|
||||
|
||||
<div class="flex flex-col gap-y-8">
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import { SITE } from '@consts'
|
||||
import BlogCard from '@components/BlogCard.astro'
|
||||
import { buttonVariants } from '@/components/ui/button'
|
||||
import { getCollection } from 'astro:content'
|
||||
import Link from '@components/Link.astro'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -13,6 +7,12 @@ import {
|
|||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import BlogCard from '@components/BlogCard.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { SITE } from '@consts'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
const blog = (await getCollection('blog'))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -20,7 +20,7 @@ const blog = (await getCollection('blog'))
|
|||
.slice(0, SITE.NUM_POSTS_ON_HOMEPAGE)
|
||||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={SITE.DESCRIPTION}>
|
||||
<Layout title="Home" description={SITE.DESCRIPTION}>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<section>
|
||||
<Card>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import BlogCard from '@components/BlogCard.astro'
|
||||
import Breadcrumbs from '@components/Breadcrumbs.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { type CollectionEntry, getCollection } from 'astro:content'
|
||||
import { Hash } from 'lucide-react'
|
||||
|
||||
type BlogPost = CollectionEntry<'blog'>
|
||||
|
|
@ -35,31 +36,30 @@ export async function getStaticPaths() {
|
|||
title={`Posts tagged with "${tag}"`}
|
||||
description={`A collection of posts tagged with ${tag}.`}
|
||||
>
|
||||
<Container>
|
||||
<div class="space-y-10">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-3xl font-semibold">Posts tagged with</h1>
|
||||
<span
|
||||
class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-medium"
|
||||
>
|
||||
<Hash className="size-6" />{tag}
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<ul class="not-prose flex flex-col gap-4">
|
||||
<li>
|
||||
<BlogCard entry={post} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumbs items={[{ href: '/tags', label: 'Tags' }, { label: tag }]} />
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-3xl font-semibold">Posts tagged with</h1>
|
||||
<span
|
||||
class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-medium"
|
||||
>
|
||||
<Hash className="size-6" />{tag}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-4">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<section class="flex flex-col gap-y-4">
|
||||
<div>
|
||||
<ul class="not-prose flex flex-col gap-4">
|
||||
<li>
|
||||
<BlogCard entry={post} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { badgeVariants } from '@components/ui/badge'
|
||||
import { Hash, HomeIcon } from 'lucide-react'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb'
|
||||
import Layout from '@layouts/Layout.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
import { Hash } from 'lucide-react'
|
||||
|
||||
const blog = (await getCollection('blog')).filter((post) => !post.data.draft)
|
||||
|
||||
|
|
@ -22,37 +15,23 @@ const tags = blog
|
|||
---
|
||||
|
||||
<Layout title="Tags" description="A list of all tags used in blog posts">
|
||||
<Container>
|
||||
<div class="space-y-6">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="size-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Tags</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<Container class="flex flex-col gap-y-6">
|
||||
<Breadcrumbs items={[{ label: 'Tags' }]} />
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-3xl font-semibold">Tags</h1>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<Link
|
||||
href={`/tags/${tag}`}
|
||||
class={badgeVariants({ variant: 'secondary' })}
|
||||
>
|
||||
<Hash className="-translate-x-0.5 size-3" />
|
||||
{tag}
|
||||
</Link>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-3xl font-semibold">Tags</h1>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<Link
|
||||
href={`/tags/${tag}`}
|
||||
class={badgeVariants({ variant: 'secondary' })}
|
||||
>
|
||||
<Hash className="-translate-x-0.5 size-3" />
|
||||
{tag}
|
||||
</Link>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue