Skip to content

Commit da2e84a

Browse files
maslianokmaslianok
committed
language summary pages 🚀
1 parent d0e75ff commit da2e84a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1033
-120
lines changed

‎app/app.consts.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,15 @@ export const RANK_DESCRIPTIONS = {
3636
};
3737

3838
export const DEFAULT_LANGUAGE_COLOR = '#64748B';
39+
40+
export const LANGUAGE = {
41+
description:
42+
'See which programming languages are the most popular worldwide. Browse detailed summaries by stars and code size - and dive into rankings for each language, globally or by country.',
43+
order: {
44+
stars:
45+
"Calculated from repository stars, weighted by each repo's language breakdown. For example, if a repo has 100 stars and is 60% JavaScript, then JavaScript receives 60 stars from that repo. We aggregate this across all public repos with 5+ stars",
46+
size: 'The total code size of the language, summed across all public repositories with 5+ stars.',
47+
users:
48+
'How many users with at least one public repo with 5+ stars have this language in their public repositories.',
49+
},
50+
};

‎app/components/country-ranking-link.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@ export const CountryRankingLink = ({
1313
return (
1414
<Card className="flex-grow gap-4">
1515
<CardContent className="flex flex-col gap-4">
16-
<div className="flex flex-grow items-center">
17-
<Link href="/countries/stars/1">Browse All Countries</Link>
18-
</div>
1916
<div className="grid grid-cols-[repeat(auto-fit,minmax(2.25rem,1fr))] auto-rows-[2.25rem] gap-1 overflow-hidden h-[calc(2.25rem*3+0.25rem*2)]">
2017
{countrySummaries.slice(2, 44).map((countrySummary) => {
2118
const {
@@ -35,6 +32,9 @@ export const CountryRankingLink = ({
3532
);
3633
})}
3734
</div>
35+
<div className="flex flex-grow items-center justify-end">
36+
<Link href="/countries/stars/1">Browse All Countries</Link>
37+
</div>
3838
</CardContent>
3939
</Card>
4040
);

‎app/components/country-ranking-section.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import { GrLocation } from 'react-icons/gr';
2+
13
import { CountryCard } from '@/components/country-card/country-card';
4+
import { PageGrid } from '@/components/grid/grid';
25
import { fetchCountrySummaries } from '@/graphql/helpers/fetch-country-summaries';
36

47
import { CountryRankingLink } from './country-ranking-link';
@@ -8,17 +11,19 @@ export const CountryRankingSection = async () => {
811

912
return (
1013
<div className="flex flex-col gap-4 grow py-8">
11-
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-2">Country Rankings</h2>
14+
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-4">
15+
<GrLocation /> Country Rankings
16+
</h2>
1217
<div>
1318
Curious how you rank at home? Explore country-specific leaderboards to see the top developers in your nation,
1419
track your own standing, and celebrate local talent as it rises on the global stage.
1520
</div>
16-
<div className="grid grid-cols-[repeat(auto-fit,minmax(364px,1fr))] gap-4">
21+
<PageGrid>
1722
{countrySummaries.slice(0, 2).map((countrySummary) => (
1823
<CountryCard key={countrySummary.country} countrySummary={countrySummary} />
1924
))}
2025
<CountryRankingLink countrySummaries={countrySummaries} />
21-
</div>
26+
</PageGrid>
2227
</div>
2328
);
2429
};

‎app/components/global-ranking-section.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { VscGlobe } from 'react-icons/vsc';
2+
13
import { Link } from '@/components/link/link';
24
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
35

@@ -6,7 +8,9 @@ import { RANK_DESCRIPTIONS } from '../app.consts';
68
export const GlobalRankingSection = () => {
79
return (
810
<div className="flex flex-col gap-4 grow py-8">
9-
<h2 className="text-2xl md:text-3xl font-semibold">Global Rankings</h2>
11+
<h2 className="text-2xl md:text-3xl font-semibold flex gap-4 items-center">
12+
<VscGlobe /> Global Rankings
13+
</h2>
1014
<div>
1115
Discover your developer superpower! Explore ranks based on stars, followers, contributions, and more. Dive into
1216
dynamic leaderboards and find out how you measure up against developers worldwide.

‎app/components/language-ranking-link.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import LinkNext from 'next/link';
2+
3+
import { Link } from '@/components/link/link';
4+
import { Card, CardContent } from '@/components/ui/card';
5+
import { LanguageSummaryQuery } from '@/types/generated/graphql';
6+
7+
import { DEFAULT_LANGUAGE_COLOR } from '../app.consts';
8+
9+
export const LanguageRankingLink = ({
10+
languageSummaries,
11+
}: {
12+
languageSummaries: LanguageSummaryQuery['languageSummary'];
13+
}) => {
14+
return (
15+
<Card className="flex-grow gap-4">
16+
<CardContent className="flex flex-col grow gap-4">
17+
<div className="grid grid-cols-3 gap-1 grow">
18+
{languageSummaries.slice(2).map(({ language, languageData }) => {
19+
return (
20+
<LinkNext key={language} href={`/language/${language}/global/1`} className="flex items-center gap-2">
21+
<div
22+
className="h-3 w-3 rounded-full"
23+
style={{ backgroundColor: languageData?.color ?? DEFAULT_LANGUAGE_COLOR }}
24+
/>
25+
{language}
26+
</LinkNext>
27+
);
28+
})}
29+
</div>
30+
<div className="flex items-center justify-end">
31+
<Link href="/languages/global/score/1">Browse All Languages</Link>
32+
</div>
33+
</CardContent>
34+
</Card>
35+
);
36+
};

‎app/components/language-ranking-section.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { FaCode } from 'react-icons/fa';
2+
3+
import { PageGrid } from '@/components/grid/grid';
4+
import { NewBadge } from '@/components/new-badge/new-badge';
5+
import { fetchLanguageSummaries } from '@/graphql/helpers/fetch-language-summary';
6+
import { LanguageSummaryOrder } from '@/types/generated/graphql';
7+
8+
import { LanguageRankingLink } from './language-ranking-link';
9+
import { LanguageCard } from '../languages/[country]/[orderBy]/[page]/components/language-card';
10+
11+
export const LanguageRankingSection = async () => {
12+
const languageSummaries = await fetchLanguageSummaries({ order: LanguageSummaryOrder.Score, offset: 0, limit: 8 });
13+
14+
return (
15+
<div className="flex flex-col gap-4 grow py-8">
16+
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-4">
17+
<FaCode /> Language Rankings <NewBadge />
18+
</h2>
19+
<div>
20+
See which programming languages are the most popular worldwide. Browse detailed summaries by stars and code size
21+
- and dive into rankings for each language, globally or by country.
22+
</div>
23+
<PageGrid>
24+
{languageSummaries.slice(0, 2).map((languageSummary) => (
25+
<LanguageCard key={languageSummary.language} data={languageSummary} country="global" />
26+
))}
27+
<LanguageRankingLink languageSummaries={languageSummaries} />
28+
</PageGrid>
29+
</div>
30+
);
31+
};

‎app/components/messenger-integration-section.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import { FaWhatsapp } from 'react-icons/fa';
22
import { FaTelegramPlane } from 'react-icons/fa';
33

4-
import { NewBadge } from '@/components/new-badge/new-badge';
54
import { Button } from '@/components/ui/button';
65

76
export const MessengerIntegrationSection = () => {
87
return (
98
<div className="flex flex-col gap-4 grow py-8">
10-
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-2">
11-
Get Rank Updates
12-
<NewBadge />
13-
</h2>
9+
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-2">Get Rank Updates</h2>
1410
<div>
1511
Stay updated on your GitHub profile&apos;s rank — daily or weekly, right in your favorite messaging app.
1612
</div>

‎app/countries/[orderBy]/[page]/layout.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { FlameIcon } from 'lucide-react';
21
import type { Metadata } from 'next';
32
import { notFound } from 'next/navigation';
43

54
import { RANK_NAME } from '@/badge/badge.consts';
65
import { Header } from '@/components/header/header';
76
import { Page } from '@/components/page/page';
8-
import { Badge } from '@/components/ui/badge';
97
import { UserRankProp } from '@/types/ranking.types';
108

119
import { CountryOrderSwitcher } from './components/country-order-switcher';
@@ -50,13 +48,7 @@ export default async function CountriesLayout({ children, params }: LayoutProps<
5048
<Page className="gap-8">
5149
<div className="flex flex-col gap-4">
5250
<div className="flex items-center justify-between flex-wrap gap-4">
53-
<h2 className="text-2xl font-semibold flex items-center gap-2">
54-
Country Rankings
55-
<Badge variant="secondary" className="bg-blue-500 text-white dark:bg-blue-600">
56-
<FlameIcon />
57-
NEW
58-
</Badge>
59-
</h2>
51+
<h2 className="text-2xl font-semibold flex items-center gap-2">Country Rankings</h2>
6052
<CountryOrderSwitcher orderBy={orderBy} />
6153
</div>
6254
<div>
@@ -66,13 +58,13 @@ export default async function CountriesLayout({ children, params }: LayoutProps<
6658
</p>
6759
<ul className="list-disc pl-6 mb-4">
6860
<li>
69-
⭐ <strong>User Stars</strong> - stars on repos owned by developers from this country
61+
<strong>User Stars:</strong> stars on repos owned by developers from this country
7062
</li>
7163
<li>
72-
🔀 <strong>Contrib Stars</strong> - stars on external repos where they’ve merged PRs
64+
<strong>Contrib Stars:</strong> stars on external repos where they&apos;ve merged PRs
7365
</li>
7466
<li>
75-
👥 <strong>Followers</strong> - combined GitHub followers of those developers
67+
<strong>Followers:</strong> combined GitHub followers of those developers
7668
</li>
7769
</ul>
7870
<p>

‎app/countries/[orderBy]/[page]/loading.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { PageGrid } from '@/components/grid/grid';
12
import { Skeleton } from '@/components/ui/skeleton';
23

34
export default function Loading() {
45
return (
5-
<div className="grid grid-cols-[repeat(auto-fit,minmax(364px,1fr))] gap-4">
6+
<PageGrid>
67
{Array.from({ length: 12 }).map((_, index) => (
78
<Skeleton key={index} className="h-52 w-full" />
89
))}
9-
</div>
10+
</PageGrid>
1011
);
1112
}

‎app/countries/[orderBy]/[page]/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { unstable_cacheLife as cacheLife } from 'next/cache';
33
import { notFound } from 'next/navigation';
44

55
import { CountryCard } from '@/components/country-card/country-card';
6+
import { PageGrid } from '@/components/grid/grid';
67
import { Pagination } from '@/components/pagination/pagination';
78
import { fetchCountrySummaries } from '@/graphql/helpers/fetch-country-summaries';
89

@@ -25,11 +26,11 @@ export default async function CountriesPage({ params }: PageProps<'/countries/[o
2526

2627
return (
2728
<>
28-
<div className="grid grid-cols-[repeat(auto-fit,minmax(364px,1fr))] gap-4">
29+
<PageGrid>
2930
{data.map((item) => (
3031
<CountryCard key={item.country} countrySummary={item} />
3132
))}
32-
</div>
33+
</PageGrid>
3334
<Pagination
3435
prev={page > 1 ? `/countries/${orderBy}/${page - 1}` : undefined}
3536
next={`/countries/${orderBy}/${page + 1}`}

0 commit comments

Comments
 (0)