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

Update opensource banner

Browse Source
This commit is contained in:
Kamran Ahmed
2024-02-22 13:54:15 +00:00
parent d847eb0685
commit f1f56408d5
2 changed files with 94 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/OpenSourceBanner.astro
View File

@@ -16,8 +16,8 @@ const discordInfo = await getDiscordInfo();
href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
target='_blank'
class='font-medium text-gray-600 underline underline-offset-2 hover:text-black'
>6th most starred project on GitHub</a
> and is visited by hundreds of thousands of developers every month.
>6th most starred project on GitHub </a>
and is visited by hundreds of thousands of developers every month.
</p>
<div class='my-5 sm:my-11 gap-2 sm:gap-0 grid grid-cols-1 sm:grid-cols-3 justify-between divide-x-0 sm:divide-x'>
@@ -28,29 +28,5 @@ const discordInfo = await getDiscordInfo();
value={discordInfo.totalFormatted}
/>
</div>
<div
class='mb-1.5 flex flex-col justify-start gap-2 sm:mb-0 sm:flex-row sm:justify-center sm:gap-3'
>
<a
href='https://github.com/kamranahmedse/developer-roadmap'
target='_blank'
class='inline-flex items-center rounded-lg border border-black bg-white px-3 py-1.5 text-sm hover:bg-black hover:text-white'
>
<Icon icon='star' class='-ml-1 mr-1 fill-current' />
<span class='lowercase'>{starCount}</span>
<span class='ml-2 hover:block'>Star on GitHub</span>
</a>
<a
href='https://discord.gg/cJpEt5Qbwa'
target='_blank'
class='pointer group relative inline-flex items-center rounded-lg border border-black bg-white px-3 py-1.5 text-sm hover:bg-black hover:text-white'
>
<Icon icon='discord' class='-ml-1 mr-2 h-[14px] fill-current' />
Join on Discord
</a>
</div>
</div>
</div>

95
src/components/OpenSourceStat.astro
View File

@@ -1,13 +1,102 @@
---
import { ChevronUp } from 'lucide-react';
import Icon from './AstroIcon.astro';
export interface Props {
value: string;
text: string;
}
const { value, text } = Astro.props;
const isGitHubStars = text.toLowerCase() === 'github stars';
const isRegistered = text.toLowerCase() === 'registered users';
const isDiscordMembers = text.toLowerCase() === 'discord members';
---
<div class='flex flex-row sm:flex-col items-center justify-start sm:justify-center gap-2 sm:gap-1'>
<p class='text-base w-[50px] sm:w-auto font-bold lowercase sm:text-5xl'>{value}</p>
<p class='text-base leading-relaxed text-gray-500 sm:text-base'>{text}</p>
<div
class='flex flex-row items-center justify-start sm:flex-col sm:justify-center'
>
{
isGitHubStars && (
<p class='flex items-center text-sm text-blue-500'>
<span class='rounded-md bg-blue-500 px-1 text-white'>Rank 6th</span>
&nbsp;out of 28m!
</p>
)
}
{
isRegistered && (
<p class='flex items-center text-sm text-blue-500'>
<span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+55k</span>
every month
</p>
)
}
{
isDiscordMembers && (
<p class='flex items-center text-sm text-blue-500'>
<span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
every month
</p>
)
}
<p
class='relative my-4 w-[50px] text-base font-bold lowercase sm:w-auto sm:text-5xl'
>
{value}
</p>
<p class="text-xs -mt-3 mb-5 tracking-wide text-gray-500">{text}</p>
{
isGitHubStars && (
<a
href='https://github.com/kamranahmedse/developer-roadmap'
target='_blank'
class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
>
<div class='mb-0.5 flex items-center font-semibold'>
<Icon icon='star' class='-ml-1 fill-current' />
<span class='ml-1.5 hover:block'>Star us on GitHub</span>
</div>
<span class='text-xs text-gray-500 group-hover:text-gray-100'>
Help us reach #1
</span>
</a>
)
}
{
isRegistered && (
<a
href='/signup'
target='_blank'
class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
>
<div class='mb-0.5 flex items-center font-semibold'>
<Icon icon='users' class='-ml-1 fill-current h-[15px]' />
<span class='ml-1 hover:block'>Register yourself</span>
</div>
<span class='text-xs text-gray-500 group-hover:text-gray-100'>
Commit to your growth
</span>
</a>
)
}
{
isDiscordMembers && (
<a
href='/signup'
target='_blank'
class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
>
<div class='mb-0.5 flex items-center font-semibold'>
<Icon icon='discord' class='-ml-1 fill-current h-[13px]' />
<span class='ml-1 hover:block'>Join on Discord</span>
</div>
<span class='text-xs text-gray-500 group-hover:text-gray-100'>
Join the community
</span>
</a>
)
}
</div>