docs: new theme (#1416)

vitest-dev · Jun 3, 2022 · 6e6d63c · 6e6d63c
1 parent 4b54aed
commit 6e6d63c
Show file tree

Hide file tree

Showing 33 changed files with 725 additions and 529 deletions.
diff --git a/docs/components.d.ts → docs/.vitepress/components.d.ts b/docs/components.d.ts → docs/.vitepress/components.d.ts
@@ -5,13 +5,13 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Avatar: typeof import('./src/components/Avatar.vue')['default']
-    Contributors: typeof import('./src/components/Contributors.vue')['default']
-    FeaturesList: typeof import('./src/components/FeaturesList.vue')['default']
-    Home: typeof import('./src/components/Home.vue')['default']
-    ListItem: typeof import('./src/components/ListItem.vue')['default']
+    Contributors: typeof import('./components/Contributors.vue')['default']
+    FeaturesList: typeof import('./components/FeaturesList.vue')['default']
+    HomePage: typeof import('./components/HomePage.vue')['default']
+    ListItem: typeof import('./components/ListItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TeamMember: typeof import('./components/TeamMember.vue')['default']
   }
 }
 

diff --git a/docs/src/components/Contributors.vue → docs/.vitepress/components/Contributors.vue b/docs/src/components/Contributors.vue → docs/.vitepress/components/Contributors.vue
@@ -3,9 +3,9 @@ import { contributors } from '../contributors'
 </script>
 
 <template>
-  <div flex="~ wrap gap-1" justify-center>
+  <div flex="~ wrap gap2" justify-center>
     <a v-for="{ name, avatar } of contributors" :key="name" :href="`https://github.com/${name}`" m-0 rel="noopener noreferrer" :aria-label="`${name} on GitHub`">
-      <img loading="lazy" :src="avatar" width="40" height="40" rounded-full min-w-10 min-h-10 h-10 w-10 :alt="`${name}'s avatar`">
+      <img loading="lazy" :src="avatar" width="50" height="50" rounded-full h-12 w-12 :alt="`${name}'s avatar`">
     </a>
   </div>
 </template>
diff --git a/docs/src/components/FeaturesList.vue → docs/.vitepress/components/FeaturesList.vue b/docs/src/components/FeaturesList.vue → docs/.vitepress/components/FeaturesList.vue
@@ -2,7 +2,7 @@
   <ul
     class="features-list"
     dir="auto"
-    flex="~ col gap-5 md:gap-3"
+    flex="~ col gap2 md:gap-3"
   >
     <ListItem><a target="_blank" href="https://vitejs.dev" rel="noopener noreferrer">Vite</a>'s config, transformers, resolvers, and plugins.</ListItem>
     <ListItem>Use the same setup from your app to run the tests!</ListItem>
@@ -26,6 +26,7 @@
   list-style: none;
   display: flex;
   gap: 0.4rem;
