docs: port homepage and dark theme (#90)

Co-authored-by: Anthony Fu <[email protected]>

docs/components.d.ts

@@ -0,0 +1,13 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+ export interface GlobalComponents {
+ Avatar: typeof import('./src/components/Avatar.vue')['default']
+ Home: typeof import('./src/components/Home.vue')['default']
+ ListItem: typeof import('./src/components/ListItem.vue')['default']
+ }
+}
+
+export { }

docs/index.md

@@ -1,18 +1,7 @@
 ---
-home: true
-heroImage: /logo.svg
-actionText: Get Started
-actionLink: /guide/
-
-altActionText: Learn More
-altActionLink: /guide/why
-
-features:
- - title: ✨ Drop in replacement for Jest
- details: Migrate with ease from your existing setup
- - title: ⚡️ Lightning Fast!
- details: Enjoy a performance boost and unlock HMR while running your tests
- - title: 🛠️ Shared setup for dev, build and tests
- details: Tests using your app setup, Vite's config, transformers, resolvers, and plugins
-footer: MIT Licensed | Copyright © 2021-present Anthony Fu & Vitest Contributors
+navbar: false
+sidebar: false
+title: 'Vitest - A blazing fast unit test framework powered by Vite'
 ---
+
+<Home />

docs/package.json

@@ -2,11 +2,26 @@
  "name": "docs",
  "private": true,
  "scripts": {
- "dev": "vitepress dev --open",
+ "dev": "vitepress --port 3333 --open",
  "build": "vitepress build",
- "serve": "vitepress serve"
+ "serve": "vitepress serve",
+ "lint": "eslint . --ext=.ts,.vue"
+ },
+ "dependencies": {
+ "@vueuse/core": "^7.2.2",
+ "vue": "^3.2.24"
  },
  "devDependencies": {
+ "@antfu/eslint-config": "^0.12.2",
+ "@iconify-json/carbon": "^1.0.12",
+ "@types/node": "^16.11.12",
+ "@unocss/reset": "^0.16.0",
+ "@vitejs/plugin-vue": "^1.10.2",
+ "eslint": "^8.4.1",
+ "pnpm": "^6.23.6",
+ "typescript": "^4.5.3",
+ "unocss": "^0.16.0",
+ "unplugin-vue-components": "^0.17.8",
  "vitepress": "^0.20.4"
  }
 }

docs/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

docs/src/components/Avatar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+ avatar: string
+ name: string
+ github: string
+ twitter: string
+}>()
+</script>
+
+<template>
+ <div text-center>
+ <img :src="avatar" rounded-full h-30 w-30>
+ <div text-2xl mt-1 mb-1>
+ {{ name }}
+ </div>
+ <div op60>
+ <slot />
+ </div>
+ <div flex="~ inline gap-2" py-4 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"
+ />
+ <a
+ 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"
+ />
+ </div>
+ <br>
+ <a
+ class="btn mt-5 bg-pink-500 hover:bg-pink-600"
+ target="_blank"
+ :href="`https://github.com/sponsors/${github}`"
+ >
+ <span class="i-carbon-favorite-filled inline-block" />
+ Sponsor
+ </a>
+ </div>
+</template>

