99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Author, BlogMdxFrontmatter, getAllBlogs } from "@/lib/markdown";
|
|
import { formatDate2, stringToDate } from "@/lib/utils";
|
|
import { getMetadata } from "@/app/layout";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import docuConfig from "@/docu.json";
|
|
|
|
export const metadata = getMetadata({
|
|
title: "Blog",
|
|
description: "Discover the latest updates, tutorials, and insights on DocuBook.",
|
|
});
|
|
const { meta } = docuConfig;
|
|
export default async function BlogIndexPage() {
|
|
const blogs = (await getAllBlogs()).sort(
|
|
(a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime()
|
|
);
|
|
return (
|
|
<div className="w-full mx-auto flex flex-col gap-1 sm:min-h-[91vh] min-h-[88vh] py-2">
|
|
<div className="mb-7 flex flex-col gap-2">
|
|
<h1 className="text-2xl font-extrabold">
|
|
Blog Posts
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground mt-2">
|
|
Discover the latest updates, tutorials, and insights on {meta.title}.
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 sm:gap-8 gap-4 mb-5">
|
|
{blogs.map((blog) => (
|
|
<BlogCard {...blog} slug={blog.slug} key={blog.slug} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BlogCard({
|
|
date,
|
|
title,
|
|
description,
|
|
slug,
|
|
cover,
|
|
authors,
|
|
}: BlogMdxFrontmatter & { slug: string }) {
|
|
return (
|
|
<Link
|
|
href={`/blog/${slug}`}
|
|
className="flex flex-col gap-2 items-start border rounded-md py-5 px-3 min-h-[400px]"
|
|
>
|
|
<h3 className="text-md font-semibold -mt-1 pr-7">{title}</h3>
|
|
<div className="w-full">
|
|
<Image
|
|
src={cover}
|
|
alt={title}
|
|
width={400}
|
|
height={150}
|
|
quality={80}
|
|
className="w-full rounded-md object-cover h-[180px] border"
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
<div className="flex items-center justify-between w-full mt-auto">
|
|
<p className="text-[13px] text-muted-foreground">
|
|
Published on {formatDate2(date)}
|
|
</p>
|
|
<AvatarGroup users={authors} />
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function AvatarGroup({ users, max = 4 }: { users: Author[]; max?: number }) {
|
|
const displayUsers = users.slice(0, max);
|
|
const remainingUsers = Math.max(users.length - max, 0);
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
{displayUsers.map((user, index) => (
|
|
<Avatar
|
|
key={user.username}
|
|
className={`inline-block border-2 w-9 h-9 border-background ${
|
|
index !== 0 ? "-ml-3" : ""
|
|
} `}
|
|
>
|
|
<AvatarImage src={user.avatar} alt={user.username} />
|
|
<AvatarFallback>
|
|
{user.username.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
))}
|
|
{remainingUsers > 0 && (
|
|
<Avatar className="-ml-3 inline-block border-2 border-background hover:translate-y-1 transition-transform">
|
|
<AvatarFallback>+{remainingUsers}</AvatarFallback>
|
|
</Avatar>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|