From 2313e29f3122b4ab17c50b4ce1917402f91613ed Mon Sep 17 00:00:00 2001 From: Vercel Date: Wed, 18 Feb 2026 06:26:53 +0000 Subject: [PATCH] Add Vercel Web Analytics to Astro project MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vercel Web Analytics Integration for Astro Successfully implemented Vercel Web Analytics for this Astro blog project. ## Changes Made ### 1. Installed Package - Added `@vercel/analytics` version 1.6.1 to the project dependencies - Package version meets the requirement of 1.4.0 or later - Used pnpm as the project's package manager ### 2. Modified src/layouts/Layout.astro - Imported Analytics component from '@vercel/analytics/astro' in the frontmatter - Added component in the section (before the closing tag) - Route support is automatically included with the Astro integration ### 3. Updated Lock File - pnpm-lock.yaml was updated with the new dependency ### 4. Linter Formatting - The linter (biome) automatically formatted several files when running `pnpm run lint` - Minor formatting changes were applied to multiple component files ## Implementation Details The Analytics component was added to the base Layout.astro file, which is the main layout used throughout the site. This ensures that all pages will have analytics tracking enabled. The component was placed in the section alongside the existing SpeedInsights component, maintaining consistency with the existing Vercel integrations. ## Verification ✓ Build completed successfully (pnpm run build) ✓ Linter passed with no errors (pnpm run lint) ✓ Dependencies installed correctly ✓ Lock file updated appropriately ## Notes - The Astro check command shows some pre-existing type errors in the codebase (unrelated to this change) - The Analytics component will automatically track page views and provide web analytics data in the Vercel dashboard - No additional configuration is required - the component works out of the box with Astro's built-in routing Co-authored-by: Vercel --- .astro/content.d.ts | 2 +- package.json | 1 + pnpm-lock.yaml | 33 +++++++++++++++++++++ src/components/Footer.astro | 1 + src/components/Navbar.astro | 12 ++++---- src/components/widget/SideBar.astro | 4 +-- src/components/widget/Statistics.astro | 2 +- src/layouts/Layout.astro | 3 ++ src/pages/about.astro | 2 +- src/pages/friends/index.astro | 11 ++++--- src/pages/posts/[...slug].astro | 40 +++++++++++++------------- src/pages/ss/index.astro | 32 ++++++++++----------- 12 files changed, 90 insertions(+), 53 deletions(-) diff --git a/.astro/content.d.ts b/.astro/content.d.ts index 2e24b88..5772d5a 100644 --- a/.astro/content.d.ts +++ b/.astro/content.d.ts @@ -214,6 +214,6 @@ declare module 'astro:content' { LiveContentConfig['collections'][C]['loader'] >; - export type ContentConfig = typeof import("./../src/content/config.js"); + export type ContentConfig = typeof import("../src/content/config.js"); export type LiveContentConfig = never; } diff --git a/package.json b/package.json index 109cc73..71c5b32 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@iconify/svelte": "^4.2.0", "@swup/astro": "^1.7.0", "@tailwindcss/typography": "^0.5.19", + "@vercel/analytics": "^1.6.1", "@vercel/speed-insights": "^1.3.1", "astro": "5.13.10", "astro-expressive-code": "^0.41.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 90207ce..3dc7785 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,6 +59,9 @@ importers: '@tailwindcss/typography': specifier: ^0.5.19 version: 0.5.19(tailwindcss@3.4.19(yaml@2.8.2)) + '@vercel/analytics': + specifier: ^1.6.1 + version: 1.6.1(svelte@5.39.8) '@vercel/speed-insights': specifier: ^1.3.1 version: 1.3.1(svelte@5.39.8) @@ -2122,6 +2125,32 @@ packages: '@ungap/structured-clone@1.3.0': resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + '@vercel/analytics@1.6.1': + resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==} + peerDependencies: + '@remix-run/react': ^2 + '@sveltejs/kit': ^1 || ^2 + next: '>= 13' + 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 + react: + optional: true + svelte: + optional: true + vue: + optional: true + vue-router: + optional: true + '@vercel/speed-insights@1.3.1': resolution: {integrity: sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==} peerDependencies: @@ -7629,6 +7658,10 @@ snapshots: '@ungap/structured-clone@1.3.0': {} + '@vercel/analytics@1.6.1(svelte@5.39.8)': + optionalDependencies: + svelte: 5.39.8 + '@vercel/speed-insights@1.3.1(svelte@5.39.8)': optionalDependencies: svelte: 5.39.8 diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 55dd829..5ada5e3 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,5 +1,6 @@ --- import { profileConfig } from "../config"; + const currentYear = new Date().getFullYear(); --- diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 04dee21..984ea04 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -12,12 +12,12 @@ import NavMenuPanel from "./widget/NavMenuPanel.astro"; const className = Astro.props.class; let links: NavBarLink[] = navBarConfig.links.map( - (item: NavBarLink | LinkPreset): NavBarLink => { - if (typeof item === "number") { - return LinkPresets[item]; - } - return item; - }, + (item: NavBarLink | LinkPreset): NavBarLink => { + if (typeof item === "number") { + return LinkPresets[item]; + } + return item; + }, ); ---