Add opensource stats

package.json

@@ -27,7 +27,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "astro": "^4.4.0",
     "astro-compress": "^2.2.10",
@@ -35,7 +35,7 @@
     "dracula-prism": "^2.1.16",
     "jose": "^5.2.2",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.331.0",
+    "lucide-react": "^0.334.0",
     "nanoid": "^5.0.5",
     "nanostores": "^0.9.5",
     "node-html-parser": "^6.1.12",
@@ -50,7 +50,7 @@
     "slugify": "^1.6.6",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
-    "zustand": "^4.5.0"
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.41.2",

src/components/OpenSourceBanner.astro

@@ -1,40 +1,54 @@
 ---
 import { getFormattedStars } from '../lib/github';
 import Icon from './AstroIcon.astro';
+import { getDiscordInfo } from '../lib/discord';
+import OpenSourceStat from './OpenSourceStat.astro';
 
 const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
+const discordInfo = await getDiscordInfo();
 ---
 
-<div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
-  <div class='!max-w-[600px] container'>
-    <p class='text-2xl sm:text-5xl font-bold'>Community</p>
-    <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
+<div class='border-b border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
+  <div class='container !max-w-[650px]'>
+    <p class='text-2xl font-bold sm:text-5xl'>Join the Community</p>
+    <p class='my-2.5 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
       roadmap.sh is the <a
         href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
         target='_blank'
-        class='font-medium text-gray-600 hover:text-black underline underline-offset-2'
+        class='font-medium text-gray-600 underline underline-offset-2 hover:text-black'
         >6th most starred project on GitHub</a
       > and is visited by hundreds of thousands of developers every month.
     </p>
 
-    <div class='flex justify-start flex-col sm:flex-row sm:justify-center gap-2 sm:gap-3 mb-1.5 sm:mb-0'>
+    <div class='my-5 sm:my-11 gap-2 sm:gap-0 grid grid-cols-1 sm:grid-cols-3 justify-between divide-x-0 sm:divide-x'>
+      <OpenSourceStat text='GitHub Stars' value={starCount} />
+      <OpenSourceStat text='Registered Users' value={'850k'} />
+      <OpenSourceStat
+        text='Discord Members'
+        value={discordInfo.totalFormatted}
+      />
+    </div>
+
+    <div
+      class='mb-1.5 flex flex-col justify-start gap-2 sm:mb-0 sm:flex-row sm:justify-center sm:gap-3'
+    >
       <a
         href='https://github.com/kamranahmedse/developer-roadmap'
         target='_blank'
-        class='inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm hover:text-white hover:bg-black bg-white'
+        class='inline-flex items-center rounded-lg border border-black bg-white px-3 py-1.5 text-sm hover:bg-black hover:text-white'
       >
-          <Icon icon='star' class='mr-1 -ml-1 fill-current' />
+        <Icon icon='star' class='-ml-1 mr-1 fill-current' />
 
-          <span class='lowercase'>{starCount}</span>
-          <span class='ml-2 hover:block'>GitHub Stars</span>
+        <span class='lowercase'>{starCount}</span>
+        <span class='ml-2 hover:block'>Star on GitHub</span>
       </a>
 
       <a
-        href="https://discord.gg/cJpEt5Qbwa"
+        href='https://discord.gg/cJpEt5Qbwa'
         target='_blank'
-        class='relative pointer inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm hover:text-white hover:bg-black bg-white group'
+        class='pointer group relative inline-flex items-center rounded-lg border border-black bg-white px-3 py-1.5 text-sm hover:bg-black hover:text-white'
       >
-        <Icon icon='discord' class='h-[14px] mr-2 -ml-1 fill-current' />
+        <Icon icon='discord' class='-ml-1 mr-2 h-[14px] fill-current' />
         Join on Discord
       </a>
     </div>

src/components/OpenSourceStat.astro

@@ -0,0 +1,13 @@
+---
+export interface Props {
+  value: string;
+  text: string;
+}
+
+const { value, text } = Astro.props;
+---
+
+<div class='flex flex-row sm:flex-col items-center justify-start sm:justify-center gap-2 sm:gap-1'>
+  <p class='text-base w-[50px] sm:w-auto font-bold lowercase sm:text-5xl'>{value}</p>
+  <p class='text-base leading-relaxed text-gray-500 sm:text-base'>{text}</p>
+</div>

src/lib/github.ts

@@ -6,7 +6,7 @@ const defaultStarCount = 224000;
 let starCount: number | undefined = undefined;
 
 export async function countStars(
-  repo = 'kamranahmedse/developer-roadmap'
+  repo = 'kamranahmedse/developer-roadmap',
 ): Promise<number> {
   if (starCount) {
     return starCount;
@@ -26,7 +26,7 @@ export async function countStars(
 }
 
 export async function getFormattedStars(
-  repo = 'kamranahmedse/developer-roadmap'
+  repo = 'kamranahmedse/developer-roadmap',
 ): Promise<string> {
   const stars = import.meta.env.DEV ? defaultStarCount : await countStars(repo);