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

…eed URL) during sign-up

* Turn examples into an array
* Fix Eslint error

src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx

@@ -7,7 +7,9 @@ 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:"
+      promptExamples={['Blog URL: https://dev.to/user', 'Blog feed URL: https://dev.to/feed/user']}
       buttonText="validate blog"
       helperText="Validate your Blog URL"
       noFeedsSelected="Please validate your blog URL"

src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx

@@ -142,7 +142,8 @@ type RSSFeedsFormProps = {
     selected: 'blogs' | 'channels';
     discovered: 'allBlogs' | 'allChannels';
   };
-  prompt: string;
+  prompt?: string;
+  promptExamples?: Array<string>;
   title: string;
   buttonText: string;
   helperText: string;
@@ -161,6 +162,7 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
   ({
     feeds: { selected, discovered },
     prompt,
+    promptExamples,
     title,
     buttonText,
     helperText,
@@ -245,7 +247,16 @@ 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}
+            {promptExamples?.map((example) => (
+              <>
+                <br />
+                {example}
+              </>
+            ))}
+          </h2>
+
           <div className={classes.infoContainer}>
             <div className={classes.inputsContainer}>
               <TextInput