Refactor roadmap and best practice rendering engine

pull/4017/head
Kamran Ahmed 1 year ago
parent b0a4130229
commit dec5e58063
  1. 1
      public/jsons/roadmaps/frontend-beginner.json
  2. 1
      public/jsons/roadmaps/frontend.json
  3. 19
      scripts/compress-jsons.cjs
  4. 4
      src/components/FrameRenderer/FrameRenderer.astro
  5. 31
      src/components/FrameRenderer/renderer.ts
  6. 0
      src/data/best-practices/api-security/api-security.json
  7. 0
      src/data/best-practices/aws/aws.json
  8. 0
      src/data/best-practices/code-review/code-review.json
  9. 0
      src/data/best-practices/frontend-performance/frontend-performance.json
  10. 0
      src/data/roadmaps/android/android.json
  11. 0
      src/data/roadmaps/angular/angular.json
  12. 0
      src/data/roadmaps/aspnet-core/aspnet-core.json
  13. 0
      src/data/roadmaps/backend/backend.json
  14. 0
      src/data/roadmaps/blockchain/blockchain.json
  15. 0
      src/data/roadmaps/code-review/code-review.json
  16. 0
      src/data/roadmaps/computer-science/computer-science.json
  17. 0
      src/data/roadmaps/cpp/cpp.json
  18. 0
      src/data/roadmaps/cyber-security/cyber-security.json
  19. 0
      src/data/roadmaps/design-system/design-system.json
  20. 0
      src/data/roadmaps/devops/devops.json
  21. 0
      src/data/roadmaps/docker/docker.json
  22. 0
      src/data/roadmaps/flutter/flutter.json
  23. 1921
      src/data/roadmaps/frontend/frontend-beginner.json
  24. 14265
      src/data/roadmaps/frontend/frontend.json
  25. 0
      src/data/roadmaps/full-stack/full-stack.json
  26. 0
      src/data/roadmaps/golang/golang.json
  27. 0
      src/data/roadmaps/graphql/graphql.json
  28. 0
      src/data/roadmaps/java/java.json
  29. 0
      src/data/roadmaps/javascript/javascript.json
  30. 0
      src/data/roadmaps/kubernetes/kubernetes.json
  31. 0
      src/data/roadmaps/mongodb/mongodb.json
  32. 0
      src/data/roadmaps/nodejs/nodejs.json
  33. 0
      src/data/roadmaps/postgresql-dba/postgresql-dba.json
  34. 0
      src/data/roadmaps/prompt-engineering/prompt-engineering.json
  35. 0
      src/data/roadmaps/python/python.json
  36. 0
      src/data/roadmaps/qa/qa.json
  37. 0
      src/data/roadmaps/react/react.json
  38. 0
      src/data/roadmaps/software-architect/software-architect.json
  39. 0
      src/data/roadmaps/software-design-architecture/software-design-architecture.json
  40. 0
      src/data/roadmaps/spring-boot/spring-boot.json
  41. 0
      src/data/roadmaps/system-design/system-design.json
  42. 0
      src/data/roadmaps/typescript/typescript.json
  43. 0
      src/data/roadmaps/ux-design/ux-design.json
  44. 0
      src/data/roadmaps/vue/vue.json
  45. 1
      src/lib/roadmap.ts
  46. 7
      src/pages/[roadmapId]/index.astro
  47. 27
      src/pages/[roadmapId]/index.json.ts
  48. 30
      src/pages/best-practices/[bestPracticeId]/index.json.ts

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

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

@ -51,7 +51,6 @@ export class Renderer {
this.resourceType = dataset.resourceType!; this.resourceType = dataset.resourceType!;
this.resourceId = dataset.resourceId!; this.resourceId = dataset.resourceId!;
this.jsonUrl = dataset.jsonUrl!;
return true; return true;
} }
@ -130,13 +129,19 @@ export class Renderer {
this.trackVisit(); this.trackVisit();
if (roadmapType) { if (roadmapType) {
this.switchRoadmap(`/jsons/roadmaps/${roadmapType}.json`); this.switchRoadmap(`/${roadmapType}.json`);
} else { } else {
this.jsonToSvg(this.jsonUrl); this.jsonToSvg(
this.resourceType === 'roadmap'
? `/${this.resourceId}.json`
: `/best-practices/${this.resourceId}.json`
);
} }
} }
switchRoadmap(newJsonUrl: string) { switchRoadmap(newJsonUrl: string) {
this.containerEl?.setAttribute('style', '');
const newJsonFileSlug = newJsonUrl.split('/').pop()?.replace('.json', ''); const newJsonFileSlug = newJsonUrl.split('/').pop()?.replace('.json', '');
// Update the URL and attach the new roadmap type // 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 const type = this.resourceType[0]; // r for roadmap, b for best-practices
url.searchParams.delete(type); url.searchParams.delete(type);
url.searchParams.set(type, newJsonFileSlug!);
if (newJsonFileSlug !== this.resourceId) {
url.searchParams.set(type, newJsonFileSlug!);
}
window.history.pushState(null, '', url.toString()); 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) { handleSvgClick(e: any) {

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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

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

@ -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),
};
};

@ -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),
};
};
Loading…
Cancel
Save