docs: add meticulous

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(
-  route,
-  (nextRoute) => {
-    if (nextRoute.path.includes('/examples')) {
-      document.body.className = 'examples'
-    } else {
-      document.body.className = ''
-    }
-  },
-  { immediate: true, deep: true },
-)
+  if (!isDev || Math.random() < METICULOUS_SAMPLING_RATE) {
+    const { tryLoadAndStartRecorder } = await import('@alwaysmeticulous/recorder-loader')
+
+    // Start the Meticulous recorder before you initialise your app.
+    // Note: all errors are caught and logged, so no need to surround with try/catch
+    tryLoadAndStartRecorder({
+      projectId: '__METICULOUS_PROJECT_ID__',
+      isProduction: !isDev,
+      maxMsToBlockFor: !isDev ? 250 : undefined, // Optional, abandon waiting to load the Meticulous recorder, if it takes more than 250ms
+    })
+  }
+
+  watch(
+    route,
+    (nextRoute) => {
+      if (nextRoute.path.includes('/examples')) {
+        document.body.className = 'examples'
+      } else {
+        document.body.className = ''
+      }
+    },
+    { immediate: true },
+  )
+})
 </script>
 
 <template>