Refactor github stats

scripts/generate-og-images.mjs

@@ -6,7 +6,6 @@ import satori from 'satori';
 import sharp from 'sharp';
 import imageSize from 'image-size';
 import { Resvg } from '@resvg/resvg-js';
-import { getRepositoryRank } from '../src/lib/github';
 
 const ALL_ROADMAP_DIR = path.join(process.cwd(), '/src/data/roadmaps');
 const ALL_BEST_PRACTICE_DIR = path.join(
@@ -29,11 +28,6 @@ const alreadyGeneratedImages = await fs.readdir(
   },
 );
 
-async function updateRank() {
-  const repoRank = await getRepositoryRank('kamranahmedse/developer-roadmap');
-  document.getElementById('repo-rank').innerText = `${repoRank} most starred GitHub project`;
-}
-
 async function getAllRoadmaps() {
   const allRoadmapDirNames = await fs.readdir(ALL_ROADMAP_DIR);
 
@@ -148,8 +142,6 @@ async function getAllBestPracticeImageIds() {
 }
 
 async function generateResourceOpenGraph() {
-  await updateRank();
-
   const allRoadmaps = (await getAllRoadmaps()).filter(
     (roadmap) => !alreadyGeneratedImages.includes(`roadmaps/${roadmap.id}.png`),
   );
@@ -379,8 +371,8 @@ function getRoadmapDefaultTemplate({ title, description }) {
                 />
               </svg>
             </div>
-            <div tw="text-[30px] flex leading-[30px]" id="repo-rank">
+            <div tw="text-[30px] flex leading-[30px]">
-              Loading...
+              7th most starred GitHub project
             </div>
           </div>
           <div tw="flex items-center mt-2.5">

src/components/OpenSourceBanner.astro

@@ -1,10 +1,11 @@
 ---
 import { getFormattedStars, getRepositoryRank } from '../lib/github';
-import Icon from './AstroIcon.astro';
 import { getDiscordInfo } from '../lib/discord';
+
 import OpenSourceStat from './OpenSourceStat.astro';
 
 const repoName = 'kamranahmedse/developer-roadmap';
+
 const starCount = await getFormattedStars(repoName);
 const repoRank = await getRepositoryRank(repoName);
 const discordInfo = await getDiscordInfo();
@@ -25,11 +26,12 @@ const discordInfo = await getDiscordInfo();
     <div
       class='mt-5 grid grid-cols-1 justify-between gap-2 divide-x-0 sm:my-11 sm:grid-cols-3 sm:gap-0 sm:divide-x mb-4 sm:mb-0'
     >
-      <OpenSourceStat text='GitHub Stars' value={starCount} />
+      <OpenSourceStat text='GitHub Stars' value={starCount} secondaryValue={repoRank} />
-      <OpenSourceStat text='Registered Users' value={'+1M'} />
+      <OpenSourceStat text='Registered Users' value={'+1M'} secondaryValue="+90k" />
       <OpenSourceStat
         text='Discord Members'
         value={discordInfo.totalFormatted}
+        secondaryValue="+1.5k"
       />
     </div>
   </div>

src/components/OpenSourceStat.astro

@@ -1,19 +1,17 @@
 ---
-import { ChevronUp } from 'lucide-react';
 import Icon from './AstroIcon.astro';
-import { getRepositoryRank } from '../lib/github';
+
 export interface Props {
+  secondaryValue?: string;
   value: string;
   text: string;
 }
 
-const { value, text } = Astro.props;
+const { value, text, secondaryValue } = Astro.props;
 
 const isGitHubStars = text.toLowerCase() === 'github stars';
 const isRegistered = text.toLowerCase() === 'registered users';
 const isDiscordMembers = text.toLowerCase() === 'discord members';
-
-const repoRank = await getRepositoryRank('kamranahmedse/developer-roadmap');
 ---
 
 <div
@@ -22,7 +20,7 @@ const repoRank = await getRepositoryRank('kamranahmedse/developer-roadmap');
   {
     isGitHubStars && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='rounded-md bg-blue-500 px-1 text-white'>Rank {repoRank}</span>
+        <span class='rounded-md bg-blue-500 px-1 text-white'>Rank {secondaryValue}</span>
         &nbsp;out of 28M!
       </p>
     )
@@ -31,7 +29,7 @@ const repoRank = await getRepositoryRank('kamranahmedse/developer-roadmap');
   {
     isRegistered && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+75k</span>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>{secondaryValue}</span>
         every month
       </p>
     )
@@ -40,7 +38,7 @@ const repoRank = await getRepositoryRank('kamranahmedse/developer-roadmap');
   {
     isDiscordMembers && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>{secondaryValue}</span>
         every month
       </p>
     )