From cfe34d9f8a4568aecaef2f21fd73d59791793e88 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 19 Mar 2026 19:16:08 +0100 Subject: [PATCH 1/5] docs: cleanup vuetify layout --- docs/.vitepress/theme/VuetifyLayout.vue | 71 ++----------------- .../theme/components/HomeHeroCopy.vue | 5 ++ docs/.vitepress/theme/index.ts | 56 +++++++++++++-- docs/.vitepress/theme/styles/main.css | 4 +- docs/.vitepress/transform-head.ts | 14 ++-- docs/index.md | 3 - docs/public/animated-logo.svg | 33 +++++++++ pnpm-lock.yaml | 28 ++++---- pnpm-workspace.yaml | 2 +- 9 files changed, 122 insertions(+), 94 deletions(-) create mode 100644 docs/public/animated-logo.svg diff --git a/docs/.vitepress/theme/VuetifyLayout.vue b/docs/.vitepress/theme/VuetifyLayout.vue index a67ff6b..b626043 100644 --- a/docs/.vitepress/theme/VuetifyLayout.vue +++ b/docs/.vitepress/theme/VuetifyLayout.vue @@ -1,13 +1,11 @@ diff --git a/docs/.vitepress/theme/components/HomeHeroCopy.vue b/docs/.vitepress/theme/components/HomeHeroCopy.vue index d6a314b..f3b2e1c 100644 --- a/docs/.vitepress/theme/components/HomeHeroCopy.vue +++ b/docs/.vitepress/theme/components/HomeHeroCopy.vue @@ -5,6 +5,8 @@ command: string }>() + console.log('PASO') + const copied = ref(false) async function copy () { @@ -100,6 +102,9 @@ max-width: calc(100vw - 2 * 24px); width: 100%; } +.hero-copy-btn.home { + margin: 6px; +} .hero-copy-btn:hover { border-color: var(--vp-c-brand-1); diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index fc14baf..60f5b9b 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -19,15 +19,59 @@ if (inBrowser) { export default { extends: DefaultTheme, Layout: VuetifyLayout, - enhanceApp ({ app }) { + enhanceApp ({ app, router }) { app.component('HomeHeroCopy', HomeHeroCopy) app.component('CompatibilityMatrix', CompatibilityMatrix) app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons) - Swetrix.init('KMc9xOD28UCn', { - apiURL: 'https://swetrix-api.vuetifyjs.com/log', - }) - Swetrix.trackViews() - Swetrix.trackErrors() + if (inBrowser) { + let rafId: number | null = null + let mouseX = 0 + let mouseY = 0 + + function updateLogoTilt () { + const logo = document.querySelector('.VPHome .image-src') as HTMLElement + if (!logo) { + rafId = null + return + } + + const { innerWidth, innerHeight } = window + const x = (mouseX / innerWidth - 0.5) * 2 + const y = (mouseY / innerHeight - 0.5) * 2 + + const tiltX = (y * -10).toFixed(2) + const tiltY = (x * 10).toFixed(2) + + logo.style.transform = `translate(-50%, -50%) perspective(500px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)` + rafId = null + } + + function onMouseMove (e: MouseEvent) { + mouseX = e.clientX + mouseY = e.clientY + + if (!rafId) { + rafId = requestAnimationFrame(updateLogoTilt) + } + } + + router.onBeforeRouteChange = to => { + if (to === '/') { + window.addEventListener('mousemove', onMouseMove, { passive: true }) + } else { + window.removeEventListener('mousemove', onMouseMove) + if (rafId) { + cancelAnimationFrame(rafId) + } + } + } + + Swetrix.init('KMc9xOD28UCn', { + apiURL: 'https://swetrix-api.vuetifyjs.com/log', + }) + Swetrix.trackViews() + Swetrix.trackErrors() + } }, } satisfies Theme diff --git a/docs/.vitepress/theme/styles/main.css b/docs/.vitepress/theme/styles/main.css index 45d149b..03a1038 100644 --- a/docs/.vitepress/theme/styles/main.css +++ b/docs/.vitepress/theme/styles/main.css @@ -195,11 +195,11 @@ details > summary:hover { margin-top: 20px; } -.VPHome .VPHero .actions .action:nth-child(1) { +.VPHome .VPHero .actions .action:first-child { flex: 1 0 100%; } -.VPHome .VPHero .actions .action:nth-child(1) .VPButton { +.VPHome .VPHero .actions .action:first-child .VPButton { justify-content: flex-start; width: 100%; border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 36%, var(--vp-c-divider)); diff --git a/docs/.vitepress/transform-head.ts b/docs/.vitepress/transform-head.ts index 281f8dd..c6c53c8 100644 --- a/docs/.vitepress/transform-head.ts +++ b/docs/.vitepress/transform-head.ts @@ -5,13 +5,19 @@ const googleapis = 'https://fonts.googleapis.com' const gstatic = 'https://fonts.gstatic.com' export async function transformHead ({ pageData }: TransformContext): Promise { - const head: HeadConfig[] = [['link', { rel: 'dns-prefetch', href: googleapis }], ['link', { rel: 'dns-prefetch', href: gstatic }], ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: googleapis }], ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: gstatic }], ['link', { rel: 'preload', as: 'style', onload: 'this.onload=null;this.rel=\'stylesheet\'', href: firaFont }], ['noscript', {}, ``]] - - // prefetch fira font + const head: HeadConfig[] = [ + ['link', { rel: 'dns-prefetch', href: googleapis }], + ['link', { rel: 'dns-prefetch', href: gstatic }], + ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: googleapis }], + ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: gstatic }], + ['link', { rel: 'preload', as: 'style', onload: 'this.onload=null;this.rel=\'stylesheet\'', href: firaFont }], + ['noscript', {}, ``], + ['link', { rel: 'prefetch', href: '/logo.svg' }], + ] // banner for index page if (pageData.relativePath === 'index.md') { - head.push(['link', { rel: 'prefetch', href: '/logo.svg' }]) + head.push(['link', { rel: 'prefetch', href: '/animated-logo.svg' }]) } return head diff --git a/docs/index.md b/docs/index.md index 9f59d79..416ce8a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -12,9 +12,6 @@ hero: src: /logo.svg alt: Vuetify Nuxt Module actions: - - theme: alt - text: npx nuxt module add vuetify-nuxt-module - link: "#" - theme: brand text: Get Started link: /guide/ diff --git a/docs/public/animated-logo.svg b/docs/public/animated-logo.svg new file mode 100644 index 0000000..dad1ebb --- /dev/null +++ b/docs/public/animated-logo.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b3d6b1..4e0d634 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -224,8 +224,8 @@ catalogs: version: 7.4.0 overrides: - vitepress: 2.0.0-alpha.16 - '@vite-pwa/vitepress>vitepress': 2.0.0-alpha.16 + vitepress: 2.0.0-alpha.17 + '@vite-pwa/vitepress>vitepress': 2.0.0-alpha.17 importers: @@ -429,8 +429,8 @@ importers: specifier: 'catalog:' version: 1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@25.3.3)(jiti@2.6.1)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0) vitepress: - specifier: 2.0.0-alpha.16 - version: 2.0.0-alpha.16(@types/node@25.3.3)(change-case@5.4.4)(fuse.js@7.1.0)(jiti@2.6.1)(oxc-minify@0.112.0)(postcss@8.5.8)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2) + specifier: 2.0.0-alpha.17 + version: 2.0.0-alpha.17(@types/node@25.3.3)(change-case@5.4.4)(fuse.js@7.1.0)(jiti@2.6.1)(oxc-minify@0.112.0)(postcss@8.5.8)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2) vitepress-plugin-llms: specifier: 'catalog:' version: 1.11.0 @@ -5128,8 +5128,8 @@ packages: flatted@3.3.4: resolution: {integrity: sha512-3+mMldrTAPdta5kjX2G2J7iX4zxtnwpdA8Tr2ZSjkyPSanvbZAcy6flmtnXbEybHrDcU9641lxrMfFuUxVz9vA==} - focus-trap@7.8.0: - resolution: {integrity: sha512-/yNdlIkpWbM0ptxno3ONTuf+2g318kh2ez3KSeZN5dZ8YC6AAmgeWz+GasYYiBJPFaYcSAPeu4GfhUaChzIJXA==} + focus-trap@8.0.0: + resolution: {integrity: sha512-Aa84FOGHs99vVwufDMdq2qgOwXPC2e9U66GcqBhn1/jEHPDhJaP8PYhkIbqG9lhfL5Kddk/567lj46LLHYCRUw==} for-each@0.3.5: resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==} @@ -7949,8 +7949,8 @@ packages: vitepress-plugin-llms@1.11.0: resolution: {integrity: sha512-n6fjWzBNKy40p8cij+d2cHiC2asNW1eQKdmc06gX9VAv7vWppIoVLH/f7Ht1bK0vSpGzzW2QimvNfbfv1oCdJw==} - vitepress@2.0.0-alpha.16: - resolution: {integrity: sha512-w1nwsefDVIsje7BZr2tsKxkZutDGjG0YoQ2yxO7+a9tvYVqfljYbwj5LMYkPy8Tb7YbPwa22HtIhk62jbrvuEQ==} + vitepress@2.0.0-alpha.17: + resolution: {integrity: sha512-Z3VPUpwk/bHYqt1uMVOOK1/4xFiWQov1GNc2FvMdz6kvje4JRXEOngVI9C+bi5jeedMSHiA4dwKkff1NCvbZ9Q==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4 @@ -11802,14 +11802,14 @@ snapshots: '@vueuse/shared': 14.2.1(vue@3.5.29(typescript@5.9.3)) vue: 3.5.29(typescript@5.9.3) - '@vueuse/integrations@14.2.1(change-case@5.4.4)(focus-trap@7.8.0)(fuse.js@7.1.0)(vue@3.5.29(typescript@5.9.3))': + '@vueuse/integrations@14.2.1(change-case@5.4.4)(focus-trap@8.0.0)(fuse.js@7.1.0)(vue@3.5.29(typescript@5.9.3))': dependencies: '@vueuse/core': 14.2.1(vue@3.5.29(typescript@5.9.3)) '@vueuse/shared': 14.2.1(vue@3.5.29(typescript@5.9.3)) vue: 3.5.29(typescript@5.9.3) optionalDependencies: change-case: 5.4.4 - focus-trap: 7.8.0 + focus-trap: 8.0.0 fuse.js: 7.1.0 '@vueuse/metadata@14.2.1': {} @@ -13311,7 +13311,7 @@ snapshots: flatted@3.3.4: {} - focus-trap@7.8.0: + focus-trap@8.0.0: dependencies: tabbable: 6.4.0 @@ -16777,7 +16777,7 @@ snapshots: transitivePeerDependencies: - supports-color - vitepress@2.0.0-alpha.16(@types/node@25.3.3)(change-case@5.4.4)(fuse.js@7.1.0)(jiti@2.6.1)(oxc-minify@0.112.0)(postcss@8.5.8)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2): + vitepress@2.0.0-alpha.17(@types/node@25.3.3)(change-case@5.4.4)(fuse.js@7.1.0)(jiti@2.6.1)(oxc-minify@0.112.0)(postcss@8.5.8)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2): dependencies: '@docsearch/css': 4.6.0 '@docsearch/js': 4.6.0 @@ -16791,8 +16791,8 @@ snapshots: '@vue/devtools-api': 8.1.0 '@vue/shared': 3.5.29 '@vueuse/core': 14.2.1(vue@3.5.29(typescript@5.9.3)) - '@vueuse/integrations': 14.2.1(change-case@5.4.4)(focus-trap@7.8.0)(fuse.js@7.1.0)(vue@3.5.29(typescript@5.9.3)) - focus-trap: 7.8.0 + '@vueuse/integrations': 14.2.1(change-case@5.4.4)(focus-trap@8.0.0)(fuse.js@7.1.0)(vue@3.5.29(typescript@5.9.3)) + focus-trap: 8.0.0 mark.js: 8.11.1 minisearch: 7.2.0 shiki: 3.23.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 9616076..70e4ca9 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -70,7 +70,7 @@ catalog: vite: 7.3.1 vite-plugin-pwa: ^1.2.0 vite-plugin-vuetify: ^2.1.3 - vitepress: 2.0.0-alpha.16 + vitepress: 2.0.0-alpha.17 vitepress-plugin-llms: ^1.11.0 vitest: ^4.0.18 vue: ^3.5.29 From 12a31eb66ae5c62e43150610a1dab3b0fdd0b1ed Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 19 Mar 2026 19:26:38 +0100 Subject: [PATCH 2/5] docs: cleanup home hero copy component (use shallowRef) --- docs/.vitepress/theme/components/HomeHeroCopy.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/.vitepress/theme/components/HomeHeroCopy.vue b/docs/.vitepress/theme/components/HomeHeroCopy.vue index f3b2e1c..1ba5c21 100644 --- a/docs/.vitepress/theme/components/HomeHeroCopy.vue +++ b/docs/.vitepress/theme/components/HomeHeroCopy.vue @@ -1,13 +1,11 @@