Upgrade docs.

docs/.gitignore

@@ -2,3 +2,4 @@ node_modules/
 package-lock.json
 yarn-error.log
 .vitepress/dist/
+.vitepress/cache/

docs/.vitepress/theme/components/SponsorsGroup.vue

@@ -1,4 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
+import { defineProps, onMounted, onUnmounted, ref } from 'vue';
 interface Sponsor {
   url: string
   img: string
@@ -15,20 +16,16 @@ interface SponsorData {
 }
 
 // shared data across instances so we load only once
-let data = $ref<SponsorData>()
+let data = ref<SponsorData>()
 let pending = false
-</script>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
 
 const { tier, placement = 'aside' } = defineProps<{
   tier: keyof SponsorData
   placement?: 'aside' | 'page' | 'landing'
 }>()
 
-let container = $ref<HTMLElement>()
-let visible = $ref(false)
+let container = ref<HTMLElement>()
+let visible = ref(false)
 
 onMounted(async () => {
   // only render when entering view
@@ -53,35 +50,17 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div
-    ref="container"
-    class="sponsor-container"
-    :class="[tier.startsWith('plat') ? 'platinum' : tier, placement]"
-  >
+  <div ref="container" class="sponsor-container" :class="[tier.startsWith('plat') ? 'platinum' : tier, placement]">
     <template v-if="data && visible">
-      <a
-        v-for="{ url, img, name } of data[tier]"
-        class="sponsor-item"
-        :href="url"
-        target="_blank"
-        rel="sponsored noopener"
-      >
+      <a v-for="{ url, img, name } of data[tier]" class="sponsor-item" :href="url" target="_blank" rel="sponsored noopener">
         <picture v-if="img.endsWith('png')">
-          <source
-            type="image/avif"
-            :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
-          />
+          <source type="image/avif" :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`" />
           <img :src="`${base}/images/${img}`" :alt="name" />
         </picture>
         <img v-else :src="`${base}/images/${img}`" :alt="name" />
       </a>
     </template>
-    <a
-      v-if="placement !== 'page' && tier !== 'special'"
-      href="https://github.com/sponsors/overtrue"
-      class="sponsor-item action"
-      >Your logo</a
-    >
+    <a v-if="placement !== 'page' && tier !== 'special'" href="https://github.com/sponsors/overtrue" class="sponsor-item action">Your logo</a>
   </div>
 </template>
 
@@ -96,9 +75,11 @@ onMounted(async () => {
 .sponsor-container.platinum {
   --max-width: 240px;
 }
+
 .sponsor-container.gold {
   --max-width: 180px;
 }
+
 .sponsor-container.silver {
   --max-width: 140px;
 }
@@ -113,17 +94,21 @@ onMounted(async () => {
   transition: background-color 0.2s ease;
   height: calc(var(--max-width) / 2 - 6px);
 }
+
 .sponsor-item.action {
   font-size: 11px;
   color: var(--vt-c-text-3);
 }
+
 .sponsor-item img {
   max-width: calc(var(--max-width) - 30px);
   max-height: calc(var(--max-width) / 2 - 20px);
 }
+
 .special .sponsor-item {
   height: 160px;
 }
+
 .special .sponsor-item img {
   max-width: 300px;
   max-height: 150px;
@@ -134,19 +119,23 @@ onMounted(async () => {
 .dark .landing .sponsor-item {
   background-color: var(--vt-c-bg-soft);
 }
+
 .aside .sponsor-item img,
 .landing .sponsor-item img {
   transition: filter 0.2s ease;
 }
+
 .dark .aside .sponsor-item img,
 .dark .landing .sponsor-item img {
   filter: grayscale(1) invert(1);
 }
+
 .dark .aside .sponsor-item:hover,
 .dark .landing .sponsor-item:hover {
   color: var(--vt-c-indigo);
   background-color: var(--vt-c-white-mute);
 }
+
 .dark .sponsor-item:hover img {
   filter: none;
 }
@@ -156,20 +145,25 @@ onMounted(async () => {
   --max-width: 110px;
   column-gap: 1px;
 }
+
 .aside .sponsor-item {
   margin: 1px 0;
 }
+
 .aside .special .sponsor-item {
   width: 100%;
   height: 60px;
 }
+
 .aside .special .sponsor-item img {
   width: 120px;
 }
+
 .aside .platinum .sponsor-item {
   width: 111px;
   height: 50px;
 }
+
 .aside .platinum .sponsor-item img {
   max-width: 88px;
 }
@@ -179,9 +173,11 @@ onMounted(async () => {
   .sponsor-container.platinum {
     --max-width: 180px;
   }
+
   .sponsor-container.gold {
     --max-width: 140px;
   }
+
   .sponsor-container.silver {
     --max-width: 120px;
   }
@@ -191,9 +187,11 @@ onMounted(async () => {
   .sponsor-container.platinum {
     --max-width: 150px;
   }
+
   .sponsor-container.gold {
     --max-width: 120px;
   }
+
   .sponsor-container.silver {
     --max-width: 100px;
   }

docs/package.json

@@ -6,19 +6,19 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.17",
     "clipboard": "^2.0.11",
     "dynamics.js": "^1.1.5",
-    "gsap": "^3.11.3",
-    "tailwindcss": "^3.1.8"
+    "gsap": "^3.12.5",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^16.11.65",
-    "vitepress": "1.0.0-alpha.21",
-    "postcss": "^8.4.31",
+    "@types/node": "^16.18.74",
+    "postcss": "^8.4.33",
     "postcss-import": "^14.1.0",
-    "terser": "^5.15.1"
+    "terser": "^5.27.0",
+    "vitepress": "1.0.0-rc.39"
   },
   "pnpm": {
     "peerDependencyRules": {