Merge pull request #341 from vitest-dev/sync-2af12936-1

docs(en): merge docs-cn/sync-docs into docs-cn/dev @ 2af1293
vitest-dev · Nov 18, 2023 · f1ad0f7 · f1ad0f7
2 parents 328012f + 2a8efd4
commit f1ad0f7
Show file tree

Hide file tree

Showing 16 changed files with 405 additions and 165 deletions.
diff --git a/.vitepress/components/HomePage.vue b/.vitepress/components/HomePage.vue
@@ -1,85 +1,80 @@
 <script setup lang="ts">
-import { VPTeamMembers } from 'vitepress/theme'
+import { VPTeamMembers, VPHomeSponsors } from 'vitepress/theme'
 import { teamMembers } from '../contributors'
+import { sponsors } from '../sponsors'
 </script>
 
 <template>
   <div class="content">
     <div class="content-container">
       <main class="main">
-        <div class="vp-doc" flex flex-col items-center mt-10>
+        <div class="vp-doc" flex flex-col items-center>
           <h2 id="meet-the-team" op50 font-normal p="t-10 b-2">
             认识一下团队
           </h2>
           <div w-full p-10>
             <VPTeamMembers size="small" :members="teamMembers" />
           </div>
-          <h2 id="the-team" op50 font-normal pt-5 pb-2>
-            贡献者
-          </h2>
-          <p text-lg max-w-200 text-center leading-7>
-            <Contributors />
-            <br>
-            <a href="https://chat.vitest.dev" rel="noopener noreferrer">加入我们</a>将乐在其中！
-          </p>
-
-          <h2 id="sponsored-by" op50 font-normal pt-5 pb-2>
-            赞助商
-          </h2>
-          <div grid="~ cols-1 lg:cols-2" w-full text-center mt-10>
-            <div class="flex flex-col">
-              <a text-lg h="32px" href="https://github.com/sponsors/antfu" rel="noopener noreferrer">Anthony's 的赞助商</a>
-              <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg" target="_blank" rel="noopener noreferrer">
-                <img
-                  crossorigin="anonymous"
-                  inline-block
-                  width="768" height="1464"
-                  class="resizable-img"
-                  loading="lazy"
-                  src="/sponsors/antfu.svg"
-                  alt="Anthony Fu's sponsors"
-                  decoding="async"
-                >
-              </a>
-            </div>
-            <div class="flex flex-col">
-              <a text-lg h="32px" href="https://github.com/sponsors/sheremet-va" rel="noopener noreferrer">Vladimir's 的赞助商</a>
-              <a href="https://cdn.jsdelivr.net/gh/sheremet-va/static/sponsors.svg" target="_blank" rel="noopener noreferrer">
-                <img
-                  crossorigin="anonymous"
-                  inline-block
-                  width="768" height="1464"
-                  class="resizable-img"
-                  loading="lazy"
-                  src="/sponsors/sheremet-va.svg"
-                  alt="Vladimir's sponsors"
-                  decoding="async"
-                >
-              </a>
-            </div>
-            <div class="flex flex-col">
-              <a text-lg h="32px" href="https://github.com/sponsors/patak-dev" rel="noopener noreferrer">Patak's 的赞助商</a>
-              <a href="https://cdn.jsdelivr.net/gh/patak-dev/static/sponsors.svg" target="_blank" rel="noopener noreferrer">
-                <img
-                  crossorigin="anonymous"
-                  inline-block
-                  width="768" height="722"
-                  class="resizable-img"
-                  loading="lazy"
-                  src="/sponsors/patak-dev.svg"
-                  alt="Patak's sponsors"
-                  decoding="async"
-                >
-              </a>
-            </div>
-          </div>
-          <p class="text-center opacity-75">
-            <a href="https://www.netlify.com" rel="noopener noreferrer">
-              <img src="/netlify.svg" alt="Deploys by Netlify" width="114" height="151" decoding="async">
-            </a>
-          </p>
         </div>
+        <VPHomeSponsors
+          v-if="sponsors"
+          message="Vitest 是优秀的开源软件，这得益于这些出色的赞助商。"
+          :data="sponsors"
+        />
+        <div class="action">
+          <a
+            class="sponsor"
+            href="https://github.com/sponsors/vitest-dev"
+            target="_blank"
+            rel="noreferrer"
+          >
+            赞助 Vitest
+          </a>
+        </div>
+        <p flex flex-col items-center mt-10 class="text-center opacity-75">
+          <a href="https://www.netlify.com" rel="noopener noreferrer">
+            <img src="/netlify.svg" alt="Deploys by Netlify" width="114" height="151" decoding="async">
+          </a>
+        </p>
       </main>
     </div>
   </div>
 </template>
