Refactor and add json url

components/roadmap/roadmap-error.tsx

@@ -19,7 +19,7 @@ export function RoadmapError(props: RoadmapProps) {
       rounded='5px'
       color='white'
     >
-      <Heading mb='4px' size='md'>Oops! There's an error</Heading>
+      <Heading mb='4px' size='md'>Oops! There&apos;s an error</Heading>
       <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/${roadmap.id}`}>non-interactive version</Link></Text>
     </Container>
   );

content/roadmaps.json

@@ -13,6 +13,7 @@
         "javascript developer",
         "frontend development skills",
         "frontend development skills test",
+        "frontend roadmap",
         "frontend engineer roadmap",
         "frontend developer roadmap",
         "become a frontend developer",
@@ -37,6 +38,7 @@
     },
     "featured": true,
     "imagePath": "/roadmaps/frontend.png",
+    "jsonUrl": "/project/frontend.json",
     "resourcesPath": "/roadmaps/100-frontend/resources.md",
     "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
     "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",

content/roadmaps/100-frontend/meta.json

@@ -12,6 +12,7 @@
       "javascript developer",
       "frontend development skills",
       "frontend development skills test",
+      "frontend roadmap",
       "frontend engineer roadmap",
       "frontend developer roadmap",
       "become a frontend developer",
@@ -36,6 +37,7 @@
   },
   "featured": true,
   "imagePath": "/roadmaps/frontend.png",
+  "jsonUrl": "/project/frontend.json",
   "resourcesPath": "./resources.md",
   "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
   "contentPathsFilePath": "./content-paths.json"

content/roadmaps/101-backend/meta.json

@@ -5,6 +5,7 @@
     "keywords": [
       "guide to becoming a developer",
       "guide to becoming a backend developer",
+      "backend roadmap",
       "backend developer",
       "backend engineer",
       "backend skills",
@@ -31,7 +32,8 @@
   "featuredTitle": "Backend",
   "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
   "featured": true,
-  "imagePath": "/roadmaps/backend.png",
+  "imageUrl": "/roadmaps/backend.png",
+  "jsonUrl": "/project/frontend.json",
   "resourcesPath": "./resources.md",
   "author": {
     "name": "Kamran Ahmed",

content/roadmaps/102-devops/meta.json

@@ -25,7 +25,8 @@
   "featuredTitle": "DevOps",
   "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
   "featured": true,
-  "imagePath": "/roadmaps/devops.png",
+  "imageUrl": "/roadmaps/devops.png",
+  "jsonUrl": "/project/devops.json",
   "resourcesPath": "./resources.md",
   "versions": [
     "latest",

content/roadmaps/103-react/meta.json

@@ -25,6 +25,7 @@
   "featured": true,
   "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
+  "jsonUrl": "/project/react.json",
   "versions": [
     "latest",
     "2018",

content/roadmaps/104-angular/meta.json

@@ -23,6 +23,7 @@
   "isTextHeavy": false,
   "isCommunity": false,
   "featured": true,
+  "jsonUrl": "/project/angular.json",
   "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "versions": [

content/roadmaps/105-android/meta.json

@@ -23,6 +23,7 @@
   "isTextHeavy": true,
   "isCommunity": false,
   "featured": true,
+  "jsonUrl": "/project/android.json",
   "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "versions": [

content/roadmaps/106-python/meta.json

@@ -23,6 +23,7 @@
   "isTextHeavy": true,
   "isCommunity": false,
   "featured": true,
+  "jsonUrl": "/project/python.json",
   "resourcesPath": "./resources.md",
   "landingPath": "./landscape.md",
   "pdfUrl": "https://kamranahmedse.gumroad.com/l/python-roadmap",

content/roadmaps/107-golang/meta.json

@@ -34,6 +34,7 @@
   "isCommunity": false,
   "isUpcoming": false,
   "featured": true,
+  "jsonUrl": "/project/golang.json",
   "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "pdfUrl": "https://kamranahmedse.gumroad.com/l/go-roadmap",

content/roadmaps/108-java/meta.json

@@ -33,6 +33,7 @@
   "isCommunity": false,
   "isUpcoming": false,
   "featured": true,
+  "jsonUrl": "/project/java.json",
   "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "versions": [

lib/roadmap.ts

@@ -4,18 +4,19 @@ export type RoadmapType = {
   seo: {
     title: string;
     description: string;
-    keywords: string[]
-  },
-  title: string,
-  description: string,
+    keywords: string[];
+  };
+  title: string;
+  description: string;
   featuredTitle: string;
-  featuredDescription: string,
+  featuredDescription: string;
   author: {
-    name: string,
-    url: string
-  },
-  featured: boolean,
-  imagePath?: string,
+    name: string;
+    url: string;
+  };
+  featured: boolean;
+  imageUrl?: string;
+  jsonUrl?: string;
   landingPath?: string;
   resourcesPath: string;
   contentPathsFilePath?: string;
@@ -27,15 +28,15 @@ export type RoadmapType = {
 };
 
 export function getRoadmapById(id: string): RoadmapType | undefined {
-  return (roadmaps as RoadmapType[]).find(roadmap => roadmap.id === id);
+  return (roadmaps as RoadmapType[]).find((roadmap) => roadmap.id === id);
 }
 
 export function getAllRoadmaps(): RoadmapType[] {
-  return (roadmaps as RoadmapType[]);
+  return roadmaps as RoadmapType[];
 }
 
 export function getFeaturedRoadmaps(): RoadmapType[] {
   const roadmaps: RoadmapType[] = getAllRoadmaps();
 
-  return roadmaps.filter(roadmap => roadmap.featured);
+  return roadmaps.filter((roadmap) => roadmap.featured);
 }

pages/[roadmap]/index.tsx

@@ -15,14 +15,14 @@ type RoadmapProps = {
 
 function ImageRoadmap(props: RoadmapProps) {
   const { roadmap } = props;
-  if (!roadmap.imagePath) {
+  if (!roadmap.imageUrl) {
     return null;
   }
 
   return (
     <Container maxW={'900px'} position="relative">
       <Box mb="30px">
-        <Image alt={roadmap.title} src={roadmap.imagePath} />
+        <Image alt={roadmap.title} src={roadmap.imageUrl} />
       </Box>
     </Container>
   );

pages/[roadmap]/interactive.tsx

@@ -30,7 +30,7 @@ function RoadmapRenderer(props: RoadmapProps) {
   const [hasErrorRendering, setHasErrorRendering] = useState(false);
 
   useEffect(() => {
-    get(`/project/${roadmap.id}.json`)
+    get(roadmap.jsonUrl)
       .then((roadmapJson) => {
         setRoadmapJson(roadmapJson);
       })
@@ -38,7 +38,7 @@ function RoadmapRenderer(props: RoadmapProps) {
         console.error(err);
         setHasErrorRendering(true);
       });
-  }, [get, roadmap.id]);
+  }, [get, roadmap.id, roadmap.jsonUrl]);
 
   // Event bindings for the roadmap interactivity
   useEffect(() => {

public/sitemap.xml

@@ -3,7 +3,7 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2021-12-04T23:57:18.813Z</lastmod>
+              <lastmod>2021-12-07T12:17:26.159Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -273,7 +273,7 @@
 <url>
               <loc>https://roadmap.sh/thanks</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2021-11-30T15:46:40.893Z</lastmod>
+              <lastmod>2021-12-06T14:21:37.276Z</lastmod>
               <priority>0.5</priority>
           </url>
 <url>