feat: optimize post cards

app/(main)/blog/BlogPosts.tsx

@@ -15,7 +15,7 @@ import { redis } from '~/lib/redis'
 import { getLatestBlogPosts } from '~/sanity/queries'
 
 export async function BlogPosts({ limit = 5 }) {
- const posts = await getLatestBlogPosts(limit)
+ const posts = await getLatestBlogPosts({ limit, forDisplay: true })
  const postIdKeys = posts.map(({ _id }) => kvKeys.postViews(_id))
 
  let views: number[] = []
@@ -36,7 +36,13 @@ 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-[linear-gradient(180deg,transparent,rgba(0,0,0,.7)_55%,rgba(0,0,0,.85)_82.5%,rgba(0,0,0,.9))] 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 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"
+ style={
+ {
+ '--post-image-fg': mainImage.asset.dominant?.foreground,
+ '--post-image-bg': mainImage.asset.dominant?.background,
+ } as React.CSSProperties
+ }
  >
  <Image
  src={mainImage.asset.url}
@@ -48,24 +54,24 @@ export async function BlogPosts({ limit = 5 }) {
  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-zinc-50 md:text-xl">
+ <h2 className="text-base font-bold tracking-tight text-[--post-image-fg] md:text-xl">
  <Balancer>{title}</Balancer>
  </h2>
  <span className="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-zinc-400 md:text-sm">
+ <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] opacity-50 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-zinc-400 md:text-sm">
+ <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] opacity-60 md:text-sm">
  <ScriptIcon />
  <span>{categories.join(', ')}</span>
  </span>
  </span>
- <span className="inline-flex items-center space-x-3 text-[12px] font-medium text-zinc-300/60 md:text-xs">
+ <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-1">
  <CursorClickIcon />
  <span>{prettifyNumber(views[idx] ?? 0, true)}</span>

app/(main)/feed.xml/route.ts

@@ -16,7 +16,7 @@ export async function GET() {
  generator: 'PHP 9.0',
  })
 
- const data = await getLatestBlogPosts(999)
+ const data = await getLatestBlogPosts({ limit: 999 })
  if (!data) {
  return new Response('Not found', { status: 404 })
  }

middleware.ts

@@ -50,17 +50,7 @@ async function beforeAuthMiddleware(req: NextRequest) {
  return NextResponse.next()
 }
 
-function afterAuthMiddleware(auth: unknown, req: NextRequest) {
- const { nextUrl } = req
-
- if (nextUrl.pathname === '/feed' || nextUrl.pathname === '/rss') {
- nextUrl.pathname = '/feed.xml'
- return NextResponse.rewrite(nextUrl)
- }
-}
-
 export default authMiddleware({
  beforeAuth: beforeAuthMiddleware,
- afterAuth: afterAuthMiddleware,
  publicRoutes: ['/', '/blog(.*)', '/project', '/about'],
 })

next.config.mjs

@@ -19,6 +19,23 @@ const nextConfig = {
  return []
  }
  },
+
+ rewrites() {
+ return [
+ {
+ source: '/feed',
+ destination: '/feed.xml',
+ },
+ {
+ source: '/rss',
+ destination: '/feed.xml',
+ },
+ {
+ source: '/rss.xml',
+ destination: '/feed.xml',
+ }
+ ]
+ }
 }
 
 export default nextConfig

sanity/queries.ts

@@ -16,7 +16,15 @@ export const getAllLatestBlogPostSlugs = () => {
  return clientFetch<string[]>(getAllLatestBlogPostSlugsQuery())
 }
 
-export const getLatestBlogPostsQuery = (limit = 5) =>
+type GetBlogPostsOptions = {
+ limit?: number
+ offset?: number
+ forDisplay?: boolean
+}
+export const getLatestBlogPostsQuery = ({
+ limit = 5,
+ forDisplay = true,
+}: GetBlogPostsOptions) =>
  groq`
  *[_type == "post" && !(_id in path("drafts.**")) && publishedAt <= "${getDate().toISOString()}"
  && defined(slug.current)][0...${limit}] | order(publishedAt desc) {
@@ -31,13 +39,16 @@ export const getLatestBlogPostsQuery = (limit = 5) =>
  _ref,
  asset->{
  url,
- "lqip": metadata.lqip
+ ${
+ forDisplay
+ ? '"lqip": metadata.lqip, "vibrant": metadata.palette.vibrant, "dominant": metadata.palette.dominant,'
+ : ''
+ }
  }
  }
  }`
-export const getLatestBlogPosts = (limit = 5) => {
- return clientFetch<Post[]>(getLatestBlogPostsQuery(limit))
-}
+export const getLatestBlogPosts = (options: GetBlogPostsOptions) =>
+ clientFetch<Post[]>(getLatestBlogPostsQuery(options))
 
 export const getBlogPostQuery = (slug: string) =>
  groq`

sanity/schemas/post.ts

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