feat: add related posts section

app/(main)/blog/BlogPostPage.tsx

@@ -12,6 +12,7 @@ import {
  CalendarIcon,
  CursorClickIcon,
  HourglassIcon,
+ PencilSwooshIcon,
  ScriptIcon,
  UTurnLeftIcon,
 } from '~/assets'
@@ -21,16 +22,20 @@ import { Prose } from '~/components/Prose'
 import { Button } from '~/components/ui/Button'
 import { Container } from '~/components/ui/Container'
 import { prettifyNumber } from '~/lib/math'
-import { type Post } from '~/sanity/schemas/post'
+import { type PostDetail } from '~/sanity/schemas/post'
+
+import { BlogPostCard } from './BlogPostCard'
 
 export function BlogPostPage({
  post,
  views,
  reactions,
+ relatedViews,
 }: {
- post: Post
+ post: PostDetail
  views?: number
  reactions?: number[]
+ relatedViews: number[]
 }) {
  return (
  <Container className="mt-16 lg:mt-32">
@@ -166,6 +171,25 @@ export function BlogPostPage({
  </div>
  </div>
 
+ {post.related && post.related.length > 0 ? (
+ <section className="mb-12 mt-32">
+ <h2 className="flex items-center text-lg font-bold text-zinc-900 dark:text-zinc-100">
+ <PencilSwooshIcon className="h-5 w-5 flex-none" />
+ <span className="ml-2">相关文章</span>
+ </h2>
+
+ <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8">
+ {post.related.map((post, idx) => (
+ <BlogPostCard
+ post={post}
+ views={relatedViews[idx] ?? 0}
+ key={post._id}
+ />
+ ))}
+ </div>
+ </section>
+ ) : null}
+
  <ClientOnly>
  <BlogPostStateLoader post={post} />
  </ClientOnly>

app/(main)/blog/BlogReactions.tsx

@@ -59,7 +59,7 @@ export function BlogReactions({
 
  return (
  <motion.div
- className="pointer-events-auto flex w-12 flex-col items-center justify-center gap-8 rounded-3xl bg-gradient-to-b from-zinc-300/10 to-white/90 px-1 pb-8 pt-4 ring-1 ring-zinc-400/10 dark:from-zinc-500/10 dark:to-zinc-950/80 dark:ring-zinc-500/10"
+ className="pointer-events-auto flex w-12 flex-col items-center justify-center gap-8 rounded-3xl bg-gradient-to-b from-zinc-100/80 to-white/90 px-1 pb-8 pt-4 ring-1 ring-zinc-400/10 backdrop-blur-lg dark:from-zinc-800/80 dark:to-zinc-950/80 dark:ring-zinc-500/10"
  onMouseMove={onMouseMove}
  onMouseLeave={() => mouseY.set(Infinity)}
  initial={{

app/(main)/blog/[slug]/page.tsx

@@ -86,10 +86,21 @@ export default async function BlogPage({
  console.error(error)
  }
 
+ let relatedViews: number[] = []
+ if (typeof post.related !== 'undefined' && post.related.length > 0) {
+ if (env.VERCEL_ENV === 'development') {
+ relatedViews = post.related.map(() => Math.floor(Math.random() * 1000))
+ } else {
+ const postIdKeys = post.related.map(({ _id }) => kvKeys.postViews(_id))
+ relatedViews = await redis.mget<number[]>(...postIdKeys)
+ }
+ }
+
  return (
  <BlogPostPage
  post={post}
  views={views}
+ relatedViews={relatedViews}
  reactions={reactions.length > 0 ? reactions : undefined}
  />
  )

sanity/queries.ts

@@ -2,7 +2,7 @@ import { groq } from 'next-sanity'
 
 import { getDate } from '~/lib/date'
 import { clientFetch } from '~/sanity/lib/client'
-import { type Post } from '~/sanity/schemas/post'
+import { type Post, type PostDetail } from '~/sanity/schemas/post'
 import { type Project } from '~/sanity/schemas/project'
 
 export const getAllLatestBlogPostSlugsQuery = () =>
@@ -50,9 +50,8 @@ export const getLatestBlogPostsQuery = ({
 export const getLatestBlogPosts = (options: GetBlogPostsOptions) =>
  clientFetch<Post[]>(getLatestBlogPostsQuery(options))
 
-export const getBlogPostQuery = (slug: string) =>
- groq`
- *[_type == "post" && slug.current == "${slug}" && !(_id in path("drafts.**"))][0] {
+export const getBlogPostQuery = groq`
+ *[_type == "post" && slug.current == $slug && !(_id in path("drafts.**"))][0] {
  _id,
  title,
  "slug": slug.current,
@@ -75,10 +74,26 @@ export const getBlogPostQuery = (slug: string) =>
  url,
  "lqip": metadata.lqip
  }
+ },
+ "related": *[_type == "post" && slug.current != $slug && count(categories[@._ref in ^.^.categories[]._ref]) > 0] | order(publishedAt desc, _createdAt desc) [0..2] {
+ _id,
+ title,
+ "slug": slug.current,
+ "categories": categories[]->title,
+ publishedAt,
+ readingTime,
+ mainImage {
+ _ref,
+ asset->{
+ url,
+ "lqip": metadata.lqip,
+ "dominant": metadata.palette.dominant
+ }
+ },
  }
  }`
 export const getBlogPost = (slug: string) =>
- clientFetch<Post | undefined>(getBlogPostQuery(slug))
+ clientFetch<PostDetail | undefined>(getBlogPostQuery, { slug })
 
 export const getSettingsQuery = () =>
  groq`

sanity/schemas/post.ts

@@ -29,6 +29,9 @@ export const Post = z.object({
  mood: z.enum(['happy', 'sad', 'neutral']),
 })
 export type Post = z.infer<typeof Post>
+export type PostDetail = Post & {
+ related?: Post[]
+}
 
 export default defineType({
  name: 'post',