Add new badge to new roadmaps

components/home/featured-roadmaps-list.tsx

@@ -23,6 +23,7 @@ export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
             colorIndex={counter}
             title={roadmap.featuredTitle}
             isCommunity={roadmap.isCommunity}
+            isNew={roadmap.isNew}
             subtitle={roadmap.featuredDescription}
           />
         ))}

components/roadmap/home-roadmap-item.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 
 type RoadmapGridItemProps = {
@@ -7,6 +7,7 @@ type RoadmapGridItemProps = {
   isCommunity?: boolean;
   isUpcoming?: boolean;
   colorIndex?: number;
+  isNew?: boolean;
   url: string;
 };
 
@@ -21,7 +22,7 @@ const bgColorList = [
   'teal.200',
   'yellow.100',
   'green.200',
-  'red.200',
+  'red.200'
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
@@ -29,9 +30,10 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
     title,
     subtitle,
     isCommunity,
+    isNew,
     colorIndex = 0,
     url,
-    isUpcoming,
+    isUpcoming
   } = props;
 
   return (
@@ -40,66 +42,70 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
       href={url}
       _hover={{
         textDecoration: 'none',
-        bg: 'rgba(255,255,255,.10)',
+        bg: 'rgba(255,255,255,.10)'
       }}
       sx={{
         // On mobile devices, don't change the scale
         '@media (hover: none)': {
           '&:hover': {
-            bg: 'rgba(255,255,255,.05)',
+            bg: 'rgba(255,255,255,.05)'
-          },
+          }
-        },
+        }
       }}
       flex={1}
-      shadow="2xl"
+      shadow='2xl'
       className={'home-roadmap-item'}
       bg={'rgba(255,255,255,.05)'}
-      color="white"
+      color='white'
-      p="15px"
+      p='15px'
-      rounded="10px"
+      rounded='10px'
-      pos="relative"
+      pos='relative'
     >
       {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement="top">
+        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} position="absolute" top="10px" right="10px" />
+          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
         </Tooltip>
       )}
 
       <Heading
         fontSize={['17px', '17px', '22px']}
         color={bgColorList[colorIndex]}
-        mb="5px"
+        mb='5px'
+        d='flex'
+        alignItems='center'
       >
         {title}
+
+        { isNew && <Badge colorScheme='yellow' ml='10px'>New</Badge> }
       </Heading>
-      <Text color="gray.200" fontSize={['13px']}>
+      <Text color='gray.200' fontSize={['13px']}>
         {subtitle}
       </Text>
 
       {isUpcoming && (
         <Flex
-          alignItems="center"
+          alignItems='center'
-          justifyContent="center"
+          justifyContent='center'
-          pos="absolute"
+          pos='absolute'
           left={0}
           right={0}
           top={0}
           bottom={0}
-          rounded="10px"
+          rounded='10px'
         >
           <Text
-            color="white"
+            color='white'
-            bg="gray.600"
+            bg='gray.600'
             zIndex={1}
             fontWeight={600}
             p={'5px 10px'}
-            rounded="10px"
+            rounded='10px'
           >
             Upcoming
           </Text>
           <Box
             bg={'black'}
-            pos="absolute"
+            pos='absolute'
             top={0}
             left={0}
             right={0}

content/roadmaps.json

@@ -273,6 +273,7 @@
     "featuredDescription": "Step by step guide to become a Vue Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
+    "isNew": true,
     "featured": true,
     "jsonUrl": "/project/vue.json",
     "resourcesPath": "/roadmaps/105-vue/resources.md",
@@ -321,6 +322,7 @@
     "featuredDescription": "Step by step guide to learn JavaScript in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
+    "isNew": true,
     "featured": true,
     "jsonUrl": "/project/javascript.json",
     "versions": [
@@ -438,6 +440,7 @@
     "featuredTitle": "Node.js",
     "featuredDescription": "Step by step guide to becoming a Node.js developer in 2022",
     "type": "tool",
+    "isNew": true,
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
@@ -682,6 +685,7 @@
     "featuredDescription": "Step by step guide to becoming a blockchain developer in 2022",
     "featured": true,
     "type": "role",
+    "isNew": true,
     "imageUrl": "/roadmaps/blockchain.png",
     "jsonUrl": "/project/blockchain.json",
     "author": {

content/roadmaps/105-vue/meta.json

@@ -34,6 +34,7 @@
   "featuredDescription": "Step by step guide to become a Vue Developer in 2022",
   "isTextHeavy": false,
   "isCommunity": false,
+  "isNew": true,
   "featured": true,
   "jsonUrl": "/project/vue.json",
   "resourcesPath": "./resources.md",

content/roadmaps/106-javascript/meta.json

@@ -28,6 +28,7 @@
   "featuredDescription": "Step by step guide to learn JavaScript in 2022",
   "isTextHeavy": false,
   "isCommunity": false,
+  "isNew": true,
   "featured": true,
   "jsonUrl": "/project/javascript.json",
   "versions": [

content/roadmaps/107-nodejs/meta.json

@@ -56,6 +56,7 @@
   "featuredTitle": "Node.js",
   "featuredDescription": "Step by step guide to becoming a Node.js developer in 2022",
   "type": "tool",
+  "isNew": true,
   "author": {
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"
@@ -65,4 +66,4 @@
   "jsonUrl": "/project/nodejs.json",
   "pdfUrl": "/pdfs/nodejs.pdf",
   "contentPathsFilePath": "./content-paths.json"
-}
+}

content/roadmaps/112-blockchain/meta.json

@@ -38,6 +38,7 @@
   "featuredDescription": "Step by step guide to becoming a blockchain developer in 2022",
   "featured": true,
   "type": "role",
+  "isNew": true,
   "imageUrl": "/roadmaps/blockchain.png",
   "jsonUrl": "/project/blockchain.json",
   "author": {

lib/roadmap.ts

@@ -18,6 +18,7 @@ export type RoadmapType = {
   featured: boolean;
   imageUrl?: string;
   jsonUrl?: string;
+  isNew?: boolean;
   landingPath?: string;
   resourcesPath: string;
   contentPathsFilePath?: string;

public/sitemap.xml

@@ -33,13 +33,13 @@
 <url>
               <loc>https://roadmap.sh/vue</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-08T16:43:49.818Z</lastmod>
+              <lastmod>2022-08-29T14:35:47.707Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/javascript</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-17T22:44:44.573Z</lastmod>
+              <lastmod>2022-08-29T14:35:15.626Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -51,7 +51,7 @@
 <url>
               <loc>https://roadmap.sh/nodejs</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-25T19:14:40.904Z</lastmod>
+              <lastmod>2022-08-29T14:35:29.504Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -81,7 +81,7 @@
 <url>
               <loc>https://roadmap.sh/blockchain</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-16T00:30:54.157Z</lastmod>
+              <lastmod>2022-08-29T14:36:56.532Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -273,7 +273,7 @@
 <url>
               <loc>https://roadmap.sh/</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-25T16:14:15.485Z</lastmod>
+              <lastmod>2022-08-29T13:51:41.632Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>