feat: add last visitor

components/icons/CursorClickIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconBaseProps } from 'react-icons'
+
+export function CursorClickIcon(props: IconBaseProps = {}) {
+ return (
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M10.9984 4.87876V2.3042M15.8855 6.14698L17.4029 4.7401M4.87486 11.0023H2.30029M6.66833 6.6723L4.50335 4.50732M4.73619 17.4068L6.14307 15.8894M17.8689 16.1194C17.592 16.211 17.4535 16.2568 17.3285 16.3168C16.8842 16.5299 16.526 16.8881 16.3129 17.3324C16.2529 17.4574 16.2071 17.5959 16.1155 17.8728C15.6055 19.4151 15.3505 20.1863 15.1093 20.4888C14.2009 21.6281 12.4492 21.563 11.628 20.3593C11.41 20.0397 11.213 19.2517 10.819 17.6757L9.93491 14.1395C9.47306 12.2921 9.24214 11.3684 9.49424 10.7246C9.71428 10.1627 10.1588 9.71818 10.7207 9.49815C11.3645 9.24604 12.2882 9.47696 14.1356 9.93881L17.6718 10.8229C19.2478 11.2169 20.0358 11.4138 20.3554 11.6319C21.5591 12.4531 21.6242 14.2048 20.4849 15.1132C20.1824 15.3544 19.4112 15.6094 17.8689 16.1194Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

components/icons/UsersIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { type IconBaseProps } from 'react-icons'
+
+export function UsersIcon(props: IconBaseProps = {}) {
+ return (
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M17 3.53516C18.1956 4.22677 19 5.51947 19 7.00004C19 8.48061 18.1956 9.77331 17 10.4649M21 20.7325C21.5978 20.3867 22 19.7403 22 19C22 17.5195 21.1956 16.2268 20 15.5352M14 7C14 9.20914 12.2091 11 10 11C7.79086 11 6 9.20914 6 7C6 4.79086 7.79086 3 10 3C12.2091 3 14 4.79086 14 7ZM6 15H14C16.2091 15 18 16.7909 18 19C18 20.1046 17.1046 21 16 21H4C2.89543 21 2 20.1046 2 19C2 16.7909 3.79086 15 6 15Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

components/layouts/Footer.tsx

@@ -1,9 +1,11 @@
 import kv from '@vercel/kv'
 import Link from 'next/link'
 import React, { Suspense } from 'react'
-import { TbUsers } from 'react-icons/tb'
 
+import { CursorClickIcon } from '~/components/icons/CursorClickIcon'
+import { UsersIcon } from '~/components/icons/UsersIcon'
 import { Container } from '~/components/ui/Container'
+import { kvKeys } from '~/config/kv'
 import { navigationItems } from '~/config/nav'
 import { env } from '~/env.mjs'
 
@@ -59,22 +61,52 @@ function formatNumber(n: number, inChinese = false): string {
 async function TotalPageViews() {
  let views: number
  if (env.VERCEL_ENV === 'production') {
- views = await kv.incr('total_page_views')
+ views = await kv.incr(kvKeys.totalPageViews)
  } else {
  views = 345678
  }
 
  return (
- <span className="flex items-center justify-center gap-1 text-xs text-zinc-500 md:justify-start">
- <TbUsers aria-hidden />
+ <span className="flex items-center justify-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 md:justify-start">
+ <UsersIcon className="h-4 w-4" />
  <span title={`${Intl.NumberFormat('en-US').format(views)}次浏览`}>
+ 总浏览量&nbsp;
  <span className="font-medium">{formatNumber(views, true)}</span>
- &nbsp;总浏览量
  </span>
  </span>
  )
 }
 
+type LastVisitor = {
+ country: string
+ city: string
+ flag: string
+}
+async function LastVisitorInfo() {
+ let lastVisitor: LastVisitor | null = null
+ if (env.VERCEL_ENV === 'production') {
+ lastVisitor = await kv.get<LastVisitor>(kvKeys.lastVisitor)
+ }
+
+ if (!lastVisitor) {
+ lastVisitor = {
+ country: 'US',
+ city: 'Seattle',
+ flag: '🇺🇸',
+ }
+ }
+
+ return (
+ <span className="flex items-center justify-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 md:justify-start">
+ <CursorClickIcon className="h-4 w-4" />
+ <span>
+ 最近访客来自&nbsp;{[lastVisitor.city, lastVisitor.country].join(', ')}
+ </span>
+ <span className="font-medium">{lastVisitor.flag}</span>
+ </span>
+ )
+}
+
 export function Footer() {
  return (
  <footer className="mt-32">
@@ -89,10 +121,16 @@ export function Footer() {
  </div>
  </Container.Inner>
  <Container.Inner className="mt-6">
- <Suspense>
- {/* @ts-expect-error Async Server Component */}
- <TotalPageViews />
- </Suspense>
+ <div className="flex items-center justify-start gap-2">
+ <Suspense>
+ {/* @ts-expect-error Async Server Component */}
+ <TotalPageViews />
+ </Suspense>
+ <Suspense>
+ {/* @ts-expect-error Async Server Component */}
+ <LastVisitorInfo />
+ </Suspense>
+ </div>
  </Container.Inner>
  </div>
  </Container.Outer>

config/kv.ts

@@ -0,0 +1,4 @@
+export const kvKeys = {
+ totalPageViews: 'total_page_views',
+ lastVisitor: 'last_visitor',
+} as const