Skip to content

Commit

Permalink
Style Followers data
Browse files Browse the repository at this point in the history
  • Loading branch information
Akash Singh committed Mar 7, 2024
1 parent e108b5e commit 1e76ebe
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 74 deletions.
49 changes: 27 additions & 22 deletions documentation/src/context/CommunityStats/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export const CommunityStatsProvider: FC = ({ children }) => {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "token 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",
},
signal,
},
Expand All @@ -56,6 +57,7 @@ export const CommunityStatsProvider: FC = ({ children }) => {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "token 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",
},
signal,
},
Expand All @@ -72,6 +74,7 @@ export const CommunityStatsProvider: FC = ({ children }) => {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "token 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",
},
signal,
},
Expand All @@ -90,32 +93,34 @@ export const CommunityStatsProvider: FC = ({ children }) => {
page++;
}

const starCount = await response.json();
const followersCount = await response2.json();
const followersWithFullNames = await Promise.all(
allFollowers.map(async (follower) => {
const profileResponse = await fetch(follower.url, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "token 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",
},
});
const profileData = await profileResponse.json();
return {
name: profileData.name || follower.login, // Use login if name is not available
avatarUrl: follower.avatar_url,
pageUrl: follower.html_url,
};
})
);

const starCount = await response.json();
setGithubStarCount(starCount.stargazers_count);

const followersCount = await response2.json();
setGithubFollowersCount(followersCount.followers);

const avatarNames = allFollowers.map(follower => follower.login);
const avatarUrls = allFollowers.map(follower => follower.avatar_url);
const avatarPageUrls = allFollowers.map(follower => follower.html_url);

// Create an array of objects where each object represents a follower
const followers = avatarNames.map((name, index) => ({
name,
avatarUrl: avatarUrls[index],
pageUrl: avatarPageUrls[index],
}));

// Sort the followers array by name
followers.sort((a, b) => a.name.localeCompare(b.name));

// Separate the sorted data back into individual arrays
const sortedAvatarNames = followers.map((follower) => follower.name);
const sortedAvatarUrls = followers.map((follower) => follower.avatarUrl);
const sortedAvatarPageUrls = followers.map((follower) => follower.pageUrl);

// Set the sorted arrays to state
followersWithFullNames.sort((a, b) => a.name.localeCompare(b.name));
const sortedAvatarNames = followersWithFullNames.map((follower) => follower.name);
const sortedAvatarUrls = followersWithFullNames.map((follower) => follower.avatarUrl);
const sortedAvatarPageUrls = followersWithFullNames.map((follower) => follower.pageUrl);
setGithubAvatarName(sortedAvatarNames);
setGithubAvatarUrl(sortedAvatarUrls);
setGithubAvatarPageUrl(sortedAvatarPageUrls);
Expand Down
6 changes: 3 additions & 3 deletions documentation/src/prepverse-theme/about-me-profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
<div
className={clsx(
"landing-lg:w-[435px]",
"landing-lg:h-[500px] landing-md:h-[525px]",
"landing-lg:h-[500px] landing-md:h-[545px]",
"flex flex-wrap",
"p-5",
"mt-6 lg:mt-10",
Expand Down Expand Up @@ -58,7 +58,7 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
>
<CommonThemedImage
className={clsx(
"landing-md:h-[100px] landing-md:w-[100px]",
"h-[100px] w-[100px]",
"rounded-full",
)}
srcDark="https://github.com/AkashSingh3031.png"
Expand Down Expand Up @@ -244,7 +244,7 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
"border-b border-gray-200 dark:border-gray-700",
)}
/>
<GithubFollowersAvatar />
<GithubFollowersAvatar />
</div>
</div>
</div>
Expand Down
43 changes: 30 additions & 13 deletions documentation/src/prepverse-theme/common-header/github-followers-avatar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import Link from "@docusaurus/Link";
import clsx from "clsx";
import React from "react";

import React, { useState, useEffect } from "react";
import { useCommunityStatsContext } from "@site/src/context/CommunityStats";
import { HeaderGithubIcon } from "../icons/header-github";
import { Spinner } from "../spinner";
import { CommonThemedImage } from "../common-themed-image";

