Refactor roadmap and best practice rendering engine

scripts/compress-jsons.cjs

@@ -1,19 +0,0 @@
-const fs = require('node:fs');
-const path = require('node:path');
-
-const jsonsDir = path.join(process.cwd(), 'public/jsons');
-const childJsonDirs = fs.readdirSync(jsonsDir);
-
-childJsonDirs.forEach((childJsonDir) => {
-  const fullChildJsonDirPath = path.join(jsonsDir, childJsonDir);
-  const jsonFiles = fs.readdirSync(fullChildJsonDirPath);
-
-  jsonFiles.forEach((jsonFileName) => {
-    console.log(`Compressing ${jsonFileName}...`);
-
-    const jsonFilePath = path.join(fullChildJsonDirPath, jsonFileName);
-    const json = require(jsonFilePath);
-
-    fs.writeFileSync(jsonFilePath, JSON.stringify(json));
-  });
-});

src/components/FrameRenderer/FrameRenderer.astro

@@ -5,14 +5,13 @@ import './FrameRenderer.css';
 export interface Props {
   resourceType: 'roadmap' | 'best-practice';
   resourceId: string;
-  jsonUrl: string;
   dimensions?: {
     width: number;
     height: number;
   };
 }
 
-const { resourceId, resourceType, jsonUrl, dimensions = null } = Astro.props;
+const { resourceId, resourceType, dimensions = null } = Astro.props;
 ---
 
 <div
@@ -22,7 +21,6 @@ const { resourceId, resourceType, jsonUrl, dimensions = null } = Astro.props;
     : null}
   data-resource-type={resourceType}
   data-resource-id={resourceId}
-  data-json-url={jsonUrl}
 >
   <div id='resource-loader'>
     <Loader />

src/components/FrameRenderer/renderer.ts

@@ -51,7 +51,6 @@ export class Renderer {
 
     this.resourceType = dataset.resourceType!;
     this.resourceId = dataset.resourceId!;
-    this.jsonUrl = dataset.jsonUrl!;
 
     return true;
   }
@@ -130,13 +129,19 @@ export class Renderer {
     this.trackVisit();
 
     if (roadmapType) {
-      this.switchRoadmap(`/jsons/roadmaps/${roadmapType}.json`);
+      this.switchRoadmap(`/${roadmapType}.json`);
     } else {
-      this.jsonToSvg(this.jsonUrl);
+      this.jsonToSvg(
+        this.resourceType === 'roadmap'
+          ? `/${this.resourceId}.json`
+          : `/best-practices/${this.resourceId}.json`
+      );
     }
   }
 
   switchRoadmap(newJsonUrl: string) {
+    this.containerEl?.setAttribute('style', '');
+
     const newJsonFileSlug = newJsonUrl.split('/').pop()?.replace('.json', '');
 
     // Update the URL and attach the new roadmap type
@@ -145,25 +150,15 @@ export class Renderer {
       const type = this.resourceType[0]; // r for roadmap, b for best-practices
 
       url.searchParams.delete(type);
+
+      if (newJsonFileSlug !== this.resourceId) {
         url.searchParams.set(type, newJsonFileSlug!);
+      }
 
       window.history.pushState(null, '', url.toString());
     }
 
-    const pageType = this.resourceType.replace(/\b\w/g, (l) => l.toUpperCase());
+    this.jsonToSvg(newJsonUrl)?.then(() => {});
-
-    window.fireEvent({
-      // RoadmapClick, BestPracticesClick, etc
-      category: `${pageType.replace('-', '')}Click`,
-      // roadmap/frontend/switch-version
-      action: `${this.resourceId}/switch-version`,
-      // roadmap/frontend/switch-version
-      label: `${newJsonFileSlug}`,
-    });
-
-    this.jsonToSvg(newJsonUrl)?.then(() => {
-      this.containerEl?.setAttribute('style', '');
-    });
   }
 
   handleSvgClick(e: any) {

src/lib/roadmap.ts

@@ -2,7 +2,6 @@ import type { PageSponsorType } from '../components/PageSponsor';
 import type { MarkdownFileType } from './file';
 
 export interface RoadmapFrontmatter {
-  jsonUrl: string;
   pdfUrl: string;
   order: number;
   briefTitle: string;

src/pages/[roadmapId]/index.astro

@@ -54,8 +54,6 @@ if (roadmapData.schema) {
 if (roadmapFAQs.length) {
   jsonLdSchema.push(generateFAQSchema(roadmapFAQs));
 }
-
-const contentContributionLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps/${roadmapId}/content`;
 ---
 
 <BaseLayout
@@ -89,7 +87,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
 
   <div class='bg-gray-50 pt-4 sm:pt-12'>
     {
-      !roadmapData.isUpcoming && roadmapData.jsonUrl && (
+      !roadmapData.isUpcoming && roadmapData.briefTitle !== 'Android' && (
         <div class='container relative max-w-[1000px]'>
           <ShareIcons
             description={roadmapData.briefDescription}
@@ -100,7 +98,6 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
           <FrameRenderer
             resourceType={'roadmap'}
             resourceId={roadmapId}
-            jsonUrl={roadmapData.jsonUrl}
             dimensions={roadmapData.dimensions}
           />
         </div>
@@ -108,7 +105,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
     }
 
     {
-      !roadmapData.isUpcoming && !roadmapData.jsonUrl && (
+      !roadmapData.isUpcoming && roadmapData.briefTitle === 'Android' && (
         <div class='mt-0 pb-14 sm:-mt-6'>
           <MarkdownFile>
             <roadmapFile.Content />

src/pages/[roadmapId]/index.json.ts

@@ -0,0 +1,27 @@
+import type { APIRoute } from 'astro';
+
+export async function getStaticPaths() {
+  const roadmapJsons = await import.meta.glob('/src/data/roadmaps/**/*.json', {
+    eager: true,
+  });
+
+  return Object.keys(roadmapJsons).map((filePath) => {
+    const roadmapId = filePath.split('/').pop()?.replace('.json', '');
+    const roadmapJson = roadmapJsons[filePath] as Record<string, any>;
+
+    return {
+      params: {
+        roadmapId,
+      },
+      props: {
+        roadmapJson: roadmapJson,
+      },
+    };
+  });
+}
+
+export const get: APIRoute = async function ({ params, request, props }) {
+  return {
+    body: JSON.stringify(props.roadmapJson),
+  };
+};

src/pages/best-practices/[bestPracticeId]/index.json.ts

@@ -0,0 +1,30 @@
+import type { APIRoute } from 'astro';
+
+export async function getStaticPaths() {
+  const bestPracticeJsons = await import.meta.glob(
+    '/src/data/best-practices/**/*.json',
+    {
+      eager: true,
+    }
+  );
+
+  return Object.keys(bestPracticeJsons).map((filePath) => {
+    const bestPracticeId = filePath.split('/').pop()?.replace('.json', '');
+    const bestPracticeJson = bestPracticeJsons[filePath] as Record<string, any>;
+
+    return {
+      params: {
+        bestPracticeId,
+      },
+      props: {
+        bestPracticeJson: bestPracticeJson,
+      },
+    };
+  });
+}
+
+export const get: APIRoute = async function ({ params, request, props }) {
+  return {
+    body: JSON.stringify(props.bestPracticeJson),
+  };
+};