docs: cleanup vuetify layout

docs/.vitepress/config.ts

@@ -1,3 +1,5 @@
+import type { ThemeRegistration } from 'shiki'
+import ghLight from '@shikijs/themes/github-light'
 import { withPwa } from '@vite-pwa/vitepress'
 import { defineConfig } from 'vitepress'
 import llmstxt, { copyOrDownloadAsMarkdownButtons } from 'vitepress-plugin-llms'
@@ -7,6 +9,19 @@ import { pwa } from './pwa'
 import { buildEnd, transformHtml } from './sitemap'
 import { transformHead } from './transform-head'
 
+function replaceThemeColors (
+  theme: ThemeRegistration,
+  replacements: Record<string, string>,
+): ThemeRegistration {
+  let themeString = JSON.stringify(theme)
+  for (const [oldColor, newColor] of Object.entries(replacements)) {
+    themeString = themeString.replaceAll(oldColor, newColor)
+    themeString = themeString.replaceAll(oldColor.toLowerCase(), newColor)
+    themeString = themeString.replaceAll(oldColor.toUpperCase(), newColor)
+  }
+  return JSON.parse(themeString)
+}
+
 export default withPwa(defineConfig({
   lang: 'en-US',
   title: 'Vuetify Nuxt Module',
@@ -34,7 +49,13 @@ export default withPwa(defineConfig({
   lastUpdated: true,
   markdown: {
     theme: {
-      light: 'github-light',
+      light: replaceThemeColors(ghLight, {
+        '#22863A': '#227436', // green
+        '#E36209': '#BA4D02', // orange
+        '#D73A49': '#CD3443', // red
+        '#B31D28': '#AC222F', // red
+        '#6A737D': '#646b75', // gray comments
+      }),
       dark: 'github-dark',
     },
     config (md) {

docs/.vitepress/theme/VuetifyLayout.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-  import { useData, useRoute } from 'vitepress'
+  import { useData } from 'vitepress'
   import DefaultTheme from 'vitepress/theme'
-  import { createApp, nextTick, onMounted, onUnmounted, provide, watch } from 'vue'
+  import { nextTick, provide } from 'vue'
   import HomeHeroCopy from './components/HomeHeroCopy.vue'
 
   const { isDark } = useData()
-  const route = useRoute()
   const INSTALL_COMMAND = 'npx nuxi@latest module add vuetify-nuxt-module'
-  const HERO_COPY_SELECTOR = '.VPHome .VPHero .actions .action:nth-child(1) a'
 
   function enableTransitions () {
     return 'startViewTransition' in document
@@ -43,67 +41,12 @@
       },
     )
   })
-
-  function mountHeroCopy () {
-    nextTick(() => {
-      const element = document.querySelector(HERO_COPY_SELECTOR)
-      if (element) {
-        const container = document.createElement('div')
-        element.replaceWith(container)
-        createApp(HomeHeroCopy, { command: INSTALL_COMMAND }).mount(container)
-      }
-    })
-  }
-
-  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)
-    }
-  }
-
-  onMounted(() => {
-    mountHeroCopy()
-    window.addEventListener('mousemove', onMouseMove)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('mousemove', onMouseMove)
-    if (rafId) cancelAnimationFrame(rafId)
-  })
-
-  watch(
-    () => route.path,
-    () => {
-      mountHeroCopy()
-    },
-  )
 </script>
 
 <template>
-  <DefaultTheme.Layout />
+  <DefaultTheme.Layout>
+    <template #home-hero-actions-before-actions>
+      <HomeHeroCopy class="home" :command="INSTALL_COMMAND" />
+    </template>
+  </DefaultTheme.Layout>
 </template>

docs/.vitepress/theme/components/HomeHeroCopy.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
   const props = defineProps<{
     command: string
   }>()
 
-  const copied = ref(false)
+  const copied = shallowRef(false)
 
   async function copy () {
     try {
@@ -100,6 +100,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);

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

docs/.vitepress/theme/styles/main.css

@@ -89,63 +89,43 @@ details > summary:hover {
   margin: 1.5rem 0;
 }
 
-.custom-block.info {
-  border-color: rgba(24, 103, 192, 0.2);
-  background-color: rgba(24, 103, 192, 0.1);
-}
-.custom-block.info .custom-block-title {
-  color: var(--vp-c-brand-1);
+.custom-block.tip code,
+.custom-block.info code,
+.custom-block.warning code,
+.custom-block.danger code {
+  font-size: var(--vp-custom-block-code-font-size);
+  font-weight: 700;
 }
 
-.custom-block.tip {
-  border-color: rgba(76, 175, 80, 0.2);
-  background-color: rgba(76, 175, 80, 0.1);
-}
-.custom-block.tip .custom-block-title {
-  color: var(--vp-c-success-1);
+.info.custom-block > p > code,
+.info.custom-block > p > a,
+.info.custom-block > p > a:hover {
+  color: var(--vp-c-text-2);
+  opacity: 1;
 }
-
-.custom-block.warning {
-  border-color: rgba(251, 140, 0, 0.2);
-  background-color: rgba(251, 140, 0, 0.1);
+.tip.custom-block > p > code,
+.tip.custom-block > p > a,
+.tip.custom-block > p > a:hover {
+  color: var(--vp-c-brand-1);
+  opacity: 1;
 }
-.custom-block.warning .custom-block-title {
+.warning.custom-block > p > code,
+.warning.custom-block > p > a,
+.warning.custom-block > p > a:hover {
   color: var(--vp-c-warning-1);
+  opacity: 1;
 }
-
-.custom-block.danger {
-  border-color: rgba(255, 82, 82, 0.2);
-  background-color: rgba(255, 82, 82, 0.1);
-}
-.custom-block.danger .custom-block-title {
+.danger.custom-block > p > code,
+.danger.custom-block > p > a,
+.danger.custom-block > p > a:hover {
   color: var(--vp-c-danger-1);
+  opacity: 1;
 }
 
-.custom-block.tip code,
-.custom-block.info code,
 .custom-block.warning code,
 .custom-block.danger code {
-  background-color: rgba(0,0,0,0.1);
-  color: inherit;
-  font-weight: 600;
-}
-
-/* Dark mode specific tweaks for custom blocks */
-.dark .custom-block.info {
-  background-color: rgba(33, 150, 243, 0.1);
-  border-color: rgba(33, 150, 243, 0.2);
-}
-.dark .custom-block.tip {
-  background-color: rgba(76, 175, 80, 0.1);
-  border-color: rgba(76, 175, 80, 0.2);
-}
-.dark .custom-block.warning {
-  background-color: rgba(255, 167, 38, 0.1);
-  border-color: rgba(255, 167, 38, 0.2);
-}
-.dark .custom-block.danger {
-  background-color: rgba(255, 82, 82, 0.1);
-  border-color: rgba(255, 82, 82, 0.2);
+  font-size: var(--vp-custom-block-code-font-size);
+  font-weight: 700;
 }
 
 /* Sidebar */
@@ -195,11 +175,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));