@dengzhibo/vitepress-example 0.0.1 → 0.0.2

package/.env.development

@@ -0,0 +1,3 @@
+# 开发环境：图片基础路径，指向本地 E 盘素材目录
+# 用正斜杠，Windows 同样兼容，且与 CDN URL 格式一致
+IMAGES=E:/project_assets/images/docs/resources

package/.env.production

@@ -0,0 +1,3 @@
+# 生产环境：图片走 CDN / 对象存储
+# 上线前改成你的真实 CDN 地址
+IMAGES=https://cdn.example.com/images

package/.vitepress/config/nav.ts

@@ -0,0 +1,18 @@
+import type { NavItem, Sidebar } from 'vitepress'
+
+// 头部导航栏
+export const nav: NavItem[] = [
+    { text: 'Home', link: '/api-examples' },
+    { text: 'Examples', link: '/markdown-examples' }
+];
+
+// 侧边栏
+export const sidebar: Sidebar = [
+    {
+        text: 'Examples',
+        items: [
+            { text: 'Markdown Examples', link: '/markdown-examples' },
+            { text: 'Runtime API Examples', link: '/api-examples' }
+        ]
+    }
+];

package/.vitepress/config/search.ts

@@ -0,0 +1,65 @@
+import type { DefaultTheme } from 'vitepress'
+
+// 搜索框
+export const searchOptions: DefaultTheme.AlgoliaSearchOptions = {
+    placeholder: '搜索文档',
+    translations: {
+        button: {
+            buttonText: '搜索文档',
+            buttonAriaLabel: '搜索文档',
+        },
+        modal: {
+            searchBox: {
+                resetButtonTitle: '清除查询条件',
+                resetButtonAriaLabel: '清除查询条件',
+                cancelButtonText: '取消',
+                cancelButtonAriaLabel: '取消',
+            },
+            startScreen: {
+                recentSearchesTitle: '搜索历史',
+                noRecentSearchesText: '没有搜索历史',
+                saveRecentSearchButtonTitle: '保存至搜索历史',
+                removeRecentSearchButtonTitle: '从搜索历史中移除',
+                favoriteSearchesTitle: '收藏',
+                removeFavoriteSearchButtonTitle: '从收藏中移除',
+            },
+            errorScreen: {
+                titleText: '无法获取结果',
+                helpText: '你可能需要检查你的网络连接',
+            },
+            footer: {
+                selectText: '选择',
+                navigateText: '切换',
+                closeText: '关闭',
+                searchByText: '搜索供应商',
+            },
+            noResultsScreen: {
+                noResultsText: '无法找到相关结果',
+                suggestedQueryText: '你可以尝试查询',
+                reportMissingResultsText: '你认为该查询应该有结果？',
+                reportMissingResultsLinkText: '点击反馈',
+            },
+        },
+    },
+}
+
+// 设置搜索框的样式（简易版）
+export const search = {
+    provider: "local",
+    options: {
+        translations: {
+            button: {
+                buttonText: "搜索文档",
+                buttonAriaLabel: "搜索文档",
+            },
+            modal: {
+                noResultsText: "无法找到相关结果",
+                resetButtonTitle: "清除查询条件",
+                footer: {
+                    selectText: "选择",
+                    navigateText: "切换",
+                },
+            },
+        },
+    },
+},

package/.vitepress/config.ts

@@ -4,10 +4,14 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   title: "My Awesome Project",
   description: "A VitePress Site",
+  // 源文件目录配置（读取index.md文件）
+  srcDir: "./src",
+  
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
+      { text: '动画效果', link: '/animations/gsap' },
       { text: 'Examples', link: '/markdown-examples' }
     ],
 

package/.vitepress/theme/components/gsap/AnimateWatcher.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import gsap from 'gsap'
+
+const number = ref(0)
+const tweened = reactive({
+  number: 0
+})
+
+watch(
+  number,
+  (n) => {
+    gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
+  }
+)
+</script>
+
+<template>
+  <div class="demo">
+    Type a number: <input v-model.number="number" />
+    <p class="big-number">{{ tweened.number.toFixed(0) }}</p>
+  </div>
+</template>
+
+<style>
+.big-number {
+  font-weight: bold;
+  font-size: 2em;
+}
+</style>

