Skip to content

Commit 7cfe0f0

Browse files
kiakingkiaking
authoredJun 22, 2022
feat(theme): add team page feature (#828)
·
v2.0.0-alpha.4v1.0.0-alpha.3
1 parent 378f9b4 commit 7cfe0f0

15 files changed

+773
-8
lines changed
 

‎docs/.vitepress/config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ function sidebarGuide() {
8787
{ text: 'Edit Link', link: '/guide/theme-edit-link' },
8888
{ text: 'Last Updated', link: '/guide/theme-last-updated' },
8989
{ text: 'Layout', link: '/guide/theme-layout' },
90-
{ text: 'Homepage', link: '/guide/theme-homepage' },
90+
{ text: 'Home Page', link: '/guide/theme-home-page' },
91+
{ text: 'Team Page', link: '/guide/theme-team-page' },
9192
{ text: 'Footer', link: '/guide/theme-footer' },
9293
{ text: 'Search', link: '/guide/theme-search' },
9394
{ text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }

‎docs/guide/migration-from-vitepress-0.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@ If you're coming from VitePress 0.x version, there're several breaking changes d
1919

2020
## Frontmatter Config
2121

22-
- `home: true` option has changed to `layout: home`. Also, many Homepage related settings have been modified to provide additional features. See [Homepage guide](./theme-homepage) for details.
22+
- `home: true` option has changed to `layout: home`. Also, many Homepage related settings have been modified to provide additional features. See [Home Page guide](./theme-home-page) for details.
2323
- `footer` option is moved to [`themeConfig.footer`](../config/theme-configs#footer).

‎docs/guide/theme-homepage.md ‎docs/guide/theme-home-page.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Homepage
1+
# Home Page
22

33
VitePress default theme provides a homepage layout, which you can also see used on [the homepage of this site](../). You may use it on any of your pages by specifying `layout: home` in the [frontmatter](./frontmatter).
44

‎docs/guide/theme-introduction.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ VitePress comes with its default theme providing many features out of the box. L
88
- [Edit Link](./theme-edit-link)
99
- [Last Updated](./theme-last-updated)
1010
- [Layout](./theme-layout)
11-
- [Homepage](./theme-homepage)
11+
- [Home Page](./theme-home-page)
12+
- [Team Page](./theme-team-page)
1213
- [Footer](./theme-footer)
1314
- [Search](./theme-search)
1415
- [Carbon Ads](./theme-carbon-ads)
1516

16-
If you don't find the features you're looking for, or you would rather create your own theme, you may customize VitePress to fit your requirements.
17+
If you don't find the features you're looking for, or you would rather create your own theme, you may customize VitePress to fit your requirements. In the following sections, we'll go through each way of customizing the VitePress theme.
1718

1819
## Using a Custom Theme
1920

20-
You can enable a custom theme by adding the `.vitepress/theme/index.js` file (the "theme entry file").
21+
You can enable a custom theme by adding the `.vitepress/theme/index.js` or `.vitepress/theme/index.ts` file (the "theme entry file").
2122

2223
```
2324
.
@@ -53,6 +54,7 @@ The theme entry file should export the theme as its default export:
5354
import Layout from './Layout.vue'
5455

5556
export default {
57+
// root component to wrap each page
5658
Layout,
5759

5860
// this is a Vue 3 functional component

‎docs/guide/theme-layout.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ Note that even in this layout, sidebar will still show up if the page has a matc
3535

3636
## Home Layout
3737

38-
Option `home` will generate templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-homepage) for more details.
38+
Option `home` will generate templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-home-page) for more details.

‎docs/guide/theme-team-page.md

+255
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<script setup>
2+
import { VPTeamMembers } from 'vitepress/theme'
3+
4+
const members = [
5+
{
6+
avatar: 'https://github.com/yyx990803.png',
7+
name: 'Evan You',
8+
title: 'Creator',
9+
links: [
10+
{ icon: 'github', link: 'https://github.com/yyx990803' },
11+
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
12+
]
13+
},
14+
{
15+
avatar: 'https://github.com/kiaking.png',
16+
name: 'Kia King Ishii',
17+
title: 'Developer',
18+
links: [
19+
{ icon: 'github', link: 'https://github.com/kiaking' },
20+
{ icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
21+
]
22+
}
23+
]
24+
</script>
25+
26+
# Team Page
27+
28+
If you would like to introduce your team, you may use Team components to construct the Team Page. There're 2 ways of using these components. One is to embbed it in doc page, and another is to create a full Team Page.
29+
30+
## Show team members in a page
31+
32+
You may use `<VPTeamMembers>` component exposed from `vitepress/theme` to display a list of team members on any page.
33+
34+
```html
35+
<script setup>
36+
import { VPTeamMembers } from 'vitepress/theme'
37+
38+
const members = [
39+
{
40+
avatar: 'https://www.github.com/yyx990803.png',
41+
name: 'Evan You',
42+
title: 'Creator',
43+
links: [
44+
{ icon: 'github', link: 'https://github.com/yyx990803' },
45+
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
46+
]
47+
},
48+
...
49+
]
50+
</script>
51+
52+
# Our Team
53+
54+
Say hello to our awesome team.
55+
56+
<VPTeamMembers size="small" :members="members" />
57+
```
58+
59+
The above will display a team member in card looking element. It should display something similar to below.
60+
61+
<VPTeamMembers size="small" :members="members" />
62+
63+
`<VPTeamMembers>` component comes in 2 different sizes, `small` and `medium`. While it boiles down to your preference, usually `small` size should fit better when used in doc page. Also, you may add more properties to each member such as adding "description" or "sponsor" button. Learn more about it in [`<VPTeamMembers>`](#vpteammembers).
64+
65+
Embbeding team members in doc page is good for small size team where having dedicated full team page might be too much, or introducing partial members as a refference to documenation context.
66+
67+
If you have large number of members, or simply would like to have more space to show team members, consider [creating a full team page](#create-a-full-team-page).
68+
69+
## Create a full Team Page
70+
71+
Instead of adding team members to doc page, you may also create a full Team Page, similar to how you can create a custom [Home Page](./theme-home-page).
72+
73+
To create a team page, first, create a new md file. The file name doesn't matter, but here lets call it `team.md`. In this file, set frontmatter option `layout: page`, and then you may compose your page structure using `TeamPage` components.
74+
75+
```html
76+
---
77+
layout: page
78+
---
79+
<script setup>
80+
import {
81+
VPTeamPage,
82+
VPTeamPageTitle,
83+
VPTeamMembers
84+
} from 'vitepress/theme'
85+
86+
const members = [
87+
{
88+
avatar: 'https://www.github.com/yyx990803.png',
89+
name: 'Evan You',
90+
title: 'Creator',
91+
links: [
92+
{ icon: 'github', link: 'https://github.com/yyx990803' },
93+
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
94+
]
95+
},
96+
...
97+
]
98+
</script>
99+
100+
<VPTeamPage>
101+
<VPTeamPageTitle>
102+
<template #title>
103+
Our Team
104+
</template>
105+
<template #lead>
106+
The development of VitePress is guided by an international
107+
team, some of whom have chosen to be featured below.
108+
</template>
109+
</VPTeamPageTitle>
110+
<VPTeamMembers
111+
:members="members"
112+
/>
113+
</VPTeamPage>
114+
```
115+
116+
When creating a full team page, remember to wrap all components with `<VPTeamPage>` component. This component will ensure all nested team related components get the proper layout structure like spacings.
117+
118+
`<VPPageTitle>` component adds the page title section. The title being `<h1>` heading. Use `#title` and `#lead` slot to document about your team.
119+
120+
`<VPMembers>` works as same as when used in a doc page. It will display list of members.
121+
122+
### Add sections to divide team members
123+
124+
You may add "sections" to the team page. For example, you may have different types of team members such as Core Team Members and Community Partners. You can devide these members into sections to better explain the roles of each group.
125+
126+
To do so, add `<VPTeamPageSection>` component to the `team.md` file we created previously.
127+
128+
```html
129+
---
130+
layout: page
131+
---
132+
<script setup>
133+
import {
134+
VPTeamPage,
135+
VPTeamPageTitle,
136+
VPTeamMembers,
137+
VPTeamPageSection
138+
} from 'vitepress/theme'
139+
140+
const coreMembers = [...]
141+
const partners = [...]
142+
</script>
143+
144+
<VPTeamPage>
145+
<VPTeamPageTitle>
146+
<template #title>Our Team</template>
147+
<template #lead>...</template>
148+
</VPTeamPageTitle>
149+
<VPTeamMembers size="medium" :members="coreMembers" />
150+
<VPTeamPageSection>
151+
<template #title>Partners</template>
152+
<template #lead>...</template>
153+
<template #members>
154+
<VPTeamMembers size="small" :members="partners" />
155+
</template>
156+
</VPTeamPageSection>
157+
</VPTeamPage>
158+
```
159+
160+
The `<VPTeamPageSection>` component can have `#title` and `#lead` slot similar to `VPTeamPageTitle` component, and also `#members` slot for displaying team members.
161+
162+
Remember to put in `<VPTeamMembers>` component within `#members` slot.
163+
164+
## `<VPTeamMembers>`
165+
166+
The `<VPTeamMembers>` component displays a given list of members.
167+
168+
```html
169+
<VPTeamMembers
170+
size="medium"
171+
:members="[
172+
{ avatar: '...', name: '...' },
173+
{ avatar: '...', name: '...' },
174+
...
175+
]"
176+
/>
177+
```
178+
179+
```ts
180+
interface Props {
181+
// Size of each members. Defaults to `medium`.
182+
size?: 'small' | 'meidum'
183+
184+
// List of members to display.
185+
members: TeamMember[]
186+
}
187+
188+
interface TeamMember {
189+
// Avatar image for the member.
190+
avatar: string
191+
192+
// Name of the member.
193+
name: string
194+
195+
// Title to be shown below member's name.
196+
// e.g. Developer, Software Engineer, etc.
197+
title?: string
198+
199+
// Organization that the member belongs.
200+
org?: string
201+
202+
// URL for the organization.
203+
orgLink?: string
204+
205+
// Description for the member.
206+
desc?: string
207+
208+
// Social links. e.g. GitHub, Twitter, etc. You may pass in
209+
// the Social Links object here.
210+
// See: https://vitepress.vuejs.org/config/theme-configs.html#sociallinks
211+
links?: SocialLink[]
212+
213+
// URL for the sponsor page for the member.
214+
sponsor?: string
215+
}
216+
```
217+
218+
## `<VPTeamPage>`
219+
220+
The root component when creating a full team page. It only accepts a single slot. It's will style all passed in team related components.
221+
222+
## `<VPTeamPageTitle>`
223+
224+
Adds "title" section of the page. Best use at the very beginning under `<VPTeamPage>`. It accepts `#title` and `#lead` slot.
225+
226+
```html
227+
<VPTeamPage>
228+
<VPTeamPageTitle>
229+
<template #title>
230+
Our Team
231+
</template>
232+
<template #lead>
233+
The development of VitePress is guided by an international
234+
team, some of whom have chosen to be featured below.
235+
</template>
236+
</VPTeamPageTitle>
237+
</VPTeamPage>
238+
```
239+
240+
## `<VPTeamPageSection>`
241+
242+
Creates a "section" with in team page. It accepts `#title`, `#lead`, and `#members` slot. You may add as many sections as you like inside `<VPTeamPage>`.
243+
244+
```html
245+
<VPTeamPage>
246+
...
247+
<VPTeamPageSection>
248+
<template #title>Partners</template>
249+
<template #lead>Lorem ipsum...</template>
250+
<template #members>
251+
<VPTeamMembers :members="data" />
252+
</template>
253+
</VPTeamPageSection>
254+
</VPTeamPage>
255+
```

‎src/client/theme-default/components/VPTeamMembers.vue

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import type { DefaultTheme } from '..'
4+
import VPTeamMembersItem from './VPTeamMembersItem.vue'
5+
6+
const props = defineProps<{
7+
size?: 'small' | 'medium'
8+
members: DefaultTheme.TeamMember[]
9+
}>()
10+
11+
const classes = computed(() => [
12+
props.size ?? 'medium',
13+
`count-${props.members.length}`
14+
])
15+
</script>
16+
17+
<template>
18+
<div class="VPTeamMembers" :class="classes">
19+
<div class="container">
20+
<div v-for="member in members" :key="member.name" class="item">
21+
<VPTeamMembersItem :size="size" :member="member" />
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<style scoped>
28+
.VPTeamMembers.small .container {
29+
grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
30+
}
31+
32+
.VPTeamMembers.small.count-1 .container { max-width: 276px; }
33+
.VPTeamMembers.small.count-2 .container { max-width: calc(276px * 2 + 24px); }
34+
.VPTeamMembers.small.count-3 .container { max-width: calc(276px * 3 + 24px * 2); }
35+
36+
.VPTeamMembers.medium .container {
37+
grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
38+
}
39+
40+
@media (min-width: 375px) {
41+
.VPTeamMembers.medium .container {
42+
grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
43+
}
44+
}
45+
46+
.VPTeamMembers.medium.count-1 .container { max-width: 368px; }
47+
.VPTeamMembers.medium.count-2 .container { max-width: calc(368px * 2 + 24px); }
48+
49+
.container {
50+
display: grid;
51+
gap: 24px;
52+
margin: 0 auto;
53+
max-width: 1152px;
54+
}
55+
</style>

‎src/client/theme-default/components/VPTeamMembersItem.vue

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<script setup lang="ts">
2+
import type { DefaultTheme } from '..'
3+
import VPIconHeart from './icons/VPIconHeart.vue'
4+
import VPLink from './VPLink.vue'
5+
import VPSocialLinks from './VPSocialLinks.vue'
6+
7+
defineProps<{
8+
size?: 'small' | 'medium'
9+
member: DefaultTheme.TeamMember
10+
}>()
11+
</script>
12+
13+
<template>
14+
<article class="VPTeamMembersItem" :class="[size ?? 'medium']">
15+
<div class="profile">
16+
<figure class="avatar">
17+
<img class="avatar-img" :src="member.avatar" :alt="member.name">
18+
</figure>
19+
<div class="data">
20+
<h1 class="name">
21+
{{ member.name }}
22+
</h1>
23+
<p v-if="member.title || member.org" class="affiliation">
24+
<span v-if="member.title" class="title">
25+
{{ member.title }}
26+
</span>
27+
<span v-if="member.title && member.org" class="at">
28+
@
29+
</span>
30+
<VPLink v-if="member.org" class="org" :class="{ link: member.orgLink }" :href="member.orgLink" no-icon>
31+
{{ member.org }}
32+
</VPLink>
33+
</p>
34+
<p v-if="member.desc" class="desc">
35+
{{ member.desc }}
36+
</p>
37+
<div v-if="member.links" class="links">
38+
<VPSocialLinks :links="member.links" />
39+
</div>
40+
</div>
41+
</div>
42+
<div v-if="member.sponsor" class="sponsor">
43+
<VPLink class="sponsor-link" :href="member.sponsor" no-icon>
44+
<VPIconHeart class="sponsor-icon" /> Sponsor
45+
</VPLink>
46+
</div>
47+
</article>
48+
</template>
49+
50+
<style scoped>
51+
.VPTeamMembersItem {
52+
display: flex;
53+
flex-direction: column;
54+
gap: 2px;
55+
border-radius: 12px;
56+
width: 100%;
57+
height: 100%;
58+
overflow: hidden;
59+
}
60+
61+
.VPTeamMembersItem.small .profile {
62+
padding: 32px;
63+
}
64+
65+
.VPTeamMembersItem.small .data {
66+
padding-top: 20px;
67+
}
68+
69+
.VPTeamMembersItem.small .avatar {
70+
width: 64px;
71+
height: 64px;
72+
}
73+
74+
.VPTeamMembersItem.small .name {
75+
line-height: 24px;
76+
font-size: 16px;
77+
}
78+
79+
.VPTeamMembersItem.small .affiliation {
80+
padding-top: 4px;
81+
line-height: 20px;
82+
font-size: 14px;
83+
}
84+
85+
.VPTeamMembersItem.small .desc {
86+
padding-top: 12px;
87+
line-height: 20px;
88+
font-size: 14px;
89+
}
90+
91+
.VPTeamMembersItem.small .links {
92+
margin: 0 -16px -20px;
93+
padding: 10px 0 0;
94+
}
95+
96+
.VPTeamMembersItem.medium .profile {
97+
padding: 48px 32px;
98+
}
99+
100+
.VPTeamMembersItem.medium .data {
101+
padding-top: 24px;
102+
text-align: center;
103+
}
104+
105+
.VPTeamMembersItem.medium .avatar {
106+
width: 96px;
107+
height: 96px;
108+
}
109+
110+
.VPTeamMembersItem.medium .name {
111+
letter-spacing: 0.15px;
112+
line-height: 28px;
113+
font-size: 20px;
114+
}
115+
116+
.VPTeamMembersItem.medium .affiliation {
117+
padding-top: 4px;
118+
font-size: 16px;
119+
}
120+
121+
.VPTeamMembersItem.medium .desc {
122+
padding-top: 16px;
123+
max-width: 288px;
124+
font-size: 16px;
125+
}
126+
127+
.VPTeamMembersItem.medium .links {
128+
margin: 0 -16px -12px;
129+
padding: 16px 12px 0;
130+
}
131+
132+
.profile {
133+
flex-grow: 1;
134+
background-color: var(--vp-c-bg-soft);
135+
}
136+
137+
.data {
138+
text-align: center;
139+
}
140+
141+
.avatar {
142+
position: relative;
143+
flex-shrink: 0;
144+
margin: 0 auto;
145+
border-radius: 50%;
146+
box-shadow: var(--vp-shadow-3);
147+
}
148+
149+
.avatar-img {
150+
position: absolute;
151+
top: 0;
152+
right: 0;
153+
bottom: 0;
154+
left: 0;
155+
border-radius: 50%;
156+
object-fit: cover;
157+
}
158+
159+
.name {
160+
margin: 0;
161+
font-weight: 600;
162+
}
163+
164+
.affiliation {
165+
margin: 0;
166+
font-weight: 500;
167+
color: var(--vp-c-text-2);
168+
}
169+
170+
.org.link {
171+
color: var(--vp-c-text-2);
172+
transition: color 0.25s;
173+
}
174+
175+
.org.link:hover {
176+
color: var(--vp-c-brand);
177+
}
178+
179+
.desc {
180+
margin: 0 auto;
181+
}
182+
183+
.links {
184+
display: flex;
185+
justify-content: center;
186+
height: 56px;
187+
}
188+
189+
.sponsor-link {
190+
display: flex;
191+
justify-content: center;
192+
align-items: center;
193+
text-align: center;
194+
padding: 16px;
195+
font-size: 14px;
196+
font-weight: 500;
197+
color: var(--vp-c-sponsor);
198+
background-color: var(--vp-c-bg-soft);
199+
transition: color 0.25s, background-color 0.25s;
200+
}
201+
202+
.sponsor-link:hover,
203+
.sponsor-link:focus {
204+
outline: none;
205+
color: var(--vp-c-text-dark-1);
206+
background-color: var(--vp-c-sponsor);
207+
}
208+
209+
.sponsor-icon {
210+
margin-right: 8px;
211+
width: 16px;
212+
height: 16px;
213+
fill: currentColor;
214+
}
215+
</style>

‎src/client/theme-default/components/VPTeamPage.vue

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="VPTeamPage">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<style scoped>
8+
.VPTeamPage {
9+
padding-bottom: 96px;
10+
}
11+
12+
@media (min-width: 768px) {
13+
.VPTeamPage {
14+
padding-bottom: 128px;
15+
}
16+
}
17+
18+
:slotted(.VPTeamPageSection + .VPTeamPageSection),
19+
:slotted(.VPTeamMembers + .VPTeamPageSection) {
20+
margin-top: 64px;
21+
}
22+
23+
:slotted(.VPTeamMembers + .VPTeamMembers) {
24+
margin-top: 24px;
25+
}
26+
27+
@media (min-width: 768px) {
28+
:slotted(.VPTeamPageTitle + .VPTeamPageSection) {
29+
margin-top: 16px;
30+
}
31+
32+
:slotted(.VPTeamPageSection + .VPTeamPageSection),
33+
:slotted(.VPTeamMembers + .VPTeamPageSection) {
34+
margin-top: 96px;
35+
}
36+
}
37+
38+
:slotted(.VPTeamMembers) {
39+
padding: 0 24px;
40+
}
41+
42+
@media (min-width: 768px) {
43+
:slotted(.VPTeamMembers) {
44+
padding: 0 48px;
45+
}
46+
}
47+
48+
@media (min-width: 960px) {
49+
:slotted(.VPTeamMembers) {
50+
padding: 0 64px;
51+
}
52+
}
53+
</style>

‎src/client/theme-default/components/VPTeamPageSection.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<section class="VPTeamPageSection">
3+
<div class="title">
4+
<div class="title-line" />
5+
<h2 v-if="$slots.title" class="title-text">
6+
<slot name="title" />
7+
</h2>
8+
</div>
9+
<p v-if="$slots.lead" class="lead">
10+
<slot name="lead" />
11+
</p>
12+
<div v-if="$slots.members" class="members">
13+
<slot name="members" />
14+
</div>
15+
</section>
16+
</template>
17+
18+
<style scoped>
19+
.VPTeamPageSection {
20+
padding: 0 32px;
21+
}
22+
23+
@media (min-width: 768px) {
24+
.VPTeamPageSection {
25+
padding: 0 48px;
26+
}
27+
}
28+
29+
@media (min-width: 960px) {
30+
.VPTeamPageSection {
31+
padding: 0 64px;
32+
}
33+
}
34+
35+
.title {
36+
position: relative;
37+
margin: 0 auto;
38+
max-width: 1152px;
39+
text-align: center;
40+
color: var(--vp-c-text-2);
41+
}
42+
43+
.title-line {
44+
position: absolute;
45+
top: 16px;
46+
left: 0;
47+
width: 100%;
48+
height: 1px;
49+
background-color: var(--vp-c-divider-light);
50+
}
51+
52+
.title-text {
53+
position: relative;
54+
display: inline-block;
55+
padding: 0 24px;
56+
letter-spacing: 0;
57+
line-height: 32px;
58+
font-size: 20px;
59+
font-weight: 500;
60+
background-color: var(--vp-c-bg);
61+
}
62+
63+
.lead {
64+
margin: 0 auto;
65+
max-width: 480px;
66+
padding-top: 12px;
67+
text-align: center;
68+
line-height: 24px;
69+
font-size: 16px;
70+
font-weight: 500;
71+
color: var(--vp-c-text-2);
72+
}
73+
74+
.members {
75+
padding-top: 40px;
76+
}
77+
</style>

‎src/client/theme-default/components/VPTeamPageTitle.vue

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="VPTeamPageTitle">
3+
<h1 v-if="$slots.title" class="title">
4+
<slot name="title" />
5+
</h1>
6+
<p v-if="$slots.lead" class="lead">
7+
<slot name="lead" />
8+
</p>
9+
</div>
10+
</template>
11+
12+
<style scoped>
13+
.VPTeamPageTitle {
14+
padding: 48px 32px;
15+
text-align: center;
16+
}
17+
18+
@media (min-width: 768px) {
19+
.VPTeamPageTitle {
20+
padding: 64px 48px 48px;
21+
}
22+
}
23+
24+
@media (min-width: 960px) {
25+
.VPTeamPageTitle {
26+
padding: 80px 64px 48px;
27+
}
28+
}
29+
30+
.title {
31+
letter-spacing: 0;
32+
line-height: 44px;
33+
font-size: 36px;
34+
font-weight: 500;
35+
}
36+
37+
@media (min-width: 768px) {
38+
.title {
39+
letter-spacing: -0.5px;
40+
line-height: 56px;
41+
font-size: 48px;
42+
}
43+
}
44+
45+
.lead {
46+
margin: 0 auto;
47+
max-width: 512px;
48+
padding-top: 12px;
49+
line-height: 24px;
50+
font-size: 16px;
51+
font-weight: 500;
52+
color: var(--vp-c-text-2);
53+
}
54+
55+
@media (min-width: 768px) {
56+
.lead {
57+
max-width: 592px;
58+
letter-spacing: 0.15px;
59+
line-height: 28px;
60+
font-size: 20px;
61+
}
62+
}
63+
</style>

‎src/client/theme-default/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export { default as VPHomeHero } from './components/VPHomeHero.vue'
1515
export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
1616
export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'
1717
export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'
18+
export { default as VPTeamPage } from './components/VPTeamPage.vue'
19+
export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
20+
export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
21+
export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
1822

1923
const theme: Theme = {
2024
Layout,

‎src/client/theme-default/styles/components/vp-doc.css

+24-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121

2222
.vp-doc h2 {
23-
margin: 48px 0 0;
23+
margin: 48px 0 16px;
2424
border-top: 1px solid var(--vp-c-divider-light);
2525
padding-top: 24px;
2626
letter-spacing: -0.02em;
@@ -461,3 +461,26 @@
461461
.vp-doc [class~='language-tsx']:before { content: 'tsx'; }
462462
.vp-doc [class~='language-vue']:before { content: 'vue'; }
463463
.vp-doc [class~='language-yaml']:before { content: 'yaml'; }
464+
465+
/**
466+
* Component: Team
467+
* -------------------------------------------------------------------------- */
468+
469+
.vp-doc .VPTeamMembers {
470+
margin-top: 24px;
471+
}
472+
473+
.vp-doc .VPTeamMembers.small.count-1 .container {
474+
margin: 0 !important;
475+
max-width: calc((100% - 24px) / 2) !important;
476+
}
477+
478+
.vp-doc .VPTeamMembers.small.count-2 .container,
479+
.vp-doc .VPTeamMembers.small.count-3 .container {
480+
max-width: 100% !important;
481+
}
482+
483+
.vp-doc .VPTeamMembers.medium.count-1 .container {
484+
margin: 0 !important;
485+
max-width: calc((100% - 24px) / 2) !important;
486+
}

‎theme.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ export const VPHomeHero = ComponentOptions
55
export const VPHomeFeatures = ComponentOptions
66
export const VPHomeSponsors = ComponentOptions
77
export const VPDocAsideSponsors = ComponentOptions
8+
export const VPTeamPage = ComponentOptions
9+
export const VPTeamPageTitle = ComponentOptions
10+
export const VPTeamPageSection = ComponentOptions
11+
export const VPTeamMembers = ComponentOptions
812

913
declare const theme: {
1014
Layout: ComponentOptions

‎types/default-theme.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,19 @@ export namespace DefaultTheme {
181181
copyright?: string
182182
}
183183

184+
// team ----------------------------------------------------------------------
185+
186+
export interface TeamMember {
187+
avatar: string
188+
name: string
189+
title?: string
190+
org?: string
191+
orgLink?: string
192+
desc?: string
193+
links?: SocialLink[]
194+
sponsor?: string
195+
}
196+
184197
// locales -------------------------------------------------------------------
185198

186199
export interface LocaleLinks {

0 commit comments

Comments
 (0)
Please sign in to comment.