Skip to content

Commit ba97762

Browse files
IgboPharaohIgboPharaoh
authored
Feat/add memo (#46)
* add og image * add meta to layout * add color scheme description * add responsiveness for organisation card, fix disappearing projects
1 parent 5daec55 commit ba97762

File tree

6 files changed

+68
-30
lines changed

6 files changed

+68
-30
lines changed

‎public/images/bitcoin-dev-og.png‎

53 KB
Loading

‎src/app/components/cards/OrganisationCard.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const OrganisationCard = ({
1919
}: OrganisationCardProps) => {
2020
return (
2121
<div
22-
className={`border border-card-border-color rounded-md bg-card-bg shadow-card-shadow flex py-[10px] px-4 cursor-pointer ${
22+
className={`border border-card-border-color rounded-md bg-card-bg shadow-card-shadow flex py-[8px] sm:py-[10px] px-4 cursor-pointer ${
2323
more
2424
? "w-full items-start justify-start bg-transparent shadow-none py-2 px-2 hover:bg-card-bg"
2525
: "w-max rounded-md items-center justify-center"
@@ -39,7 +39,7 @@ export const OrganisationCard = ({
3939
height={16}
4040
width={16}
4141
/>
42-
<p className="text-sm font-semibold tracking-tighter lowercase text-card-text-black whitespace-nowrap">
42+
<p className="text-xs sm:text-sm font-semibold tracking-tighter lowercase text-card-text-black whitespace-nowrap">
4343
@{login}
4444
</p>
4545
</section>
@@ -74,29 +74,34 @@ export const ProjectsBlock = ({
7474
/>
7575
))}
7676
{projects.length > 3 ? (
77-
<div className="relative">
77+
<div className="md:relative">
7878
<button
79-
className="text-black border border-card-border-color rounded-md bg-card-bg shadow-card-shadow w-max flex items-center justify-center py-[10px] px-4 cursor-pointer tracking-tighter text-sm"
79+
className="text-black border border-card-border-color rounded-md bg-card-bg shadow-card-shadow w-max flex items-center justify-center py-[8px] sm:py-[10px] px-4 cursor-pointer tracking-tighter text-xs sm:text-sm"
8080
onClick={() => setShowMore(!showMore)}
8181
>
8282
More
8383
</button>
8484
{showMore ? (
85-
<div className="absolute right-2 top-14 flex flex-col gap-3 border-card-border-color border rounded-md shadow-card-shadow w-[250px] pt-3 bg-white">
86-
<p className="text-black text-sm font-semibold px-4">
87-
projects
88-
</p>
89-
<div className="flex flex-col gap-1">
90-
{projects.slice(3).map((x, idx) => (
91-
<OrganisationCard
92-
key={`${idx}_${x.login}`}
93-
handleClick={handleFilterToggle}
94-
login={x.login}
95-
avatarUrl={x.avatarUrl}
96-
more={true}
97-
toggleFilter={toggleFilter}
98-
/>
99-
))}
85+
<div
86+
className="absolute top-0 right-0 left-0 bottom-0 md:backdrop-blur-none backdrop-blur-sm h-full flex items-center justify-center p-8 z-10"
87+
onClick={() => setShowMore(!showMore)}
88+
>
89+
<div className="md:absolute md:right-2 md:top-14 flex flex-col gap-3 border-card-border-color border rounded-md shadow-card-shadow w-full md:w-[250px] pt-3 bg-white z-30">
90+
<p className="text-black text-sm font-semibold px-4">
91+
projects
92+
</p>
93+
<div className="flex flex-col gap-1">
94+
{projects.slice(3).map((x, idx) => (
95+
<OrganisationCard
96+
key={`${idx}_${x.login}`}
97+
handleClick={handleFilterToggle}
98+
login={x.login}
99+
avatarUrl={x.avatarUrl}
100+
more={true}
101+
toggleFilter={toggleFilter}
102+
/>
103+
))}
104+
</div>
100105
</div>
101106
</div>
102107
) : null}

‎src/app/components/years-switch/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const YearSection = ({ years, currentYear, handleClick }: YearSectionProps) => {
1212
const [showYears, setShowYears] = React.useState(false)
1313

1414
return (
15-
<div className="w-full sm:p-4 md:p-9 lg:px-8 sm:px-4 md:px-4 sm:py-8 h-max rounded-[15px] p-0 flex items-end justify-end absolute top-9 right-4 sm:relative sm:block sm:top-0 sm:right-0">
16-
<div className="sm:flex-col gap-1 sm:block hidden">
15+
<div className="w-full sm:p-4 md:p-9 lg:px-8 sm:px-4 md:px-4 sm:py-8 h-max rounded-[15px] p-0 flex items-end justify-end absolute top-9 right-4 md:relative md:block md:top-0 md:right-0">
16+
<div className="md:flex-col gap-1 md:block hidden">
1717
{years.map((year) => (
1818
<div
1919
className={`px-4 py-2 sm:w-full cursor-pointer rounded-md max-w-[200px] ${
@@ -29,7 +29,7 @@ const YearSection = ({ years, currentYear, handleClick }: YearSectionProps) => {
2929
))}
3030
</div>
3131

32-
<div className="sm:hidden block">
32+
<div className="md:hidden block">
3333
<section className="text-black flex border border-card-border-color rounded-md bg-card-bg shadow-card-shadow w-max items-center justify-center cursor-pointer tracking-tighter text-sm">
3434
<span
3535
className={`px-4 py-[8px] rounded-md rounded-r-none ${

‎src/app/layout.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,27 @@ import type { Metadata } from "next"
88
const inter = Inter({ subsets: ["latin"] })
99

1010
export const metadata: Metadata = {
11-
title: "Create Next App",
12-
description: "Generated by create next app"
11+
title: "Github Stats",
12+
description: "Generate github statistics of any user",
13+
keywords:
14+
"github stats, gh stats, gh-stats, git statistics of developers, github statistics for developers, github contributions, github contributions statistics, github statistics",
15+
openGraph: {
16+
title: "Github Stats",
17+
description:
18+
"Bitcoin-dev and Lightning-dev mailing list summaries and discoveries",
19+
url: "https://ghstats.bitcoinsearch.xyz",
20+
type: "website",
21+
images: [
22+
{
23+
url: "https://ghstats.bitcoinsearch.xyz/images/bitcoin-dev-og.png"
24+
}
25+
]
26+
},
27+
twitter: {
28+
card: "summary",
29+
creator: "@chaincodelabs",
30+
images: ["https://ghstats.bitcoinsearch.xyz/images/bitcoin-dev-og.png"]
31+
}
1332
}
1433

1534
export default function RootLayout({

‎src/app/result/page.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Page = () => {
3232
return (
3333
<main className="flex items-center justify-center bg-white">
3434
<div
35-
className="sm:h-screen h-full max-w-5xl flex flex-col-reverse w-full sm:grid sm:justify-center"
35+
className="sm:h-screen h-full max-w-5xl flex flex-col-reverse w-full md:grid sm:justify-center"
3636
style={{ gridTemplateColumns: "3fr 1fr" }}
3737
>
3838
<div className="w-full flex flex-col sm:border-2 md:p-8 md:pt-0 sm:pb-2 p-4 pt-0 gap-6 h-screen overflow-x-scroll">
@@ -47,7 +47,7 @@ const Page = () => {
4747
className="arrowLeftIcon"
4848
/>
4949
</button>
50-
<div className="flex gap-2 flex-col sm:justify-between sm:items-center sm:flex-row">
50+
<div className="flex gap-2 flex-col md:justify-between md:items-center md:flex-row">
5151
<h2 className=" text-black capitalize">
5252
{username} contributions
5353
</h2>
@@ -72,6 +72,20 @@ const Page = () => {
7272
))}
7373
</div>
7474
</div>
75+
<section className="text-black text-xs font-medium flex gap-3 flex-wrap">
76+
<div className="flex items-center gap-1">
77+
<p>Commits</p>
78+
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-blue"></section>
79+
</div>
80+
<div className="flex items-center gap-1">
81+
<p>Comments</p>
82+
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-yellow"></section>
83+
</div>
84+
<div className="flex items-center gap-1">
85+
<p>Commits & Comments</p>
86+
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-green"></section>
87+
</div>
88+
</section>
7589
</section>
7690
<ProjectsBlock
7791
projects={projects}

‎src/types/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type Contribution = {
1717
activity: Array<{ date: string; type: string }>
1818
}
1919

20-
export const GRID_YELLOW = '#E7C23E'
21-
export const GRID_BLUE = '#0783F5'
22-
export const GRID_GRAY = '#EEEEEE'
23-
export const GRID_GREEN = '#39D353'
20+
export const GRID_YELLOW = "#E7C23E"
21+
export const GRID_BLUE = "#0783F5"
22+
export const GRID_GRAY = "#EEEEEE"
23+
export const GRID_GREEN = "#39D353"

0 commit comments

Comments
 (0)