+
+<style scoped>
+.action {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding-top: 4rem;
+}
+
+.sponsor {
+  /* .VPButton */
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  /* .VPButton.medium */
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  /* .VPButton.sponsor */
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.sponsor:hover {
+  /* .VPButton.sponsor:hover */
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+</style>
diff --git a/.vitepress/components/ListItem.vue b/.vitepress/components/ListItem.vue
@@ -16,7 +16,7 @@ function reset() {
 
 const color = computed(() => {
   return {
-    '--vp-c-brand': state.value === 1
+    '--vp-c-brand-1': state.value === 1
       ? '#66ba1c'
       : state.value === 2
         ? 'rgba(248, 113, 113)'
@@ -50,21 +50,16 @@ onMounted(async () => {
       <div absolute transition duration-300 :class="state ? 'flip' : ''">
         <div i-carbon:circle-dash animate-spin animate-2s text-yellow4 />
       </div>
-      <div absolute transition duration-300 :class="state === 1 ? '' : 'flip'">
-        <div i-carbon:checkmark-outline class="text-$vp-c-brand" />
-      </div>
       <div absolute transition duration-300 :class="state === 2 ? '' : 'flip'">
         <div i-carbon:close-outline text-red4 />
       </div>
+      <div absolute transition duration-300 :class="state === 1 ? '' : 'flip'">
+        <div i-carbon:checkmark-outline class="text-$vp-c-brand-1" />
+      </div>
     </div>
     <div>
       <slot />
     </div>
   </li>
 </template>
 
-<style>
-.flip {
-  transform: rotateY(90deg);
-}
-</style>
diff --git a/.vitepress/contributors.ts b/.vitepress/contributors.ts
@@ -53,6 +53,16 @@ function createLinks(tm: CoreTeam): CoreTeam {
 }
 
 const plainTeamMembers: CoreTeam[] = [
+  {
+    avatar: contributorsAvatars['sheremet-va'],
+    name: 'Vladimir',
+    github: 'sheremet-va',
+    mastodon: 'https://elk.zone/m.webtoo.ls/@sheremet_va',
+    twitter: 'sheremet_va',
+    sponsor: 'https://github.com/sponsors/sheremet-va',
+    title: '全栈开源开发者',
+    desc: 'Vitest 的核心团队成员',
+  },
   {
     avatar: contributorsAvatars.antfu,
     name: 'Anthony Fu',
@@ -67,16 +77,6 @@ const plainTeamMembers: CoreTeam[] = [
     orgLink: 'https://nuxtlabs.com/',
     desc: 'Vite 和 Vue 的核心团队成员',
   },
-  {
-    avatar: contributorsAvatars['sheremet-va'],
-    name: 'Vladimir',
-    github: 'sheremet-va',
-    mastodon: 'https://elk.zone/m.webtoo.ls/@sheremet_va',
-    twitter: 'sheremet_va',
-    sponsor: 'https://github.com/sponsors/sheremet-va',
-    title: '全栈开源开发者',
-    desc: 'Vitest 的核心团队成员',
-  },
   {
     avatar: contributorsAvatars.AriPerkkio,
     name: 'Ari Perkkiö',

diff --git a/.vitepress/scripts/pwa.ts b/.vitepress/scripts/pwa.ts
@@ -68,6 +68,8 @@ export const pwa: PwaOptions = {
     // warning: sponsors/antfu.svg is 2.51 MB, and won't be precached
     maximumFileSizeToCacheInBytes: 3 * 1024 * 1024, // <== 3MB
     globPatterns: ['**/*.{css,js,html,png,svg,ico,txt,woff2,json}'],
+    // Rollup 4 change the layout: don't calculate revision (hash)
+    dontCacheBustURLsMatching: /^assets\//,
     runtimeCaching: [
       {
         urlPattern: pwaFontsRegex,

diff --git a/.vitepress/sponsors.ts b/.vitepress/sponsors.ts
@@ -0,0 +1,62 @@
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+const vitestSponsors = {
+  special: [
+    {
+      name: 'Vite',
+      url: 'https://vitejs.dev',
+      img: '/vite.svg',
+    },
+    {
+      name: 'NuxtLabs',
+      url: 'https://nuxtlabs.com',
+      img: '/nuxtlabs.svg',
+    },
+    {
+      name: 'Stackblitz',
+      url: 'https://stackblitz.com',
+      img: '/stackblitz.svg',
+    },
+    {
+      name: 'Zammad',
+      url: 'https://zammad.com',
+      img: '/zammad.svg',
+    },
+  ],
+  platinum: [
+    {
+      name: 'Bit',
+      url: 'https://bit.dev',
+      img: '/bit.svg',
+    },
+  ],
+  gold: [
+    {
+      name: 'InfoSupport',
+      url: 'https://www.infosupport.com/open-source/',
+      img: '/infosupport.svg',
+    },
+  ],
+} satisfies Record<string, Sponsor[]>
+
+export const sponsors = [
+  {
+    tier: 'Special Sponsors',
+    size: 'big',
+    items: vitestSponsors.special,
+  },
+  {
+    tier: 'Platinum Sponsors',
+    size: 'big',
+    items: vitestSponsors.platinum,
+  },
+  {
+    tier: 'Gold Sponsors',
+    size: 'medium',
+    items: vitestSponsors.gold,
+  },
+]
diff --git a/.vitepress/style/main.css b/.vitepress/style/main.css
@@ -8,6 +8,28 @@ html:not(.dark) [img-dark] {
 
 /* Overrides */
 
+.vp-doc ul.features-list {
+  padding: 0;
+}
+.vp-doc ul.features-list li {
+  list-style: none;
+  display: flex;
+  gap: 0.4rem;
+  margin: 0;
+}
+.vp-doc ul.features-list li div:first-of-type {
+  position: relative;
+}
+.vp-doc ul.features-list li div:first-of-type div {
+  position: absolute;
+}
+.vp-doc ul.features-list li div:first-of-type div.flip {
+  transform: rotateY(90deg);
+}
+.vp-doc ul.features-list li div:first-of-type div div {
+  position: unset;
+}
+
 .sp .sp-link.link:hover,
 .sp .sp-link.link:focus {
   background-color: var(--vitest-c-sponsor-hover) !important;