From ac74513a98917a98a3275c71b5d68069ddd604ea Mon Sep 17 00:00:00 2001 From: martin-mfg <2026226+martin-mfg@users.noreply.github.com> Date: Thu, 6 Nov 2025 09:45:14 +0100 Subject: [PATCH] add several wakatime card options --- backend/readme.md | 2 +- .../components/Home/WakatimeLayoutSection.js | 38 +++++++++++++++ frontend/frontend/src/pages/Home/Home.js | 37 ++++++++++++--- .../src/pages/Home/stages/Customize.js | 47 +++++++++++++++---- 4 files changed, 107 insertions(+), 17 deletions(-) create mode 100644 frontend/frontend/src/components/Home/WakatimeLayoutSection.js diff --git a/backend/readme.md b/backend/readme.md index c99afb96..46082e1e 100644 --- a/backend/readme.md +++ b/backend/readme.md @@ -693,7 +693,7 @@ You can customize the appearance and behavior of the WakaTime stats card using t ![Harlok's WakaTime stats](https://github-readme-stats-phi-jet-58.vercel.app/api/wakatime?username=ffflabs) -![Harlok's WakaTime stats](https://github-readme-stats-phi-jet-58.vercel.app/api/wakatime?username=ffflabs\&hide_progress=true) +![Harlok's WakaTime stats](https://github-readme-stats-phi-jet-58.vercel.app/api/wakatime?username=ffflabs\&card_width=315\&hide_progress=true) * Compact layout diff --git a/frontend/frontend/src/components/Home/WakatimeLayoutSection.js b/frontend/frontend/src/components/Home/WakatimeLayoutSection.js new file mode 100644 index 00000000..507aceeb --- /dev/null +++ b/frontend/frontend/src/components/Home/WakatimeLayoutSection.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Section from './Section'; +import { Input } from '../Generic'; + +export const DEFAULT_OPTION = { + id: 1, + label: 'Normal', + disabled: false, + value: 'default', +}; + +const WakatimeLayoutSection = ({ selectedOption, setSelectedOption }) => { + const options = [ + DEFAULT_OPTION, + { id: 2, label: 'Compact', disabled: false, value: 'compact' }, + { id: 3, label: 'Text Only', disabled: false, value: 'default=hide_progress=true&card_width=315' }, + ]; + + return ( +
+

Select a card layout.

+ +
+ ); +}; + +WakatimeLayoutSection.propTypes = { + selectedOption: PropTypes.object.isRequired, + setSelectedOption: PropTypes.func.isRequired, +}; + +export default WakatimeLayoutSection; diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js index a7d4d5d2..08e24519 100644 --- a/frontend/frontend/src/pages/Home/Home.js +++ b/frontend/frontend/src/pages/Home/Home.js @@ -15,7 +15,8 @@ import { authenticate } from '../../api'; import { login as _login } from '../../redux/actions/userActions'; import { HOST } from '../../constants'; import { CardTypes } from '../../utils'; -import { DEFAULT_OPTION as DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection'; +import { DEFAULT_OPTION as LANGUAGES_DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection'; +import { DEFAULT_OPTION as WAKATIME_DEFAULT_LAYOUT } from '../../components/Home/WakatimeLayoutSection'; const HomeScreen = () => { const [isLoading, setIsLoading] = useState(false); @@ -37,7 +38,12 @@ const HomeScreen = () => { const [imageSrc, setImageSrc] = useState(`?&username=${userId}`); // for stage two - const [selectedLayout, setSelectedLayout] = useState(DEFAULT_LAYOUT); + const [selectedLanguagesLayout, setSelectedLanguagesLayout] = useState( + LANGUAGES_DEFAULT_LAYOUT, + ); + const [selectedWakatimeLayout, setSelectedWakatimeLayout] = useState( + WAKATIME_DEFAULT_LAYOUT, + ); const [showTitle, setShowTitle] = useState(true); const [showOwner, setShowOwner] = useState(false); @@ -45,9 +51,16 @@ const HomeScreen = () => { const [customTitle, setCustomTitle] = useState(''); const [langsCount, setLangsCount] = useState(); const [enableAnimations, setEnableAnimations] = useState(true); + const [usePercent, setUsePercent] = useState(false); const resetCustomization = () => { // setUsePercent(false); + if (cardTypes === CardTypes.TOP_LANGS) { + setSelectedWakatimeLayout(WAKATIME_DEFAULT_LAYOUT); + } + if (selectedCard === CardTypes.WAKATIME) { + setSelectedLanguagesLayout(LANGUAGES_DEFAULT_LAYOUT); + } if (theme === 'default' || theme === 'default_repocard') { if (selectedCard === CardTypes.PIN || selectedCard === CardTypes.GIST) { setTheme('default_repocard'); @@ -67,8 +80,12 @@ const HomeScreen = () => { let fullSuffix = `${imageSrc}`; - if (selectedLayout !== DEFAULT_LAYOUT) { - fullSuffix += `&layout=${selectedLayout.value}`; + if (selectedLanguagesLayout !== LANGUAGES_DEFAULT_LAYOUT) { + fullSuffix += `&layout=${selectedLanguagesLayout.value}`; + } + + if (selectedWakatimeLayout !== WAKATIME_DEFAULT_LAYOUT) { + fullSuffix += `&layout=${selectedWakatimeLayout.value}`; } if (!showTitle) { @@ -96,6 +113,10 @@ const HomeScreen = () => { fullSuffix += `&disable_animations=${!enableAnimations}`; } + if (usePercent) { + fullSuffix += `&display_format=percent`; + } + // for stage three const [theme, setTheme] = useState('default'); const themeSuffix = `${fullSuffix}&theme=${theme}`; @@ -193,8 +214,10 @@ const HomeScreen = () => { { setLangsCount={setLangsCount} enableAnimations={enableAnimations} setEnableAnimations={setEnableAnimations} + usePercent={usePercent} + setUsePercent={setUsePercent} fullSuffix={fullSuffix} /> )} diff --git a/frontend/frontend/src/pages/Home/stages/Customize.js b/frontend/frontend/src/pages/Home/stages/Customize.js index 82866a33..ae9b5460 100644 --- a/frontend/frontend/src/pages/Home/stages/Customize.js +++ b/frontend/frontend/src/pages/Home/stages/Customize.js @@ -6,11 +6,14 @@ import { CardTypes } from '../../../utils'; import TextSection from '../../../components/Home/TextSection'; import NumericSection from '../../../components/Home/NumericSection'; import LanguagesLayoutSection from '../../../components/Home/LanguagesLayoutSection'; +import WakatimeLayoutSection from '../../../components/Home/WakatimeLayoutSection'; const CustomizeStage = ({ selectedCard, - selectedLayout, - setSelectedLayout, + selectedLanguagesLayout, + setSelectedLanguagesLayout, + selectedWakatimeLayout, + setSelectedWakatimeLayout, showTitle, setShowTitle, showOwner, @@ -23,13 +26,17 @@ const CustomizeStage = ({ setLangsCount, enableAnimations, setEnableAnimations, + usePercent, + setUsePercent, fullSuffix, }) => { const cardType = selectedCard || CardTypes.STATS; return (
- {(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && ( + {(cardType === CardTypes.STATS || + cardType === CardTypes.TOP_LANGS || + cardType === CardTypes.WAKATIME) && ( )} - {cardType === CardTypes.STATS && ( + {(cardType === CardTypes.STATS || cardType === CardTypes.WAKATIME) && ( )} - {cardType === CardTypes.TOP_LANGS && ( + {(cardType === CardTypes.TOP_LANGS || + cardType === CardTypes.WAKATIME) && ( + )} + {cardType === CardTypes.WAKATIME && ( + )} {(cardType === CardTypes.STATS || @@ -74,7 +88,7 @@ const CustomizeStage = ({ setVariable={setEnableAnimations} /> )} - {cardType === CardTypes.PIN && ( + {(cardType === CardTypes.PIN || cardType === CardTypes.GIST) && ( )} + {cardType === CardTypes.WAKATIME && ( + + )}
@@ -105,8 +128,10 @@ const CustomizeStage = ({ CustomizeStage.propTypes = { selectedCard: PropTypes.string.isRequired, - selectedLayout: PropTypes.object.isRequired, - setSelectedLayout: PropTypes.func.isRequired, + selectedLanguagesLayout: PropTypes.object.isRequired, + setSelectedLanguagesLayout: PropTypes.func.isRequired, + selectedWakatimeLayout: PropTypes.object.isRequired, + setSelectedWakatimeLayout: PropTypes.func.isRequired, showTitle: PropTypes.bool.isRequired, setShowTitle: PropTypes.func.isRequired, descriptionLines: PropTypes.number.isRequired, @@ -119,6 +144,8 @@ CustomizeStage.propTypes = { setLangsCount: PropTypes.func.isRequired, enableAnimations: PropTypes.bool.isRequired, setEnableAnimations: PropTypes.func.isRequired, + usePercent: PropTypes.bool.isRequired, + setUsePercent: PropTypes.func.isRequired, fullSuffix: PropTypes.string.isRequired, };