fix: update Contributors component to use Vue's ref and onMounted for better state management

Author: ILDaviz

docs/.vitepress/theme/MyLayout.vue

@@ -1,8 +1,8 @@
 <script setup>
-import DefaultTheme from 'vitepress/theme'
+import Theme from 'vitepress/theme'
 import Contributors from "./components/Contributors.vue";
 
-const { Layout } = DefaultTheme
+const { Layout } = Theme
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useStorage } from '@vueuse/core'
+import { ref, onMounted } from 'vue'
 
-const contributors = useStorage<any[]>('contributors', [])
+const contributors = ref<any[]>([])
 
 const fromRepo = (repo: string) =>
     fetch(`https://api.github.com/repos/tweakphp/${repo}/contributors`)
@@ -16,30 +16,29 @@ const getContributors = async () => {
     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
-    }]
-  }, [])
+  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
+        }]
+      }, [])
 }
 
-getContributors()
+onMounted(() => {
+  getContributors()
+})
 </script>
 
 <template>

docs/.vitepress/theme/index.js

@@ -1,10 +1,13 @@
 // https://vitepress.dev/guide/custom-theme
 import Theme from 'vitepress/theme'
-import Contributors from './components/Contributors.vue'
 import './style.css'
 import MyLayout from "./MyLayout.vue";
+import Contributors from "./components/Contributors.vue";
 
 export default {
     extends: Theme,
     Layout: MyLayout,
+    enhanceApp({ app }) {
+        app.component('Contributors', Contributors);
+    }
 }