Merge pull request #2 from hthienloc/main

Implement dynamic fetching of GitHub contributors and update UI

Author: nhktmdzhg

src/views/Home.vue

@@ -23,7 +23,9 @@ const mobileMenuOpen = ref<boolean>(false);
 const activeOS = ref<string>('arch');
 const setupStep = ref<number>(0);
 const isScrolled = ref<boolean>(false);
-const starCount = ref<string>('160+');
+const starCount = ref<string>('0');
+const contributorCount = ref<number>(0);
+const REPO = 'LotusInputMethod/fcitx5-lotus';
 
 // --- CATPPUCCIN THEME LOGIC ---
 const catppuccinThemes = ['latte', 'frappe', 'macchiato', 'mocha'] as const;
@@ -71,7 +73,6 @@ const startTyping = () => {
 };
 
 const fetchGithubStars = async () => {
-  const REPO = 'LotusInputMethod/fcitx5-lotus';
   const CACHE_KEY = 'lotus_stars_cache';
   const CACHE_TIME_KEY = 'lotus_stars_timestamp';
   const TWO_HOURS = 2 * 60 * 60 * 1000;
@@ -102,6 +103,67 @@ const fetchGithubStars = async () => {
   }
 };
 
+const fetchContributors = async () => {
+  const CACHE_KEY = 'lotus_contributors_cache';
+  const CACHE_TIME_KEY = 'lotus_contributors_timestamp';
+  const TWO_HOURS = 2 * 60 * 60 * 1000;
+
+  const specialRoles: Record<number, string> = {
+    57983253: 'Founder', // nhktmdzhg
+  };
+
+  const blacklist = ['thanhpy2009', 'loccun'];
+
+  try {
+    const cachedData = localStorage.getItem(CACHE_KEY);
+    const lastFetch = localStorage.getItem(CACHE_TIME_KEY);
+    const now = Date.now();
+
+    if (cachedData && lastFetch && now - parseInt(lastFetch) < TWO_HOURS) {
+      const parsed = JSON.parse(cachedData);
+      const filtered = parsed.filter(
+        (c: any) => !blacklist.includes(c.name) && !c.name.includes('[bot]'),
+      );
+      contributors.value = filtered;
+      contributorCount.value = filtered.length;
+      return;
+    }
+
+    const response = await fetch(
+      `https://api.github.com/repos/${REPO}/contributors`,
+    );
+    if (!response.ok) throw new Error('GitHub API error');
+
+    const data = await response.json();
+    const fetchedContributors: Contributor[] = data
+      .filter(
+        (item: any) =>
+          !blacklist.includes(item.login) &&
+          item.type !== 'Bot' &&
+          !item.login.includes('[bot]'),
+      )
+      .map((item: any) => ({
+        id: item.id,
+        name: item.login,
+        role: specialRoles[item.id] || 'Contributor',
+        avatar: item.avatar_url,
+        githubUrl: item.html_url,
+      }));
+
+    contributors.value = fetchedContributors;
+    contributorCount.value = fetchedContributors.length;
+    localStorage.setItem(CACHE_KEY, JSON.stringify(fetchedContributors));
+    localStorage.setItem(CACHE_TIME_KEY, now.toString());
+  } catch (error) {
+    console.error('Lỗi khi lấy contributor từ GitHub:', error);
+    const oldCache = localStorage.getItem(CACHE_KEY);
+    if (oldCache) {
+      contributors.value = JSON.parse(oldCache);
+      contributorCount.value = contributors.value.length;
+    }
+  }
+};
+
 onMounted(() => {
   const savedTheme = localStorage.getItem('catppuccin-theme');
   if (savedTheme && catppuccinThemes.includes(savedTheme as CatppuccinTheme)) {
@@ -119,6 +181,7 @@ onMounted(() => {
   window.addEventListener('scroll', handleScroll);
   startTyping();
   fetchGithubStars();
+  fetchContributors();
 });
 
 onUnmounted(() => {
@@ -266,37 +329,13 @@ const typingModes: TypingMode[] = [
 ];
 
 interface Contributor {
+  id: number;
   name: string;
   role: string;
   avatar: string;
+  githubUrl: string;
 }
-const contributors: Contributor[] = [
-  {
-    name: 'Nguyen Hoang Ky',
-    role: 'Founder',
-    avatar: 'https://avatars.githubusercontent.com/u/57983253?v=4',
-  },
-  {
-    name: 'Huỳnh Thiện Lộc',
-    role: 'Contributor',
-    avatar: 'https://avatars.githubusercontent.com/u/148019203?v=4',
-  },
-  {
-    name: 'Nguyễn Hồng Hiệp',
-    role: 'Contributor',
-    avatar: 'https://avatars.githubusercontent.com/u/57614330?v=4',
-  },
-  {
-    name: 'Đặng Quang Hiển',
-    role: 'Contributor',
-    avatar: 'https://avatars.githubusercontent.com/u/83270073?v=4',
-  },
-  {
-    name: 'Zebra2711',
-    role: 'Contributor',
-    avatar: 'https://avatars.githubusercontent.com/u/89755535?v=4',
-  },
-];
+const contributors = ref<Contributor[]>([]);
 
 // --- COMMANDS ---
 const commands: Record<string, string> = {
@@ -449,7 +488,7 @@ const copyToClipboard = async (text: string | undefined): Promise<void> => {
               <span>Distros hỗ trợ</span>
             </div>
             <div class="stat-item">
-              <strong>5</strong>
+              <strong>{{ contributorCount }}</strong>
               <span>Người đóng góp</span>
             </div>
           </div>
@@ -669,7 +708,12 @@ const copyToClipboard = async (text: string | undefined): Promise<void> => {
         </div>
 
         <div class="contributors-flex">
-          <div v-for="c in contributors" :key="c.name" class="contributor-item">
+          <div
+            v-for="c in contributors"
+            :key="c.name"
+            class="contributor-item"
+            @click="openLink(c.githubUrl)"
+          >
             <el-avatar :size="80" :src="c.avatar" class="contributor-avatar" />
             <div class="c-name">{{ c.name }}</div>
             <div class="c-role">{{ c.role }}</div>