main 🧊 add contributors section

Author: babin

packages/docs/app/.vitepress/sections/HomeContributors/HomeContributors.data.ts

@@ -0,0 +1,35 @@
+import md5 from 'md5';
+import { simpleGit } from 'simple-git';
+
+const git = simpleGit();
+
+export default {
+  async load() {
+    try {
+      const log = await git.log();
+      const contributorsMap = new Map();
+
+      log.all.forEach((commit) => {
+        const { author_email, author_name } = commit;
+        if (author_email && !contributorsMap.has(author_name)) {
+          contributorsMap.set(author_name, {
+            name: author_name,
+            email: author_email,
+            avatar: `https://gravatar.com/avatar/${md5(author_email)}?d=retro`
+          });
+        }
+      });
+
+      const contributors = Array.from(contributorsMap.values()).sort((a, b) =>
+        a.name.localeCompare(b.name)
+      );
+
+      return {
+        contributors
+      };
+    } catch (error) {
+      console.error('Failed to load contributors:', error);
+      return { contributors: [] };
+    }
+  }
+};

packages/docs/app/.vitepress/sections/HomeContributors/HomeContributors.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { data } from './HomeContributors.data';
+
+interface Contributor {
+  avatar: string;
+  name: string;
+}
+
+const contributors = ref<Contributor[]>(data.contributors);
+</script>
+
+<template>
+  <div class="mt-20">
+    <div class="mb-10 text-center text-6xl font-bold">Team & Contributors</div>
+
+    <div class="flex items-center justify-center">
+      <a
+        href="https://github.com/siberiacancode"
+        target="_blank"
+        class="no-underline! text-[var(--vp-c-text-1)]! flex items-center gap-2"
+      >
+        <img
+          src="https://avatars.githubusercontent.com/u/122668137?s=200&v=4"
+          alt="SIBERIA CAN CODE"
+          class="size-10 rounded-lg"
+        />
+        <div class="text-2xl font-bold">SIBERIA CAN CODE</div>
+      </a>
+    </div>
+
+    <div class="mt-12 text-center">
+      <div class="mt-6 flex flex-wrap justify-center gap-3">
+        <div
+          v-for="contributor in contributors"
+          :key="contributor.name"
+          :href="`https://github.com/${contributor.name}`"
+          class="flex items-center gap-2"
+        >
+          <img
+            :src="contributor.avatar"
+            :alt="contributor.name"
+            class="size-6 rounded-full"
+            loading="lazy"
+          />
+          <div class="text-xs">
+            {{ contributor.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/docs/app/.vitepress/sections/index.ts

@@ -1,2 +1,3 @@
+export { default as HomeContributors } from './HomeContributors/HomeContributors.vue';
 export { default as HomeHeroBefore } from './HomeHeroBefore/HomeHeroBefore.vue';
 export { default as HomeHooks } from './HomeHooks/HomeHooks.vue';

packages/docs/app/index.md

@@ -43,7 +43,8 @@ features:
 ---
 
 <script setup> 
-import { HomeHooks } from './.vitepress/sections' 
+import { HomeHooks, HomeContributors } from './.vitepress/sections' 
 </script>
 
 <HomeHooks />
+<HomeContributors />