From b20831407c8ab138c280fad4ea073d0a7d58820a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 19 Feb 2026 00:53:01 +0000 Subject: [PATCH 1/3] style: apply prettier --- apps/docs/vite.config.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/docs/vite.config.js b/apps/docs/vite.config.js index 6586aa9..7dc55e5 100644 --- a/apps/docs/vite.config.js +++ b/apps/docs/vite.config.js @@ -5,23 +5,23 @@ import { copyFileSync } from 'fs'; import { join } from 'path'; /** Copy index.html to 404.html so Vercel serves the SPA for unmatched routes */ function vercel404Plugin() { - return { - name: 'vercel-404', - closeBundle: function () { - var outDir = join(__dirname, 'dist'); - copyFileSync(join(outDir, 'index.html'), join(outDir, '404.html')); - }, - }; + return { + name: 'vercel-404', + closeBundle: function () { + var outDir = join(__dirname, 'dist'); + copyFileSync(join(outDir, 'index.html'), join(outDir, '404.html')); + }, + }; } export default defineConfig({ - base: '/', - plugins: [vue(), vercel404Plugin()], - resolve: { - alias: { - '~': resolve(__dirname, 'src'), - }, - }, - server: { - port: 3333, + base: '/', + plugins: [vue(), vercel404Plugin()], + resolve: { + alias: { + '~': resolve(__dirname, 'src'), }, + }, + server: { + port: 3333, + }, }); From d44cc58c81ffb04f30a2d1ad034ec0fbfc47c7af Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 19 Feb 2026 01:11:57 +0000 Subject: [PATCH 2/3] Set up Vercel Web Analytics MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Implementation Report: Vercel Web Analytics Guide ## Summary Successfully added a comprehensive guide for "Getting Started with Vercel Web Analytics" to the Fluxer.js documentation site. ## Changes Made ### Modified Files - `apps/docs/src/data/guides.ts` - Added new guide entry with comprehensive Vercel Web Analytics documentation ## Implementation Details ### New Guide Added - **ID**: `vercel-web-analytics` - **Slug**: `vercel-web-analytics` - **Title**: "Getting Started with Vercel Web Analytics" - **Category**: `other` - **Description**: "Learn how to enable and integrate Vercel Web Analytics into your project." ### Content Structure The guide includes 19 detailed sections covering: 1. **Overview** - Introduction to the guide 2. **Prerequisites** - Requirements including Vercel account, project, and CLI 3. **Install Vercel CLI** - Instructions for pnpm, yarn, npm, and bun 4. **Enable Web Analytics in Vercel** - Dashboard instructions 5. **Add @vercel/analytics to your project** - Package installation commands 6. **Next.js (Pages Directory)** - TypeScript and JavaScript examples 7. **Next.js (App Router)** - TypeScript and JavaScript examples 8. **Remix** - TypeScript and JavaScript examples 9. **Nuxt** - TypeScript and JavaScript examples 10. **SvelteKit** - TypeScript and JavaScript examples 11. **Astro** - Modern implementation (v1.4.0+) 12. **Astro (Legacy)** - Configuration for versions before v1.4.0 13. **HTML Sites** - Plain HTML script implementation 14. **React (Create React App)** - TypeScript and JavaScript examples 15. **Vue** - TypeScript and JavaScript examples with vue-router support 16. **Other Frameworks** - Generic inject() function usage 17. **Deploy your app to Vercel** - Deployment instructions 18. **Deployment Notes** - Additional deployment information 19. **View your data in the dashboard** - Analytics dashboard usage 20. **Privacy and Data Compliance** - Link to privacy documentation 21. **Next Steps** - Additional resources and learning paths ### Framework Support The guide provides implementation examples for: - Next.js (Pages Directory and App Router) - Remix - Nuxt - SvelteKit - Astro (current and legacy versions) - React (Create React App) - Vue - Plain HTML - Generic frameworks Each framework section includes both TypeScript and JavaScript code examples where applicable. ## Testing - ✅ Build completed successfully (`pnpm run build`) - ✅ TypeScript compilation passed - ✅ No new linting errors introduced (existing linter warnings are pre-existing in the codebase) - ✅ All code follows the existing guide structure and patterns ## Notes - The guide follows the existing pattern used by other guides in the `guides.ts` file - Content is structured as sections with titles, descriptions, and code blocks - Code examples use the 'javascript' or 'bash' language identifiers for proper syntax highlighting - The guide is categorized under 'other' as it doesn't fit the existing Discord bot-specific categories - All framework-specific instructions are clearly labeled and organized Co-authored-by: Vercel --- apps/docs/src/data/guides.ts | 369 +++++++++++++++++++++++++++++++++++ 1 file changed, 369 insertions(+) diff --git a/apps/docs/src/data/guides.ts b/apps/docs/src/data/guides.ts index 53e03bd..5c731d1 100644 --- a/apps/docs/src/data/guides.ts +++ b/apps/docs/src/data/guides.ts @@ -1776,6 +1776,375 @@ await client.login(process.env.FLUXER_BOT_TOKEN);`, }, ], }, + { + id: 'vercel-web-analytics', + slug: 'vercel-web-analytics', + title: 'Getting Started with Vercel Web Analytics', + description: 'Learn how to enable and integrate Vercel Web Analytics into your project.', + category: 'other', + sections: [ + { + title: 'Overview', + description: 'This guide will help you get started with using Vercel Web Analytics on your project, showing you how to enable it, add the package to your project, deploy your app to Vercel, and view your data in the dashboard. Select your framework to view instructions on using the Vercel Web Analytics in your project.', + }, + { + title: 'Prerequisites', + description: 'Before getting started, you will need:\n\n• A Vercel account. If you don\'t have one, you can sign up for free at https://vercel.com/signup\n• A Vercel project. If you don\'t have one, you can create a new project at https://vercel.com/new\n• The Vercel CLI installed', + }, + { + title: 'Install Vercel CLI', + code: `# Using pnpm +pnpm i vercel + +# Using yarn +yarn add vercel + +# Using npm +npm i vercel + +# Using bun +bun i vercel`, + language: 'bash', + }, + { + title: 'Enable Web Analytics in Vercel', + description: 'On the Vercel dashboard, select your Project and then click the Analytics tab and click Enable from the dialog.\n\nNote: Enabling Web Analytics will add new routes (scoped at /_vercel/insights/*) after your next deployment.', + }, + { + title: 'Add @vercel/analytics to your project', + description: 'Using the package manager of your choice, add the @vercel/analytics package to your project:', + code: `# Using pnpm +pnpm i @vercel/analytics + +# Using yarn +yarn add @vercel/analytics + +# Using npm +npm i @vercel/analytics + +# Using bun +bun i @vercel/analytics`, + language: 'bash', + }, + { + title: 'Next.js (Pages Directory)', + description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.\n\nIf you are using the pages directory, add the following code to your main app file:', + code: `// TypeScript (pages/_app.tsx) +import type { AppProps } from "next/app"; +import { Analytics } from "@vercel/analytics/next"; + +function MyApp({ Component, pageProps }: AppProps) { + return ( + <> + + + + ); +} + +export default MyApp; + +// JavaScript (pages/_app.js) +import { Analytics } from "@vercel/analytics/next"; + +function MyApp({ Component, pageProps }) { + return ( + <> + + + + ); +} + +export default MyApp;`, + language: 'javascript', + }, + { + title: 'Next.js (App Router)', + description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.\n\nAdd the following code to the root layout:', + code: `// TypeScript (app/layout.tsx) +import { Analytics } from "@vercel/analytics/next"; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + Next.js + + + {children} + + + + ); +} + +// JavaScript (app/layout.jsx) +import { Analytics } from "@vercel/analytics/next"; + +export default function RootLayout({ children }) { + return ( + + + Next.js + + + {children} + + + + ); +}`, + language: 'javascript', + }, + { + title: 'Remix', + description: 'The Analytics component is a wrapper around the tracking script, offering a seamless integration with Remix, including route detection.\n\nAdd the following code to your root file:', + code: `// TypeScript (app/root.tsx) +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "@remix-run/react"; +import { Analytics } from "@vercel/analytics/remix"; + +export default function App() { + return ( + + + + + + + + + + + + + + + + ); +} + +// JavaScript (app/root.jsx) +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "@remix-run/react"; +import { Analytics } from "@vercel/analytics/remix"; + +export default function App() { + return ( + + + + + + + + + + + + + + + + ); +}`, + language: 'javascript', + }, + { + title: 'Nuxt', + description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Nuxt, including route support.\n\nAdd the following code to your main component:', + code: ` + + + + + + + +`, + language: 'javascript', + }, + { + title: 'SvelteKit', + description: 'The injectAnalytics function is a wrapper around the tracking script, offering more seamless integration with SvelteKit, including route support.\n\nAdd the following code to the main layout:', + code: `// TypeScript (src/routes/+layout.ts) +import { dev } from "$app/environment"; +import { injectAnalytics } from "@vercel/analytics/sveltekit"; + +injectAnalytics({ mode: dev ? "development" : "production" }); + +// JavaScript (src/routes/+layout.js) +import { dev } from "$app/environment"; +import { injectAnalytics } from "@vercel/analytics/sveltekit"; + +injectAnalytics({ mode: dev ? "development" : "production" });`, + language: 'javascript', + }, + { + title: 'Astro', + description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Astro, including route support.\n\nAdd the following code to your base layout:', + code: `--- +// src/layouts/Base.astro +import Analytics from '@vercel/analytics/astro'; +// ... +--- + + + + + + + + + + +`, + language: 'javascript', + }, + { + title: 'Astro (Legacy - before v1.4.0)', + description: 'The Analytics component is available in version @vercel/analytics@1.4.0 and later. If you are using an earlier version, you must configure the webAnalytics property of the Vercel adapter in your astro.config.mjs file as shown in the code below. For further information, see the Astro adapter documentation at https://docs.astro.build/en/guides/integrations-guide/vercel/#webanalytics', + code: `// astro.config.mjs +import { defineConfig } from "astro/config"; +import vercel from "@astrojs/vercel/serverless"; + +export default defineConfig({ + output: "server", + adapter: vercel({ + webAnalytics: { + enabled: true, // set to false when using @vercel/analytics@1.4.0 + }, + }), +});`, + language: 'javascript', + }, + { + title: 'HTML Sites', + description: 'For plain HTML sites, you can add the following script to your .html files:\n\nNote: When using the HTML implementation, there is no need to install the @vercel/analytics package. However, there is no route support.', + code: ` + +`, + language: 'javascript', + }, + { + title: 'React (Create React App)', + description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with React.\n\nNote: When using the plain React implementation, there is no route support.\n\nAdd the following code to the main app file:', + code: `// TypeScript (App.tsx) +import { Analytics } from "@vercel/analytics/react"; + +export default function App() { + return ( +
+ {/* ... */} + +
+ ); +} + +// JavaScript (App.jsx) +import { Analytics } from "@vercel/analytics/react"; + +export default function App() { + return ( +
+ {/* ... */} + +
+ ); +}`, + language: 'javascript', + }, + { + title: 'Vue', + description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Vue.\n\nNote: Route support is automatically enabled if you\'re using vue-router.\n\nAdd the following code to your main component:', + code: ` + + + + + + + +`, + language: 'javascript', + }, + { + title: 'Other Frameworks', + description: 'Import the inject function from the package, which will add the tracking script to your app. This should only be called once in your app, and must run in the client.\n\nNote: There is no route support with the inject function.\n\nAdd the following code to your main app file:', + code: `// TypeScript (main.ts) +import { inject } from "@vercel/analytics"; + +inject(); + +// JavaScript (main.js) +import { inject } from "@vercel/analytics"; + +inject();`, + language: 'javascript', + }, + { + title: 'Deploy your app to Vercel', + description: 'Deploy your app using the following command:', + code: `vercel deploy`, + language: 'bash', + }, + { + title: 'Deployment Notes', + description: 'If you haven\'t already, we also recommend connecting your project\'s Git repository, which will enable Vercel to deploy your latest commits to main without terminal commands.\n\nOnce your app is deployed, it will start tracking visitors and page views.\n\nNote: If everything is set up properly, you should be able to see a Fetch/XHR request in your browser\'s Network tab from /_vercel/insights/view when you visit any page.', + }, + { + title: 'View your data in the dashboard', + description: 'Once your app is deployed, and users have visited your site, you can view your data in the dashboard.\n\nTo do so, go to your dashboard, select your project, and click the Analytics tab.\n\nAfter a few days of visitors, you\'ll be able to start exploring your data by viewing and filtering the panels.\n\nUsers on Pro and Enterprise plans can also add custom events to their data to track user interactions such as button clicks, form submissions, or purchases.', + }, + { + title: 'Privacy and Data Compliance', + description: 'Learn more about how Vercel supports privacy and data compliance standards with Vercel Web Analytics at https://vercel.com/docs/analytics/privacy-policy', + }, + { + title: 'Next Steps', + description: 'Now that you have Vercel Web Analytics set up, you can explore the following topics:\n\n• Learn how to use the @vercel/analytics package\n• Learn how to set up custom events\n• Learn about filtering data\n• Read about privacy and compliance\n• Explore pricing\n• Troubleshooting', + }, + ], + }, ]; const CATEGORY_LABELS: Record = { From 1f1bd836d3eb8f83f20b6d9aba0b8dacc049738f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 19 Feb 2026 01:12:19 +0000 Subject: [PATCH 3/3] style: apply prettier --- apps/docs/src/data/guides.ts | 57 ++++++++++++++++++++++++------------ 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/apps/docs/src/data/guides.ts b/apps/docs/src/data/guides.ts index 5c731d1..16793b0 100644 --- a/apps/docs/src/data/guides.ts +++ b/apps/docs/src/data/guides.ts @@ -1785,11 +1785,13 @@ await client.login(process.env.FLUXER_BOT_TOKEN);`, sections: [ { title: 'Overview', - description: 'This guide will help you get started with using Vercel Web Analytics on your project, showing you how to enable it, add the package to your project, deploy your app to Vercel, and view your data in the dashboard. Select your framework to view instructions on using the Vercel Web Analytics in your project.', + description: + 'This guide will help you get started with using Vercel Web Analytics on your project, showing you how to enable it, add the package to your project, deploy your app to Vercel, and view your data in the dashboard. Select your framework to view instructions on using the Vercel Web Analytics in your project.', }, { title: 'Prerequisites', - description: 'Before getting started, you will need:\n\n• A Vercel account. If you don\'t have one, you can sign up for free at https://vercel.com/signup\n• A Vercel project. If you don\'t have one, you can create a new project at https://vercel.com/new\n• The Vercel CLI installed', + description: + "Before getting started, you will need:\n\n• A Vercel account. If you don't have one, you can sign up for free at https://vercel.com/signup\n• A Vercel project. If you don't have one, you can create a new project at https://vercel.com/new\n• The Vercel CLI installed", }, { title: 'Install Vercel CLI', @@ -1808,11 +1810,13 @@ bun i vercel`, }, { title: 'Enable Web Analytics in Vercel', - description: 'On the Vercel dashboard, select your Project and then click the Analytics tab and click Enable from the dialog.\n\nNote: Enabling Web Analytics will add new routes (scoped at /_vercel/insights/*) after your next deployment.', + description: + 'On the Vercel dashboard, select your Project and then click the Analytics tab and click Enable from the dialog.\n\nNote: Enabling Web Analytics will add new routes (scoped at /_vercel/insights/*) after your next deployment.', }, { title: 'Add @vercel/analytics to your project', - description: 'Using the package manager of your choice, add the @vercel/analytics package to your project:', + description: + 'Using the package manager of your choice, add the @vercel/analytics package to your project:', code: `# Using pnpm pnpm i @vercel/analytics @@ -1828,7 +1832,8 @@ bun i @vercel/analytics`, }, { title: 'Next.js (Pages Directory)', - description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.\n\nIf you are using the pages directory, add the following code to your main app file:', + description: + 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.\n\nIf you are using the pages directory, add the following code to your main app file:', code: `// TypeScript (pages/_app.tsx) import type { AppProps } from "next/app"; import { Analytics } from "@vercel/analytics/next"; @@ -1861,7 +1866,8 @@ export default MyApp;`, }, { title: 'Next.js (App Router)', - description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.\n\nAdd the following code to the root layout:', + description: + 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.\n\nAdd the following code to the root layout:', code: `// TypeScript (app/layout.tsx) import { Analytics } from "@vercel/analytics/next"; @@ -1903,7 +1909,8 @@ export default function RootLayout({ children }) { }, { title: 'Remix', - description: 'The Analytics component is a wrapper around the tracking script, offering a seamless integration with Remix, including route detection.\n\nAdd the following code to your root file:', + description: + 'The Analytics component is a wrapper around the tracking script, offering a seamless integration with Remix, including route detection.\n\nAdd the following code to your root file:', code: `// TypeScript (app/root.tsx) import { Links, @@ -1969,7 +1976,8 @@ export default function App() { }, { title: 'Nuxt', - description: 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Nuxt, including route support.\n\nAdd the following code to your main component:', + description: + 'The Analytics component is a wrapper around the tracking script, offering more seamless integration with Nuxt, including route support.\n\nAdd the following code to your main component:', code: `