Add email collection on the upcoming roadmaps

content/roadmaps.json

@@ -550,7 +550,6 @@
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
     "isUpcoming": true,
     "featured": true,
-    "landingPath": "/roadmaps/112-qa/landscape.md",
     "resourcesPath": "/roadmaps/112-qa/resources.md",
     "author": {
       "name": "Anas Fitiani",

content/roadmaps/112-qa/landscape.md

@@ -1,11 +0,0 @@
-> **Roadmap is not ready yet**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the roadmap, follow this simple advice to learn anything
-
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) 
-
-
-
- 

content/roadmaps/112-qa/meta.json

@@ -24,7 +24,6 @@
   "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
   "isUpcoming": true,
   "featured": true,
-  "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "author": {
     "name": "Anas Fitiani",

pages/[roadmap]/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Container, Image } from '@chakra-ui/react';
+import { Box, Button, Container, Flex, Heading, Image, Input, Text } from '@chakra-ui/react';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { Footer } from '../../components/footer';
@@ -8,6 +8,8 @@ import MdRenderer from '../../components/md-renderer';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
 import { InteractiveRoadmapRenderer } from './interactive';
+import { FreeSignUp, SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup';
+import { BellIcon, EmailIcon } from '@chakra-ui/icons';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -25,8 +27,8 @@ function ImageRoadmap(props: RoadmapProps) {
   }
 
   return (
-    <Container maxW={'900px'} position="relative">
+    <Container maxW={'900px'} position='relative'>
-      <Box mb="30px">
+      <Box mb='30px'>
         <Image alt={roadmap.title} src={roadmap.imageUrl} />
       </Box>
     </Container>
@@ -44,7 +46,7 @@ function TextualRoadmap(props: RoadmapProps) {
   const LandingContent = require(`../../content/${normalizedPath}`).default;
 
   return (
-    <Container maxW={'container.md'} position="relative">
+    <Container maxW={'container.md'} position='relative'>
       <MdRenderer>
         <LandingContent />
       </MdRenderer>
@@ -52,11 +54,33 @@ function TextualRoadmap(props: RoadmapProps) {
   );
 }
 
+function UpcomingRoadmap(props: RoadmapProps) {
+  const { roadmap } = props;
+  if (!roadmap.isUpcoming) {
+    return null;
+  }
+
+  return (
+    <Container maxW={'container.md'} position='relative' mx='auto'>
+      <Flex flexDir='column' alignItems='center' borderWidth={1} rounded='lg' py={10} boxShadow='inner' px={5}>
+        <BellIcon w='90px' h='90px' color='gray.200' mb={5} />
+        <Heading mb={2} fontSize='2xl' >Upcoming Roadmap</Heading>
+        <Text fontSize='md' mb={4}>Please check back later or subscribe below.</Text>
+
+        <form action={SIGNUP_FORM_ACTION} method='post'>
+          <Input type='email' bg={'white'} size='lg' placeholder='Enter your email' mb={2} name={SIGNUP_EMAIL_INPUT_NAME} required />
+          <Button size='lg' isFullWidth colorScheme='teal' leftIcon={<EmailIcon />} type='submit'>Get Notified</Button>
+        </form>
+      </Flex>
+    </Container>
+  );
+}
+
 export default function Roadmap(props: RoadmapProps) {
   const { roadmap } = props;
 
   return (
-    <Box bg="white" minH="100vh">
+    <Box bg='white' minH='100vh'>
       <GlobalHeader />
       <Helmet
         title={roadmap?.seo?.title || roadmap.title}
@@ -64,10 +88,11 @@ export default function Roadmap(props: RoadmapProps) {
         keywords={roadmap?.seo.keywords || []}
         roadmap={roadmap}
       />
-      <Box mb="60px">
+      <Box mb='60px'>
         <RoadmapPageHeader roadmap={roadmap} />
         <ImageRoadmap roadmap={roadmap} />
         <TextualRoadmap roadmap={roadmap} />
+        <UpcomingRoadmap roadmap={roadmap} />
       </Box>
 
       <OpensourceBanner />
@@ -85,12 +110,12 @@ type StaticPathItem = {
 export async function getStaticPaths() {
   const roadmaps = getAllRoadmaps();
   const paramsList: StaticPathItem[] = roadmaps.map((roadmap) => ({
-    params: { roadmap: roadmap.id },
+    params: { roadmap: roadmap.id }
   }));
 
   return {
     paths: paramsList,
-    fallback: false,
+    fallback: false
   };
 }
 
@@ -105,7 +130,7 @@ export async function getStaticProps(context: ContextType) {
 
   return {
     props: {
-      roadmap: getRoadmapById(roadmapId),
+      roadmap: getRoadmapById(roadmapId)
-    },
+    }
   };
 }

pages/signup.tsx

@@ -7,7 +7,10 @@ import { CheckCircleIcon } from '@chakra-ui/icons';
 import siteConfig from '../content/site.json';
 import Helmet from '../components/helmet';
 
-function FreeSignUp() {
+export const SIGNUP_FORM_ACTION = 'https://www.getrevue.co/profile/roadmap/add_subscriber';
+export const SIGNUP_EMAIL_INPUT_NAME = 'member[email]';
+
+export function FreeSignUp() {
   return (
     <Box p='20px' rounded='5px' borderWidth={2}>
       <Box textAlign='left'>
@@ -15,11 +18,10 @@ function FreeSignUp() {
         <Text mb='14px' fontSize='14px' lineHeight='20px'>Enter your email below to get notified about the new
           roadmaps, guides and updates</Text>
 
-        <form action='https://www.getrevue.co/profile/roadmap/add_subscriber' method='post' target='_blank'>
+        <form action={SIGNUP_FORM_ACTION} method='post' target='_blank'>
           <Input size='sm' fontSize='15px' py='18px' rounded='4px' placeholder='Your email'
-                 borderWidth={2} mb={'10px'} name='member[email]' />
+                 borderWidth={2} mb={'10px'} name={SIGNUP_EMAIL_INPUT_NAME} />
-          <Button type={'submit'} bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'}
+          <Button type={'submit'} bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'} w='100%'>Subscribe</Button>
-                  w='100%'>Subscribe</Button>
         </form>
 
         <Text color='gray.500' fontSize='12px' mt='10px'>

public/sitemap.xml

@@ -45,7 +45,7 @@
 <url>
               <loc>https://roadmap.sh/python</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-12T22:39:27.488Z</lastmod>
+              <lastmod>2022-08-12T22:51:31.431Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -69,7 +69,7 @@
 <url>
               <loc>https://roadmap.sh/qa</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-08T14:33:53.391Z</lastmod>
+              <lastmod>2022-08-14T13:57:13.938Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -249,13 +249,13 @@
 <url>
               <loc>https://roadmap.sh/guides</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-04T14:33:07.923Z</lastmod>
+              <lastmod>2022-08-13T19:24:17.719Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-04T14:33:07.920Z</lastmod>
+              <lastmod>2022-08-13T19:24:17.721Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -279,7 +279,7 @@
 <url>
               <loc>https://roadmap.sh/watch</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-04T14:33:17.758Z</lastmod>
+              <lastmod>2022-08-13T19:31:00.946Z</lastmod>
               <priority>1.0</priority>
           </url>
 </urlset>