feat(blogs): implement blog retrieval and detail components with empty state handling

Author: tyronejosee

src/actions/blogs.ts

@@ -0,0 +1,24 @@
+"use server";
+
+import type { Blog } from "@/types";
+
+import { createClient } from "@/lib/supabase/server";
+
+export const getBlogs = async (): Promise<Blog[]> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase.from("blogs").select("*");
+  if (error) throw new Error(error.message);
+  return data;
+};
+
+export const getBlogBySlug = async (slug: string): Promise<Blog | null> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("blogs")
+    .select("*")
+    .eq("slug", slug)
+    .single();
+
+  if (error) throw new Error(error.message);
+  return data;
+};

src/app/(public)/blog/[slug]/page.tsx

@@ -0,0 +1,14 @@
+import { notFound } from "next/navigation";
+import { getBlogBySlug } from "@/actions/blogs";
+import { BlogDetail } from "@/components/blogs";
+
+type Props = {
+  params: { slug: string };
+};
+
+export default async function BlogDetailPage({ params }: Props) {
+  const { slug } = await params;
+  const blog = await getBlogBySlug(slug);
+  if (!blog) return notFound();
+  return <BlogDetail blog={blog} />;
+}

src/app/(public)/blog/page.tsx

@@ -2,22 +2,27 @@ import type { Metadata } from "next";
 
 import { Heading } from "@/components/ui";
 import { PROJECT_NAME } from "@/config/constants";
+import { getBlogs } from "@/actions/blogs";
+import { EmptyList } from "@/components/layout";
+import { BlogList } from "@/components/blogs";
 
 export const metadata: Metadata = {
   title: `Blog - ${PROJECT_NAME}`,
   description: "Articles and posts",
 };
 
-export default function BlogPage() {
+export default async function BlogPage() {
+  const blogs = await getBlogs();
+
+  const renderResources = () => {
+    if (blogs.length === 0) return <EmptyList type="blogs" />;
+    return <BlogList blogs={blogs} />;
+  };
+
   return (
     <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading title="Blog" subtitle="Articles and posts" />
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tenetur
-        itaque tempora. Nostrum ut architecto libero! Quasi, iure placeat
-        doloribus tenetur ullam veniam esse vero nemo! Molestias inventore velit
-        praesentium!
-      </p>
+      {renderResources()}
     </main>
   );
 }

src/components/blogs/blog-card.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { Blog } from "@/types";
+
+import Link from "next/link";
+import { Card, CardFooter, Chip, Image } from "@heroui/react";
+
+type Props = {
+  blog: Blog;
+};
+
+export default function BlogCard({ blog }: Props) {
+  return (
+    <article className="group">
+      <Link href={`/blog/${blog.slug}`}>
+        <Card
+          isBlurred
+          radius="none"
+          className="bg-white dark:bg-neutral-950 active:bg-neutral-800 transition-colors duration-1000 !outline-none shadow-none rounded-xl border-2 border-neutral-200 dark:border-neutral-800"
+        >
+          <figure className="relative border-b-2 border-neutral-200 dark:border-neutral-800 overflow-hidden">
+            <span className="hidden group-hover:block absolute top-2 right-2 bg-neutral-950 dark:bg-white text-neutral-950 px-2 py-1 rounded-lg text-xs z-50">
+              Uncategorized{" "}
+              {/* TODO: Add category, tag or something called category */}
+            </span>
+            <Image
+              isBlurred
+              src={blog.cover_url}
+              alt={`Image by ${blog.name}`}
+              title={blog.name}
+              width={400}
+              height={200}
+              loading="lazy"
+              radius="none"
+              className="transform transition-transform duration-300 group-hover:scale-105"
+            />
+          </figure>
+          <CardFooter>
+            <div className="flex flex-col gap-2">
+              <h2 className="text-sm font-medium line-clamp-2">{blog.name}</h2>
+              <div className="flex flex-wrap gap-1">
+                {blog.tags?.map((tag, idx) => (
+                  <Chip
+                    key={idx}
+                    color="default"
+                    variant="flat"
+                    size="sm"
+                    radius="sm"
+                  >
+                    <span className="text-xs text-neutral-500">{tag}</span>
+                  </Chip>
+                ))}
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+      </Link>
+    </article>
+  );
+}

src/components/blogs/blog-detail.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Blog } from "@/types";
+
+const MarkdownPreview = dynamic(
+  () => import("@uiw/react-markdown-preview").then((mod) => mod.default),
+  { ssr: false },
+);
+
+type Props = {
+  blog: Blog;
+};
+
+export default function BlogDetail({ blog }: Props) {
+  return (
+    <div className="max-w-4xl mx-auto py-10 px-4 space-y-8">
+      <h1 className="text-3xl font-bold">{blog.name}</h1>
+
+      {blog.cover_url && (
+        <img
+          src={blog.cover_url}
+          alt={`Image by ${blog.name}`}
+          className="w-full max-h-96 object-cover rounded-xl shadow"
+        />
+      )}
+
+      <div className="text-sm text-gray-500">
+        Publicated on {new Date(blog.created_at).toLocaleDateString()}
+      </div>
+
+      <MarkdownPreview source={blog.content} className="prose max-w-none" />
+    </div>
+  );
+}

src/components/blogs/blog-list.tsx

@@ -0,0 +1,17 @@
+import type { Blog } from "@/types";
+
+import { BlogCard } from "@/components/blogs";
+
+type Props = {
+  blogs: Blog[];
+};
+
+export default function BlogList({ blogs }: Props) {
+  return (
+    <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {blogs.map((blog) => (
+        <BlogCard key={blog.id} blog={blog} />
+      ))}
+    </section>
+  );
+}

src/lib/supabase/middleware.ts

@@ -10,7 +10,7 @@ const publicRoutes = [
   "/blog",
   "/faqs",
 ];
-const publicRoutePrefixes = ["/auth/", "/resources/"];
+const publicRoutePrefixes = ["/auth/", "/resources/", "/blog"];
 
 export async function updateSession(request: NextRequest) {
   let supabaseResponse = NextResponse.next({

src/types/index.ts

@@ -39,6 +39,18 @@ export type ResourceList = Pick<
   "id" | "name" | "slug" | "image" | "tags" | "category"
 >;
 
+export type Blog = {
+  id: string;
+  name: string;
+  slug: string;
+  content: string;
+  cover_url: string;
+  excerpt: string;
+  tags: string[];
+  author: string;
+  created_at: string;
+};
+
 export type Faq = {
   id: string;
   question: string;