GitHub/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2024-10-11 18:07:24 +08:00
Code Issues Projects Releases Wiki Activity

Refactor github stats

Browse Source
This commit is contained in:
Kamran Ahmed 2024-08-19 12:36:28 +01:00
parent bcc456d3d0
commit c6a4bff63e
3 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scripts/generate-og-images.mjs
View File

@ -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">
Loading...
<div tw="text-[30px] flex leading-[30px]">
7th most starred GitHub project
</div>
</div>
<div tw="flex items-center mt-2.5">

8
src/components/OpenSourceBanner.astro
View File

@ -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='Registered Users' value={'+1M'} />
<OpenSourceStat text='GitHub Stars' value={starCount} secondaryValue={repoRank} />
<OpenSourceStat text='Registered Users' value={'+1M'} secondaryValue="+90k" />
<OpenSourceStat
text='Discord Members'
value={discordInfo.totalFormatted}
secondaryValue="+1.5k"
/>
</div>
</div>

14
src/components/OpenSourceStat.astro
View File

@ -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>
)