Skip to content

Commit

Permalink
feat(statistics): update github-contribution-calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
mateusfg7 committed Dec 29, 2023
1 parent d7e7c3f commit 78216ec
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { placeholder } from '@/shared/lib/placeholder'
import { shuffleArray } from '@/shared/lib/shuffleArray'
import { getGithubFollowers, getGithubUserData } from '@/shared/lib/github'

const AVATAR_COUNT = 119
const AVATAR_COUNT = 71

export async function Followers() {
const { followers: followersNumber } = await getGithubUserData()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
import Image from 'next/image'
'use client'

import { CalendarBlank } from '@phosphor-icons/react/dist/ssr'
import { placeholder } from '@/shared/lib/placeholder'
import GitHubCalendar from 'react-github-calendar'
import { useTheme } from 'next-themes'

export function Graph() {
const { theme } = useTheme()

const colorScheme = theme !== 'dark' && theme !== 'light' ? undefined : theme

return (
<div className="flex h-full w-full flex-col justify-center gap-3 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
<span className="inline-flex items-center gap-2 text-neutral-600">
<span>Contribution Graph</span>
<CalendarBlank size="1em" weight="duotone" />
</span>
<div className="flex items-center">
<Image
src="https://contribution.catsjuice.com/_/mateusfg7?chart=calendar&format=png&quality=10&weeks=40&theme=native&widget_size=small"
placeholder={placeholder(1992, 408) as `data:image/${string}`}
alt="Contribution Graph"
className="dark:hidden"
width={1992}
height={408}
/>
<Image
src="https://contribution.catsjuice.com/_/mateusfg7?chart=calendar&format=png&quality=1&weeks=40&theme=native&widget_size=small&dark=true"
placeholder={placeholder(1992, 408) as `data:image/${string}`}
alt="Contribution Graph"
className="hidden dark:block"
width={1992}
height={408}
<GitHubCalendar
username="mateusfg7"
blockMargin={4}
blockRadius={4}
blockSize={13}
colorScheme={colorScheme}
style={{
width: '100%'
}}
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function GithubDashboard() {
<ErrorBoundary fallback={<FallbackError />}>
<Suspense fallback={<GithubStatsSkeleton />}>
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
<div className="col-span-2 row-span-3">
<div className="col-span-2 row-span-2">
<Followers />
</div>

Expand All @@ -25,7 +25,7 @@ export function GithubDashboard() {
<Repos />
<Commits />

<div className="col-span-2">
<div className="col-span-4">
<Graph />
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const FollowersSkeleton = () => {
</span>
<span className="text-xl">
<div className="grid grid-cols-12 gap-1">
{[...Array(119 + 1)].map((e, i) => (
{[...Array(71 + 1)].map((e, i) => (
<div
key={i}
className="h-5 w-5 animate-pulse rounded-full border-2 border-neutral-200 bg-neutral-400 dark:border-neutral-950 dark:bg-neutral-800 md:h-7 md:w-7"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import Image from 'next/image'
import { CalendarBlank } from '@phosphor-icons/react/dist/ssr'
import { placeholder } from '@/shared/lib/placeholder'

export function GraphSkeleton() {
return (
Expand All @@ -9,8 +7,12 @@ export function GraphSkeleton() {
<span>Contribution Graph</span>
<CalendarBlank size="1em" weight="duotone" />
</span>
<div className="flex items-center">
<div className="h-20 w-full animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
<div className="flex flex-col gap-2">
<div className="h-28 w-full animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
<div className="flex w-full justify-between">
<div className="h-6 w-52 animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
<div className="h-6 w-32 animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
</div>
</div>
</div>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { GraphSkeleton } from './graph'
export function GithubStatsSkeleton() {
return (
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
<div className="col-span-2 row-span-3">
<div className="col-span-2 row-span-2">
<FollowersSkeleton />
</div>

Expand All @@ -18,7 +18,7 @@ export function GithubStatsSkeleton() {

<CommitsSkeleton />

<div className="col-span-2">
<div className="col-span-4">
<GraphSkeleton />
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions src/styles/components.css
Original file line number Diff line number Diff line change
Expand Up @@ -316,4 +316,12 @@
@apply my-4 border-red-600 last:mb-0 [&:nth-child(2)]:mt-0;
}
}

article {
div {
svg {
@apply w-full;
}
}
}
}

0 comments on commit 78216ec

Please sign in to comment.