Add dedicated roadmap alert on the roadmap nodes (#1502)

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>

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>
+  );
+}

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,

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>

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.

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.

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.

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.

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.

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.