docs/src/components/Home.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import 'uno.css'
+import Avatar from './Avatar.vue'
+import '../main.css'
+</script>
+
+<template>
+ <div flex flex-col items-center>
+ <div flex flex-col items-center p="t-10 md:t-20 b-10">
+ <img src="/logo.svg" h="40 md:60">
+ <h1 text-3em md:text-4em font-light>
+ Vitest
+ </h1>
+ <p text="1.2em center" leading-7 op60 font-normal tracking-wide>
+ A blazing fast unit-test framework<br>powered by
+ <a href="https://vitejs.dev" target="_blank" font="bold">Vite ⚡️</a>
+ </p>
+ <div
+ text-center
+ flex
+ flex-col
+ sm:flex-row
+ flex-wrap
+ items-center
+ gap-4
+ mt-5
+ children:my0
+ >
+ <a class="btn bg-pink-500 hover:bg-pink-600" href="/guide/">
+ <span class="i-carbon-play-filled inline-block text-lg" />
+ <span ma>Get Started</span>
+ </a>
+ <a class="btn bg-green-600 hover:bg-green-700" href="/guide/why">
+ <span class="i-carbon-flash-filled inline-block text-lg" />
+ <span ma>Learn More</span>
+ </a>
+ <a class="btn bg-gray-500 dark:bg-white dark:text-black hover:bg-gray-700 dark:hover:bg-gray-200" href="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/antfu-sponsors/vitest">
+ <span class="i-carbon-logo-github inline-block text-lg" />
+ <span ma>GitHub</span>
+ </a>
+ <a class="btn bg-sky-600 hover:bg-sky-700" target="_blank" href="https://twitter.com/vitest_dev">
+ <span class="i-carbon-logo-twitter inline-block text-1.3em" />
+ <span>Twitter</span>
+ </a>
+ </div>
+ <div p-6 text-gray-500 text-center>
+ Follow our Twitter subscribing to the latest news! 👆
+ </div>
+ </div>
+
+ <h3 op50 font-normal pt-10>
+ Features
+ </h3>
+ <ul
+ dir="auto"
+ max-w-140
+ flex="~ col gap-5 md:gap-3"
+ text-lg
+ >
+ <ListItem><a target="_blank" href="https://vitejs.dev">Vite</a>'s config, transformers, resolvers, and plugins.</ListItem>
+ <ListItem>Use the same setup from your app to run the tests!</ListItem>
+ <ListItem><a href="https://twitter.com/antfu7/status/1468233216939245579" target="_blank">Smart & instant watch mode, like HMR for tests!</a></ListItem>
+ <ListItem>Components testing for Vue, React, Lit and more</ListItem>
+ <ListItem>Out-of-box TypeScript / JSX support</ListItem>
+ <ListItem>ESM first, top level await</ListItem>
+ <ListItem>Workers multi-threading via <a href="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/piscinajs/piscina" target="_blank">Piscina</a></ListItem>
+ <ListItem>Filtering, timeouts, concurrent for suite and tests</ListItem>
+ <ListItem><a target="_blank" href="https://jestjs.io/docs/snapshot-testing" rel="">Jest Snapshot</a></ListItem>
+ <ListItem><a target="_blank" href="https://www.chaijs.com/" rel="">Chai</a> built-in for assertions + <a href="https://jestjs.io/docs/expect" rel="">Jest expect</a> compatible APIs</ListItem>
+ <ListItem><a target="_blank" href="https://sinonjs.org/" rel="">Sinon</a> built-in for mocking</ListItem>
+ <ListItem><a target="_blank" href="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/jsdom/jsdom">jsdom</a> or <a target="_blank" href="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/capricorn86/happy-dom">happy-dom</a> for DOM mocking</ListItem>
+ <ListItem>Native code coverage via <a target="_blank" href="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/bcoe/c8">c8</a></ListItem>
+ </ul>
+
+ <h3 id="made-by" op50 font-normal pt-5 pb-2>
+ Made by
+ </h3>
+ <div grid="~ sm:cols-2 gap-x-10 gap-y-20" p-10>
+ <Avatar
+ name="Anthony Fu"
+ desc=""
+ avatar="http:https://antfu.me/avatar.png"
+ github="antfu"
+ twitter="antfu7"
+ >
+ A fanatical open sourceror.<br>Core team member of Vite & Vue.<br>Working at NuxtLabs.
+ </Avatar>
+ <Avatar
+ name="Patak"
+ avatar="https://patak.dev/images/patak.jpg"
+ github="patak-dev"
+ twitter="patak_dev"
+ >
+ A collaborative being.<br>Core team member of Vite.<br>Team member of Vue.
+ </Avatar>
+ </div>
+ <p op50 text-2xl max-w-150 text-center leading-7>
+ And the Vitest contributors. <a href="https://discord.com/invite/2zYZNngd7y">Join the community</a> and get involved!
+ </p>
+ <div mb-30 />
+ </div>
+</template>

