info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-30 20:49:49 +02:00
Code Issues Releases Wiki Activity

Add star count

Browse Source
This commit is contained in:
Kamran Ahmed
2023-01-02 23:18:20 +04:00
parent 5b4ed23946
commit 3613916570
3 changed files with 78 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/OpenSourceBanner.astro Normal file
View File

@@ -0,0 +1,40 @@
---
import { getFormattedStars } from '../lib/github';
import Icon from './Icon.astro';
const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
---
<div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
<div class='max-w-[600px] container'>
<h1 class='text-3xl sm:text-5xl font-bold'>Open Source</h1>
<p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
The project is OpenSource, <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'
>6th most starred project on GitHub</a
> and is visited by hundreds of thousands of developers every month.
</p>
<div class='block mb-1.5 sm:mb-0'>
<a
href='https://github.com/kamranahmedse/developer-roadmap'
target='_blank'
class='inline-flex items-center group rounded-md relative'
>
<span
class='inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm group-hover:text-white group-hover:bg-black relative bg-white'
>
<div class='mr-1 -ml-1'>
<Icon icon='star' />
</div>
<span class='lowercase'>{starCount}</span>
<span class='ml-1.5 group-hover:hidden'>GitHub Stars</span>
<span class='ml-2 hidden group-hover:block'>Star us on GitHub</span>
</span>
</a>
</div>
</div>
</div>

34
src/layouts/BaseLayout.astro
View File

@@ -1,29 +1,31 @@
--- ---
import "../styles/global.css"; import '../styles/global.css';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import OpenSourceBanner from '../components/OpenSourceBanner.astro';
export interface Props { export interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang='en'>
<head> <head>
<meta charset="UTF-8" /> <meta charset='UTF-8' />
<meta name="viewport" content="width=device-width" /> <meta name='viewport' content='width=device-width' />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name="generator" content={Astro.generator} /> <meta name='generator' content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<slot name="after-header" /> <slot name='after-header' />
</head> </head>
<body> <body>
<Navigation /> <Navigation />
<slot /> <slot />
<slot name="after-footer"/> <OpenSourceBanner />
</body> <slot name='after-footer' />
</body>
</html> </html>

20
src/lib/github.ts Normal file
View File

@@ -0,0 +1,20 @@
const formatter = Intl.NumberFormat('en-US', {
notation: 'compact',
});
export async function countStars(
repo = 'kamranahmedse/developer-roadmap'
): Promise<number> {
const repoData = await fetch(`https://api.github.com/repos/${repo}`);
const json = await repoData.json();
return json.stargazers_count * 1;
}
export async function getFormattedStars(
repo = 'kamranahmedse/developer-roadmap'
): Promise<string> {
const stars = await countStars(repo);
return formatter.format(stars);
}