team page

lando · Jan 1, 2024 · d64c27b · d64c27b
1 parent f9bd282
commit d64c27b
Show file tree

Hide file tree

Showing 11 changed files with 388 additions and 326 deletions.
diff --git a/components/VPLTeamMembers.vue b/components/VPLTeamMembers.vue
@@ -0,0 +1,226 @@
+<template>
+  <VPTeamMembers
+    :size="size"
+    :members="members"
+  />
+</template>
+
+<script setup>
+import {useData} from 'vitepress';
+import {VPTeamMembers} from 'vitepress/theme';
+
+const {members, size} = defineProps({
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  members: {
+    type: Object,
+    default: () => {
+      const {theme} = useData();
+      return theme.value.team ?? [];
+    },
+  },
+});
+
+</script>
+
+<style scoped>
+.VPTeamMembersItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.VPTeamMembersItem.icon {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 12px;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+}
+
+.VPTeamMembersItem.icon .profile {
+  padding: 0px;
+  background-color: transparent;
+}
+
+.VPTeamMembersItem.icon .data {
+  display: none;
+}
+
+.VPTeamMembersItem.icon .avatar {
+  width: 24px;
+  height: 24px;
+  box-shadow: none;
+}
+
+.VPTeamMembersItem.small .profile {
+  padding: 32px;
+}
+
+.VPTeamMembersItem.small .data {
+  padding-top: 20px;
+}
+
+.VPTeamMembersItem.small .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.VPTeamMembersItem.small .name {
+  line-height: 24px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.small .affiliation {
+  padding-top: 4px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.VPTeamMembersItem.small .desc {
+  padding-top: 12px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.VPTeamMembersItem.small .links {
+  margin: 0 -16px -20px;
+  padding: 10px 0 0;
+}
+
+.VPTeamMembersItem.medium .profile {
+  padding: 48px 32px;
+}
+
+.VPTeamMembersItem.medium .data {
+  padding-top: 24px;
+  text-align: center;
+}
+
+.VPTeamMembersItem.medium .avatar {
+  width: 96px;
+  height: 96px;
+}
+
+.VPTeamMembersItem.medium .name {
+  letter-spacing: 0.15px;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+.VPTeamMembersItem.medium .affiliation {
+  padding-top: 4px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.medium .desc {
+  padding-top: 16px;
+  max-width: 288px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.medium .links {
+  margin: 0 -16px -12px;
+  padding: 16px 12px 0;
+}
+
+.profile {
+  flex-grow: 1;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.data {
+  text-align: center;
+}
+
+.avatar {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0 auto;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-3);
+  z-index: 9999;
+}
+
+.avatar-img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.name {
+  margin: 0;
+  font-weight: 600;
+}
+
+.affiliation {
+  margin: 0;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.org.link {
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+
+.org.link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.desc {
+  margin: 0 auto;
+}
+
+.desc :deep(a) {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  text-decoration-style: dotted;
+  transition: color 0.25s;
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  height: 56px;
+}
+
+.sp-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-sponsor);
+  background-color: var(--vp-c-bg-soft);
+  transition: color 0.25s, background-color 0.25s;
+}
+
+.sp .sp-link.link:hover,
+.sp .sp-link.link:focus {
+  outline: none;
+  color: var(--vp-c-white);
+  background-color: var(--vp-c-sponsor);
+}
+
+.sp-icon {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+</style>
diff --git a/components/VPLTeamMembersItem.vue b/components/VPLTeamMembersItem.vue
@@ -4,10 +4,16 @@
     :class="[size]"
   >
     <div class="profile">
+      <div
+        v-if="member.commits && size !== 'icon'"
+        class="commits"
+      >
+        {{ member.commits }}
+      </div>
       <figure class="avatar">
         <img
           class="avatar-img"
-          :src="member.avatar"
+          :src="avatar"
           :alt="`Picture of ${member.name}`"
           :title="`${member.name} <${member.email}> - ${Number.parseInt(member.commits, 10)} commits`"
         >
@@ -71,6 +77,7 @@
 </template>
 
 <script setup>
+import {computed} from 'vue';
 import VPIconHeart from '@default-theme/components/icons/VPIconHeart.vue';
 import VPLink from '@default-theme/components/VPLink.vue';
 import VPSocialLinks from '@default-theme/components/VPSocialLinks.vue';
@@ -85,6 +92,23 @@ const {member, size} = defineProps({
     default: () => ({}),
   },
 });
+
+// compute avatar url with correct size
+const avatar = computed(() => {
+  switch (size) {
+    case 'icon':
+      return `${member.avatar}?size=24`;
+    case 'small':
+      return `${member.avatar}?size=64`;
+    case 'medium':
+      return `${member.avatar}?size=120`;
+    case 'large':
+      return `${member.avatar}?size=256`;
+    default:
+      return member.avatar;
+  };
+});
+
 </script>
 
 <style scoped>
@@ -113,6 +137,10 @@ const {member, size} = defineProps({
   background-color: transparent;
 }
 
+.VPTeamMembersItem.icon .commits {
+  display: none;
+}
+
 .VPTeamMembersItem.icon .data {
   display: none;
 }
@@ -123,6 +151,10 @@ const {member, size} = defineProps({
   box-shadow: none;
 }
 
+.VPTeamMembersItem.icon .sp {
+  display: none;
+}
+
 .VPTeamMembersItem.small .profile {
   padding: 32px;
 }
@@ -144,13 +176,18 @@ const {member, size} = defineProps({
 .VPTeamMembersItem.small .affiliation {
   padding-top: 4px;
   line-height: 20px;
-  font-size: 14px;
+  font-size: 12px;
+}
+
+.VPTeamMembersItem.small .commits {
+  top: -30px;
 }
 
 .VPTeamMembersItem.small .desc {
   padding-top: 12px;
   line-height: 20px;
   font-size: 14px;
+  display: none;
 }
 
 .VPTeamMembersItem.small .links {
@@ -180,7 +217,7 @@ const {member, size} = defineProps({
 
 .VPTeamMembersItem.medium .affiliation {
   padding-top: 4px;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .VPTeamMembersItem.medium .desc {
@@ -229,12 +266,29 @@ const {member, size} = defineProps({
 
 .affiliation {
   margin: 0;
-  font-weight: 500;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--vp-c-text-3);
+}
+
+.at {
   color: var(--vp-c-text-2);
 }
 
+.commits {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--vp-c-text-3);
+  position: relative;
+  top: -45px;
+  right: -25px;
+  font-size: 10px
+}
+
 .org.link {
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-3);
   transition: color 0.25s;
 }