feat: add multiplayer cursors

app/(main)/Header.tsx

@@ -12,6 +12,7 @@ import React from 'react'
 import { NavigationBar } from '~/app/(main)/NavigationBar'
 import { ThemeSwitcher } from '~/app/(main)/ThemeSwitcher'
 import { Avatar } from '~/components/Avatar'
+import { Multiplayer } from '~/components/Multiplayer'
 import { Container } from '~/components/ui/Container'
 import { clamp } from '~/lib/math'
 
@@ -259,6 +260,17 @@ export function Header() {
  <ThemeSwitcher />
  </div>
  </motion.div>
+ <AnimatePresence>
+ {!isHomePage && (
+ <motion.div
+ className="absolute left-14 top-0 z-50"
+ initial={{ opacity: 0, y: -20, scale: 0.95 }}
+ animate={{ opacity: 1, y: 0, scale: 1 }}
+ >
+ <Multiplayer />
+ </motion.div>
+ )}
+ </AnimatePresence>
  </div>
  </Container>
  </div>

app/(main)/NavigationBar.tsx

@@ -64,9 +64,9 @@ function Desktop({
  onMouseMove={handleMouseMove}
  className={clsxm(
  'group relative',
- 'rounded-full bg-gradient-to-b from-zinc-50/50 to-white/90',
- 'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur',
- 'dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-zinc-100/10',
+ 'rounded-full bg-gradient-to-b from-zinc-50/70 to-white/90',
+ 'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md',
+ 'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10',
  '[--spotlight-color:rgb(236_252_203_/_0.6)] dark:[--spotlight-color:rgb(217_249_157_/_0.07)]',
  className
  )}
@@ -109,7 +109,7 @@ function MobileNavItem({
 function Mobile(props: PopoverProps<'div'>) {
  return (
  <Popover {...props}>
- <Popover.Button className="group flex items-center rounded-full bg-gradient-to-b from-zinc-50/20 to-white/80 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur focus:outline-none focus-visible:ring-2 dark:from-zinc-900/30 dark:to-zinc-800/80 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20 dark:focus-visible:ring-yellow-500/80">
+ <Popover.Button className="group flex items-center rounded-full bg-gradient-to-b from-zinc-50/20 to-white/80 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md focus:outline-none focus-visible:ring-2 dark:from-zinc-900/30 dark:to-zinc-800/80 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20 dark:focus-visible:ring-yellow-500/80">
  前往
  {/* Chevron */}
  <svg
@@ -136,7 +136,7 @@ function Mobile(props: PopoverProps<'div'>) {
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
  >
- <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm dark:bg-black/80" />
+ <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur dark:bg-black/80" />
  </Transition.Child>
  <Transition.Child
  as={React.Fragment}

app/(main)/blog/BlogPostPage.tsx

@@ -14,30 +14,15 @@ import { PostPortableText } from '~/components/PostPortableText'
 import { Prose } from '~/components/Prose'
 import { Container } from '~/components/ui/Container'
 import { prettifyNumber } from '~/lib/math'
+import { usePostPresenceStore } from '~/lib/store'
 import { type Post } from '~/sanity/schemas/post'
 
 export function BlogPostPage({ post, views }: { post: Post; views?: number }) {
- // const {
- // liveblocks: { enterRoom, leaveRoom },
- // } = useLivePostStore()
- //
- // React.useEffect(() => {
- // enterRoom(post._id)
- // return () => leaveRoom(post._id)
- // }, [enterRoom, leaveRoom, post._id])
- //
- // const setCursor = useLivePostStore((state) => state.setCursor)
- // React.useEffect(() => {
- // const handleMouseMove = (e: MouseEvent) => {
- // const x = e.clientX
- // const y = e.clientY
- // setCursor({ x, y })
- // }
- //
- // window.addEventListener('mousemove', handleMouseMove)
- //
- // return () => window.removeEventListener('mousemove', handleMouseMove)
- // }, [setCursor])
+ const setRoomId = usePostPresenceStore((state) => state.setRoomId)
+
+ React.useEffect(() => {
+ setRoomId(`post.presence.${post._id}`)
+ }, [setRoomId, post._id])
 
  return (
  <Container className="mt-16 lg:mt-32">

app/(main)/blog/BlogPosts.tsx

@@ -8,13 +8,14 @@ import {
  HourglassIcon,
  ScriptIcon,
 } from '~/assets'
+import { kvKeys } from '~/config/kv'
 import { prettifyNumber } from '~/lib/math'
 import { redis } from '~/lib/redis'
 import { getLatestBlogPosts } from '~/sanity/queries'
 
 export async function BlogPosts() {
  const posts = await getLatestBlogPosts()
- const postIdKeys = posts.map(({ _id }) => `post:views:${_id}`)
+ const postIdKeys = posts.map(({ _id }) => kvKeys.postViews(_id))
  const views = await redis.mget<number[]>(postIdKeys.join(' '))
 
  return (

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

@@ -2,6 +2,7 @@ import { type Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { BlogPostPage } from '~/app/(main)/blog/BlogPostPage'
+import { kvKeys } from '~/config/kv'
 import { env } from '~/env.mjs'
 import { redis } from '~/lib/redis'
 import { getBlogPost } from '~/sanity/queries'
@@ -40,6 +41,8 @@ export const generateMetadata = async ({
  title,
  description,
  card: 'summary_large_image',
+ site: '@thecalicastle',
+ creator: '@thecalicastle',
  },
  } satisfies Metadata
 }
@@ -56,7 +59,7 @@ export default async function BlogPage({
 
  let views: number
  if (env.VERCEL_ENV === 'production') {
- views = await redis.incr(`post:views:${post._id}`)
+ views = await redis.incr(kvKeys.postViews(post._id))
  } else {
  views = 35900
  }

assets/icons/CursorIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function CursorIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M3.82273 10.1715C3.12471 7.37941 2.7757 5.98337 3.15673 5.01038C3.48928 4.16117 4.16117 3.48928 5.01038 3.15673C5.98337 2.7757 7.37941 3.12471 10.1715 3.82273L15.516 5.15886C17.8979 5.75433 19.0888 6.05206 19.5719 6.38162C21.3911 7.62268 21.4896 10.2702 19.7677 11.6431C19.3104 12.0076 18.1449 12.393 15.8139 13.1639C15.3953 13.3023 15.1861 13.3715 14.9971 13.4622C14.3257 13.7842 13.7843 14.3257 13.4622 14.9971C13.3715 15.186 13.3023 15.3953 13.1639 15.8139C12.393 18.1449 12.0076 19.3105 11.6431 19.7677C10.2702 21.4896 7.62269 21.3911 6.38163 19.5719C6.05206 19.0888 5.75433 17.8979 5.15886 15.516L3.82273 10.1715Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/icons/MinusCircleIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function MinusCircleIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M9 12H15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/index.ts

@@ -6,11 +6,13 @@ export { BilibiliIcon } from './icons/BilibiliIcon'
 export { BriefcaseIcon } from './icons/BriefcaseIcon'
 export { CalendarIcon } from './icons/CalendarIcon'
 export { CursorClickIcon } from './icons/CursorClickIcon'
+export { CursorIcon } from './icons/CursorIcon'
 export { ExternalLinkIcon } from './icons/ExternalLinkIcon'
 export { GitHubIcon } from './icons/GitHubIcon'
 export { HourglassIcon } from './icons/HourglassIcon'
 export { LightningIcon } from './icons/LightningIcon'
 export { MailIcon } from './icons/MailIcon'
+export { MinusCircleIcon } from './icons/MinusCircleIcon'
 export { MoonIcon } from './icons/MoonIcon'
 export { PencilSwooshIcon } from './icons/PencilSwooshIcon'
 export { ScriptIcon } from './icons/ScriptIcon'