From a3688ea94858d5aedcd1b6a239d85ead3f0e1e76 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 14 Aug 2022 18:37:09 +0400
Subject: [PATCH] Add email collection on the upcoming roadmaps
---
content/roadmaps.json | 1 -
content/roadmaps/112-qa/landscape.md | 11 -------
content/roadmaps/112-qa/meta.json | 1 -
pages/[roadmap]/index.tsx | 45 +++++++++++++++++++++-------
pages/signup.tsx | 12 ++++----
public/sitemap.xml | 10 +++----
6 files changed, 47 insertions(+), 33 deletions(-)
delete mode 100644 content/roadmaps/112-qa/landscape.md
diff --git a/content/roadmaps.json b/content/roadmaps.json
index 7ae3828b4..e4a5880f3 100644
--- a/content/roadmaps.json
+++ b/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",
diff --git a/content/roadmaps/112-qa/landscape.md b/content/roadmaps/112-qa/landscape.md
deleted file mode 100644
index 75ceb7a41..000000000
--- a/content/roadmaps/112-qa/landscape.md
+++ /dev/null
@@ -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)
-
-
-
-
diff --git a/content/roadmaps/112-qa/meta.json b/content/roadmaps/112-qa/meta.json
index 8f3b8706b..5a09cd66c 100644
--- a/content/roadmaps/112-qa/meta.json
+++ b/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",
diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx
index e45f9947b..13a8c14e7 100644
--- a/pages/[roadmap]/index.tsx
+++ b/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">
- <Box mb="30px">
+ <Container maxW={'900px'} position='relative'>
+ <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)
+ }
};
}
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 019f4ae4d..a2628b803 100644
--- a/pages/signup.tsx
+++ b/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]' />
- <Button type={'submit'} bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'}
- w='100%'>Subscribe</Button>
+ borderWidth={2} mb={'10px'} name={SIGNUP_EMAIL_INPUT_NAME} />
+ <Button type={'submit'} bg='gray.700' _hover={{ bg: 'black' }} fontWeight={500} color={'white'} w='100%'>Subscribe</Button>
</form>
<Text color='gray.500' fontSize='12px' mt='10px'>
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 185adc3cc..8908329b4 100644
--- a/public/sitemap.xml
+++ b/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>
\ No newline at end of file