docs: add vercel analytics

docs/src/.vitepress/config.ts

@@ -70,6 +70,9 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
     optimizeDeps: {
       exclude: ['@animxyz/vue3'],
     },
+    define: {
+      __ANALYTICS_ID__: process.env.VERCEL_ANALYTICS_ID,
+    },
     plugins: [
       copyVueFlowPlugin(),
       AutoImport({

docs/src/.vitepress/plugins/vercel-web-vitals-api.ts

@@ -0,0 +1,53 @@
+import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals'
+
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals'
+
+function getConnectionSpeed() {
+  const _navigator = navigator as Navigator & { connection?: { effectiveType: string } }
+
+  return 'connection' in _navigator && _navigator.connection && 'effectiveType' in _navigator.connection
+    ? _navigator.connection.effectiveType
+    : ''
+}
+
+function sendToAnalytics(metric, options) {
+  const body = {
+    dsn: options.analyticsId,
+    id: metric.id,
+    page: window.location.pathname,
+    href: window.location.href,
+    event_name: metric.name,
+    value: metric.value.toString(),
+    speed: getConnectionSpeed(),
+  }
+
+  if (options.debug) {
+    console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2))
+  }
+
+  const blob = new Blob([new URLSearchParams(body).toString()], {
+    // This content type is necessary for `sendBeacon`
+    type: 'application/x-www-form-urlencoded',
+  })
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(vitalsUrl, blob)
+  } else
+    fetch(vitalsUrl, {
+      body: blob,
+      method: 'POST',
+      credentials: 'omit',
+      keepalive: true,
+    })
+}
+
+export function webVitals(options) {
+  try {
+    getFID((metric) => sendToAnalytics(metric, options))
+    getTTFB((metric) => sendToAnalytics(metric, options))
+    getLCP((metric) => sendToAnalytics(metric, options))
+    getCLS((metric) => sendToAnalytics(metric, options))
+    getFCP((metric) => sendToAnalytics(metric, options))
+  } catch (err) {
+    console.error('[Analytics]', err)
+  }
+}

docs/src/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import type { Theme } from 'vitepress'
 import VueAnimXyz from '@animxyz/vue3'
 import DefaultTheme from 'vitepress/theme'
+import { webVitals } from '../plugins/vercel-web-vitals-api'
 import Layout from './layouts/default.vue'
 import 'virtual:windi.css'
 import '@animxyz/core'
@@ -13,6 +14,7 @@ const CustomTheme = {
   Layout,
   enhanceApp: ({ app }) => {
     app.use(VueAnimXyz)
+    webVitals({ analyticsId: '__ANALYTICS_ID__', debug: true })
   },
 } as Theme
 

docs/src/custom.d.ts

@@ -0,0 +1 @@
+declare const __ANALYTICS_ID__: string