Draft: [features] Include contributors section and add tailwind css

docs/.vitepress/config.mts

@@ -87,7 +87,7 @@ export default defineConfig({
     ],
     footer: {
       message: 'Made with ❤️',
-      copyright: 'Copyright © 2024-present Saeed Vaziry'
+      copyright: 'Copyright © 2024-present Saeed Vaziry and TweakPHP contributors',
     }
   }
 })

docs/.vitepress/theme/MyLayout.vue

@@ -0,0 +1,19 @@
+<script setup>
+import Theme from 'vitepress/theme'
+import Contributors from "./components/Contributors.vue";
+
+const { Layout } = Theme
+</script>
+
+<template>
+  <Layout>
+    <template #home-features-after>
+      <div
+        class="flex flex-col justify-center items-center w-full mt-10"
+      >
+        <h3 class="text-4xl! font-semibold! text-center mb-4">Contributors</h3>
+        <Contributors />
+      </div>
+    </template>
+  </Layout>
+</template>

docs/.vitepress/theme/components/Contributors.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+
+const contributors = ref<any[]>([])
+
+const fromRepo = (repo: string) =>
+    fetch(`https://api.github.com/repos/tweakphp/${repo}/contributors`)
+        .then((res) => res.json())
+        .catch(() => [])
+
+const getContributors = async () => {
+  const users = await Promise.all([
+    fromRepo('tweakphp'),
+    fromRepo('docs'),
+    fromRepo('client'),
+    fromRepo('.github'),
+  ])
+
+  contributors.value = users
+      .reduce((acc, data = []) => {
+        if (!Array.isArray(data)) return acc
+        return [...acc, ...data.filter(i => i.login)]
+      }, [])
+      .reduce((acc, user) => {
+        const existingUser = acc.find(u => u.id === user.id)
+        if (existingUser) {
+          existingUser.contributions += user.contributions
+          return acc
+        }
+        return [...acc, {
+          id: user.id,
+          username: user.login,
+          contributions: user.contributions,
+          avatar_url: user.avatar_url
+        }]
+      }, [])
+}
+
+onMounted(() => {
+  getContributors()
+})
+</script>
+
+<template>
+  <div class="text-lg text-center leading-7 my-10 px-5">
+    <div class="flex flex-wrap gap-2">
+      <a
+          v-for="contributor of contributors"
+          :key="contributor.id"
+          v-tooltip="contributor.username"
+          :href="`https://github.com/${contributor.username}`"
+          :aria-label="contributor.username"
+          rel="noopener noreferrer"
+          target="_blank"
+      >
+        <img
+            :src="contributor.avatar_url"
+            :alt="contributor.username"
+            :aria-label="contributor.username"
+            loading="lazy"
+            width="50"
+            height="50"
+            class="w-15 h-15 min-w-15 min-h-15 !rounded-full"
+        />
+      </a>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/index.js

@@ -1,16 +1,13 @@
 // https://vitepress.dev/guide/custom-theme
-import {h} from 'vue'
 import Theme from 'vitepress/theme'
 import './style.css'
+import MyLayout from "./MyLayout.vue";
+import Contributors from "./components/Contributors.vue";
 
 export default {
     extends: Theme,
-    Layout: () => {
-        return h(Theme.Layout, null, {
-            // https://vitepress.dev/guide/extending-default-theme#layout-slots
-        })
-    },
-    enhanceApp({app, router, siteData}) {
-        // app.component('Component', Component)
-    },
+    Layout: MyLayout,
+    enhanceApp({ app }) {
+        app.component('Contributors', Contributors);
+    }
 }

docs/.vitepress/theme/style.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 :root {
   --vp-c-brand-1: #be185d;
   --vp-c-brand-2: #db2777;