From 023094aeb624898298cc5bb08492e17a01bd6d33 Mon Sep 17 00:00:00 2001 From: martin-mfg <2026226+martin-mfg@users.noreply.github.com> Date: Mon, 8 Dec 2025 11:40:30 +0100 Subject: [PATCH] add repo input, better filenames, stubs for gist input --- .../src/components/Home/TextSection.js | 12 +++-- frontend/frontend/src/constants.js | 2 + frontend/frontend/src/pages/Home/Home.js | 35 ++++++++++--- .../src/pages/Home/stages/Customize.js | 50 +++++++++++++++++-- .../frontend/src/pages/Home/stages/Display.js | 6 +-- .../frontend/src/pages/Home/stages/Login.js | 22 ++++---- .../src/pages/Home/stages/SelectCard.js | 11 ++-- 7 files changed, 107 insertions(+), 31 deletions(-) diff --git a/frontend/frontend/src/components/Home/TextSection.js b/frontend/frontend/src/components/Home/TextSection.js index 0ffd97fb..8da2c098 100644 --- a/frontend/frontend/src/components/Home/TextSection.js +++ b/frontend/frontend/src/components/Home/TextSection.js @@ -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 (
-

+

{description}

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, diff --git a/frontend/frontend/src/constants.js b/frontend/frontend/src/constants.js index 447de03e..318582d8 100644 --- a/frontend/frontend/src/constants.js +++ b/frontend/frontend/src/constants.js @@ -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 = { diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js index 66f577a9..63cefbcd 100644 --- a/frontend/frontend/src/pages/Home/Home.js +++ b/frontend/frontend/src/pages/Home/Home.js @@ -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 && ( { + 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} /> )} diff --git a/frontend/frontend/src/pages/Home/stages/Customize.js b/frontend/frontend/src/pages/Home/stages/Customize.js index 4c3e09ae..850fb5d1 100644 --- a/frontend/frontend/src/pages/Home/stages/Customize.js +++ b/frontend/frontend/src/pages/Home/stages/Customize.js @@ -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 (
@@ -84,11 +92,37 @@ const CustomizeStage = ({ setSelectedOption={setSelectedLanguagesLayout} /> )} + {cardType === CardTypes.PIN && ( + + Set your GitHub Repo to fetch your stats. +
+ Please log in 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 && ( + Set your WakaTime 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) && ( + Set a custom title for the card. +
+ 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, diff --git a/frontend/frontend/src/pages/Home/stages/Display.js b/frontend/frontend/src/pages/Home/stages/Display.js index d22d82ab..2c043b15 100644 --- a/frontend/frontend/src/pages/Home/stages/Display.js +++ b/frontend/frontend/src/pages/Home/stages/Display.js @@ -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, }; diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js index 518d5556..cebe1459 100644 --- a/frontend/frontend/src/pages/Home/stages/Login.js +++ b/frontend/frontend/src/pages/Home/stages/Login.js @@ -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 }) => { }} > diff --git a/frontend/frontend/src/pages/Home/stages/SelectCard.js b/frontend/frontend/src/pages/Home/stages/SelectCard.js index ab53dfa3..27be801c 100644 --- a/frontend/frontend/src/pages/Home/stages/SelectCard.js +++ b/frontend/frontend/src/pages/Home/stages/SelectCard.js @@ -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, }, {