From b78cded9ea840872f0848f0cbec34bc9f40dcd93 Mon Sep 17 00:00:00 2001 From: Vercel Date: Wed, 1 Apr 2026 16:19:04 +0000 Subject: [PATCH] Install Vercel Web Analytics MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Web Analytics Implementation Report ## Summary Successfully installed and configured Vercel Web Analytics for this RSPress project. ## Changes Made ### 1. Package Installation - **Added dependency**: `@vercel/analytics@^2.0.1` to package.json - **Package manager**: pnpm (as per project's existing setup) - **Lock file**: pnpm-lock.yaml updated with new dependencies ### 2. Analytics Integration **File Modified**: `theme/index.tsx` - Imported `Analytics` component from `@vercel/analytics/react` - Wrapped the RSPress `Layout` component to inject analytics on every page - Used RSPress's recommended theme extension pattern (Layout wrapping) - Properly typed Layout props using `React.ComponentProps` ### 3. Code Quality - All code follows ESLint rules (lint passed with zero errors) - Code formatted with Biome (biome check passed) - Properly typed TypeScript with no `any` usage ## Implementation Approach Following the official Vercel Analytics documentation (fetched from https://vercel.com/docs/analytics/quickstart), I implemented the React integration pattern for RSPress, which is a React-based static site generator. RSPress uses a theme system where you can extend components by wrapping them. The Analytics component is injected by: 1. Importing the original `Layout` from `@rspress/core/theme-original` 2. Creating a custom `Layout` wrapper that renders both the original layout and the `` component 3. Exporting the custom `Layout` to override the default This approach ensures analytics tracking is enabled on all pages while maintaining compatibility with RSPress updates. ## Files Changed - `package.json` - Added @vercel/analytics dependency - `pnpm-lock.yaml` - Updated with new package dependencies - `theme/index.tsx` - Integrated Analytics component - `rspress.config.ts` - Minor formatting fix by biome (no functional change) ## Verification ✅ ESLint check passed (no errors) ✅ Biome check passed (formatting applied) ✅ All code properly typed with TypeScript ✅ Lock file updated for consistent dependency resolution ## Notes - The build command failed due to a GLIBC compatibility issue in the sandbox environment (unrelated to analytics changes) - Analytics will track page views automatically once deployed to Vercel - No additional configuration required - works out of the box Co-authored-by: Vercel --- package.json | 3 ++- pnpm-lock.yaml | 36 ++++++++++++++++++++++++++++++++++++ rspress.config.ts | 3 +-- theme/index.tsx | 12 ++++++++++++ 4 files changed, 51 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 83ef582..c3290f7 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "typescript-eslint": "^8.57.2" }, "dependencies": { - "@rspress/core": "2.0.8" + "@rspress/core": "2.0.8", + "@vercel/analytics": "^2.0.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 224fb5e..351f2a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@rspress/core': specifier: 2.0.8 version: 2.0.8(@types/mdast@4.0.4)(@types/react@19.2.14)(micromark-util-types@2.0.2)(micromark@4.0.2) + '@vercel/analytics': + specifier: ^2.0.1 + version: 2.0.1(react@19.2.4) devDependencies: '@biomejs/biome': specifier: 2.4.9 @@ -432,6 +435,35 @@ packages: peerDependencies: react: '>=18.3.1' + '@vercel/analytics@2.0.1': + resolution: {integrity: sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==} + peerDependencies: + '@remix-run/react': ^2 + '@sveltejs/kit': ^1 || ^2 + next: '>= 13' + nuxt: '>= 3' + react: ^18 || ^19 || ^19.0.0-rc + svelte: '>= 4' + vue: ^3 + vue-router: ^4 + peerDependenciesMeta: + '@remix-run/react': + optional: true + '@sveltejs/kit': + optional: true + next: + optional: true + nuxt: + optional: true + react: + optional: true + svelte: + optional: true + vue: + optional: true + vue-router: + optional: true + acorn-jsx@5.3.2: resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -1967,6 +1999,10 @@ snapshots: react: 19.2.4 unhead: 2.1.12 + '@vercel/analytics@2.0.1(react@19.2.4)': + optionalDependencies: + react: 19.2.4 + acorn-jsx@5.3.2(acorn@8.16.0): dependencies: acorn: 8.16.0 diff --git a/rspress.config.ts b/rspress.config.ts index e3f1cad..8894a7e 100644 --- a/rspress.config.ts +++ b/rspress.config.ts @@ -18,8 +18,7 @@ export default defineConfig({ }, ], footer: { - message: - '基于 Cloud Code 源码的学习笔记，仅供学习交流', + message: '基于 Cloud Code 源码的学习笔记，仅供学习交流', }, }, markdown: { diff --git a/theme/index.tsx b/theme/index.tsx index de35b18..120807a 100644 --- a/theme/index.tsx +++ b/theme/index.tsx @@ -1,3 +1,15 @@ import './index.css'; +import { Layout as BasicLayout } from '@rspress/core/theme-original'; +import { Analytics } from '@vercel/analytics/react'; +import type React from 'react'; + +// Wrap Layout to inject Vercel Web Analytics +const Layout = (props: React.ComponentProps) => ( + <> + + + +); export * from '@rspress/core/theme-original'; +export { Layout };