github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add star count

Browse Source
astro
Kamran Ahmed 2 years ago
parent 5b4ed23946
commit 3613916570
3 changed files with 78 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      src/components/OpenSourceBanner.astro
  2. 18
      src/layouts/BaseLayout.astro
  3. 20
      src/lib/github.ts

40
src/components/OpenSourceBanner.astro
Unescape 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>

18
src/layouts/BaseLayout.astro
Unescape View File

@ -1,6 +1,7 @@
--- ---
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;
@ -10,20 +11,21 @@ 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 />
<slot name='after-footer' />
</body> </body>
</html> </html>

20
src/lib/github.ts
Unescape 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);
}
Write Preview
Loading…
Cancel
Save