fix: update post cards design

app/(main)/blog/BlogPosts.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import Balancer from 'react-wrap-balancer'
 
 import {
  CalendarIcon,
@@ -36,42 +35,45 @@ export async function BlogPosts({ limit = 5 }) {
  key={idx}
  href={`/blog/${slug}`}
  prefetch={false}
- className="group relative flex aspect-[240/135] w-full flex-col justify-end gap-16 rounded-3xl bg-white p-4 transition-shadow after:absolute after:inset-0 after:rounded-3xl after:bg-gradient-to-b after:from-transparent after:via-[--post-image-bg] after:via-80% after:to-[--post-image-bg] after:opacity-90 after:ring-2 after:ring-zinc-200 after:transition-opacity hover:shadow-xl hover:after:opacity-60 dark:after:ring-zinc-800/70 md:p-6"
+ className="group relative w-full rounded-3xl bg-transparent ring-2 ring-zinc-800/10 dark:ring-zinc-200/10"
  style={
  {
  '--post-image-fg': mainImage.asset.dominant?.foreground,
  '--post-image-bg': mainImage.asset.dominant?.background,
  } as React.CSSProperties
  }
  >
- <Image
- src={mainImage.asset.url}
- alt=""
- className="rounded-[22px] object-cover"
- placeholder="blur"
- blurDataURL={mainImage.asset.lqip}
- fill
- sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw"
- />
- <span className="z-10 flex w-full flex-col gap-2">
- <h2 className="text-base font-bold tracking-tight text-[--post-image-fg] md:text-xl">
- <Balancer>{title}</Balancer>
+ <div className="relative aspect-[240/135] w-full">
+ <Image
+ src={mainImage.asset.url}
+ alt=""
+ className="rounded-t-3xl object-cover"
+ placeholder="blur"
+ blurDataURL={mainImage.asset.lqip}
+ fill
+ sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw"
+ />
+ </div>
+ <span className="relative z-10 flex w-full flex-col gap-2 p-4 after:pointer-events-none after:absolute after:inset-0 after:select-none after:rounded-b-3xl after:bg-[--post-image-bg] after:from-transparent after:to-[--post-image-bg] after:backdrop-blur-lg after:transition-opacity md:p-5">
+ <h2 className="z-20 text-base font-bold tracking-tight text-[--post-image-fg] md:text-xl">
+ {title}
  </h2>
- <span className="flex items-center justify-between">
+
+ <span className="relative z-20 flex items-center justify-between">
  <span className="inline-flex items-center space-x-3">
- <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] opacity-50 md:text-sm">
+ <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] opacity-50 transition-opacity group-hover:opacity-100 md:text-sm">
  <CalendarIcon />
  <span>
  {Intl.DateTimeFormat('zh').format(new Date(publishedAt))}
  </span>
  </span>
 
- <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] opacity-60 md:text-sm">
+ <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] opacity-50 transition-opacity group-hover:opacity-100 md:text-sm">
  <ScriptIcon />
  <span>{categories.join(', ')}</span>
  </span>
  </span>
- <span className="inline-flex items-center space-x-3 text-[12px] font-medium text-[--post-image-fg] opacity-50 md:text-xs">
+ <span className="inline-flex items-center space-x-3 text-[12px] font-medium text-[--post-image-fg] opacity-50 transition-opacity group-hover:opacity-100 md:text-xs">
  <span className="inline-flex items-center space-x-1">
  <CursorClickIcon />
  <span>{prettifyNumber(views[idx] ?? 0, true)}</span>

sanity/queries.ts

@@ -41,7 +41,7 @@ export const getLatestBlogPostsQuery = ({
  url,
  ${
  forDisplay
- ? '"lqip": metadata.lqip, "vibrant": metadata.palette.vibrant, "dominant": metadata.palette.dominant,'
+ ? '"lqip": metadata.lqip, "dominant": metadata.palette.dominant,'
  : ''
  }
  }

sanity/schemas/post.ts

@@ -13,12 +13,6 @@ export const Post = z.object({
  asset: z.object({
  url: z.string(),
  lqip: z.string().optional(),
- vibrant: z
- .object({
- background: z.string(),
- foreground: z.string(),
- })
- .optional(),
  dominant: z
  .object({
  background: z.string(),