From ee5d20eee69c8d06c307736cf5e629fb6f532759 Mon Sep 17 00:00:00 2001 From: Moonlitgrace Date: Tue, 8 Oct 2024 22:55:13 +0530 Subject: [PATCH] feat(ui): re-design blog page (#139) --- app/(routes)/(main)/blog/page.tsx | 50 +++++++++++++++++++++---------- app/api/blog/route.ts | 15 ++-------- components/markdown.tsx | 2 +- 3 files changed, 39 insertions(+), 28 deletions(-) diff --git a/app/(routes)/(main)/blog/page.tsx b/app/(routes)/(main)/blog/page.tsx index 3896f6b..c6254bc 100644 --- a/app/(routes)/(main)/blog/page.tsx +++ b/app/(routes)/(main)/blog/page.tsx @@ -1,9 +1,9 @@ import { Badge } from '@/components/ui/badge'; -import { Separator } from '@/components/ui/separator'; import { PostSelect } from '@/db/schema'; -import { formatDate } from '@/lib/utils'; +import { cn, extractParagraphs, formatDate, truncate } from '@/lib/utils'; import Link from 'next/link'; import { Metadata } from 'next'; +import Image from 'next/image'; export const metadata: Metadata = { title: 'Blog | Moonlitgrace', @@ -21,9 +21,7 @@ export const metadata: Metadata = { }; export default async function BlogPage() { - const posts: Omit[] = await fetch( - `${process.env.NEXT_PUBLIC_APP_URL}/api/blog`, - ) + const posts: PostSelect[] = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/blog`) .then((res) => res.json()) .then((res) => res.data); @@ -33,20 +31,42 @@ export default async function BlogPage() { Blog . -
+
{posts .filter((post) => !post.draft) - .map((post) => ( -
- - {formatDate(post.createdAt)} - -
- + .map((post, idx) => ( +
+ {post.cover && ( + {post.title} + )} +
+
+ + {formatDate(post.createdAt)} + + {post.tag} +
+ {post.title} - - {post.tag} +

+ {truncate(extractParagraphs(post.content), 100)} +

))} diff --git a/app/api/blog/route.ts b/app/api/blog/route.ts index cf5218e..0c6d60a 100644 --- a/app/api/blog/route.ts +++ b/app/api/blog/route.ts @@ -5,19 +5,10 @@ import { desc, eq } from 'drizzle-orm'; import { NextRequest, NextResponse } from 'next/server'; import slugify from 'slugify'; -export async function GET(_request: NextRequest) { +export async function GET(_req: NextRequest) { + console.log('API called'); try { - const postsData: Omit[] = await db - .select({ - id: posts.id, - title: posts.title, - slug: posts.slug, - tag: posts.tag, - createdAt: posts.createdAt, - draft: posts.draft, - }) - .from(posts) - .orderBy(desc(posts.createdAt)); + const postsData: PostSelect[] = await db.select().from(posts).orderBy(desc(posts.createdAt)); return NextResponse.json({ data: postsData, message: 'success' }); } catch (err) { diff --git a/components/markdown.tsx b/components/markdown.tsx index 37dddf4..89630b1 100644 --- a/components/markdown.tsx +++ b/components/markdown.tsx @@ -79,7 +79,7 @@ const Markdown = ({ markdown }: { markdown: string }) => { return ( <>