Add Contributors to Team Page

Author: smashedr

.vitepress/theme/components/Contributors.vue

@@ -1,45 +1,62 @@
 <script setup>
 import contributors from '../../contributors.json'
 // console.debug('%c Contributors', 'color: Cyan', 'contributors:', contributors)
-const imageStyle = {}
+
 const props = defineProps({
-  size: { type: String, default: null },
+  size: { type: String, default: '64' },
+  margin: { type: String, default: null },
+  heading: { type: String, default: null },
 })
-if (props.size) {
-  imageStyle.height = props.size
-  imageStyle.width = props.size
-}
+
+const outerStyle = { margin: props.margin }
+console.log('outerStyle:', outerStyle)
+const imageStyle = { width: `${props.size}px`, height: `${props.size}px` }
+console.log('imageStyle:', imageStyle)
 </script>
 
 <template>
-  <div class="contributors">
-    <a
-      v-for="{ login, avatar_url } of contributors"
-      :key="login"
-      :aria-label="`${login} on GitHub`"
-      :href="`https://github.com/${login}`"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <img :alt="login" :src="avatar_url" :style="imageStyle" loading="lazy" />
-    </a>
+  <div class="vp-contributors" :style="outerStyle">
+    <div class="vp-contributors-heading" v-if="props.heading">{{ props.heading }}</div>
+    <div class="vp-contributors-images">
+      <a
+        v-for="{ login, avatar_url } of contributors"
+        :key="login"
+        :aria-label="`${login} on GitHub`"
+        :href="`https://github.com/${login}`"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          :alt="login"
+          :src="avatar_url"
+          :width="props.size"
+          :height="props.size"
+          :style="imageStyle"
+          loading="lazy"
+        />
+      </a>
+    </div>
   </div>
 </template>
 
 <style scoped>
-div.contributors {
+div.vp-contributors-heading {
+  font-size: 32px;
+  text-align: center;
+  margin-bottom: 36px;
+}
+
+div.vp-contributors-images {
   display: flex;
   flex-wrap: wrap;
   gap: 0.8rem;
   justify-content: center;
   align-items: center;
 }
 
-.contributors img {
+.vp-contributors img {
   margin: 0;
   border-radius: 50%;
-  width: 4rem;
-  height: 4rem;
   /* styles for img:hover transform */
   display: inline-block;
   vertical-align: middle;
@@ -51,7 +68,7 @@ div.contributors {
   transition-property: transform;
 }
 
-.contributors img:hover {
+.vp-contributors img:hover {
   transform: scale(1.08);
 }
 </style>

docs/index.md

@@ -44,23 +44,4 @@ features:
     link: /team
 ---
 
-<div class="footer">
-
----
-
-Contributors
-
-<Contributors />
-
-</div>
-
-<style>
-div.footer {
-  margin-top: 96px;
-  text-align: center;
-}
-.footer p:first-of-type {
-  text-align: center;
-  font-size: 1.5em;
-}
-</style>
+<Contributors heading="Contributors" margin="96px 0" />

docs/team.md

@@ -76,7 +76,7 @@ const members = [
 <!--suppress CssUnusedSymbol -->
 <style>
     .VPTeamPage {
-        margin-top: 0 !important;
+        margin: 0 0 96px !important;
     }
 </style>
 
@@ -91,3 +91,5 @@ const members = [
   </VPTeamPageTitle>
     <VPTeamMembers :members />
 </VPTeamPage>
+
+<Contributors heading="Our Contributors" margin="0 0 96px" />