Add upcoming roadmaps

src/components/UpcomingRoadmap.astro

@@ -0,0 +1,46 @@
+---
+import CaptchaFields from './Captcha/CaptchaFields.astro';
+import Icon from './Icon.astro';
+---
+
+<div
+  class='my-0 p-5 sm:p-12 border bg-gray-100 rounded-lg text-left sm:text-center'
+>
+  <div class='sm:max-w-[400px] mx-auto'>
+    <div class='hidden sm:block'><Icon icon='bell' /></div>
+    <h2 class='text-3xl mb-1 font-medium hidden sm:block'>Upcoming Roadmap</h2>
+    <p class='text-gray-600 mb-0 sm:mb-5'>
+      Please check back later or subscribe below.
+    </p>
+
+    <form
+      action='https://newsletter.roadmap.sh/subscribe'
+      method='post'
+      accept-charset='utf-8'
+      captcha-form
+    >
+      <input
+        type='email'
+        required
+        name='email'
+        id='email'
+        autofocus
+        class='mt-1 block w-full mb-2 border-2 rounded-md py-2 sm:py-3 px-3 sm:px-3.5 text-md'
+        placeholder='Enter your email'
+      />
+
+      <CaptchaFields />
+
+      <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
+      <input type='hidden' name='subform' value='yes' />
+
+      <button
+        type='submit'
+        name='submit'
+        class='text-white bg-gradient-to-r from-amber-700 to-blue-800 hover:from-amber-800 hover:to-blue-900 font-regular rounded-md text-md px-5 py-2.5 w-full text-center'
+      >
+        Get Notified
+      </button>
+    </form>
+  </div>
+</div>

src/pages/[roadmapId]/index.astro

@@ -3,6 +3,7 @@ import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
 import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
+import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap';
 
@@ -35,10 +36,11 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
     title={roadmapData.title}
     roadmapId={roadmapId}
     hasTopics={roadmapData.hasTopics}
+    isUpcoming={roadmapData.isUpcoming}
   />
 
   {
-    roadmapData.jsonUrl && (
+    !roadmapData.isUpcoming && roadmapData.jsonUrl && (
       <InteractiveRoadmap
         roadmapId={roadmapId}
         description={roadmapData.description}
@@ -49,12 +51,14 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
   }
 
   {
-    !roadmapData.jsonUrl && (
+    !roadmapData.isUpcoming && !roadmapData.jsonUrl && (
       <MarkdownRoadmap>
         <roadmapFile.Content />
       </MarkdownRoadmap>
     )
   }
 
+  {roadmapData.isUpcoming && <UpcomingRoadmap />}
+
   <CaptchaScripts slot='after-footer' />
 </BaseLayout>

src/roadmaps/cyber-security/cyber-security.md

@@ -0,0 +1,43 @@
+---
+order: 12
+featuredTitle: "Cyber Security"
+featuredDescription: "Step by step guide to becoming a Cyber Security Expert in 2023"
+title: "Cyber Security Expert"
+description: "Step by step guide to becoming a Cyber Security developer in 2023"
+isUpcoming: true
+seo:
+  title: "Cyber Security Roadmap"
+  description: "Community driven, articles, resources, guides, interview questions, quizzes for cyber security. Learn to become a modern Cyber Security developer by following the steps, skills, resources and guides listed in this roadmap."
+  keywords:
+    - "guide to becoming a cyber security expert"
+    - "guide to becoming a cyber security expert"
+    - "cyber security expert"
+    - "cyber security skills"
+    - "guide to cyber security"
+    - "cyber security roadmap"
+    - "cyber security skills"
+    - "cyber security skills test"
+    - "skills for cyber security"
+    - "what is cyber security"
+    - "cyber security quiz"
+    - "cyber security interview questions"
+    - "cyber security engineer roadmap"
+    - "cyber security expert roadmap"
+    - "become a cyber security expert"
+    - "cyber security expert career path"
+    - "cyber security expert"
+    - "modern cyber security expert"
+relatedRoadmaps:
+  - "backend"
+  - "devops"
+  - "java"
+  - "python"
+  - "nodejs"
+sitemap:
+  priority: 1
+  changefreq: "monthly"
+tags:
+  - "roadmap"
+  - "main-sitemap"
+  - "role-roadmap"
+---

src/roadmaps/react-native/react-native.md

@@ -0,0 +1,43 @@
+---
+order: 11
+featuredTitle: "React Native"
+featuredDescription: "Step by step guide to becoming a React Native Developer in 2023"
+title: "React Native Developer"
+description: "Step by step guide to becoming a React Native developer in 2023"
+isUpcoming: true
+seo:
+  title: "Learn to become a modern React Native developer"
+  description: "Community driven, articles, resources, guides, interview questions, quizzes for react native development. Learn to become a modern React Native developer by following the steps, skills, resources and guides listed in this roadmap."
+  keywords:
+    - "guide to becoming a react native developer"
+    - "guide to becoming a react native developer"
+    - "react native developer"
+    - "react native engineer"
+    - "react native skills"
+    - "guide to react native"
+    - "react native roadmap"
+    - "react native skills"
+    - "react native skills test"
+    - "skills for react native"
+    - "what is react native"
+    - "react native quiz"
+    - "react native interview questions"
+    - "react native engineer roadmap"
+    - "react native developer roadmap"
+    - "become a react native developer"
+    - "react native developer career path"
+    - "react native developer"
+    - "modern react native developer"
+relatedRoadmaps:
+  - "flutter"
+  - "android"
+  - "javascript"
+  - "nodejs"
+sitemap:
+  priority: 1
+  changefreq: "monthly"
+tags:
+  - "roadmap"
+  - "main-sitemap"
+  - "role-roadmap"
+---