songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve blog content and components

Browse Source 
- 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
This commit is contained in:
javayhu 2025-03-05 23:40:20 +08:00
parent 58401624c0
commit 2d83f74904
6 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/en/blog/what-is-indiehub.mdx
View File

@ -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

2
content/en/blog/what-is-mkdirs.mdx
View File

@ -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
---

2
content/en/blog/what-is-mksaas.mdx
View File

@ -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
---

5
content/en/category/company.mdx Normal file
View File

@ -0,0 +1,5 @@
---
slug: company
name: Company
description: Company news about MkSaaS Boilerplate
---

36
src/components/blog/blog-card.tsx
View File

@ -17,9 +17,9 @@ export default function BlogCard({ post }: BlogCardProps) {
const postUrl = `${postUrlPrefix}${post.slug}`;
return (
<div className="group cursor-pointer flex flex-col gap-4">
{/* Image container */}
<div className="group overflow-hidden relative aspect-[16/9] rounded-lg transition-all">
<div className="group cursor-pointer flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
{/* Image container - fixed aspect ratio */}
<div className="group overflow-hidden relative aspect-[16/9] w-full">
<Link href={postUrl}>
{post.image && (
<div className="relative w-full h-full">
@ -51,7 +51,7 @@ export default function BlogCard({ post }: BlogCardProps) {
</div>
{/* Post info container */}
<div className="flex flex-col flex-grow">
<div className="flex flex-col justify-between p-4 flex-1">
<div>
{/* Post title */}
<h3 className="text-lg line-clamp-2 font-medium">
@ -71,9 +71,9 @@ export default function BlogCard({ post }: BlogCardProps) {
</h3>
{/* Post excerpt, hidden for now */}
<div className="">
<div className="mt-2">
{post.description && (
<p className="mt-2 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
<p className="line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
<Link href={postUrl}>{post.description}</Link>
</p>
)}
@ -81,7 +81,7 @@ export default function BlogCard({ post }: BlogCardProps) {
</div>
{/* Author and date */}
<div className="mt-auto pt-4 flex items-center justify-between space-x-4 text-muted-foreground">
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between space-x-4 text-muted-foreground">
<div className="flex items-center gap-2">
<div className="relative h-8 w-8 flex-shrink-0">
{post?.author?.avatar && (
@ -107,14 +107,22 @@ export default function BlogCard({ post }: BlogCardProps) {
export function BlogCardSkeleton() {
return (
<div className="group cursor-pointer flex flex-col gap-4">
<div className="group overflow-hidden relative aspect-[4/3] rounded-lg transition-all">
<Skeleton className="w-full aspect-[4/3] rounded-lg" />
<div className="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
<div className="overflow-hidden relative aspect-[16/9] w-full">
<Skeleton className="w-full h-full" />
</div>
<div className="p-4 flex flex-col justify-between flex-1">
<div>
<Skeleton className="h-6 w-full mb-2" />
<Skeleton className="h-4 w-full mb-4" />
</div>
<div className="pt-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-4 w-24" />
</div>
<Skeleton className="h-4 w-20" />
</div>
<Skeleton className="h-12 w-full" />
<div className="flex items-center justify-between gap-2">
<Skeleton className="h-8 w-32" />
<Skeleton className="h-8 w-32" />
</div>
</div>
);

4
src/components/blog/blog-grid.tsx
View File

@ -11,7 +11,7 @@ export default function BlogGrid({ posts }: BlogGridProps) {
return (
<div>
{posts?.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{posts.map((post) => (
<BlogCard key={post.slug} post={post} />
))}
@ -25,7 +25,7 @@ export function BlogGridSkeleton({
count = POSTS_PER_PAGE,
}: { count?: number }) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[...Array(count)].map((_, index) => (
<BlogCardSkeleton key={index} />
))}