frontend: add guest hints and docs links

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!`
+              }
             />
           )}
         </div>

frontend/frontend/src/pages/Home/stages/Customize.js

@@ -60,7 +60,7 @@ const CustomizeStage = ({
 
   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">
+      <div className="h-auto lg:w-2/5 md:w-1/2 p-10 rounded-sm bg-gray-200">
         {(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && (
           <TextSection
             title="Username"
@@ -335,6 +335,17 @@ const CustomizeStage = ({
             max={3}
           />
         )}
+        <div className="pl-10 pr-10">
+          For more customization options check the{' '}
+          <a
+            href="https://github.com/stats-organization/github-stats-extended/blob/master/docs/advanced_documentation.md"
+            target="_blank"
+            className="underline text-blue-900"
+          >
+            customization documentation
+          </a>{' '}
+          after you copied your card URL in step 5.
+        </div>
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
         <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-32">

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 (
     <div className="w-full flex flex-wrap">
       <div className="h-auto lg:w-2/5 md:w-1/2">
-        <div className="pr-10 p-10 rounded-sm bg-gray-200">
+        <div className="p-10 rounded-sm bg-gray-200">
           <div className="flex flex-col items-center">
             {[
               {
@@ -83,6 +83,7 @@ const DisplayStage = ({ filename, link, themeSuffix }) => {
               </Button>
             ))}
           </div>
+          {guestHint && <div className="pt-10 pl-10 pr-10">{guestHint}</div>}
         </div>
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
@@ -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;

frontend/frontend/src/pages/Home/stages/Login.js

@@ -204,7 +204,7 @@ const LoginStage = ({ setCurrItem }) => {
                     </Button>
                   </a>
                   <p className="text-sm text-gray-600 flex-1">
-                    Includes contributions from private repositories for more
+                    Include contributions from private repositories for more
                     complete and accurate stats.
                   </p>
                 </div>
@@ -217,8 +217,8 @@ const LoginStage = ({ setCurrItem }) => {
                     <span className="ml-2 xl:text-lg">Continue as Guest</span>
                   </Button>
                   <p className="text-sm text-gray-600 flex-1">
-                    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.
                   </p>
                 </div>
               </>

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 (
-    <div className="flex flex-wrap">
-      {Object.keys(themes)
-        .filter(
-          (myTheme) =>
-            ![
-              'merko',
-              'blue-green',
-              'gotham',
-              'blueberry',
-              'outrun',
-              'holi',
-            ].includes(myTheme),
-        )
-        .map((myTheme, index) => (
-          <button
-            className="p-2 lg:p-4"
-            key={index}
-            type="button"
-            onClick={() => {
-              setTheme(myTheme);
-              setStage(4);
-            }}
-          >
-            <Card
-              title={myTheme}
-              description=""
-              imageSrc={`${fullSuffix}&theme=${myTheme}`}
-              selected={theme === myTheme}
-              stage={3}
-            />
-          </button>
-        ))}
-    </div>
+    <>
+      <div className="flex flex-wrap">
+        {Object.keys(themes)
+          .filter(
+            (myTheme) =>
+              ![
+                'merko',
+                'blue-green',
+                'gotham',
+                'blueberry',
+                'outrun',
+                'holi',
+              ].includes(myTheme),
+          )
+          .map((myTheme, index) => (
+            <button
+              className="p-2 lg:p-4"
+              key={index}
+              type="button"
+              onClick={() => {
+                setTheme(myTheme);
+                setStage(4);
+              }}
+            >
+              <Card
+                title={myTheme}
+                description=""
+                imageSrc={`${fullSuffix}&theme=${myTheme}`}
+                selected={theme === myTheme}
+                stage={3}
+              />
+            </button>
+          ))}
+      </div>
+      <div className="pl-10 pr-10">
+        For more theme options check the{' '}
+        <a
+          href="https://github.com/stats-organization/github-stats-extended/blob/master/docs/advanced_documentation.md#themes"
+          target="_blank"
+          className="underline text-blue-900"
+        >
+          customization documentation
+        </a>{' '}
+        after you copied your card URL in step 5.
+      </div>
+    </>
   );
 };