refactor not done

2026-07-13 21:52:53 +02:00 · 2025-11-26 08:47:03 +01:00
commit efbebd13b8
431 changed files with 51577 additions and 0 deletions
@@ -0,0 +1,152 @@
+import { BasePage } from "@/app/base-page";
+import Prose from "@/components/ui/prose";
+import { Separator } from "@/components/ui/separator";
+import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog-query";
+import { Post, Author } from "@/types/blog";
+import { Metadata } from "next";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+
+type PageProps = {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+};
+
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const slug = (await params).slug;
+
+  const data = await getSinglePost({ slug });
+
+  if (!data || !data.post) return {};
+
+  return {
+    title: data.post.title,
+    description: data.post.description,
+    twitter: {
+      title: `${data.post.title}`,
+      description: `${data.post.description}`,
+      card: "summary_large_image",
+      images: [
+        {
+          url: data.post.coverImage,
+          width: "1200",
+          height: "630",
+          alt: data.post.title,
+        },
+      ],
+    },
+    openGraph: {
+      type: "article",
+      images: [
+        {
+          url: data.post.coverImage,
+          width: "1200",
+          height: "630",
+          alt: data.post.title,
+        },
+      ],
+      title: data.post.title,
+      description: data.post.description,
+      publishedTime: new Date(data.post.publishedAt).toISOString(),
+      authors: data.post.authors.map((author: Author) => author.name),
+    },
+  };
+}
+
+export async function generateStaticParams() {
+  const data = await getPosts();
+  if (!data || !data.posts.length) return [];
+
+  return data.posts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export default async function BlogPostPage({ params }: PageProps) {
+  const slug = (await params).slug;
+  const data = await getSinglePost({ slug });
+  if (!data || !data.post) return notFound();
+
+  const html = await processHtmlContent({ html: data.post.content });
+
+  return (
+    <BasePage>
+      <PostHeader post={data.post} />
+      <Separator />
+      <PostContent html={html} />
+    </BasePage>
+  );
+}
+
+function PostHeader({ post }: { post: Post }) {
+  const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
+  return (
+    <>
+      {post.coverImage && <PostCoverImage post={post} />}
+      <PostMeta date={formattedDate} publishedAt={post.publishedAt} />
+      <PostTitle title={post.title} />
+      <PostAuthor author={post.authors[0]} />
+    </>
+  );
+}
+
+function PostCoverImage({ post }: { post: Post }) {
+  return (
+    <div className="relative aspect-video overflow-hidden rounded-lg">
+      <Image
+        src={post.coverImage}
+        alt={post.title}
+        loading="eager"
+        fill
+        className="rounded-lg object-cover"
+      />
+    </div>
+  );
+}
+
+function PostMeta({ date, publishedAt }: { date: string; publishedAt: Date }) {
+  return (
+    <div className="flex items-center justify-center">
+      <time dateTime={publishedAt.toString()}>{date}</time>
+    </div>
+  );
+}
+
+function PostTitle({ title }: { title: string }) {
+  return (
+    <h1 className="text-5xl font-bold tracking-tight md:text-4xl">{title}</h1>
+  );
+}
+
+function PostAuthor({ author }: { author?: Author }) {
+  if (!author) return null;
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <Image
+        src={author.image}
+        alt={author.name}
+        width={36}
+        height={36}
+        loading="eager"
+        className="aspect-square size-8 shrink-0 rounded-full"
+      />
+      <p className="text-muted-foreground">{author.name}</p>
+    </div>
+  );
+}
+
+function PostContent({ html }: { html: string }) {
+  return (
+    <section className="pt-8">
+      <Prose html={html} />
+    </section>
+  );
+}