type GithubFollowersAvatarProps = {
Expand All @@ -13,47 +9,68 @@ type GithubFollowersAvatarProps = {

export const GithubFollowersAvatar: React.FC<GithubFollowersAvatarProps> = ({ isPermanentDark }) => {
const { githubAvatarUrl, githubAvatarName, githubAvatarPageUrl, loading } = useCommunityStatsContext();
const [borderColors, setBorderColors] = useState<string[]>([]);

useEffect(() => {
const colors = githubAvatarUrl.map(() => getRandomColor());
setBorderColors(colors);
}, [githubAvatarUrl]);

function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r},${g},${b})`;
}

return (
<div
className={clsx(
"tabular-nums text-gray-800 dark:text-gray-100",
"flex flex-wrap mt-10 gap-4",
"flex flex-wrap mt-10",
"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
"gap-4 2xl:gap-8",
)}
>
{githubAvatarUrl.map((url, index) => (
<div
key={index}
className={clsx(
"rounded-2xl landing-sm:rounded-3xl",
"border dark:border-gray-700 border-gray-200",
"flex flex-col justify-center items-center",
// "border dark:border-gray-700 border-gray-200",
"flex flex-col items-center",
)}
>
<CommonThemedImage
className={clsx(
"h-[75px] w-[75px]",
"rounded-full",
"rounded-2xl landing-sm:rounded-2xl",
"border dark:border-gray-700 border-gray-200",
"rounded-2xl landing-sm:rounded-3xl",
"border-double border-4",
"p-1",
)}
srcDark={url}
srcLight={url}
alt={githubAvatarName[index]}
style={{ borderColor: borderColors[index] }}
/>
{index+1}
<a
target="_blank"
href={githubAvatarPageUrl[index]}
className={clsx(
"text-sm",
"no-underline",
"rounded-lg m-2 p-1",
"border-2 dark:border-gray-500 border-gray-300",
"transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-300",
"text-gray-500 dark:text-gray-400",
"dark:text-gray-300 text-gray-900",
"font-semibold",
"flex flex-row",
"text-center"
"text-center",
)}
rel="noreferrer"
>
{index+1}<br></br>
{githubAvatarName[index]}
</a>
</div>
Expand Down
71 changes: 35 additions & 36 deletions documentation/src/prepverse-theme/common-header/github-followers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Link from "@docusaurus/Link";
import clsx from "clsx";
import React from "react";

Expand All @@ -14,40 +13,40 @@ export const GitHubFollowers: React.FC<GitHubFollowersProps> = ({ isPermanentDar
const { githubFollowersCount, githubAvatarUrl, loading } = useCommunityStatsContext();

return (
<a
href="https://github.com/AkashSingh3031"
target="_blank"
rel="noreferrer"
className={clsx(
"text-sm",
"text-gray-500 dark:text-gray-400",
"rounded-[32px]",
"border border-solid border-gray-300 dark:border-gray-700",
"flex gap-2 items-center",
"py-2 pl-2.5 pr-4",
"no-underline",
)}
>
<HeaderGithubIcon className={clsx("w-5 h-5")} />
<div className={clsx("flex items-center", "min-w-[75px] h-6")}>
Followers:&nbsp;
{loading ? (
<Spinner
className={clsx("w-5 h-5")}
wrapperProps={{
className: clsx("mx-auto"),
}}
/>
) : (
<span
className={clsx(
"tabular-nums text-gray-800 dark:text-gray-100",
)}
>
{githubFollowersCount}
</span>
)}
</div>
</a>
<a
href="https://github.com/AkashSingh3031"
target="_blank"
rel="noreferrer"
className={clsx(
"text-sm",
"text-gray-500 dark:text-gray-400",
"rounded-[32px]",
"border border-solid border-gray-300 dark:border-gray-700",
"flex gap-2 items-center",
"py-2 pl-2.5 pr-4",
"no-underline",
)}
>
<HeaderGithubIcon className={clsx("w-5 h-5")} />
<div className={clsx("flex items-center", "min-w-[75px] h-6")}>
Followers:&nbsp;
{loading ? (
<Spinner
className={clsx("w-5 h-5")}
wrapperProps={{
className: clsx("mx-auto"),
}}
/>
) : (
<span
className={clsx(
"tabular-nums text-gray-800 dark:text-gray-100",
)}
>
{githubFollowersCount}
</span>
)}
</div>
</a>
);
};

0 comments on commit 1e76ebe

Please sign in to comment.