Add Contributors.vue

.gitignore

@@ -5,3 +5,4 @@
 build/
 node_modules/
 .vitepress/cache
+.vitepress/contributors.json

.vitepress/get-contributors.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+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)
+}
+
+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')
+    })
+
+async function getAllContributors(repo) {
+    let results = []
+    let page = 1
+
+    while (true) {
+        const url = `https://api.github.com/repos/${repo}/contributors?per_page=100&page=${page}`
+        const data = { headers: { Accept: 'application/vnd.github+json' } }
+
+        const response = await fetch(url, data)
+        if (!response.ok) break
+
+        const contributors = await response.json()
+        // console.log('contributors:', contributors)
+        if (!contributors.length) break
+
+        const filtered = contributors
+            .filter((c) => c.type === 'User')
+            .map((c) => ({
+                login: c.login,
+                avatar_url: c.avatar_url,
+                contributions: c.contributions,
+            }))
+        // console.log('filtered:', filtered)
+
+        results.push(...filtered)
+        page++
+        await new Promise((resolve) => setTimeout(resolve, 250))
+    }
+
+    return results
+}

.vitepress/theme/components/Contributors.vue

@@ -0,0 +1,57 @@
+<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 },
+})
+if (props.size) {
+  imageStyle.height = props.size
+  imageStyle.width = props.size
+}
+</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>
+</template>
+
+<style scoped>
+div.contributors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.contributors img {
+  margin: 0;
+  border-radius: 50%;
+  width: 4rem;
+  height: 4rem;
+  /* styles for img:hover transform */
+  display: inline-block;
+  vertical-align: middle;
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  transition-duration: 0.3s;
+  transition-property: transform;
+}
+
+.contributors img:hover {
+  transform: scale(1.08);
+}
+</style>

.vitepress/theme/index.js

@@ -2,13 +2,15 @@ import DefaultTheme from 'vitepress/theme'
 import './custom.css'
 import 'virtual:group-icons.css'
 
+import Contributors from './components/Contributors.vue'
 import YouTubeEmbed from './components/YouTubeEmbed.vue'
 
 // noinspection JSUnusedGlobalSymbols
 export default {
     ...DefaultTheme,
 
     enhanceApp({ app }) {
+        app.component('Contributors', Contributors)
         app.component('YouTubeEmbed', YouTubeEmbed)
     },
 }

docs/index.md

@@ -39,8 +39,11 @@ features:
 ---
 
 <style>
-.badges > p {
+div.badges {
     margin-top: 80px;
+}
+
+.badges > p {
     text-align: center;
 }
 
@@ -57,10 +60,22 @@ features:
 .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">
 
+---
+
 [![GitHub Tag Major](https://img.shields.io/github/v/tag/cssnr/stack-deploy-action?sort=semver&filter=!v*.*&logo=git&logoColor=white&labelColor=585858&label=%20)](https://github.com/cssnr/stack-deploy-action/tags)
 [![GitHub Tag Minor](https://img.shields.io/github/v/tag/cssnr/stack-deploy-action?sort=semver&filter=!v*.*.*&logo=git&logoColor=white&labelColor=585858&label=%20)](https://github.com/cssnr/stack-deploy-action/releases)
 [![GitHub Release Version](https://img.shields.io/github/v/release/cssnr/stack-deploy-action?logo=git&logoColor=white&labelColor=585858&label=%20)](https://github.com/cssnr/stack-deploy-action/releases/latest)
@@ -81,3 +96,7 @@ features:
 [![Ko-fi](https://img.shields.io/badge/Ko--fi-72a5f2?logo=kofi&label=support)](https://ko-fi.com/cssnr)
 
 </div>
+
+<div class="contributors-heading">Contributors</div>
+
+<Contributors />

package.json

@@ -3,7 +3,9 @@
     "dev": "vitepress dev .",
     "build": "vitepress build .",
     "preview": "vitepress preview .",
-    "prettier": "npx prettier --check ."
+    "prettier": "npx prettier --check .",
+    "get-contributors": "node .vitepress/get-contributors.js cssnr/stack-deploy-action",
+    "postinstall": "npm run get-contributors"
   },
   "dependencies": {
     "vitepress": "^1.6.4",