Update Contributors.vue

Author: smashedr

.vitepress/get-contributors.js

@@ -2,28 +2,29 @@
 const fs = require('fs')
 const path = require('path')
 
-const repo = process.argv[2]
-const file = process.argv[3] ?? '.vitepress/contributors.json'
-console.log(`get-contributors - repo: ${repo} - file: ${file}`)
-
-if (!repo || !file) {
-    console.error('Usage: npm run get-contributors user/repo')
-    process.exit(1)
-}
+;(async () => {
+    const repo = process.argv[2]
+    const file = process.argv[3] ?? '.vitepress/contributors.json'
+    console.log(`get-contributors - repo: ${repo} - file: ${file}`)
+
+    if (!repo || !file) {
+        console.error('Usage: node get-contributors.js user/repo [contributors.json]')
+        process.exit(1)
+    }
 
-fs.mkdirSync(path.dirname(file), { recursive: true })
+    fs.mkdirSync(path.dirname(file), { recursive: true })
 
-getAllContributors(repo)
-    .then((data) => {
-        // console.log('data:', data)
-        fs.writeFileSync(file, JSON.stringify(data), 'utf8')
-    })
-    .catch((e) => {
-        console.error(e)
-        fs.writeFileSync(file, JSON.stringify([]), 'utf8')
-    })
+    let data = []
+    try {
+        data = await githubContributors(repo)
+    } catch (e) {
+        console.warn(e)
+    }
+    console.log(`get-contributors - contributors: ${data.length}`)
+    fs.writeFileSync(file, JSON.stringify(data), 'utf8')
+})()
 
-async function getAllContributors(repo) {
+async function githubContributors(repo) {
     let results = []
     let page = 1
 
@@ -32,6 +33,7 @@ async function getAllContributors(repo) {
         const data = { headers: { Accept: 'application/vnd.github+json' } }
 
         const response = await fetch(url, data)
+        // console.log('response:', response)
         if (!response.ok) break
 
         const contributors = await response.json()

.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

@@ -42,11 +42,12 @@ features:
 div.badges {
     margin-top: 80px;
 }
-
+.badges > hr {
+    margin-bottom: 24px;
+}
 .badges > p {
     text-align: center;
 }
-
 .badges img {
     display: inline-block;
     vertical-align: middle;
@@ -60,16 +61,6 @@ div.badges {
 .badges img:hover {
     transform: scale(1.05);
 }
-
-.contributors {
-    margin-top: 20px;
-}
-
-.contributors-heading {
-    margin-top: 40px;
-    text-align: center;
-    font-size: 1.5em;
-}
 </style>
 
 <div class="badges">
@@ -97,6 +88,4 @@ div.badges {
 
 </div>
 
-<div class="contributors-heading">Contributors</div>
-
-<Contributors />
+<Contributors heading="Contributors"  margin="36px 0 96px" />