diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js index bdfdc6f3..3b73758d 100644 --- a/frontend/frontend/src/pages/Home/Home.js +++ b/frontend/frontend/src/pages/Home/Home.js @@ -223,6 +223,22 @@ const HomeScreen = ({ stage, setStage }) => { // for stage five const [gistUrl, setGistUrl] = useState(''); + let guestHint; + switch (selectedCard) { + case CardTypes.STATS: + case CardTypes.TOP_LANGS: + guestHint = `username "${DEMO_USER}"`; + break; + case CardTypes.PIN: + guestHint = `repo "${DEMO_REPO}"`; + break; + case CardTypes.GIST: + guestHint = `Gist ID "${DEMO_GIST}"`; + break; + case CardTypes.WAKATIME: + guestHint = `WakaTime username "${DEMO_WAKATIME_USER}"`; + } + useEffect(() => { const fetchGistUrl = async (gistId) => { try { @@ -434,6 +450,11 @@ const HomeScreen = ({ stage, setStage }) => { } })()} themeSuffix={themeSuffix} + guestHint={ + isAuthenticated + ? null + : `Replace the sample ${guestHint} with your own after copying your Markdown or URL!` + } /> )} diff --git a/frontend/frontend/src/pages/Home/stages/Customize.js b/frontend/frontend/src/pages/Home/stages/Customize.js index d880c125..a5b3bfd5 100644 --- a/frontend/frontend/src/pages/Home/stages/Customize.js +++ b/frontend/frontend/src/pages/Home/stages/Customize.js @@ -60,7 +60,7 @@ const CustomizeStage = ({ return (
-
+
{(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && ( )} +
+ For more customization options check the{' '} + + customization documentation + {' '} + after you copied your card URL in step 5. +
diff --git a/frontend/frontend/src/pages/Home/stages/Display.js b/frontend/frontend/src/pages/Home/stages/Display.js index df920b69..c6752114 100644 --- a/frontend/frontend/src/pages/Home/stages/Display.js +++ b/frontend/frontend/src/pages/Home/stages/Display.js @@ -12,7 +12,7 @@ import { Button, Image } from '../../../components'; import { classnames } from '../../../utils'; import { HOST } from '../../../constants'; -const DisplayStage = ({ filename, link, themeSuffix }) => { +const DisplayStage = ({ filename, link, themeSuffix, guestHint }) => { const card = themeSuffix.split('?')[0]; const downloadPNG = () => { @@ -58,7 +58,7 @@ const DisplayStage = ({ filename, link, themeSuffix }) => { return (
-
+
{[ { @@ -83,6 +83,7 @@ const DisplayStage = ({ filename, link, themeSuffix }) => { ))}
+ {guestHint &&
{guestHint}
}
@@ -101,6 +102,7 @@ DisplayStage.propTypes = { filename: PropTypes.string.isRequired, link: PropTypes.string.isRequired, themeSuffix: PropTypes.string.isRequired, + guestHint: PropTypes.string.isRequired, }; export default DisplayStage; diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js index 723be850..3a4bef9b 100644 --- a/frontend/frontend/src/pages/Home/stages/Login.js +++ b/frontend/frontend/src/pages/Home/stages/Login.js @@ -204,7 +204,7 @@ const LoginStage = ({ setCurrItem }) => {

- Includes contributions from private repositories for more + Include contributions from private repositories for more complete and accurate stats.

@@ -217,8 +217,8 @@ const LoginStage = ({ setCurrItem }) => { Continue as Guest

- Try out GitHub-Stats-Extended with data from an example - user/repository. + Explore options using sample data. Insert your own username + in the last step.

diff --git a/frontend/frontend/src/pages/Home/stages/Theme.js b/frontend/frontend/src/pages/Home/stages/Theme.js index 790fef45..3d388281 100644 --- a/frontend/frontend/src/pages/Home/stages/Theme.js +++ b/frontend/frontend/src/pages/Home/stages/Theme.js @@ -8,39 +8,52 @@ import { themes } from '../../../backend/themes/index'; const ThemeStage = ({ theme, setTheme, setStage, fullSuffix }) => { return ( -
- {Object.keys(themes) - .filter( - (myTheme) => - ![ - 'merko', - 'blue-green', - 'gotham', - 'blueberry', - 'outrun', - 'holi', - ].includes(myTheme), - ) - .map((myTheme, index) => ( - - ))} -
+ <> +
+ {Object.keys(themes) + .filter( + (myTheme) => + ![ + 'merko', + 'blue-green', + 'gotham', + 'blueberry', + 'outrun', + 'holi', + ].includes(myTheme), + ) + .map((myTheme, index) => ( + + ))} +
+
+ For more theme options check the{' '} + + customization documentation + {' '} + after you copied your card URL in step 5. +
+ ); };