docs: add team emeriti and update the sidebar and navigation (#5169)

Co-authored-by: userquin <userquin@gmail.com>
This commit is contained in:
Vladimir 2024-02-12 09:44:22 +01:00 committed by GitHub
parent 4e17942639
commit 38f79321d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 195 additions and 116 deletions

View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { VPTeamMembers, VPHomeSponsors } from 'vitepress/theme'
import { teamMembers } from '../contributors'
import { VPHomeSponsors } from 'vitepress/theme'
import { sponsors } from '../sponsors'
</script>
@ -8,14 +7,6 @@ import { sponsors } from '../sponsors'
<div class="content">
<div class="content-container">
<main class="main">
<div class="vp-doc" flex flex-col items-center>
<h2 id="meet-the-team" op50 font-normal p="t-10 b-2">
Meet The Team
</h2>
<div w-full p-10>
<VPTeamMembers size="small" :members="teamMembers" />
</div>
</div>
<VPHomeSponsors
v-if="sponsors"
message="Vitest is free and open source, made possible by wonderful sponsors."

View File

@ -98,25 +98,44 @@ export default withPwa(defineConfig({
{ text: 'Config', link: '/config/', activeMatch: '^/config/' },
{ text: 'Advanced', link: '/advanced/api', activeMatch: '^/advanced/' },
{
text: `v${version}`,
text: 'Resources',
items: [
{
text: 'Release Notes ',
link: releases,
text: 'Team',
link: '/team',
},
{
text: 'Contributing ',
link: contributing,
items: [
{
text: 'X (formerly Twitter)',
link: twitter,
},
{
text: 'Discord Chat',
link: discord,
},
{
text: 'Releases ',
link: releases,
},
{
text: 'Contributing ',
link: contributing,
},
],
},
],
},
{
text: `v${version}`,
link: `https://github.com/vitest-dev/vitest/releases/tag/v${version}`,
},
],
sidebar: {
// TODO: bring sidebar of apis and config back
'/advanced': [
{
text: 'Advanced',
items: [
{
text: 'Vitest Node API',
@ -141,9 +160,8 @@ export default withPwa(defineConfig({
],
},
],
'/': [
'/guide/': [
{
text: 'Guide',
items: [
{
text: 'Why Vitest',
@ -239,8 +257,9 @@ export default withPwa(defineConfig({
},
],
},
],
'/api/': [
{
text: 'API',
items: [
{
text: 'Test API Reference',
@ -268,9 +287,14 @@ export default withPwa(defineConfig({
},
],
},
],
'/config/': [
{
text: 'Config',
items: [
{
text: 'Config File',
link: '/config/file',
},
{
text: 'Config Reference',
link: '/config/',

View File

@ -110,6 +110,18 @@ const plainTeamMembers: CoreTeam[] = [
title: 'A passionate enthusiast of open source contributions',
desc: 'Team member of Vitest & UnoCSS',
},
{
avatar: contributorsAvatars.zxch3n,
name: 'Zixuan Chen',
github: 'zxch3n',
mastodon: 'https://elk.zone/hachyderm.io/@zx',
twitter: 'zxch3n',
title: 'A fullstack developer',
desc: 'Working on CRDTs & local-first software',
},
]
const plainTeamEmeritiMembers: CoreTeam[] = [
{
avatar: contributorsAvatars.Aslemammad,
name: 'Mohammad Bagher',
@ -127,15 +139,6 @@ const plainTeamMembers: CoreTeam[] = [
title: 'A tech lead, fullstack developer',
desc: 'Author of fluent-vue',
},
{
avatar: contributorsAvatars.zxch3n,
name: 'Zixuan Chen',
github: 'zxch3n',
mastodon: 'https://elk.zone/hachyderm.io/@zx',
twitter: 'zxch3n',
title: 'A fullstack developer',
desc: 'Working on CRDTs & local-first software',
},
{
avatar: contributorsAvatars.poyoho,
name: 'Yoho Po',
@ -155,5 +158,6 @@ const plainTeamMembers: CoreTeam[] = [
]
const teamMembers = plainTeamMembers.map(tm => createLinks(tm))
const teamEmeritiMembers = plainTeamEmeritiMembers.map(tm => createLinks(tm))
export { teamMembers }
export { teamMembers, teamEmeritiMembers }

View File

@ -1,7 +1,7 @@
import { existsSync, promises as fsp } from 'node:fs'
import { fileURLToPath } from 'node:url'
import { dirname, join, resolve } from 'pathe'
import { teamMembers } from '../contributors'
import { teamEmeritiMembers, teamMembers } from '../contributors'
const docsDir = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
const dirAvatars = resolve(docsDir, 'public/user-avatars/')
@ -23,7 +23,7 @@ async function fetchAvatars() {
if (!existsSync(dirAvatars))
await fsp.mkdir(dirAvatars, { recursive: true })
await Promise.all(teamMembers.map(c => c.github).map(name => download(`https://github.com/${name}.png?size=100`, join(dirAvatars, `${name}.png`))))
await Promise.all([...teamEmeritiMembers, ...teamMembers].map(c => c.github).map(name => download(`https://github.com/${name}.png?size=100`, join(dirAvatars, `${name}.png`))))
}
async function fetchSponsors() {

View File

@ -106,6 +106,22 @@ img.resizable-img {
height: unset;
}
.VPTeamMembersItem.medium .profile .data .affiliation {
min-height: unset;
}
.VPTeamMembersItem.medium .profile .data .desc {
min-height: unset;
}
/* fix height ~ 2 lines of text: 3 cards per row */
@media (min-width: 648px) {
.VPTeamMembersItem.medium .profile .data .affiliation {
min-height: 4rem;
}
.VPTeamMembersItem.medium .profile .data .desc {
min-height: 4rem;
}
}
/* fix height ~ 2 lines of text: 3 or more cards per row */
.VPTeamMembersItem.small .profile .data .affiliation {
min-height: 3rem;

79
docs/config/file.md Normal file
View File

@ -0,0 +1,79 @@
---
outline: deep
---
# Managing Vitest config file
If you are using Vite and have a `vite.config` file, Vitest will read it to match with the plugins and setup as your Vite app. If you want to have a different configuration for testing or your main app doesn't rely on Vite specifically, you could either:
- Create `vitest.config.ts`, which will have the higher priority and will **override** the configuration from `vite.config.ts` (Vitest supports all conventional JS and TS extensions, but doesn't support `json`) - it means all options in your `vite.config` will be **ignored**
- Pass `--config` option to CLI, e.g. `vitest --config ./path/to/vitest.config.ts`
- Use `process.env.VITEST` or `mode` property on `defineConfig` (will be set to `test`/`benchmark` if not overridden with `--mode`) to conditionally apply different configuration in `vite.config.ts`
To configure `vitest` itself, add `test` property in your Vite config. You'll also need to add a reference to Vitest types using a [triple slash command](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) at the top of your config file, if you are importing `defineConfig` from `vite` itself.
Using `defineConfig` from `vite` you should follow this:
```ts
/// <reference types="vitest" />
import { defineConfig } from 'vite'
export default defineConfig({
test: {
// ... Specify options here.
},
})
```
Using `defineConfig` from `vitest/config` you should follow this:
```ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
// ... Specify options here.
},
})
```
You can retrieve Vitest's default options to expand them if needed:
```ts
import { configDefaults, defineConfig } from 'vitest/config'
export default defineConfig({
test: {
exclude: [...configDefaults.exclude, 'packages/template/*'],
},
})
```
When using a separate `vitest.config.js`, you can also extend Vite's options from another config file if needed:
```ts
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(viteConfig, defineConfig({
test: {
exclude: ['packages/template/*'],
},
}))
```
If your Vite config is defined as a function, you can define the config like this:
```ts
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default defineConfig(configEnv => mergeConfig(
viteConfig(configEnv),
defineConfig({
test: {
exclude: ['packages/template/*'],
},
})
))
```

View File

@ -4,90 +4,9 @@ outline: deep
# Configuring Vitest
## Configuration
`vitest` will read your root `vite.config.ts` when it is present to match with the plugins and setup as your Vite app. If you want to have a different configuration for testing or your main app doesn't rely on Vite specifically, you could either:
- Create `vitest.config.ts`, which will have the higher priority and will override the configuration from `vite.config.ts`
- Pass `--config` option to CLI, e.g. `vitest --config ./path/to/vitest.config.ts`
- Use `process.env.VITEST` or `mode` property on `defineConfig` (will be set to `test`/`benchmark` if not overridden) to conditionally apply different configuration in `vite.config.ts`
To configure `vitest` itself, add `test` property in your Vite config. You'll also need to add a reference to Vitest types using a [triple slash command](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) at the top of your config file, if you are importing `defineConfig` from `vite` itself.
Using `defineConfig` from `vite` you should follow this:
```ts
/// <reference types="vitest" />
import { defineConfig } from 'vite'
export default defineConfig({
test: {
// ... Specify options here.
},
})
```
Using `defineConfig` from `vitest/config` you should follow this:
```ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
// ... Specify options here.
},
})
```
You can retrieve Vitest's default options to expand them if needed:
```ts
import { configDefaults, defineConfig } from 'vitest/config'
export default defineConfig({
test: {
exclude: [...configDefaults.exclude, 'packages/template/*'],
},
})
```
When using a separate `vitest.config.js`, you can also extend Vite's options from another config file if needed:
```ts
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(viteConfig, defineConfig({
test: {
exclude: ['packages/template/*'],
},
}))
```
To create a Vitest configuration file, follow [the guide](/config/file). Make sure you understand how Vitest config resolution works before proceeding.
::: warning
`mergeConfig` helper is available in Vitest since v0.30.0. You can import it from `vite` directly, if you use lower version.
:::
If your Vite config is defined as a function, you can define the config like this:
```ts
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default defineConfig(configEnv => mergeConfig(
viteConfig(configEnv),
defineConfig({
test: {
exclude: ['packages/template/*'],
},
})
))
```
## Options
:::tip
In addition to the following options, you can also use any configuration option from [Vite](https://vitejs.dev/config/). For example, `define` to define global variables, or `resolve.alias` to define aliases.
_All_ listed options here are located on a `test` property inside the config:
```ts
@ -100,6 +19,8 @@ export default defineConfig({
:::
::: tip
In addition to the following options, you can also use any configuration option from [Vite](https://vitejs.dev/config/). For example, `define` to define global variables, or `resolve.alias` to define aliases.
All configuration options that are not supported inside a [workspace](/guide/workspace) project config have <NonProjectOption /> sign next to them.
:::
@ -107,15 +28,23 @@ All configuration options that are not supported inside a [workspace](/guide/wor
- **Type:** `string[]`
- **Default:** `['**/*.{test,spec}.?(c|m)[jt]s?(x)']`
- **CLI:** `vitest [...include]`, `vitest **/*.test.js`
Files to include in the test run, using glob pattern.
A list of glob patterns that match your test files.
### exclude
- **Type:** `string[]`
- **Default:** `['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*']`
- **CLI:** `vitest --exclude "**/excluded-file"`
Files to exclude from the test run, using glob pattern.
A list of glob patterns that should be excluded from your test files.
::: warning
This option does not affect coverage. If you need to remove certain files from the coverage report, use [`coverage.exclude`](#coverage-exclude).
This is the only option that doesn't override your configuration if you provide it with a CLI flag. All glob patterns added via `--exclude` flag will be added to the config's `exclude`.
:::
### includeSource

36
docs/team.md Normal file
View File

@ -0,0 +1,36 @@
---
layout: page
title: Meet the Team
description: The development of Vitest is guided by an international team.
---
<script setup>
import {
VPTeamPage,
VPTeamPageTitle,
VPTeamPageSection,
VPTeamMembers
} from 'vitepress/theme'
import { teamMembers, teamEmeritiMembers } from './.vitepress/contributors'
</script>
<VPTeamPage>
<VPTeamPageTitle>
<template #title>Meet the Team</template>
<template #lead>
The development of Vitest is guided by an international team, some of whom
have chosen to be featured below.
</template>
</VPTeamPageTitle>
<VPTeamMembers :members="teamMembers" />
<VPTeamPageSection>
<template #title>Team Emeriti</template>
<template #lead>
Here we honor some no-longer-active team members who have made valuable
contributions in the past.
</template>
<template #members>
<VPTeamMembers size="small" :members="teamEmeritiMembers" />
</template>
</VPTeamPageSection>
</VPTeamPage>