(next): team page (vuejs#1269)

Author: bencodezen

.gitignore

@@ -82,6 +82,9 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
+# pnpm link folder
+pnpm-global
+
 # dotenv environment variables file
 .env
 .env.test
@@ -103,4 +106,4 @@ tmp/
 temp/
 TODOs.md
 src/api/index.json
-src/examples/data.json
+src/examples/data.json

package.json

@@ -4,14 +4,14 @@
     "build": "vitepress build src",
     "serve": "vitepress serve src"
   },
+  "dependencies": {
+    "@vue/repl": "^0.4.3",
+    "@vue/theme": "^0.1.14",
+    "vue": "^3.2.21"
+  },
   "devDependencies": {
     "@types/node": "^16.9.1",
     "cheap-watch": "^1.0.3",
     "vitepress": "^0.20.1"
-  },
-  "dependencies": {
-    "vue": "^3.2.21",
-    "@vue/repl": "^0.4.3",
-    "@vue/theme": "^0.1.13"
   }
 }

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import {
   preferSFC,
   filterHeadersByPreference
 } from './components/preferences'
+import './styles/utilities.css'
 import './styles/inline-demo.css'
 import './styles/options-boxes.css'
 

src/.vitepress/theme/index.ts

@@ -0,0 +1,14 @@
+.nowrap {
+  white-space: nowrap;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

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

@@ -1 +1,10 @@
-# Meet the Team
+---
+page: true
+title: Meet the Team
+---
+
+<script setup>
+import TeamPage from './team/TeamPage.vue'
+</script>
+
+<TeamPage />

src/about/images/ben-hong.jpeg

@@ -0,0 +1,23 @@
+export interface Member {
+  name: string
+  avatarPic?: string
+  title: string
+  company?: string
+  companyLink?: string
+  projects: Link[]
+  ___location: string
+  languages: string[]
+  website?: Link
+  socials: Socials
+}
+
+export interface Link {
+  label: string
+  url: string
+}
+
+export interface Socials {
+  github: string
+  twitter?: string
+  codepen?: string
+}

src/about/images/evan-you.jpeg

@@ -0,0 +1,75 @@
+<template>
+  <div class="TeamHero">
+    <div class="container">
+      <h1 class="title">
+        <slot name="title" />
+      </h1>
+      <p class="lead">
+        <slot name="lead" />
+      </p>
+      <p class="action">
+        <slot name="action" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.TeamHero {
+  padding: 48px 24px;
+}
+
+@media (min-width: 768px) {
+  .TeamHero {
+    padding: 64px 32px 48px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.title,
+.lead {
+  transition: color 0.25s;
+}
+
+.title {
+  line-height: 32px;
+  font-size: 32px;
+  font-weight: 500;
+}
+
+@media (min-width: 768px) {
+  .title {
+    line-height: 40px;
+    font-size: 40px;
+  }
+}
+
+.lead {
+  padding-top: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  max-width: 512px;
+  color: var(--vt-c-text-2);
+}
+
+.action {
+  padding-top: 4px;
+}
+
+.action :deep(a) {
+  display: inline-block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vt-c-brand);
+  transition: color .25s;
+}
+
+.action :deep(a:hover) {
+  color: var(--vt-c-brand-dark);
+}
+</style>