+  margin: 0;
 }
 
 .features-list {

diff --git a/docs/.vitepress/components/HomePage.vue b/docs/.vitepress/components/HomePage.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { teamMembers } from '../contributors'
+</script>
+
+<template>
+  <div class="content">
+    <div class="content-container">
+      <main class="main">
+        <div class="vp-doc" flex flex-col items-center mt-10>
+          <h2 id="meet-the-team" op50 font-normal p="t-10 b-2">
+            Meet The Team
+          </h2>
+          <div grid="~ cols-1 md:cols-2 lg:cols-3 gap-x-10 gap-y-10 items-center" p-10>
+            <TeamMember
+              v-for="c of teamMembers"
+              :key="c.github"
+              v-bind="c"
+            />
+          </div>
+          <h2 id="the-team" op50 font-normal pt-5 pb-2>
+            Contributors
+          </h2>
+          <p text-lg max-w-200 text-center leading-7>
+            <Contributors />
+            <br>
+            <a href="https://chat.vitest.dev" rel="noopener noreferrer">Join the community</a> and get involved!
+          </p>
+
+          <h2 id="sponsored-by" op50 font-normal pt-5 pb-2>
+            Sponsored by
+          </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 Sponsors</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"
+                >
+              </a>
+            </div>
+            <div class="flex flex-col">
+              <a text-lg h="32px" href="https://github.com/sponsors/patak-dev" rel="noopener noreferrer">Patak's Sponsors</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"
+                >
+              </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">
+            </a>
+          </p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/docs/src/components/ListItem.vue → docs/.vitepress/components/ListItem.vue b/docs/src/components/ListItem.vue → docs/.vitepress/components/ListItem.vue
@@ -51,7 +51,7 @@ onMounted(async () => {
         <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 text-green4 />
+        <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 />

diff --git a/docs/.vitepress/components/TeamMember.vue b/docs/.vitepress/components/TeamMember.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { CoreTeam } from '../contributors'
+
+defineProps<{
+  avatar: CoreTeam['avatar']
+  name: CoreTeam['name']
+  github: CoreTeam['github']
+  twitter: CoreTeam['twitter']
+  sponsors: CoreTeam['sponsors']
+  description: CoreTeam['description']
+}>()
+</script>
+
+<template>
+  <div text-left flex="~ row gap6" relative>
+    <img
+      loading="lazy"
+      width="100" height="100"
+      rounded-full min-w-25 min-h-25 h-25 w-25
+      inline-block
+      :src="avatar"
+      :alt="`${name}'s avatar`"
+    >
+    <div flex="~ col gap2">
+      <div text-2xl>
+        {{ name }}
+      </div>
+      <div op60 v-html="description" />
+      <div flex="~ inline gap-2" text-2xl>
+        <a
+          class="i-carbon-logo-github inline-block !text-current op30 hover:op100 mya transition duration-200"
+          :href="`https://github.com/${github}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          :aria-label="`${name} on GitHub`"
+        />
+        <a
+          v-if="twitter"
+          class="i-carbon-logo-twitter inline-block text-1.3em mya !text-current op30 hover:op100 transition duration-200"
+          :href="`https://twitter.com/${twitter}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          :aria-label="`${name} on Twitter`"
+        />
+      </div>
+    </div>
+    <a
+      v-if="sponsors"
+      class="btn bg-pink-500 hover:bg-pink-600 text-sm !text-white px3 absolute top-1 right-1"
+      flex="~ row gap-2"
+      target="_blank"
+      rel="noopener noreferrer"
+      :href="`https://github.com/sponsors/${github}`"
+    >
+      <span class="i-carbon-favorite-filled" />
+      Sponsor
+    </a>
+  </div>
+</template>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -4,23 +4,25 @@ import {
   contributing,
   discord,
   font,
+  github,
   ogImage,
   ogUrl,
   releases,
   twitter,
   vitestDescription,
   vitestName,
-} from '../docs-data'
-import { coreTeamMembers } from '../src/contributors'
+} from './meta'
+import { teamMembers } from './contributors'
 
 export default defineConfig({
+  lang: 'en-US',
   title: vitestName,
   description: vitestDescription,
   head: [
     ['meta', { name: 'theme-color', content: '#ffffff' }],
     ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
     ['link', { rel: 'alternate icon', href: '/favicon.ico', type: 'image/png', sizes: '16x16' }],
-    ['meta', { name: 'author', content: `${coreTeamMembers.map(c => c.name).join(', ')} and ${vitestName} contributors` }],
+    ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${vitestName} contributors` }],
     ['meta', { name: 'keywords', content: 'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, c8, node' }],
     ['meta', { property: 'og:title', content: vitestName }],
     ['meta', { property: 'og:description', content: vitestDescription }],
@@ -34,21 +36,48 @@ export default defineConfig({
     ['link', { rel: 'mask-icon', href: '/logo.svg', color: '#ffffff' }],
     ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
   ],
+  lastUpdated: true,
+  markdown: {
+    theme: {
+      light: 'vitesse-light',
+      dark: 'vitesse-dark',
+    },
+  },
   themeConfig: {
-    repo: 'vitest-dev/vitest',
     logo: '/logo.svg',
-    docsDir: 'docs',
-    docsBranch: 'main',
-    editLinks: true,
-    editLinkText: 'Suggest changes to this page',
+
+    editLink: {
+      repo: 'vitest-dev/vitest',
+      branch: 'main',
+      dir: 'docs',
+      text: 'Suggest changes to this page',
+    },
 
     algolia: {
       appId: 'ZTF29HGJ69',
       apiKey: '9c3ced6fed60d2670bb36ab7e8bed8bc',
       indexName: 'vitest',
-      // searchParameters: {
-      //   facetFilters: ['tags:en']
-      // }
+      searchParameters: {
+        facetFilters: ['tags:en'],
+      },
+    },
+
+    localeLinks: {
+      text: 'English',
+      items: [
+        { text: '简体中文', link: 'https://cn.vitest.dev' },
+      ],
+    },
+
+    socialLinks: [
+      { icon: 'twitter', link: twitter },
+      { icon: 'discord', link: discord },
+      { icon: 'github', link: github },
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2021-PRESENT Anthony Fu, Matías Capeletto and Vitest contributors',
     },
 
     nav: [
@@ -68,37 +97,14 @@ export default defineConfig({
           },
         ],
       },
-      {
-        text: 'Discord',
-        link: discord,
-      },
-      {
-        text: 'Twitter',
-        link: twitter,
-      },
-      {
-        text: 'English',
-        items: [
-          {
-            text: 'English',
-            link: '',
-          },
-          {
-            text: '简体中文',
-            link: 'https://cn.vitest.dev',
-          },
-        ],
-      },
     ],
 
     sidebar: {
-      '/config/': 'auto',
-      '/api/': 'auto',
-      // catch-all fallback
+      // TODO: bring sidebar of apis and config back
       '/': [
         {
           text: 'Guide',
-          children: [
+          items: [
             {
               text: 'Why Vitest',
               link: '/guide/why',
@@ -158,6 +164,24 @@ export default defineConfig({
             },
           ],
         },
+        {
+          text: 'API',
+          items: [
+            {
+              text: 'API Reference',
+              link: '/api/',
+            },
+          ],
+        },
+        {
+          text: 'Config',
+          items: [
+            {
+              text: 'Config Reference',
+              link: '/config/',
+            },
+          ],
+        },
       ],
     },
   },

diff --git a/docs/contributors.json → docs/.vitepress/contributor-names.json b/docs/contributors.json → docs/.vitepress/contributor-names.json
diff --git a/docs/src/contributors.ts → docs/.vitepress/contributors.ts b/docs/src/contributors.ts → docs/.vitepress/contributors.ts
@@ -1,4 +1,4 @@
-import contributors from '../contributors.json'
+import contributorNames from './contributor-names.json'
 
 export interface Contributor {
   name: string
@@ -18,13 +18,13 @@ const contributorsAvatars: Record<string, string> = {}
 
 const getAvatarUrl = (name: string) => import.meta.hot ? `https://github.com/${name}.png` : `/user-avatars/${name}.png`
 
-const contributorList = (contributors as string[]).reduce((acc, name) => {
+export const contributors = (contributorNames as string[]).reduce((acc, name) => {
   contributorsAvatars[name] = getAvatarUrl(name)
   acc.push({ name, avatar: contributorsAvatars[name] })
   return acc
 }, [] as Contributor[])
 
-const coreTeamMembers: CoreTeam[] = [
+export const teamMembers: CoreTeam[] = [
   {
     avatar: contributorsAvatars.antfu,
     name: 'Anthony Fu',
@@ -41,14 +41,6 @@ const coreTeamMembers: CoreTeam[] = [
     sponsors: true,
     description: 'A collaborative being<br>Core team member of Vite<br>Team member of Vue',
   },
-  {
-    avatar: contributorsAvatars.Aslemammad,
-    name: 'Mohammad Bagher',
-    github: 'Aslemammad',
-    twitter: 'asleMammadam',
-    sponsors: false,
-    description: 'An open source developer<br>Team member of Poimandres and Vike',
-  },
   {
     avatar: contributorsAvatars['sheremet-va'],
     name: 'Vladimir',
@@ -57,6 +49,14 @@ const coreTeamMembers: CoreTeam[] = [
     sponsors: false,
     description: 'An open source fullstack developer',
   },
+  {
+    avatar: contributorsAvatars.Aslemammad,
+    name: 'Mohammad Bagher',
+    github: 'Aslemammad',
+    twitter: 'asleMammadam',
+    sponsors: false,
+    description: 'An open source developer<br>Team member of Poimandres and Vike',
+  },
   {
     avatar: contributorsAvatars.Demivan,
     name: 'Ivan Demchuk',
@@ -82,5 +82,3 @@ const coreTeamMembers: CoreTeam[] = [
     description: 'A fullstack developer<br>Creating tools for collaboration',
   },
 ]
-
-export { coreTeamMembers, contributorList as contributors }