public/github-stats-extended
2
0
Fork 0
forked from mirrored/github-stats-extended
Code Issues Pull Requests Actions Packages Projects Wiki Activity

add login stage, larger GH icons

Browse Source
This commit is contained in:
martin-mfg
2025-11-11 11:06:25 +01:00
parent fabe9376cf
commit 6fda8a962b
4 changed files with 127 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/frontend/src/pages/Auth/SignUp.js
+2 -2
View File
@@ -37,14 +37,14 @@ const SignUpScreen = () => {
<div>
<a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
<Button className="h-12 flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600">
<GithubIcon className="w-4 h-4" />
<GithubIcon className="w-6 h-6" />
<span className="ml-2 xl:text-lg">GitHub Public Access</span>
</Button>
</a>
<div className="mt-4" />
<a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
<Button className="h-12 flex justify-center items-center text-black border border-black bg-white hover:bg-gray-100">
<GithubIcon className="w-4 h-4" />
<GithubIcon className="w-6 h-6" />
<span className="ml-2 xl:text-lg">GitHub Private Access</span>
</Button>
</a>
frontend/frontend/src/pages/Home/Home.js
+8 -4
View File
@@ -7,6 +7,7 @@ import { ProgressBar } from '../../components';
import {
CustomizeStage,
DisplayStage,
LoginStage,
SelectCardStage,
ThemeStage,
} from './stages';
@@ -256,6 +257,7 @@ const HomeScreen = () => {
<div className="text-2xl text-gray-600 font-semibold">
{
[
'Login',
'Select a Card',
'Modify Card Parameters',
'Choose a Theme',
@@ -266,6 +268,7 @@ const HomeScreen = () => {
<div>
{
[
'Login or continue as guest.',
'You will be able to customize your card in future steps.',
'Change the date range, include private commits, and more!',
'Choose from one of our predefined themes (more coming soon!)',
@@ -274,14 +277,15 @@ const HomeScreen = () => {
}
</div>
</div>
{stage === 0 && (
{stage === 0 && <LoginStage />}
{stage === 1 && (
<SelectCardStage
selectedCard={selectedCard}
setSelectedCard={setSelectedCard}
setImageSrc={setImageSrc}
/>
)}
{stage === 1 && (
{stage === 2 && (
<CustomizeStage
selectedCard={selectedCard || CardTypes.STATS}
imageSrc={imageSrc}
@@ -314,14 +318,14 @@ const HomeScreen = () => {
fullSuffix={fullSuffix}
/>
)}
{stage === 2 && (
{stage === 3 && (
<ThemeStage
theme={theme}
setTheme={setTheme}
fullSuffix={fullSuffix}
/>
)}
{stage === 3 && (
{stage === 4 && (
<DisplayStage userId={userId} themeSuffix={themeSuffix} />
)}
</div>
frontend/frontend/src/pages/Home/stages/Login.js
+115
View File
@@ -0,0 +1,115 @@
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Button, Card } from '../../../components';
import { classnames } from '../../../utils';
import {
GITHUB_PRIVATE_AUTH_URL,
GITHUB_PUBLIC_AUTH_URL,
} from '../../../constants';
import { FaGithub as GithubIcon } from 'react-icons/fa';
const LoginStage = ({}) => {
return (
<div className="h-full flex flex-wrap">
<div className="hidden lg:block lg:w-3/5 lg:p-8 lg:my-auto">
<div
className={classnames(
'bg-gray-100 rounded-sm w-full h-full m-auto p-8 shadow',
'lg:h-auto',
)}
>
<div>
<a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
<Button className="h-12 flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600">
<GithubIcon className="w-6 h-6" />
<span className="ml-2 xl:text-lg">GitHub Public Access</span>
</Button>
</a>
</div>
<div className="mt-4" />
<div>
<a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
<Button className="h-12 flex justify-center items-center text-black border border-black bg-white hover:bg-gray-100">
<GithubIcon className="w-6 h-6" />
<span className="ml-2 xl:text-lg">GitHub Private Access</span>
</Button>
</a>
</div>
</div>
</div>
<div className="w-full h-full lg:w-2/5 flex lg:flex-col lg:p-8">
placeholder for cards
</div>
</div>
);
return (
<div className="w-full flex flex-wrap">
{[
{
title: 'GitHub Stats Card',
description: 'your overall GitHub statistics',
imageSrc: `?&username=${userId}`,
demoCustomization: '&include_all_commits=true',
cardType: 'stats',
},
{
title: 'Top Languages Card',
description: 'your most frequently used languages',
imageSrc: `/top-langs?&username=${userId}`,
demoCustomization: '&langs_count=4',
cardType: 'top-langs',
},
{
title: 'GitHub Extra Pin',
description:
'pin more than 6 repositories in your profile using a GitHub profile readme',
imageSrc: '/pin?repo=anuraghazra/github-readme-stats',
demoCustomization: '',
cardType: 'pin',
},
{
title: 'GitHub Gist Pin',
description:
'pin gists in your GitHub profile using a GitHub profile readme',
imageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
demoCustomization: '',
cardType: 'gist',
},
{
title: 'WakaTime Stats Card',
description: 'your coding activity from WakaTime',
imageSrc: '/wakatime?username=ffflabs',
demoCustomization: '&langs_count=6&card_width=450',
cardType: 'wakatime',
},
].map((card, index) => (
<button
className="p-2 lg:p-4"
key={index}
type="button"
onClick={() => {
setSelectedCard(card.cardType);
setImageSrc(card.imageSrc);
}}
>
<Card
title={card.title}
description={card.description}
imageSrc={card.imageSrc + card.demoCustomization}
selected={selectedCard === card.cardType}
fixedSize="true"
/>
</button>
))}
</div>
);
};
LoginStage.propTypes = {};
LoginStage.defaultProps = {};
export default LoginStage;
frontend/frontend/src/pages/Home/stages/index.js
+2 -1
View File
@@ -1,6 +1,7 @@
import LoginStage from './Login';
import SelectCardStage from './SelectCard';
import CustomizeStage from './Customize';
import ThemeStage from './Theme';
import DisplayStage from './Display';
export { SelectCardStage, CustomizeStage, ThemeStage, DisplayStage };
export { LoginStage, SelectCardStage, CustomizeStage, ThemeStage, DisplayStage };