feat: update blog page

app/(main)/blog/BlogPosts.tsx

@@ -13,8 +13,8 @@ import { prettifyNumber } from '~/lib/math'
 import { redis } from '~/lib/redis'
 import { getLatestBlogPosts } from '~/sanity/queries'
 
-export async function BlogPosts() {
- const posts = await getLatestBlogPosts()
+export async function BlogPosts({ limit = 5 }) {
+ const posts = await getLatestBlogPosts(limit)
  const postIdKeys = posts.map(({ _id }) => kvKeys.postViews(_id))
  const views = await redis.mget<number[]>(postIdKeys.join(' '))
 

app/(main)/blog/page.tsx

@@ -1,11 +1,44 @@
+import Balancer from 'react-wrap-balancer'
+
 import { Container } from '~/components/ui/Container'
 
+import { BlogPosts } from './BlogPosts'
+
+const description =
+ '写博客文章是我比较喜欢的沉淀分享方式，我希望能够把好用的技术知识传递给更多的人。我比较喜欢围绕着技术为主的话题，但是也会写一些非技术的话题，比如设计、创业、企业管理、生活随笔等等。'
+export const metadata = {
+ title: '我的博客',
+ description,
+ openGraph: {
+ title: '我的博客',
+ description,
+ },
+ twitter: {
+ title: '我的博客',
+ description,
+ card: 'summary_large_image',
+ },
+}
+
+// TODO: add pagination or infinite scroll
 export default function BlogPage() {
  return (
- <Container>
- <h1 className="mt-10">给我点时间开发一下...</h1>
+ <Container className="mt-16 sm:mt-24">
+ <header className="max-w-2xl">
+ <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+ 欢迎光临我的博客
+ </h1>
+ <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+ <Balancer>{description}</Balancer>
+ </p>
+ </header>
+ <div className="mt-16 grid grid-cols-1 gap-6 sm:mt-20 lg:grid-cols-2 lg:gap-8">
+ {/* @ts-expect-error Server Component */}
+ <BlogPosts limit={20} />
+ </div>
  </Container>
  )
 }
 
 export const runtime = 'edge'
+export const revalidate = 60

app/api/favicon/route.tsx

@@ -71,9 +71,6 @@ export async function GET(req: NextRequest) {
  'Content-Type': 'text/html',
  },
  cache: 'force-cache',
- next: {
- revalidate,
- },
  })
 
  if (res.ok) {

config/nav.ts

@@ -1,6 +1,6 @@
 export const navigationItems = [
  { href: '/', text: '首页' },
- { href: '/blog', text: '文章' },
+ { href: '/blog', text: '博客' },
  { href: '/projects', text: '项目' },
  // { href: '/uses', text: '工具' },
  { href: '/about', text: '关于' },

sanity/env.ts

@@ -12,7 +12,7 @@ export const projectId = assertValue(
  'Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID'
 )
 
-export const useCdn = true
+export const useCdn = env.VERCEL_ENV === 'production'
 
 function assertValue<T>(v: T | undefined, errorMessage: string): T {
  if (v === undefined) {