feat: add note

.vitepress/theme/components/Home.vue

@@ -1,38 +1,61 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+
+import axios from 'axios'
+import 'animate.css'
+
 import NewsLetter from './NewsLetter.vue'
 import SponsorsGroup from './SponsorsGroup.vue'
-const epic = ref(' 世界上有10类人：一类是懂计算机的，一类是不懂的。')
 
 const url =
   'https://42541d62-1eb3-4f4a-b656-cc98d4542086.bspapp.com/http/epic'
+const storageKey = 'vue-theme-appearance'
+let userPreference = localStorage.getItem(storageKey) || 'auto'
+const epic = ref(' 世界上有10类人：一类是懂计算机的，一类是不懂的。')
+const appearance = ref(userPreference)
 
 const fetchepic = async () => {
-  const response = await fetch(url)
-  const res = await response.json()
-  const [_epic] = res.data
-  epic.value = _epic.contant
+  const response = await axios.get(url)
+  const [_epic] = response.data.data
+  epic.value = ''
+  setTimeout(() => {
+    epic.value = _epic.contant
+  }, 700)
 }
-const interval = setInterval(fetchepic, 10000)
+let interval = setInterval(fetchepic, 15000)
+onMounted(() => {
+  fetchepic()
+  window.addEventListener('storage', (e) => {
+    appearance.value = `${localStorage.getItem(storageKey)}`
+  })
+})
+
 onUnmounted(() => {
   clearInterval(interval)
+  window.removeEventListener('storage', () => {})
 })
 </script>
 
 <template>
   <div>
-    <Sence />
     <section id="hero">
       <h1 class="tagline">
         My
         <span class="accent">Life</span>
-        <br />Getting Better ☀️
+        <br />Getting Better
+        {{ appearance === 'auto' ? '☀️' : '🌙' }}
       </h1>
-      <p class="description">
-        {{ epic }}
-      </p>
+      <transition
+        enter-active-class="animate__animated animate__lightSpeedInLeft"
+        leave-active-class="animate__animated animate__lightSpeedOutRight"
+      >
+        <p class="description" v-if="epic">
+          {{ epic }}
+        </p>
+      </transition>
+
       <p class="actions">
-        <a class="get-started" href="/guide/introduction.html">
+        <a class="get-started" href="/cryptocurrency/money.html">
           立即探索
           <svg
             class="icon"
@@ -46,7 +69,7 @@ onUnmounted(() => {
             />
           </svg>
         </a>
-        <a class="setup" href="/guide/quick-start.html">开始阅读 ✍️</a>
+        <a class="setup" href="/note/cert.html">开始阅读 ✍️</a>
       </p>
     </section>
 
@@ -147,7 +170,10 @@ html:not(.dark) .accent,
   padding: 8px 18px;
   font-weight: 500;
   border-radius: 8px;
-  transition: background-color 0.5s, color 0.5s;
+  transition: background-color 0.5s, color 0.5s, scale 0.5s;
+}
+.actions a:active {
+  transform: scale(0.96);
 }
 
 .actions .get-started {

.vitepress/theme/components/NewsLetter.vue

@@ -13,7 +13,7 @@ import { VTLink } from '../lib/core'
           id="revue-form"
           name="revue-form"
           method="post"
-          action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
+          action="https://www.tigerzh.com/"
           rel="noopener"
           target="_blank"
         >

.vitepress/theme/lib/core/components/VTSwitchAppearance.vue

@@ -4,15 +4,17 @@ import VTIconSun from './icons/VTIconSun.vue'
 import VTIconMoon from './icons/VTIconMoon.vue'
 
 const storageKey = 'vue-theme-appearance'
-const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
+const toggle =
+  typeof localStorage !== 'undefined' ? useAppearance() : () => {}
 
 function useAppearance() {
   let userPreference = localStorage.getItem(storageKey) || 'auto'
   const query = window.matchMedia(`(prefers-color-scheme: dark)`)
   const classList = document.documentElement.classList
   let isDark =
     userPreference === 'auto' ? query.matches : userPreference === 'dark'
-  const setClass = (dark: boolean) => classList[dark ? 'add' : 'remove']('dark')
+  const setClass = (dark: boolean) =>
+    classList[dark ? 'add' : 'remove']('dark')
 
   query.onchange = (e) => {
     if (userPreference === 'auto') {
@@ -32,6 +34,7 @@ function useAppearance() {
         ? 'light'
         : 'auto')
     )
+    window.dispatchEvent(new Event('storage')) // <-----
   }
 
   return toggle

package.json

@@ -10,6 +10,8 @@
     "@docsearch/js": "3.0.0-alpha.50",
     "@vue/repl": "^1.0.0",
     "@vueuse/core": "^7.6.2",
+    "animate.css": "^4.1.1",
+    "axios": "^0.26.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",