Refactor frontend roadmap for beginners
This commit is contained in:
Kamran Ahmed committed
1 parent
cb32a9610d
commit
8dcf4b00c4
3 files changed
+45
-5
No files matched your search
@@ -1 +1 @@
|
||||
{"mockup":{"controls":{"control":[{"ID":"12087","typeID":"__group__","zOrder":"34","measuredW":"125","measuredH":"49","w":"125","h":"49","x":"596","y":"549","properties":{"controlName":"101-html"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"125","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"48","measuredH":"25","x":"39","y":"12","properties":{"size":"17","text":"HTML"}}]}}},{"ID":"12088","typeID":"__group__","zOrder":"13","measuredW":"144","measuredH":"40","w":"144","h":"40","x":"706","y":"393","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"144","measuredH":"40","x":"0","y":"0","properties":{"size":"32","text":"Front-end"}}]}}},{"ID":"12093","typeID":"__group__","zOrder":"14","measuredW":"124","measuredH":"49","w":"124","h":"49","x":"597","y":"614","properties":{"controlName":"102-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"124","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"33","measuredH":"25","x":"45","y":"12","properties":{"size":"17","text":"CSS"}}]}}},{"ID":"12097","typeID":"Canvas","zOrder":"15","w":"324","h":"195","measuredW":"100","measuredH":"70","x":"973","y":"271"},{"ID":"12098","typeID":"Label","zOrder":"16","measuredW":"283","measuredH":"26","x":"991","y":"290","properties":{"size":"18","text":"For resources and other roadmaps"}},{"ID":"12099","typeID":"__group__","zOrder":"17","measuredW":"172","measuredH":"28","w":"172","h":"28","x":"991","y":"323","properties":{"controlName":"ext_link:roadmap.sh"},"children":{"controls":{"control":[{"ID":"2","typeID":"Label","zOrder":"0","measuredW":"172","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"https://roadmap.sh","color":"10027263"}}]}}},{"ID":"12100","typeID":"__group__","zOrder":"18","measuredW":"282","measuredH":"47","w":"282","h":"47","x":"991","y":"398","properties":{"controlName":"json:jsons/roadmaps/frontend.json"},"children":{"controls":{"control":[{"ID":"0","typeID":"Canvas","zOrder":"0","w":"282","h":"47","measuredW":"100","measuredH":"70","x":"0","y":"0","properties":{"color":"3355443","borderColor":"3355443"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"203","measuredH":"26","x":"39","y":"11","properties":{"color":"16777215","size":"18","text":"Visit the Detailed Version"}}]}}},{"ID":"12101","typeID":"Label","zOrder":"19","measuredW":"259","measuredH":"26","x":"991","y":"363","properties":{"color":"4985136","size":"18","text":"Beginner who wants to step up?"}},{"ID":"12103","typeID":"__group__","zOrder":"20","measuredW":"127","measuredH":"50","w":"127","h":"50","x":"595","y":"678","properties":{"controlName":"103-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"127","h":"50","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"81","measuredH":"25","x":"23","y":"13","properties":{"size":"17","text":"JavaScript"}}]}}},{"ID":"12118","typeID":"__group__","zOrder":"21","measuredW":"95","measuredH":"49","w":"95","h":"49","x":"820","y":"789","properties":{"controlName":"100-version-control-systems:basic-usage-of-git"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"95","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"22","measuredH":"25","x":"37","y":"12","properties":{"size":"17","text":"Git"}}]}}},{"ID":"12122","typeID":"__group__","zOrder":"48","measuredW":"211","measuredH":"53","w":"211","h":"53","x":"510","y":"886","properties":{"controlName":"107-package-managers"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"211","h":"53","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"149","measuredH":"25","x":"31","y":"14","properties":{"text":"Package Managers","size":"17"}}]}}},{"ID":"12123","typeID":"__group__","zOrder":"49","measuredW":"103","measuredH":"49","w":"103","h":"49","x":"605","y":"797","properties":{"controlName":"100-package-managers:npm"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"103","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","w":"36","measuredW":"34","measuredH":"25","x":"34","y":"12","properties":{"size":"17","text":"npm"}}]}}},{"ID":"12160","typeID":"__group__","zOrder":"24","measuredW":"213","measuredH":"53","w":"213","h":"53","x":"509","y":"950","properties":{"controlName":"111-pick-a-framework"Line truncated
|
||||
{"mockup":{"controls":{"control":[{"ID":"12087","typeID":"__group__","zOrder":"34","measuredW":"125","measuredH":"49","w":"125","h":"49","x":"596","y":"549","properties":{"controlName":"101-html"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"125","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"48","measuredH":"25","x":"39","y":"12","properties":{"size":"17","text":"HTML"}}]}}},{"ID":"12088","typeID":"__group__","zOrder":"13","measuredW":"144","measuredH":"40","w":"144","h":"40","x":"706","y":"393","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"144","measuredH":"40","x":"0","y":"0","properties":{"size":"32","text":"Front-end"}}]}}},{"ID":"12093","typeID":"__group__","zOrder":"14","measuredW":"124","measuredH":"49","w":"124","h":"49","x":"597","y":"614","properties":{"controlName":"102-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"124","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"33","measuredH":"25","x":"45","y":"12","properties":{"size":"17","text":"CSS"}}]}}},{"ID":"12097","typeID":"Canvas","zOrder":"15","w":"324","h":"195","measuredW":"100","measuredH":"70","x":"973","y":"271"},{"ID":"12098","typeID":"Label","zOrder":"16","measuredW":"283","measuredH":"26","x":"991","y":"290","properties":{"size":"18","text":"For resources and other roadmaps"}},{"ID":"12099","typeID":"__group__","zOrder":"17","measuredW":"172","measuredH":"28","w":"172","h":"28","x":"991","y":"323","properties":{"controlName":"ext_link:roadmap.sh"},"children":{"controls":{"control":[{"ID":"2","typeID":"Label","zOrder":"0","measuredW":"172","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"https://roadmap.sh","color":"10027263"}}]}}},{"ID":"12100","typeID":"__group__","zOrder":"18","measuredW":"282","measuredH":"47","w":"282","h":"47","x":"991","y":"398","properties":{"controlName":"json:jsons/roadmaps/frontend.json"},"children":{"controls":{"control":[{"ID":"0","typeID":"Canvas","zOrder":"0","w":"282","h":"47","measuredW":"100","measuredH":"70","x":"0","y":"0","properties":{"color":"3355443","borderColor":"3355443"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"203","measuredH":"26","x":"39","y":"11","properties":{"color":"16777215","size":"18","text":"Visit the Detailed Version"}}]}}},{"ID":"12101","typeID":"Label","zOrder":"19","measuredW":"259","measuredH":"26","x":"991","y":"363","properties":{"color":"4985136","size":"18","text":"Beginner who wants to step up?"}},{"ID":"12103","typeID":"__group__","zOrder":"20","measuredW":"127","measuredH":"50","w":"127","h":"50","x":"595","y":"678","properties":{"controlName":"103-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"127","h":"50","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"81","measuredH":"25","x":"23","y":"13","properties":{"size":"17","text":"JavaScript"}}]}}},{"ID":"12118","typeID":"__group__","zOrder":"21","measuredW":"95","measuredH":"49","w":"95","h":"49","x":"820","y":"789","properties":{"controlName":"100-version-control-systems:basic-usage-of-git"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"95","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"22","measuredH":"25","x":"37","y":"12","properties":{"size":"17","text":"Git"}}]}}},{"ID":"12122","typeID":"__group__","zOrder":"48","measuredW":"211","measuredH":"53","w":"211","h":"53","x":"510","y":"886","properties":{"controlName":"107-package-managers"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"211","h":"53","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"149","measuredH":"25","x":"31","y":"14","properties":{"text":"Package Managers","size":"17"}}]}}},{"ID":"12123","typeID":"__group__","zOrder":"49","measuredW":"103","measuredH":"49","w":"103","h":"49","x":"605","y":"797","properties":{"controlName":"100-package-managers:npm"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"103","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","w":"36","measuredW":"34","measuredH":"25","x":"34","y":"12","properties":{"size":"17","text":"npm"}}]}}},{"ID":"12160","typeID":"__group__","zOrder":"24","measuredW":"213","measuredH":"53","w":"213","h":"53","x":"509","y":"950","properties":{"controlName":"111-pick-a-framework"Line truncated
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
import Loader from '../Loader.astro';
|
||||
import TopicOverlay from '../TopicOverlay/TopicOverlay.astro';
|
||||
import './FrameRenderer.css';
|
||||
|
||||
export interface Props {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user