diff --git a/src/components/OpenSourceBanner.astro b/src/components/OpenSourceBanner.astro new file mode 100644 index 000000000..52b28ff64 --- /dev/null +++ b/src/components/OpenSourceBanner.astro @@ -0,0 +1,40 @@ +--- +import { getFormattedStars } from '../lib/github'; +import Icon from './Icon.astro'; + +const starCount = await getFormattedStars('kamranahmedse/developer-roadmap'); +--- + +
+
+

Open Source

+

+ The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month. +

+ +
+ + +
+ +
+ + {starCount} + GitHub Stars + + + +
+
+
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index ec8800ab4..fa7fa2955 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,29 +1,31 @@ --- -import "../styles/global.css"; +import '../styles/global.css'; import Navigation from '../components/Navigation.astro'; +import OpenSourceBanner from '../components/OpenSourceBanner.astro'; export interface Props { - title: string; + title: string; } const { title } = Astro.props; --- - - - - - - - {title} + + + + + + + {title} - - - - - + + + + + - - + + + diff --git a/src/lib/github.ts b/src/lib/github.ts new file mode 100644 index 000000000..c8d2d85c9 --- /dev/null +++ b/src/lib/github.ts @@ -0,0 +1,20 @@ +const formatter = Intl.NumberFormat('en-US', { + notation: 'compact', +}); + +export async function countStars( + repo = 'kamranahmedse/developer-roadmap' +): Promise { + 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 { + const stars = await countStars(repo); + + return formatter.format(stars); +}