m9ve website code outsidr

website/theme/Layout.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { BProgress } from '@bprogress/core'
+import DefaultTheme from 'vitepress/theme'
+import Announcement from './components/Announcement.vue'
+import Sidebar from './components/SidebarCard.vue'
+
+import '@bprogress/core/css'
+
+const { isDark } = useData()
+
+const router = useRouter()
+
+BProgress.configure({
+  showSpinner: false,
+  easing: 'ease'
+})
+
+router.onBeforeRouteChange = () => {
+  BProgress.start()
+}
+
+router.onAfterRouteChange = () => {
+  BProgress.done()
+}
+
+const enableTransitions = () =>
+  'startViewTransition' in document &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+    )}px at ${x}px ${y}px)`
+  ]
+
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+    }
+  )
+})
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #sidebar-nav-after>
+      <Sidebar />
+    </template>
+    <template #home-hero-info-before>
+      <Announcement />
+    </template>
+    <template #home-features-before>
+      <p class="text-center text-lg text-text-2 mb-2">
+        Or browse these pages
+        <span class="inline-block i-twemoji:sparkles" />
+      </p>
+    </template>
+    <Content />
+  </Layout>
+</template>
+
+<style>
+:root {
+  --bprogress-color: var(--vp-c-brand);
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+}
+</style>