feat: add tweet to block content

README.md

@@ -1,34 +1,30 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## 我的个人网站
 
-## Getting Started
+目前还在开发中，可以通过 [https://cali.so/](https://cali.so/) 访问。
 
-First, run the development server:
+需要其他服务商的环境变量才能正常运行，所以如果你想要在本地运行，需要自己配置。
 
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+### 技术栈
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+- [Next.js](https://nextjs.org/)
+- [React](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Framer Motion](https://www.framer.com/motion/)
+- [Radix UI](https://www.radix-ui.com/)
+- [Sanity](https://www.sanity.io/)
 
-## Learn More
+### 本地开发
 
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```bash
+# 安装依赖
+pnpm install
 
-## Deploy on Vercel
+# 启动开发服务器
+pnpm dev
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+# 构建
+pnpm build
+```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+通过 [Vercel](https://vercel.com/) 一键部署。

app/(main)/Footer.tsx

@@ -108,11 +108,9 @@ export function Footer() {
  <Container.Inner className="mt-6">
  <div className="flex flex-col items-center justify-start gap-2 sm:flex-row">
  <React.Suspense>
- {/* @ts-expect-error Async Server Component */}
  <TotalPageViews />
  </React.Suspense>
  <React.Suspense>
- {/* @ts-expect-error Async Server Component */}
  <LastVisitorInfo />
  </React.Suspense>
  </div>

app/(main)/blog/BlogPosts.tsx

@@ -9,14 +9,21 @@ import {
  ScriptIcon,
 } from '~/assets'
 import { kvKeys } from '~/config/kv'
+import { env } from '~/env.mjs'
 import { prettifyNumber } from '~/lib/math'
 import { redis } from '~/lib/redis'
 import { getLatestBlogPosts } from '~/sanity/queries'
 
 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)
+
+ let views: number[] = []
+ if (env.VERCEL_ENV === 'development') {
+ views = posts.map(() => Math.floor(Math.random() * 1000))
+ } else {
+ views = await redis.mget<number[]>(postIdKeys.join(' '))
+ }
 
  return (
  <>

app/(main)/blog/page.tsx

@@ -37,7 +37,6 @@ export default function BlogPage() {
  </p>
  </header>
  <div className="mt-12 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>

app/(main)/page.tsx

@@ -22,7 +22,6 @@ export default function BlogHomePage() {
  <PencilSwooshIcon className="h-5 w-5 flex-none" />
  <span className="ml-2">近期文章</span>
  </h2>
- {/* @ts-expect-error Server Component */}
  <BlogPosts />
  </div>
  <aside className="space-y-10 lg:sticky lg:top-8 lg:h-fit lg:pl-16 xl:pl-20">

app/api/tweet/[id]/route.ts

@@ -0,0 +1,24 @@
+import cors from 'edge-cors'
+import { NextResponse } from 'next/server'
+import { getTweet } from 'react-tweet/api'
+
+type RouteSegment = { params: { id: string } }
+
+export async function GET(req: Request, { params }: RouteSegment) {
+ try {
+ const tweet = await getTweet(params.id)
+ return cors(
+ req,
+ NextResponse.json({ data: tweet ?? null }, { status: tweet ? 200 : 404 })
+ )
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } catch (error: any) {
+ return cors(
+ req,
+ NextResponse.json(
+ { error: error.message ?? 'Bad request.' },
+ { status: 400 }
+ )
+ )
+ }
+}

app/app.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type Component, type ReactNode } from 'react'
+
+type ReactJSXElementConstructor<Props> =
+ | ((props: Props) => ReactNode | Promise<ReactNode>)
+ | (new (props: Props) => Component<Props, any>)
+
+declare global {
+ namespace React.JSX {
+ type ElementType = string | ReactJSXElementConstructor<any>
+ }
+}

components/BleedThroughImage.tsx

@@ -16,8 +16,8 @@ export function BleedThroughImage({
  ...props
 }: BleedThroughImageProps) {
  return (
- <div className="relative">
- <div className="not-prose absolute z-10 h-full w-full opacity-80 blur-2xl saturate-150 after:absolute after:inset-0 after:block after:bg-white/50 dark:opacity-70 dark:after:bg-black/50">
+ <div className="group relative">
+ <div className="not-prose absolute z-10 h-full w-full scale-[0.96] transform-gpu opacity-80 blur-2xl saturate-150 transition-transform after:absolute after:inset-0 after:block after:bg-white/50 group-hover:scale-105 dark:opacity-70 dark:after:bg-black/50">
  <Image
  width={dimensions.width}
  height={dimensions.height}

components/PostPortableText.tsx

@@ -1,4 +1,5 @@
 import { PortableText, type PortableTextComponents } from '@portabletext/react'
+import { Tweet } from 'react-tweet'
 
 import { BleedThroughImage } from '~/components/BleedThroughImage'
 import { PeekabooLink } from '~/components/links/PeekabooLink'
@@ -13,6 +14,11 @@ const components: PortableTextComponents = {
  lqip={value.lqip}
  />
  ),
+ tweet: ({ value }) => (
+ <div className="flex justify-center">
+ <Tweet id={value.id} />
+ </div>
+ ),
  },
 
  marks: {

package.json

@@ -29,6 +29,7 @@
  "@zolplay/utils": "^1.3.4",
  "cheerio": "1.0.0-rc.12",
  "dayjs": "^1.11.7",
+ "edge-cors": "^0.2.1",
  "framer-motion": "^10.12.16",
  "jotai": "^2.1.0",
  "next": "^13.4.4",
@@ -39,6 +40,7 @@
  "react-hook-form": "^7.43.9",
  "react-query": "^3.39.3",
  "react-rewards": "^2.0.4",
+ "react-tweet": "^2.0.1",
  "react-wrap-balancer": "^0.5.0",
  "reading-time": "^1.5.0",
  "rss": "^1.2.2",
@@ -69,6 +71,6 @@
  "prettier-plugin-tailwindcss": "^0.3.0",
  "tailwindcss": "^3.3.2",
  "turbo": "^1.9.9",
- "typescript": "^5.0.4"
+ "typescript": "^5.1.0-beta"
  }
-}
+}