From 2d83f7490444c0474898334c9b03a47e25491922 Mon Sep 17 00:00:00 2001 From: javayhu Date: Wed, 5 Mar 2025 23:40:20 +0800 Subject: [PATCH] feat: improve blog content and components - Update blog post descriptions and categories - Add new "Company" category for blog posts - Enhance blog card and grid UI with improved styling and layout - Refactor blog card skeleton for better visual consistency --- content/en/blog/what-is-indiehub.mdx | 2 +- content/en/blog/what-is-mkdirs.mdx | 2 +- content/en/blog/what-is-mksaas.mdx | 2 +- content/en/category/company.mdx | 5 ++++ src/components/blog/blog-card.tsx | 36 +++++++++++++++++----------- src/components/blog/blog-grid.tsx | 4 ++-- 6 files changed, 32 insertions(+), 19 deletions(-) create mode 100644 content/en/category/company.mdx diff --git a/content/en/blog/what-is-indiehub.mdx b/content/en/blog/what-is-indiehub.mdx index fdef8fc..6fed952 100644 --- a/content/en/blog/what-is-indiehub.mdx +++ b/content/en/blog/what-is-indiehub.mdx @@ -1,6 +1,6 @@ --- title: What is IndieHub? -description: IndieHub is the best directory for indie hackers. +description: IndieHub is the best all-in-one directory for indie hackers. image: /images/blog/indiehub-og.png date: 2024-11-24T12:00:00.000Z published: true diff --git a/content/en/blog/what-is-mkdirs.mdx b/content/en/blog/what-is-mkdirs.mdx index 4a0a72f..5f586eb 100644 --- a/content/en/blog/what-is-mkdirs.mdx +++ b/content/en/blog/what-is-mkdirs.mdx @@ -4,7 +4,7 @@ description: Mkdirs is the best boilerplate for building directory websites. image: /images/blog/mkdirs-og.png date: 2024-11-25T12:00:00.000Z published: true -categories: [news] +categories: [news, company] author: mkdirs --- diff --git a/content/en/blog/what-is-mksaas.mdx b/content/en/blog/what-is-mksaas.mdx index d83c4be..a1c5f7c 100644 --- a/content/en/blog/what-is-mksaas.mdx +++ b/content/en/blog/what-is-mksaas.mdx @@ -4,7 +4,7 @@ description: MkSaaS is the best boilerplate for building AI SaaS websites. image: /images/blog/mksaas-og.png date: 2024-11-26T12:00:00.000Z published: true -categories: [news, guide] +categories: [company, guide] author: mksaas locale: en --- diff --git a/content/en/category/company.mdx b/content/en/category/company.mdx new file mode 100644 index 0000000..83cdb37 --- /dev/null +++ b/content/en/category/company.mdx @@ -0,0 +1,5 @@ +--- +slug: company +name: Company +description: Company news about MkSaaS Boilerplate +--- diff --git a/src/components/blog/blog-card.tsx b/src/components/blog/blog-card.tsx index 1f6a616..949eabb 100644 --- a/src/components/blog/blog-card.tsx +++ b/src/components/blog/blog-card.tsx @@ -17,9 +17,9 @@ export default function BlogCard({ post }: BlogCardProps) { const postUrl = `${postUrlPrefix}${post.slug}`; return ( -
- {/* Image container */} -
+
+ {/* Image container - fixed aspect ratio */} +
{post.image && (
@@ -51,7 +51,7 @@ export default function BlogCard({ post }: BlogCardProps) {
{/* Post info container */} -
+
{/* Post title */}

@@ -71,9 +71,9 @@ export default function BlogCard({ post }: BlogCardProps) {

{/* Post excerpt, hidden for now */} -
+
{post.description && ( -

+

{post.description}

)} @@ -81,7 +81,7 @@ export default function BlogCard({ post }: BlogCardProps) {
{/* Author and date */} -
+
{post?.author?.avatar && ( @@ -107,14 +107,22 @@ export default function BlogCard({ post }: BlogCardProps) { export function BlogCardSkeleton() { return ( -
-
- +
+
+
- -
- - +
+
+ + +
+
+
+ + +
+ +
); diff --git a/src/components/blog/blog-grid.tsx b/src/components/blog/blog-grid.tsx index adcf4a7..0deaf94 100644 --- a/src/components/blog/blog-grid.tsx +++ b/src/components/blog/blog-grid.tsx @@ -11,7 +11,7 @@ export default function BlogGrid({ posts }: BlogGridProps) { return (
{posts?.length > 0 && ( -
+
{posts.map((post) => ( ))} @@ -25,7 +25,7 @@ export function BlogGridSkeleton({ count = POSTS_PER_PAGE, }: { count?: number }) { return ( -
+
{[...Array(count)].map((_, index) => ( ))}