feat(blog): implement streaming blog posts with enhanced loading and error handling

- Added StreamingBlogGrid component for dynamic loading of blog posts.
- Updated BlogPage to utilize StreamingBlogGrid with a loading state.
- Refactored API calls to support pagination and error handling.
- Introduced BlogCardSkeleton for improved user experience during loading.
- Enhanced blog post fetching logic in the API layer for better performance.
- Updated metadata generation for blog posts to handle errors gracefully.
- Added new utility functions for blog data handling and validation.

Author: 0xdevcollins

app/(landing)/blog/[slug]/page.tsx

@@ -2,15 +2,21 @@ import React from 'react';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import BlogPostDetails from '../../../../components/landing-page/blog/BlogPostDetails';
-import { getBlogPost, getAllBlogPosts } from '@/lib/data/blog';
+import { getBlogPost, getBlogPosts } from '@/lib/api/blog';
 import { generateBlogPostMetadata } from '@/lib/metadata';
 
 export async function generateStaticParams() {
-  const posts = await getAllBlogPosts();
+  try {
+    // For static generation, we'll need to fetch all posts
+    // This might need to be adjusted based on your backend implementation
+    const { posts } = await getBlogPosts({ page: 1, limit: 50 });
 
-  return posts.map(post => ({
-    slug: post.slug,
-  }));
+    return posts.map(post => ({
+      slug: post.slug,
+    }));
+  } catch {
+    return [];
+  }
 }
 
 export async function generateMetadata({
@@ -19,16 +25,24 @@ export async function generateMetadata({
   params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
   const { slug } = await params;
-  const post = await getBlogPost(slug);
 
-  if (!post) {
+  try {
+    const post = await getBlogPost(slug);
+
+    if (!post) {
+      return {
+        title: 'Blog Post Not Found',
+        description: 'The requested blog post could not be found.',
+      };
+    }
+
+    return generateBlogPostMetadata(post);
+  } catch {
     return {
       title: 'Blog Post Not Found',
       description: 'The requested blog post could not be found.',
     };
   }
-
-  return generateBlogPostMetadata(post);
 }
 
 const BlogPostPage = async ({
@@ -37,13 +51,18 @@ const BlogPostPage = async ({
   params: Promise<{ slug: string }>;
 }) => {
   const { slug } = await params;
-  const post = await getBlogPost(slug);
 
-  if (!post) {
+  try {
+    const post = await getBlogPost(slug);
+
+    if (!post) {
+      notFound();
+    }
+
+    return <BlogPostDetails post={post} />;
+  } catch {
     notFound();
   }
-
-  return <BlogPostDetails post={post} />;
 };
 
 export default BlogPostPage;

app/(landing)/blog/page.tsx

@@ -1,19 +1,73 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
-import BlogGrid from '@/components/landing-page/blog/BlogGrid';
-import { getAllBlogPosts } from '@/lib/data/blog';
+import StreamingBlogGrid from '@/components/landing-page/blog/StreamingBlogGrid';
+import { getBlogPosts } from '@/lib/api/blog';
 import TestimonialSection from '@/components/testimonials/TestimonialsSection';
 import { testimonials } from '@/components/testimonials/data/testimonial';
+import { Skeleton } from '@/components/ui/skeleton';
+import BlogCardSkeleton from '@/components/landing-page/blog/BlogCardSkeleton';
 
 export const metadata: Metadata = generatePageMetadata('blog');
 
-const BlogPage = async () => {
-  const posts = await getAllBlogPosts();
+async function StreamingBlogGridWrapper() {
+  try {
+    const { posts, hasMore, total } = await getBlogPosts({
+      page: 1,
+      limit: 12,
+      sort: 'latest',
+    });
+
+    return (
+      <StreamingBlogGrid
+        initialPosts={posts}
+        totalPosts={total}
+        hasMore={hasMore}
+        initialPage={1}
+      />
+    );
+  } catch {
+    return (
+      <StreamingBlogGrid
+        initialPosts={[]}
+        totalPosts={0}
+        hasMore={false}
+        initialPage={1}
+      />
+    );
+  }
+}
+
+function BlogGridLoading() {
+  return (
+    <div className='min-h-screen bg-[#030303]'>
+      <div className='mx-auto max-w-6xl px-6 py-8'>
+        <div className='flex gap-3 md:flex-row md:items-center md:justify-between lg:gap-16'>
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-10 w-20 rounded-lg' />
+            <Skeleton className='h-10 w-24 rounded-lg' />
+          </div>
+          <Skeleton className='h-10 w-full rounded-lg md:min-w-[300px]' />
+        </div>
+      </div>
 
+      <div className='mx-auto max-w-6xl px-6 py-12'>
+        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
+          {Array.from({ length: 6 }).map((_, i) => (
+            <BlogCardSkeleton key={i} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const BlogPage = async () => {
   return (
     <div className='min-h-screen bg-[#030303]'>
-      <BlogGrid posts={posts} showLoadMore={true} />
+      <Suspense fallback={<BlogGridLoading />}>
+        <StreamingBlogGridWrapper />
+      </Suspense>
       <TestimonialSection testimonials={testimonials} />
     </div>
   );

app/(landing)/projects/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 'use client';
 
 import React from 'react';

app/api/blog/posts/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getBlogPostsStreaming } from '@/lib/data/blog';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const page = parseInt(searchParams.get('page') || '1');
+    const limit = parseInt(searchParams.get('limit') || '12');
+
+    const result = await getBlogPostsStreaming(page, limit);
+
+    return NextResponse.json(result);
+  } catch {
+    return NextResponse.json(
+      { error: 'Failed to fetch blog posts' },
+      { status: 500 }
+    );
+  }
+}