diff --git a/docs/package.json b/docs/package.json index 5867b004..c7c3f610 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts index 671c0133..d8a6e41d 100644 --- a/docs/src/.vitepress/config.mts +++ b/docs/src/.vitepress/config.mts @@ -62,6 +62,8 @@ function changelogSidebarEntries(): DefaultTheme.SidebarItem[] { export default defineConfigWithTheme({ 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({ }, define: { __ANALYTICS_ID__: process.env.VERCEL_ANALYTICS_ID, + __METICULOUS_PROJECT_ID__: process.env.METICULOUS_PROJECT_ID, }, plugins: [ copyVueFlowPlugin(), diff --git a/docs/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts index a0552285..2eaa26c9 100644 --- a/docs/src/.vitepress/theme/index.ts +++ b/docs/src/.vitepress/theme/index.ts @@ -16,6 +16,7 @@ export default { Layout, enhanceApp({ app }) { app.use(VueAnimXyz) + inject() }, -} +} as typeof Theme diff --git a/docs/src/.vitepress/theme/layouts/default.vue b/docs/src/.vitepress/theme/layouts/default.vue index 814cae93..72f39b4f 100644 --- a/docs/src/.vitepress/theme/layouts/default.vue +++ b/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 }, + ) +})