Skip to content

Commit 7b1be71

Browse files
bencodezenbencodezen
authored
(next): team page (#1269)
1 parent 13071fb commit 7b1be71

16 files changed

+1988
-11
lines changed

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ typings/
8282
# Yarn Integrity file
8383
.yarn-integrity
8484

85+
# pnpm link folder
86+
pnpm-global
87+
8588
# dotenv environment variables file
8689
.env
8790
.env.test
@@ -103,4 +106,4 @@ tmp/
103106
temp/
104107
TODOs.md
105108
src/api/index.json
106-
src/examples/data.json
109+
src/examples/data.json

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
"build": "vitepress build src",
55
"serve": "vitepress serve src"
66
},
7+
"dependencies": {
8+
"@vue/repl": "^0.4.3",
9+
"@vue/theme": "^0.1.14",
10+
"vue": "^3.2.21"
11+
},
712
"devDependencies": {
813
"@types/node": "^16.9.1",
914
"cheap-watch": "^1.0.3",
1015
"vitepress": "^0.20.1"
11-
},
12-
"dependencies": {
13-
"vue": "^3.2.21",
14-
"@vue/repl": "^0.4.3",
15-
"@vue/theme": "^0.1.13"
1616
}
1717
}

‎pnpm-lock.yaml

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/.vitepress/theme/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
preferSFC,
77
filterHeadersByPreference
88
} from './components/preferences'
9+
import './styles/utilities.css'
910
import './styles/inline-demo.css'
1011
import './styles/options-boxes.css'
1112

‎src/.vitepress/theme/styles/utilities.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.nowrap {
2+
white-space: nowrap;
3+
}
4+
5+
.sr-only {
6+
position: absolute;
7+
width: 1px;
8+
height: 1px;
9+
padding: 0;
10+
margin: -1px;
11+
overflow: hidden;
12+
clip: rect(0, 0, 0, 0);
13+
border: 0;
14+
}

‎src/about/images/ben-hong.jpeg

35.6 KB
Loading

‎src/about/images/evan-you.jpeg

39.6 KB
Loading

‎src/about/team.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
# Meet the Team
1+
---
2+
page: true
3+
title: Meet the Team
4+
---
5+
6+
<script setup>
7+
import TeamPage from './team/TeamPage.vue'
8+
</script>
9+
10+
<TeamPage />

‎src/about/team/Member.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export interface Member {
2+
name: string
3+
avatarPic?: string
4+
title: string
5+
company?: string
6+
companyLink?: string
7+
projects: Link[]
8+
location: string
9+
languages: string[]
10+
website?: Link
11+
socials: Socials
12+
}
13+
14+
export interface Link {
15+
label: string
16+
url: string
17+
}
18+
19+
export interface Socials {
20+
github: string
21+
twitter?: string
22+
codepen?: string
23+
}

‎src/about/team/TeamHero.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="TeamHero">
3+
<div class="container">
4+
<h1 class="title">
5+
<slot name="title" />
6+
</h1>
7+
<p class="lead">
8+
<slot name="lead" />
9+
</p>
10+
<p class="action">
11+
<slot name="action" />
12+
</p>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<style scoped>
18+
.TeamHero {
19+
padding: 48px 24px;
20+
}
21+
22+
@media (min-width: 768px) {
23+
.TeamHero {
24+
padding: 64px 32px 48px;
25+
}
26+
}
27+
28+
.container {
29+
margin: 0 auto;
30+
max-width: 960px;
31+
}
32+
33+
.title,
34+
.lead {
35+
transition: color 0.25s;
36+
}
37+
38+
.title {
39+
line-height: 32px;
40+
font-size: 32px;
41+
font-weight: 500;
42+
}
43+
44+
@media (min-width: 768px) {
45+
.title {
46+
line-height: 40px;
47+
font-size: 40px;
48+
}
49+
}
50+
51+
.lead {
52+
padding-top: 8px;
53+
font-size: 16px;
54+
font-weight: 500;
55+
max-width: 512px;
56+
color: var(--vt-c-text-2);
57+
}
58+
59+
.action {
60+
padding-top: 4px;
61+
}
62+
63+
.action :deep(a) {
64+
display: inline-block;
65+
line-height: 20px;
66+
font-size: 14px;
67+
font-weight: 500;
68+
color: var(--vt-c-brand);
69+
transition: color .25s;
70+
}
71+
72+
.action :deep(a:hover) {
73+
color: var(--vt-c-brand-dark);
74+
}
75+
</style>

‎src/about/team/TeamList.vue

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<script setup lang="ts">
2+
import type { Member } from './Member'
3+
import TeamMember from './TeamMember.vue'
4+
5+
defineProps<{
6+
members: Member[]
7+
}>()
8+
</script>
9+
10+
<template>
11+
<section class="TeamList">
12+
<div class="container">
13+
<div class="info">
14+
<h2 class="title">
15+
<slot name="title" />
16+
</h2>
17+
<p class="lead">
18+
<slot name="lead" />
19+
</p>
20+
</div>
21+
22+
<div class="members">
23+
<div v-for="member in members" :key="member.name" class="member">
24+
<TeamMember :member="member" />
25+
</div>
26+
</div>
27+
</div>
28+
</section>
29+
</template>
30+
31+
<style scoped>
32+
@media (min-width: 768px) {
33+
.TeamList {
34+
padding: 0 32px;
35+
}
36+
}
37+
38+
.container {
39+
border-top: 1px solid var(--vt-c-divider-light);
40+
padding-top: 24px;
41+
}
42+
43+
@media (min-width: 768px) {
44+
.container {
45+
margin: 0 auto;
46+
display: flex;
47+
align-items: flex-start;
48+
max-width: 960px;
49+
}
50+
}
51+
52+
.info {
53+
flex-shrink: 0;
54+
padding: 0 24px;
55+
max-width: 512px;
56+
}
57+
58+
@media (min-width: 768px) {
59+
.info {
60+
position: sticky;
61+
top: 32px;
62+
left: 0;
63+
padding: 0 24px 0 0;
64+
width: 256px;
65+
}
66+
}
67+
68+
@media (min-width: 960px) {
69+
.info {
70+
top: 88px;
71+
padding: 0 64px 0 0;
72+
width: 384px;
73+
}
74+
}
75+
76+
.title {
77+
font-size: 20px;
78+
font-weight: 500;
79+
}
80+
81+
.lead {
82+
padding-top: 8px;
83+
line-height: 24px;
84+
font-size: 14px;
85+
font-weight: 500;
86+
color: var(--vt-c-text-2);
87+
}
88+
89+
.members {
90+
padding-top: 24px;
91+
}
92+
93+
@media (min-width: 768px) {
94+
.members {
95+
flex-grow: 1;
96+
padding-top: 0;
97+
}
98+
}
99+
100+
.member + .member {
101+
padding-top: 16px;
102+
}
103+
104+
@media (min-width: 640px) {
105+
.member {
106+
margin: 0 auto;
107+
max-width: 592px;
108+
}
109+
}
110+
111+
@media (min-width: 768px) {
112+
.member {
113+
margin: 0;
114+
max-width: 100%;
115+
}
116+
}
117+
</style>

0 commit comments

Comments
 (0)