info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-03-15 12:49:43 +01:00
Code Issues Releases Wiki Activity

Refactor frontend roadmap for beginners

Browse Source
This commit is contained in:
Kamran Ahmed 2023-03-02 21:58:14 +00:00
parent cb32a9610d
commit 8dcf4b00c4
3 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/jsons/roadmaps/frontend-beginner.json
View File

File diff suppressed because one or more lines are too long

1
src/components/FrameRenderer/FrameRenderer.astro
View File

@ -1,6 +1,5 @@
---
import Loader from '../Loader.astro';
import TopicOverlay from '../TopicOverlay/TopicOverlay.astro';
import './FrameRenderer.css';
export interface Props {

47
src/components/FrameRenderer/renderer.js
View File

@ -15,6 +15,7 @@ export class Renderer {
this.jsonToSvg = this.jsonToSvg.bind(this);
this.handleSvgClick = this.handleSvgClick.bind(this);
this.prepareConfig = this.prepareConfig.bind(this);
this.switchRoadmap = this.switchRoadmap.bind(this);
}
get loaderEl() {
@ -86,6 +87,45 @@ export class Renderer {
this.jsonToSvg(this.jsonUrl);
}
switchRoadmap(newJsonUrl) {
const newJsonFileSlug = newJsonUrl.split('/').pop().replace('.json', '');
// Only update the URL
if (window?.history?.pushState) {
const url = new URL(window.location);
const type = this.resourceType[0]; // r for roadmap, b for best-practices
url.searchParams.delete(type);
url.searchParams.set(type, newJsonFileSlug);
window.history.pushState(null, '', url.toString());
}
const pageTitle = this.resourceId.replace(/\b\w/g, (l) => l.toUpperCase());
const pageType = this.resourceType.replace(/\b\w/g, (l) => l.toUpperCase());
const newRoadmapType = newJsonFileSlug.replace(/\b\w/g, (l) => l.toUpperCase()).replace('-', ' ');
console.log({
// RoadmapClick, BestPracticesClick, etc
category: `${pageType.replace('-', '')}Click`,
// Roadmap Switch, BestPractices Switch, etc
action: `${pageType} Switch`,
label: `${pageTitle} / ${newRoadmapType}`,
});
// window.fireEvent({
// // RoadmapClick, BestPracticesClick, etc
// category: `${pageType.replace('-', '')}Click`,
// // Roadmap Switch, BestPractices Switch, etc
// action: `${pageType} Switch`,
// label: `${pageTitle} Switch`,
// });
this.jsonToSvg(newJsonUrl).then(() => {
this.containerEl.setAttribute('style', '');
});
}
handleSvgClick(e) {
const targetGroup = e.target.closest('g') || {};
const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : '';
@ -101,9 +141,10 @@ export class Renderer {
}
if (/^json:/.test(groupId)) {
this.jsonToSvg(groupId.replace('json:', '')).then(() => {
this.containerEl.setAttribute('style', '');
});
// e.g. /roadmaps/frontend-beginner.json
const newJsonUrl = groupId.replace('json:', '');
this.switchRoadmap(newJsonUrl);
return;
}