Initial rearrangment of vuetom site source

packages/vuetom/doc/components/VTLayout.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch, nextTick } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import { useData, useRoute } from 'vitepress'
+import {
+  useFlash,
+  useBackground,
+  useFeatures,
+  useHeroMove,
+} from '../composables/home.js'
+
+const { Layout } = DefaultTheme
+// const route = useRoute()
+const { site, theme } = useData()
+const { base} = site.value
+const { logoImg } = theme.value
+const { flashEnable, flashStyle } = useFlash()
+const { bgEnable, bgStyle } = useBackground()
+const { ftStyle } = useFeatures()
+const { parallaxEnable, heroMove } = useHeroMove()
+
+const pageBgEnable = theme.value.pageBgEnable || true
+const pageBgOpacity = theme.value.pageBgOpacity || 0.8
+
+const logoSrc = `${base}${logoImg}`.replaceAll('//', '/')
+
+const renderHomeBg = () => {
+  const domStyle = document.documentElement.style
+  // 首页闪烁动画样式设置
+  if (flashEnable && flashStyle) {
+    domStyle.setProperty('--vt-bg-light', flashStyle)
+  }
+  // 文章背景图设置
+  if (pageBgEnable && pageBgOpacity)  {
+    domStyle.setProperty('--vt-bg-doc', `rgba(var(--vt-c-bg-rgb), ${pageBgOpacity})`)   
+  }
+  // 首页背景图设置
+  if (bgEnable && bgStyle) {
+    domStyle.setProperty('--vt-bg-content', bgStyle)
+  }
+  if (ftStyle) {
+    const vpFeat: any = document.getElementsByClassName('VPFeatures')[0]
+    const fs = vpFeat?.style
+    if (fs) fs.background = ftStyle
+  }
+}
+
+// const checkPath = (path: string) => {
+//   const homePaths = [base, `${base}index.html`, `${base}${lang}/`]
+//   const isHome = homePaths.includes(path)
+//   if (isHome) {
+//     nextTick(() => {
+//       renderHomeBg()
+//     })
+//   }
+// }
+
+// watch(
+//   () => route.path,
+//   (path) => {
+//     checkPath(path)
+//   }
+// )
+
+onMounted(() => {
+  renderHomeBg()
+  if (parallaxEnable) window.addEventListener('mousemove', heroMove)
+})
+
+onUnmounted(() => {
+  if (parallaxEnable) window.removeEventListener('mousemove', heroMove)
+})
+</script>
+
+<template>
+  <Layout>
+    <template #home-hero-before>
+      <img class="VPHeroLogo" :src="logoSrc" />
+      <slot name="home-hero-before" />
+    </template>
+  </Layout>
+</template>

packages/vuetom/doc/composables/home.ts

