Add clarification to differentiate between the blog URL and the RSS(f…

…eed URL) during sign-up
Seneca-CDOT · Nov 17, 2022 · 8ce3663 · 8ce3663
1 parent 3073184
commit 8ce3663
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx b/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
@@ -7,7 +7,10 @@ const BlogFeeds = () => {
   return (
     <RSSFeeds
       title="Blog and RSS"
-      prompt="Enter your blog URL and select the RSS you want to use in Telescope"
+      prompt="Enter your blog URL and select the RSS you want to use in Telescope.
+      A blog URL (HTML) should be the root of your blog itself, and Telescope will find the link(s) of blog feed URL (XML) for you to select, such as:"
+      promptExample1="Blog URL: https://dev.to/user"
+      promptExample2="Blog feed URL: https://dev.to/feed/user"
       buttonText="validate blog"
       helperText="Validate your Blog URL"
       noFeedsSelected="Please validate your blog URL"

diff --git a/src/web/app/src/components/SignUp/Forms/ChannelFeeds.tsx b/src/web/app/src/components/SignUp/Forms/ChannelFeeds.tsx
@@ -8,6 +8,8 @@ const ChannelFeeds = () => {
     <RSSFeeds
       title="YouTube and Twitch"
       prompt="OPTIONAL: Enter your YouTube and/or Twitch channel"
+      promptExample1=""
+      promptExample2=""
       buttonText="validate blog"
       helperText="Validate your Blog URL"
       feeds={{

diff --git a/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx b/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
@@ -143,6 +143,8 @@ type RSSFeedsFormProps = {
     discovered: 'allBlogs' | 'allChannels';
   };
   prompt: string;
+  promptExample1: string;
+  promptExample2: string;
   title: string;
   buttonText: string;
   helperText: string;
@@ -161,6 +163,8 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
   ({
     feeds: { selected, discovered },
     prompt,
+    promptExample1,
+    promptExample2,
     title,
     buttonText,
     helperText,
@@ -245,7 +249,13 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
       <div className={classes.root}>
         <div className={classes.container}>
           <h1 className={classes.blogPageTitle}>{title}</h1>
-          <h2 className={classes.helpText}>{prompt}</h2>
+          <h2 className={classes.helpText}>
+            {prompt}
+            <br />
+            {promptExample1}
+            <br />
+            {promptExample2}
+          </h2>
           <div className={classes.infoContainer}>
             <div className={classes.inputsContainer}>
               <TextInput