From dd2ce818d5611cb8a4a9837b5544830224e11eea Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 14 Aug 2022 17:55:31 +0400
Subject: [PATCH] Add dedicated roadmap alert on the roadmap nodes (#1502)

---
 components/icons/tree.svg                     |  1 +
 .../mdx-components/dedicated-roadmap.tsx      | 22 +++++++++++++++++++
 .../md-renderer/mdx-components/index.tsx      |  2 ++
 components/roadmap/content-drawer.tsx         |  1 +
 .../100-react-js/readme.md                    |  6 +++++
 .../101-angular/readme.md                     |  6 +++++
 .../111-pick-a-framework/102-vue-js/readme.md |  6 +++++
 .../content/103-learn-a-language/100-go.md    |  7 ++++++
 .../content/103-learn-a-language/102-java.md  |  6 +++++
 .../103-learn-a-language/106-python.md        |  6 +++++
 10 files changed, 63 insertions(+)
 create mode 100644 components/icons/tree.svg
 create mode 100644 components/md-renderer/mdx-components/dedicated-roadmap.tsx

diff --git a/components/icons/tree.svg b/components/icons/tree.svg
new file mode 100644
index 000000000..26f98a2c4
--- /dev/null
+++ b/components/icons/tree.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v-7h-9v-5h3v-6h-8v6h3v5h-9v7h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6z"/></svg>
diff --git a/components/md-renderer/mdx-components/dedicated-roadmap.tsx b/components/md-renderer/mdx-components/dedicated-roadmap.tsx
new file mode 100644
index 000000000..f8b9c9763
--- /dev/null
+++ b/components/md-renderer/mdx-components/dedicated-roadmap.tsx
@@ -0,0 +1,22 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import TreeIcon from '../../icons/tree.svg';
+
+type DedicatedRoadmapProps = {
+  href: string;
+  title: string;
+  description: string;
+};
+
+export function DedicatedRoadmap(props: DedicatedRoadmapProps) {
+  const { href, title, description } = props;
+
+  return (
+    <Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center'  _hover={{ bg: 'yellow.400'}} bg='yellow.300'>
+      <Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' />
+      <Box as='span'>
+        <Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading>
+        <Text color='gray.700' as='span' fontSize='md'>{ description }</Text>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/components/md-renderer/mdx-components/index.tsx b/components/md-renderer/mdx-components/index.tsx
index c3b21e448..a936b4e07 100644
--- a/components/md-renderer/mdx-components/index.tsx
+++ b/components/md-renderer/mdx-components/index.tsx
@@ -11,6 +11,7 @@ import { BadgeLink } from './badge-link';
 import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
 import { ResourceGroupTitle } from './resource-group-title';
+import { DedicatedRoadmap } from './dedicated-roadmap';
 
 const MdxComponents = {
   p: P,
@@ -18,6 +19,7 @@ const MdxComponents = {
   pre: Pre,
   blockquote: BlockQuote,
   a: EnrichedLink,
+  DedicatedRoadmap,
   table: Table,
   iframe: IFrame,
   img: Img,
diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 60443ea68..2ae6df29c 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -108,6 +108,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
               </Text>
             </Button>
           </Flex>
+
           <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
         </Box>
       </RemoveScroll>
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
index 900255043..be94fe8af 100644
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/react'
+  title='React Roadmap'
+  description='Click to check the detailed React Roadmap.'
+/>
+
 # React
 
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md
index bff19387c..e471cb3fe 100644
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md
@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/angular'
+  title='Angular Roadmap'
+  description='Click to check the detailed Angular Roadmap.'
+/>
+
 # Angular
 
 Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
index ec9da5d7c..b5be13835 100644
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
@@ -1,3 +1,9 @@
+<DedicatedRoadmap 
+  href='/vue'
+  title='Vue Roadmap'
+  description='Click to check the detailed Vue Roadmap.'
+/>
+
 # Vue.js
 
 Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md b/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md
index abfa64445..474d163ad 100644
--- a/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md
@@ -1,3 +1,10 @@
+<DedicatedRoadmap
+  href='/go'
+  title='Go Roadmap'
+  description='Click to check the detailed Go Roadmap.'
+/>
+
+
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md b/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md
index ab4f8f785..7eaba295b 100644
--- a/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md
@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/java'
+  title='Java Roadmap'
+  description='Click to check the detailed Java Roadmap.'
+/>
+
 # Java
 
 Java is general-purpose language, primarily used for Internet-based applications.
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md b/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md
index 72d9e196e..b0d34862c 100644
--- a/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md
@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/python'
+  title='Python Roadmap'
+  description='Click to check the detailed Python Roadmap.'
+/>
+
 # Python
 
 Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedureal or object-oriented programmatic ways.