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

add repo input, better filenames, stubs for gist input

Browse Source
This commit is contained in:
martin-mfg
2025-12-08 11:40:30 +01:00
parent 17e2975ba6
commit 023094aeb6
7 changed files with 107 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/frontend/src/components/Home/TextSection.js
+8 -4
View File
@@ -4,10 +4,11 @@ import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import Section from './Section';
import { classnames } from '../../utils';
const TextSection = ({
title,
text,
description,
value,
setValue,
disabled,
@@ -33,10 +34,13 @@ const TextSection = ({
return (
<Section title={title}>
<p dangerouslySetInnerHTML={{ __html: text }} />
<p>{description}</p>
<input
type="text"
className="border border-gray-300 rounded px-2 py-1 mt-2 w-1/2"
className={classnames(
'border border-gray-300 rounded px-2 py-1 mt-2 w-1/2',
disabled ? 'cursor-not-allowed' : '',
)}
value={internalValue}
onChange={(e) => setInternalValue(e.target.value)}
disabled={disabled}
@@ -48,7 +52,7 @@ const TextSection = ({
TextSection.propTypes = {
title: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
description: PropTypes.node.isRequired,
value: PropTypes.string.isRequired,
setValue: PropTypes.func.isRequired,
disabled: PropTypes.bool,
frontend/frontend/src/constants.js
+2
View File
@@ -25,6 +25,8 @@ export const BACKEND_URL = PROD
export const CURR_YEAR = 2024;
export const DEMO_USER = 'anuraghazra';
export const DEMO_REPO = 'anuraghazra/github-readme-stats';
export const DEMO_GIST = 'bbfce31e0217a3689c8d961a356cb10d';
export const DEMO_WAKATIME_USER = 'ffflabs';
window.process = {
frontend/frontend/src/pages/Home/Home.js
+29 -6
View File
@@ -14,7 +14,13 @@ import {
import { authenticate } from '../../api';
import { login as _login } from '../../redux/actions/userActions';
import { HOST, DEMO_USER, DEMO_WAKATIME_USER } from '../../constants';
import {
HOST,
DEMO_USER,
DEMO_WAKATIME_USER,
DEMO_REPO,
DEMO_GIST,
} from '../../constants';
import { CardTypes } from '../../utils';
import { DEFAULT_OPTION as STATS_DEFAULT_RANK } from '../../components/Home/StatsRankSection';
import { DEFAULT_OPTION as LANGUAGES_DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
@@ -37,6 +43,8 @@ const HomeScreen = ({ stage, setStage }) => {
const login = (newUserId, userKey) => dispatch(_login(newUserId, userKey));
// for stage two
const [repo, setRepo] = useState(DEMO_REPO);
const [gist, setGist] = useState(DEMO_GIST);
const [wakatimeUser, setWakatimeUser] = useState(DEMO_WAKATIME_USER);
const [selectedCard, setSelectedCard] = useState('stats');
@@ -98,10 +106,10 @@ const HomeScreen = ({ stage, setStage }) => {
fullSuffix += `username=${userId}`;
break;
case CardTypes.PIN:
fullSuffix += `repo=anuraghazra/github-readme-stats`;
fullSuffix += `repo=${repo}`;
break;
case CardTypes.GIST:
fullSuffix += `id=bbfce31e0217a3689c8d961a356cb10d`;
fullSuffix += `id=${gist}`;
break;
case CardTypes.WAKATIME:
fullSuffix += `username=${wakatimeUser}`;
@@ -347,6 +355,10 @@ const HomeScreen = ({ stage, setStage }) => {
setIncludeAllCommits={setIncludeAllCommits}
enableAnimations={enableAnimations}
setEnableAnimations={setEnableAnimations}
repo={repo}
setRepo={setRepo}
gist={gist}
setGist={setGist}
wakatimeUser={wakatimeUser}
setWakatimeUser={setWakatimeUser}
usePercent={usePercent}
@@ -364,9 +376,20 @@ const HomeScreen = ({ stage, setStage }) => {
)}
{stage === 4 && (
<DisplayStage
userId={
selectedCard === CardTypes.WAKATIME ? wakatimeUser : userId
}
filename={(() => {
switch (selectedCard) {
case CardTypes.STATS:
return `${userId}_card`;
case CardTypes.TOP_LANGS:
return `${userId}_card`;
case CardTypes.PIN:
return `${repo}_card`;
case CardTypes.GIST:
return `gist_card`;
case CardTypes.WAKATIME:
return `${wakatimeUser}_card`;
}
})()}
themeSuffix={themeSuffix}
/>
)}
frontend/frontend/src/pages/Home/stages/Customize.js
+47 -3
View File
@@ -8,6 +8,8 @@ import NumericSection from '../../../components/Home/NumericSection';
import StatsRankSection from '../../../components/Home/StatsRankSection';
import LanguagesLayoutSection from '../../../components/Home/LanguagesLayoutSection';
import WakatimeLayoutSection from '../../../components/Home/WakatimeLayoutSection';
import { DEMO_REPO, DEMO_WAKATIME_USER } from '../../../constants';
import { useIsAuthenticated } from '../../../redux/selectors/userSelectors';
const CustomizeStage = ({
selectedCard,
@@ -17,6 +19,10 @@ const CustomizeStage = ({
setSelectedLanguagesLayout,
selectedWakatimeLayout,
setSelectedWakatimeLayout,
repo,
setRepo,
gist,
setGist,
wakatimeUser,
setWakatimeUser,
showTitle,
@@ -42,6 +48,8 @@ const CustomizeStage = ({
fullSuffix,
}) => {
const cardType = selectedCard || CardTypes.STATS;
const isAuthenticated = useIsAuthenticated();
return (
<div className="w-full flex flex-wrap">
<div className="h-auto lg:w-2/5 md:w-1/2 pr-10 p-10 rounded-sm bg-gray-200">
@@ -84,11 +92,37 @@ const CustomizeStage = ({
setSelectedOption={setSelectedLanguagesLayout}
/>
)}
{cardType === CardTypes.PIN && (
<TextSection
title="Repository"
description={
<>
Set your GitHub Repo to fetch your stats.
<br />
Please <a>log in</a> to change the repo.
</>
} // TODO: link to step 1
placeholder={`e.g. "${DEMO_REPO}"`} // TODO: example without owner?
value={repo}
setValue={(myRepo) => {
if (myRepo.endsWith('/')) {
myRepo = myRepo.slice(0, -1);
}
setRepo(myRepo.includes('/') ? myRepo.split('/')[1] : myRepo);
}}
disabled={!isAuthenticated} // TODO: explanation
/>
)}
{cardType === CardTypes.WAKATIME && (
<TextSection
title="WakaTime Username"
text='Set your <a href="https://wakatime.com/">WakaTime</a> username to fetch your stats.'
placeholder='e.g. "ffflabs"'
description={
<>
Set your <a href="https://wakatime.com/">WakaTime</a> username
to fetch your stats.
</>
} // TODO: make link visible
placeholder={`e.g. "${DEMO_WAKATIME_USER}"`}
value={wakatimeUser}
setValue={setWakatimeUser}
/>
@@ -133,7 +167,13 @@ const CustomizeStage = ({
{(cardType === CardTypes.STATS || cardType === CardTypes.WAKATIME) && (
<TextSection
title="Custom Title"
text="Set a custom title for the card.<br>Leave empty for default title."
description={
<>
Set a custom title for the card.
<br />
Leave empty for default title.
</>
}
placeholder='e.g. "My GitHub Stats"'
value={customTitle}
setValue={setCustomTitle}
@@ -187,6 +227,10 @@ CustomizeStage.propTypes = {
setSelectedLanguagesLayout: PropTypes.func.isRequired,
selectedWakatimeLayout: PropTypes.object.isRequired,
setSelectedWakatimeLayout: PropTypes.func.isRequired,
repo: PropTypes.string.isRequired,
setRepo: PropTypes.func.isRequired,
gist: PropTypes.string.isRequired,
setGist: PropTypes.func.isRequired,
wakatimeUser: PropTypes.string.isRequired,
setWakatimeUser: PropTypes.func.isRequired,
showTitle: PropTypes.bool.isRequired,
frontend/frontend/src/pages/Home/stages/Display.js
+3 -3
View File
@@ -12,14 +12,14 @@ import { Button, Image } from '../../../components';
import { classnames } from '../../../utils';
import { HOST } from '../../../constants';
const DisplayStage = ({ userId, themeSuffix }) => {
const DisplayStage = ({ filename, themeSuffix }) => {
const card = themeSuffix.split('?')[0];
const downloadPNG = () => {
saveSvgAsPng(
document.getElementById('svgWrapper').shadowRoot.firstElementChild
.firstElementChild,
`${userId}_${card}.png`,
`${filename}.png`,
{
scale: 2,
encoderOptions: 1,
@@ -96,7 +96,7 @@ const DisplayStage = ({ userId, themeSuffix }) => {
};
DisplayStage.propTypes = {
userId: PropTypes.string.isRequired,
filename: PropTypes.string.isRequired,
themeSuffix: PropTypes.string.isRequired,
};
frontend/frontend/src/pages/Home/stages/Login.js
+10 -12
View File
@@ -8,6 +8,10 @@ import { Button, Image } from '../../../components';
import { classnames } from '../../../utils';
import {
CLIENT_ID,
DEMO_GIST,
DEMO_REPO,
DEMO_USER,
DEMO_WAKATIME_USER,
GITHUB_PRIVATE_AUTH_URL,
GITHUB_PUBLIC_AUTH_URL,
HOST,
@@ -43,25 +47,19 @@ const LoginStage = ({ setCurrItem }) => {
// Card data
const cards = [
{
imageSrc: '/pin?repo=anuraghazra/github-readme-stats',
demoCustomization: '&disable_animations=true',
demoImageSrc: `/pin?repo=${DEMO_REPO}&disable_animations=true`,
},
{
imageSrc: '/top-langs?username=anuraghazra',
demoCustomization: '&langs_count=4&disable_animations=true',
demoImageSrc: `/top-langs?username=${DEMO_USER}&langs_count=4&disable_animations=true`,
},
{
imageSrc: '?username=anuraghazra',
demoCustomization: '&include_all_commits=true&disable_animations=true',
demoImageSrc: `?username=${DEMO_USER}&include_all_commits=true&disable_animations=true`,
},
{
imageSrc: '/wakatime?username=ffflabs',
demoCustomization:
'&langs_count=6&card_width=450&disable_animations=true',
demoImageSrc: `/wakatime?username=${DEMO_WAKATIME_USER}&langs_count=6&card_width=450&disable_animations=true`,
},
{
imageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
demoCustomization: '&disable_animations=true',
demoImageSrc: `/gist?id=${DEMO_GIST}&disable_animations=true`,
},
];
@@ -213,7 +211,7 @@ const LoginStage = ({ setCurrItem }) => {
}}
>
<Image
imageSrc={card.imageSrc + card.demoCustomization}
imageSrc={card.demoImageSrc}
compact={false}
extraClasses=""
/>
frontend/frontend/src/pages/Home/stages/SelectCard.js
+8 -3
View File
@@ -5,7 +5,12 @@ import PropTypes from 'prop-types';
import { Card } from '../../../components';
import { useUserId } from '../../../redux/selectors/userSelectors';
import { DEMO_USER, DEMO_WAKATIME_USER } from '../../../constants';
import {
DEMO_GIST,
DEMO_REPO,
DEMO_USER,
DEMO_WAKATIME_USER,
} from '../../../constants';
import { CardTypes } from '../../../utils';
const SelectCardStage = ({ selectedCard, setSelectedCard, setStage }) => {
@@ -28,14 +33,14 @@ const SelectCardStage = ({ selectedCard, setSelectedCard, setStage }) => {
title: 'GitHub Extra Pin',
description:
'pin more than 6 repositories in your profile using a GitHub profile readme',
demoImageSrc: '/pin?repo=anuraghazra/github-readme-stats',
demoImageSrc: `/pin?repo=${DEMO_REPO}`,
cardType: CardTypes.PIN,
},
{
title: 'GitHub Gist Pin',
description:
'pin gists in your GitHub profile using a GitHub profile readme',
demoImageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
demoImageSrc: `/gist?id=${DEMO_GIST}`,
cardType: CardTypes.GIST,
},
{