Merge pull request #30 from shahriaarrr/shahriaarrr

Add Dynamic Telegram Channel Member Count Display

Author: payam-zahedi

package-lock.json

@@ -31,6 +31,8 @@
     "astro": "^4.15.1",
     "astro-embed": "^0.7.2",
     "astro-icon": "^1.1.1",
+    "axios": "^1.7.9",
+    "dotenv": "^16.4.7",
     "gsap": "^3.12.5",
     "i18next": "^24.2.0",
     "limax": "4.1.0",

package.json

@@ -18,6 +18,9 @@ import telegramAvatar5 from '~/assets/images/telegram/telegram-avatar-5.jpg';
 import telegramIcon from '~/assets/images/telegram-icon.png';
 import telegramSky from '~/assets/images/telegram-sky.jpg';
 
+// telegram channels members
+import { telegramChannelMembers, formatMemberCount } from '~/utils/telegram';
+
 import youtubeIcon from '~/assets/images/youtube-icon.jpg';
 
 //portrait images
@@ -96,6 +99,12 @@ const portraitImages = [
   { image: { src: portraitImage16, alt: 'portraitImage16' } },
   { image: { src: portraitImage17, alt: 'portraitImage17' } },
 ];
+
+// get the members count's of telegram channel
+const channelName = 'persian_flutter';
+const membersCount = await telegramChannelMembers(channelName);
+
+const formattedMembers = formatMemberCount(membersCount);
 ---
 
 <WidgetWrapper
@@ -163,7 +172,7 @@ const portraitImages = [
                     class="social-card__id flex flex-col justify-start align-top max-xl:justify-center max-xl:items-center"
                   >
                     <span class="rtl:text-end text-slate-800 text-sm font-medium h-5 ltr:text-start" dir="ltr"
-                      >+1.7K</span
+                      >{formattedMembers}</span
                     >
                     <span class="text-start text-slate-800 text-sm font-medium h-5"
                       >{translations.socials.telegram.members?.text || 'Default Members'}</span

src/components/widgets/hero/Hero.astro

@@ -0,0 +1,29 @@
+import dotenv from 'dotenv';
+import axios from 'axios';
+
+dotenv.config();
+
+const botToken = process.env.TELEGRAM_BOT_TOKEN;
+
+export async function telegramChannelMembers(channelName: string): Promise<number> {
+  try {
+    const response = await axios.get(
+      `https://api.telegram.org/bot${botToken}/getChatMembersCount?chat_id=@${channelName}`
+    );
+    return response.data.result;
+  } catch (error) {
+    console.error('Error fetching Telegram members count:', error);
+    return 0;
+  }
+}
+
+export function formatMemberCount(num: number): string {
+  if (num < 1000) {
+    return num.toString();
+  } else if (num < 10000) {
+    const truncated = Math.floor((num / 1000) * 10) / 10;
+    return truncated + 'k';
+  } else {
+    return Math.floor(num / 1000) + 'k';
+  }
+}