docs/src/components/ListItem.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, effectScope, onMounted, ref } from 'vue'
+import { useElementVisibility, until } from '@vueuse/core'
+
+const el = ref()
+const state = ref(0)
+
+function reset() {
+ state.value = 0
+ setTimeout(() => {
+ state.value = Math.random() > 0.9 ? 2 : 1
+ if (state.value === 2)
+ setTimeout(reset, 1000)
+ }, Math.round(Math.random() * 3000) + 400)
+}
+
+const color = computed(() => {
+ return {
+ '--c-brand': state.value === 1
+ ? 'rgba(74,222,128,1)'
+ : state.value === 2
+ ? 'rgba(248, 113, 113)'
+ : 'rgba(250, 204, 21)',
+ } as any
+})
+
+const scope = effectScope()
+
+const visibility = scope.run(() => useElementVisibility(el))
+
+onMounted(async() => {
+ await until(visibility).toBe(true)
+
+ scope.stop()
+ reset()
+})
+</script>
+
+<template>
+ <li :style="color">
+ <div
+ ref="el"
+ relative
+ m="ya r-1"
+ w-5
+ h-5
+ flex-none
+ align-mid
+ >
+ <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 text-green4 />
+ </div>
+ <div absolute transition duration-300 :class="state === 2 ? '' : 'flip'">
+ <div i-carbon:close-outline text-red4 />
+ </div>
+ </div>
+ <div>
+ <slot />
+ </div>
+ </li>
+</template>
+
+<style>
+.flip {
+ transform: rotateY(90deg);
+}
+</style>

docs/src/main.css

@@ -0,0 +1,61 @@
+:root {
+ --c-brand: #ca931c;
+ --font-family-base: "Readex Pro", ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont, sans-serif;
+ --bg-gradient: 255,255,255;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --c-bg: rgb(20,20,20) !important;
+ --c-text: #fff !important;
+ --c-text-light: #fdd888 !important;
+ --c-brand: #fdd888 !important;
+ --bg-gradient: 20,20,20 !important;
+ }
+}
+
+.theme.no-navbar.no-sidebar ul > li {
+ opacity: 0.8;
+ transition: .1s ease;
+}
+.theme.no-navbar.no-sidebar ul > li:hover {
+ opacity: 1;
+}
+
+.theme.no-navbar.no-sidebar {
+ background-image: url("/bg.png");
+ background-repeat: repeat;
+ background-size: 50%;
+}
+
+@media screen and (max-width: 768px) {
+ .theme.no-navbar.no-sidebar {
+ background-size: 100%;
+ }
+}
+
+.theme.no-navbar.no-sidebar .page {
+ background:
+ radial-gradient(ellipse, rgba(var(--bg-gradient),1) 50%, rgba(var(--bg-gradient),0.4) 120%),
+ radial-gradient(ellipse at top, rgba(var(--bg-gradient),0.8) 20%, rgba(var(--bg-gradient),0) 100%),
+ radial-gradient(ellipse at left, rgba(var(--bg-gradient),0.6) 20%, rgba(var(--bg-gradient),0) 100%),
+ radial-gradient(ellipse at right, rgba(var(--bg-gradient),0.6) 20%, rgba(var(--bg-gradient),0) 100%);
+}
+
+.theme.no-navbar.no-sidebar li {
+ list-style: none;
+ display: flex;
+ gap: 0.4rem;
+}
+
+.theme.no-navbar.no-sidebar ul {
+ padding: 0;
+}
+
+.custom-block.tip {
+ background-color: rgba(255, 229, 100, 0.1)
+}
+
+.custom-block.warning {
+ color: inherit;
+}