package/.vitepress/theme/components/gsap/JsHooks.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue'
+import gsap from 'gsap'
+
+const show = ref(true)
+
+function onBeforeEnter(el) {
+  gsap.set(el, {
+    scaleX: 0.25,
+    scaleY: 0.25,
+    opacity: 1
+  })
+}
+
+function onEnter(el, done) {
+  gsap.to(el, {
+    duration: 1,
+    scaleX: 1,
+    scaleY: 1,
+    ease: 'elastic.inOut(2.5, 1)',
+    onComplete: done
+  })
+}
+
+function onLeave(el, done) {
+  gsap.to(el, {
+    duration: 0.7,
+    scaleX: 1,
+    scaleY: 1,
+    x: 300,
+    ease: 'elastic.inOut(2.5, 1)'
+  })
+  gsap.to(el, {
+    duration: 0.2,
+    delay: 0.5,
+    opacity: 0,
+    onComplete: done
+  })
+}
+</script>
+
+<template>
+  <div class="demo">
+    <button @click="show = !show">Toggle</button>
+
+    <Transition
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @leave="onLeave"
+      :css="false"
+    >
+      <div class="gsap-box" v-if="show"></div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+.gsap-box {
+  background: var(--vt-c-green);
+  margin-top: 20px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+</style>

package/.vitepress/theme/components/gsap/ListStagger.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, computed } from 'vue'
+import gsap from 'gsap'
+
+const list = [
+  { msg: 'Bruce Lee' },
+  { msg: 'Jackie Chan' },
+  { msg: 'Chuck Norris' },
+  { msg: 'Jet Li' },
+  { msg: 'Kung Fury' }
+]
+
+const query = ref('')
+
+const computedList = computed(() => {
+  return list.filter((item) => item.msg.toLowerCase().includes(query.value.toLowerCase()))
+})
+
+function onBeforeEnter(el) {
+  el.style.opacity = 0
+  el.style.height = 0
+}
+
+function onEnter(el, done) {
+  gsap.to(el, {
+    opacity: 1,
+    height: '1.6em',
+    delay: el.dataset.index * 0.15,
+    onComplete: done
+  })
+}
+
+function onLeave(el, done) {
+  gsap.to(el, {
+    opacity: 0,
+    height: 0,
+    delay: el.dataset.index * 0.15,
+    onComplete: done
+  })
+}
+</script>
+
+<template>
+  <div class="demo" style="height: 265px">
+    <input v-model="query" style="margin-bottom: 20px" />
+    <TransitionGroup
+      tag="ul"
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @leave="onLeave"
+    >
+      <li
+        v-for="(item, index) in computedList"
+        :key="item.msg"
+        :data-index="index"
+      >
+        {{ item.msg }}
+      </li>
+    </TransitionGroup>
+  </div>
+</template>

package/.vitepress/theme/index.ts

@@ -2,7 +2,7 @@
 import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import './style.css'
+import './styles/style.css'
 
 export default {
   extends: DefaultTheme,

package/.vitepress/theme/{style.css → styles/style.css}

@@ -24,7 +24,7 @@
  *
  *   The soft color must be semi transparent alpha channel. This is crucial
  *   because it allows adding multiple "soft" colors on top of each other
- *   to create an accent, such as when having inline code block inside
+ *   to create a accent, such as when having inline code block inside
  *   custom containers.
  *
  * - `default`: The color used purely for subtle indication without any
@@ -106,13 +106,13 @@
   --vp-home-hero-image-filter: blur(44px);
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 640px) {
   :root {
     --vp-home-hero-image-filter: blur(56px);
   }
 }
 
-@media (min-width: 60rem) {
+@media (min-width: 960px) {
   :root {
     --vp-home-hero-image-filter: blur(68px);
   }
@@ -129,3 +129,11 @@
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 }
 
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "@dengzhibo/vitepress-example",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@vue/repl": "^4.7.2",
+    "dynamics.js": "^1.1.5",
+    "gsap": "^3.15.0",
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14.2.0",
+    "@types/node": "^22.20.2",
+    "typescript": "^6.0.3",
+    "vitepress": "2.0.0-alpha.20",
+    "vue-tsc": "^3.3.11"
+  },
   "devEngines": {
     "packageManager": {
       "name": "pnpm",
@@ -13,9 +26,6 @@
       "onFail": "download"
     }
   },
-  "devDependencies": {
-    "vitepress": "2.0.0-alpha.20"
-  },
   "scripts": {
     "dev": "vitepress dev",
     "build": "vitepress build",

package/src/animations/gsap.md

@@ -0,0 +1,18 @@
+# gsap 动画演示
+
+```
+<script setup>
+import AnimateWatcher from '../.vitepress/theme/components/gsap/AnimateWatcher.vue'
+import JsHooks from '../.vitepress/theme/components/gsap/JsHooks.vue'
+import ListStagger from '../.vitepress/theme/components/gsap/ListStagger.vue'
+</script>
+```
+
+### 示例1：AnimateWatcher
+<AnimateWatcher />
+
+### 示例2：JsHooks
+<JsHooks />
+
+### 示例3：ListStagger 交错动画
+<ListStagger />

package/src/index.md

@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "My Awesome Project"
+  text: "A VitePress Site"
+  tagline: My great project tagline
+  actions:
+    - theme: brand
+      text: Markdown Examples
+      link: /markdown-examples
+    - theme: alt
+      text: API Examples
+      link: /api-examples
+
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
+

package/.vitepress/cache/deps/_metadata.json

@@ -1,32 +0,0 @@
-{
-  "hash": "348f1bd3",
-  "configHash": "6ce5dbd8",
-  "lockfileHash": "895fc289",
-  "browserHash": "ea08553c",
-  "optimized": {
-    "vitepress > @vue/devtools-api": {
-      "src": "../../../node_modules/.pnpm/@vue+devtools-api@8.2.1/node_modules/@vue/devtools-api/dist/index.js",
-      "file": "vitepress_n_@vue_devtools-api.js",
-      "fileHash": "114dcc10",
-      "needsInterop": false
-    },
-    "vitepress > @vueuse/core": {
-      "src": "../../../node_modules/.pnpm/@vueuse+core@14.4.0_vue@3.5.42/node_modules/@vueuse/core/dist/index.js",
-      "file": "vitepress_n_@vueuse_core.js",
-      "fileHash": "ac4427d6",
-      "needsInterop": false
-    },
-    "vue": {
-      "src": "../../../node_modules/.pnpm/vue@3.5.42/node_modules/vue/dist/vue.runtime.esm-bundler.js",
-      "file": "vue.js",
-      "fileHash": "6ece4373",
-      "needsInterop": false
-    }
-  },
-  "chunks": {
-    "vue.runtime.esm-bundler-D-XhGYqL": {
-      "file": "vue.runtime.esm-bundler-D-XhGYqL.js",
-      "isDynamicEntry": false
-    }
-  }
-}

package/.vitepress/cache/deps/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "module"
-}