release: v2.8.2

.vitepress/config.js

@@ -13,6 +13,9 @@ module.exports = {
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
     ['script', { src: 'https://cdn.wwads.cn/js/makemoney.js', async: '' }]
   ],
+  vue: {
+    reactivityTransform: true
+  },
   themeConfig: {
     repo: pkg.repository,
     logo: '/logo.svg',

.vitepress/theme/SponsorsGroup.vue

@@ -0,0 +1,137 @@
+<script lang="ts">
+// shared data across instances so we load only once
+let data = $ref<SponsorData>()
+
+const base = `https://sponsors.vuejs.org`
+const dataUrl = `${base}/vite.json`
+</script>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
+interface Sponsor {
+  url: string
+  img: string
+  name: string
+}
+
+interface SponsorData {
+  special: Sponsor[]
+  platinum: Sponsor[]
+  platinum_china: Sponsor[]
+  gold: Sponsor[]
+  silver: Sponsor[]
+  bronze: Sponsor[]
+}
+
+const { tier, placement = 'aside' } = defineProps<{
+  tier: keyof SponsorData
+  placement?: 'aside' | 'page' | 'landing'
+}>()
+
+let container = $ref<HTMLElement>()
+let visible = $ref(false)
+
+onMounted(async () => {
+  // only render when entering view
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting) {
+        visible = true
+        observer.disconnect()
+      }
+    },
+    { rootMargin: '0px 0px 300px 0px' }
+  )
+  observer.observe(container)
+  onUnmounted(() => observer.disconnect())
+
+  // load data
+  if (!data) {
+    data = await (await fetch(dataUrl)).json()
+  }
+})
+</script>
+
+<template>
+  <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"
+      >
+        <picture v-if="img.endsWith('png')">
+          <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>
+  </div>
+</template>
+
+<style scoped>
+.sponsor-container {
+  --max-width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.sponsor-container.platinum {
+  --max-width: 260px;
+}
+.sponsor-container.gold {
+  --max-width: 160px;
+}
+.sponsor-container.silver {
+  --max-width: 140px;
+}
+
+.sponsor-item {
+  margin: 2px 0;
+  display: flex;
+  align-items: center;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+  height: calc(var(--max-width) / 2 - 6px);
+}
+.sponsor-item.action {
+  font-size: 11px;
+  color: #999;
+}
+.sponsor-item img {
+  width: 100%;
+  max-width: calc(var(--max-width) - 30px);
+  max-height: calc(var(--max-width) / 2 - 20px);
+  margin: 10px 20px;
+}
+.special .sponsor-item {
+  height: 160px;
+}
+.special .sponsor-item img {
+  max-width: 300px;
+  max-height: 150px;
+}
+
+/* aside mode (on content pages) */
+.sponsor-container.platinum.aside {
+  --max-width: 200px;
+}
+.sponsor-container.gold.aside {
+  --max-width: 124px;
+}
+.aside .sponsor-item {
+  margin: 0;
+}
+</style>

.vitepress/theme/SponsorsSidebar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import SponsorsGroup from './SponsorsGroup.vue'
+import { useData } from 'vitepress'
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div v-if="frontmatter.sponsors !== false">
+    <a
+      class="sponsors-aside-text"
+      href="https://github.com/sponsors/yyx990803"
+      target="_blank"
+      >Sponsors</a
+    >
+    <SponsorsGroup tier="platinum" />
+    <SponsorsGroup tier="gold" />
+  </div>
+</template>
+
+<style>
+a.sponsors-aside-text {
+  color: #999;
+  display: block;
+  margin: 3em 0 1em;
+  font-weight: 700;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  padding-left: 2em;
+}
+</style>

.vitepress/theme/index.js

@@ -1,47 +1,14 @@
 import Theme from 'vitepress/theme'
 import { h } from 'vue'
-import sponsors from './sponsors.json'
-import './sponsors.css'
+import SponsorsSidebar from './SponsorsSidebar.vue'
 import './custom.css'
 
 export default {
   ...Theme,
   Layout() {
     return h(Theme.Layout, null, {
       'sidebar-bottom': () =>
-        h('div', { class: 'sponsors sidebar' }, [
-          h(
-            'a',
-            {
-              href: 'https://github.com/sponsors/yyx990803',
-              target: '_blank',
-              rel: 'noopener'
-            },
-            [h('span', 'Sponsors')]
-          ),
-          ...sponsors.map(({ href, src, name, id }) =>
-            h(
-              'a',
-              {
-                href,
-                target: '_blank',
-                rel: 'noopener',
-                'aria-label': 'sponsor-img'
-              },
-              [h('img', { src, alt: name, id: `sponsor-${id}` })]
-            )
-          )
-        ]),
-      'page-top-ads': () =>
-        h('div', { id: 'wwads-container' }, [
-          h('div', {
-            class: 'wwads-cn wwads-vertical',
-            'data-id': 111,
-            style: {
-              maxWidth: '150px'
-            }
-          })
-        ])
+        h('div', { class: 'sponsors sidebar' }, [h(SponsorsSidebar)])
     })
   }
 }

config/index.md

@@ -477,6 +477,11 @@ export default defineConfig(async ({ command, mode }) => {
           configure: (proxy, options) => {
             // proxy 是 'http-proxy' 的实例
           }
+        },
+        // Proxying websockets or socket.io
+        '/socket.io': {
+          target: 'ws://localhost:3000',
+          ws: true
         }
       }
     }
@@ -587,6 +592,7 @@ createServer()
 
   - 在 `package.json` 中包含 `workspaces` 字段
   - 包含以下几种文件之一
+    - `lerna.json`
     - `pnpm-workspace.yaml`
 
   接受一个路径作为自定义工作区的 root 目录。可以是绝对路径或是相对于 [项目 root 目录](/guide/#index-html-and-project-root) 的相对路径。示例如下：
@@ -761,19 +767,19 @@ export default defineConfig({
 
 ### build.manifest {#build-manifest}
 
-- **类型：** `boolean`
+- **类型：** `boolean | string`
 - **默认：** `false`
 - **相关内容：** [后端集成](/guide/backend-integration)
 
-  当设置为 `true`，构建后将会生成 `manifest.json` 文件，包含了没有被 hash 的资源文件名和 hash 后版本的映射。可以为一些服务器框架渲染时提供正确的资源引入链接。
+  当设置为 `true`，构建后将会生成 `manifest.json` 文件，包含了没有被 hash 过的资源文件名和 hash 后版本的映射。可以为一些服务器框架渲染时提供正确的资源引入链接。当该值为一个字符串时，它将作为 manifest 文件的名字。
 
 ### build.ssrManifest {#build-ssrmanifest}
 
-- **类型：** `boolean`
+- **类型：** `boolean | string`
 - **默认值：** `false`
-- **相关链接：** [Server-Side Rendering](/guide/ssr)
+- **相关链接：** [服务端渲染](/guide/ssr)
 
-  当设置为 `true` 时，构建也将生成 SSR 的 manifest 文件，以确定生产中的样式链接与资产预加载指令。
+  当设置为 `true` 时，构建也将生成 SSR 的 manifest 文件，以确定生产中的样式链接与资产预加载指令。当该值为一个字符串时，它将作为 manifest 文件的名字。
 
 ### build.ssr {#build-ssr}