@@ -0,0 +1,144 @@
+import { useData } from 'vitepress'
+
+export function useFlash() {
+  const { site, theme } = useData()
+  const { base } = site.value
+  let { flashEnable, flashColor, bgImg } = theme.value
+  if (flashColor === undefined) flashColor = ['0,0,0', '0,0,0']
+  if (typeof flashColor === 'string') flashColor = [flashColor, flashColor]
+  let flashStyle = ''
+
+  if (bgImg && flashEnable) {
+    const bgImgSrc = (`${base}${bgImg}`).replaceAll('//', '/')
+    flashStyle = `
+      -webkit-linear-gradient(top,
+        rgba(${flashColor[0]}, 0.8) 0%,
+        rgba(${flashColor[0]}, 0.2) 20%,
+        rgba(${flashColor[0]}, 0) 80%,
+        rgba(${flashColor[0]}, 0) 100%
+      ),
+      -webkit-linear-gradient(left, 
+        rgba(${flashColor[1]}, 0) 0%, 
+        rgba(${flashColor[1]}, 0) 20%, 
+        rgba(${flashColor[1]}, 0.2) 80%, 
+        rgba(${flashColor[1]}, 0.8) 100%),
+        url(${bgImgSrc})
+    `
+  }
+
+  return {
+    flashEnable,
+    flashStyle,
+  }
+}
+
+export function useBackground() {
+  const { site, theme } = useData()
+  const { base } = site.value
+  let { bgImg, bgColor, bgOpacity } = theme.value
+  let bgEnable = false
+  let bgStyle = ''
+  let bgInnerOpacity = 0.3
+  if (bgImg) bgEnable = true
+  if (bgColor === undefined) bgColor = '0,0,0'
+  if (bgOpacity === undefined) bgOpacity = 0.6
+  bgInnerOpacity = bgOpacity - 0.3 <= 0 ? 0 : bgOpacity - 0.3
+  if (bgEnable) {
+    const bgImgSrc = (`${base}${bgImg}`).replaceAll('//', '/')
+    bgStyle = `
+      -webkit-linear-gradient(top,
+        rgba(${bgColor},${bgOpacity}) 0%,
+        rgba(${bgColor},${bgInnerOpacity}) 20%,
+        rgba(${bgColor},${bgInnerOpacity}) 80%,
+        rgba(${bgColor},${bgOpacity}) 100%
+      ),
+      -webkit-linear-gradient(left,
+        rgba(${bgColor},${bgOpacity}) 0%,
+        rgba(${bgColor},${bgInnerOpacity}) 20%,
+        rgba(${bgColor},${bgInnerOpacity}) 80%,
+        rgba(${bgColor},${bgOpacity}) 100%),
+      url(${bgImgSrc})
+    `
+  }
+  return {
+    bgEnable,
+    bgStyle,
+  }
+}
+
+export function useFeatures() {
+  const { theme } = useData()
+  let { featuresColor } = theme.value
+  let ftStyle = 'rgba(255,255,255,0.8)'
+  if (typeof featuresColor === 'string') {
+    ftStyle = featuresColor
+  } else if (typeof featuresColor === 'object') {
+    if (featuresColor.length >= 2) {
+      ftStyle = `
+        linear-gradient(to right,
+          ${featuresColor[0]},
+          ${featuresColor[1]}
+        )
+      `
+    }
+  }
+  return {
+    ftStyle,
+  }
+}
+
+export function useHeroMove() {
+  const { theme } = useData()
+  const { parallaxEnable } = theme.value
+  function heroMove(e: any) {
+    document
+      .querySelectorAll(
+        `
+        .VPHomeHero .name,
+        .VPHomeHero .text,
+        .VPHomeHero .tagline,
+        .VPHomeHero .VPButton,
+        .VPHome .VPHomeFeatures
+      `
+      )
+      .forEach((h: Element) => {
+        const hd: any = h
+        const speed: any = hd.getAttribute('data-speed') || 10
+        let x = (window.innerWidth - e.pageX * speed) / 100
+        let y = (window.innerHeight - e.pageY * speed) / 100
+        switch (hd.className.substring(0, 3).toUpperCase()) {
+          case 'VPF':
+            x /= 8
+            y /= 8
+            break
+          case 'TAG':
+            x /= 6
+            y /= 6
+            break
+          case 'TEX':
+            x /= 4
+            y /= 4
+            break
+          case 'VPB':
+            x /= 2
+            y /= 2
+            break
+          case 'NAM':
+            x /= 1
+            y /= 1
+            break
+          default:
+            break
+        }
+        const hds = hd?.style
+        if (hds) {
+          hds.transform = `translateX(${x}px) translateY(${y}px)`
+          hds.transition = 'transform 0.2s ease-out'
+        }
+      })
+  }
+  return {
+    parallaxEnable,
+    heroMove,
+  }
+}

packages/vuetom/doc/index.ts

@@ -0,0 +1,18 @@
+// vitepress styles ==> /dist/client/theme-default/styles
+import vitepressTheme from 'vitepress/theme'
+
+// for dev (prod should import .css)
+import '../styles/index.scss'
+import '../styles/rewrite/index.scss'
+
+import { Theme } from 'vitepress'
+import VTLayout from './components/VTLayout.vue'
+
+const DocsTheme: Theme = {
+  ...vitepressTheme,
+  Layout: VTLayout
+}
+
+export * from 'vitepress/theme'
+
+export default DocsTheme