initial to gitea

2025-02-23 10:43:08 +07:00
commit d6e3946296
183 changed files with 22627 additions and 0 deletions
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -0,0 +1,98 @@
+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] pt-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>
+  );
+}