docs: add meticulous

docs/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.20.0",
+    "@alwaysmeticulous/recorder-loader": "^2.77.0",
     "@animxyz/core": "^0.6.6",
     "@animxyz/vue3": "^0.6.7",
     "@stackblitz/sdk": "^1.9.0",

docs/src/.vitepress/config.mts

@@ -62,6 +62,8 @@ function changelogSidebarEntries(): DefaultTheme.SidebarItem[] {
 export default defineConfigWithTheme<DefaultTheme.Config>({
   title: 'Vue Flow',
   description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
+  dir: 'ltr',
+  lang: 'en-US',
   head: head as HeadConfig[],
 
   outDir: resolve(__dirname, '../../dist'),
@@ -80,6 +82,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
     },
     define: {
       __ANALYTICS_ID__: process.env.VERCEL_ANALYTICS_ID,
+      __METICULOUS_PROJECT_ID__: process.env.METICULOUS_PROJECT_ID,
     },
     plugins: [
       copyVueFlowPlugin(),

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

@@ -16,6 +16,7 @@ export default {
   Layout,
   enhanceApp({ app }) {
     app.use(VueAnimXyz)
+
     inject()
   },
-}
+} as typeof Theme

docs/src/.vitepress/theme/layouts/default.vue

@@ -7,24 +7,40 @@ const { Layout: ParentLayout } = DefaultTheme
 
 const route = useRoute()
 
+const METICULOUS_SAMPLING_RATE = 0.01
+
 onMounted(async () => {
-  if (!import.meta.env.DEV) {
+  const isDev = import.meta.env.DEV
+
+  if (!isDev) {
     const { webVitals } = await import('../../plugins/vercel-web-vitals-api')
     webVitals({ analyticsId: '__ANALYTICS_ID__', debug: false })
   }
-})
 
-watch(
+  if (!isDev || Math.random() < METICULOUS_SAMPLING_RATE) {
-  route,
+    const { tryLoadAndStartRecorder } = await import('@alwaysmeticulous/recorder-loader')
-  (nextRoute) => {
+
-    if (nextRoute.path.includes('/examples')) {
+    // Start the Meticulous recorder before you initialise your app.
-      document.body.className = 'examples'
+    // Note: all errors are caught and logged, so no need to surround with try/catch
-    } else {
+    tryLoadAndStartRecorder({
-      document.body.className = ''
+      projectId: '__METICULOUS_PROJECT_ID__',
-    }
+      isProduction: !isDev,
-  },
+      maxMsToBlockFor: !isDev ? 250 : undefined, // Optional, abandon waiting to load the Meticulous recorder, if it takes more than 250ms
-  { immediate: true, deep: true },
+    })
-)
+  }
+
+  watch(
+    route,
+    (nextRoute) => {
+      if (nextRoute.path.includes('/examples')) {
+        document.body.className = 'examples'
+      } else {
+        document.body.className = ''
+      }
+    },
+    { immediate: true },
+  )
+})
 </script>
 
 <template>

turbo.json

@@ -29,5 +29,5 @@
       "outputs": ["dist/**"]
     }
   },
-  "globalEnv": ["VERCEL_ANALYTICS_ID", "ALGOLIA_API_KEY", "SERVER", "VUE_ROUTER_MODE", "VUE_ROUTER_BASE"]
+  "globalEnv": ["VERCEL_ANALYTICS_ID", "METICULOUS_PROJECT_ID", "ALGOLIA_API_KEY", "SERVER", "VUE_ROUTER_MODE", "VUE_ROUTER_BASE", "NODE_ENV"]
 }