mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-03 06:12:53 +02:00
Add roadmap-renderer package
This commit is contained in:
1
.github/workflows/deploy.yml
vendored
1
.github/workflows/deploy.yml
vendored
@@ -18,6 +18,7 @@ jobs:
|
|||||||
- name: Setup Environment
|
- name: Setup Environment
|
||||||
run: |
|
run: |
|
||||||
npm install
|
npm install
|
||||||
|
- run: git config --global url."https://${{ GITHUB_TOKEN }}@github.com/".insteadOf ssh://git@github.com/
|
||||||
- name: Generate meta and build
|
- name: Generate meta and build
|
||||||
run: |
|
run: |
|
||||||
npm run meta
|
npm run meta
|
||||||
|
@@ -3,7 +3,7 @@ import { RemoveScroll } from 'react-remove-scroll';
|
|||||||
import { RoadmapType } from '../../lib/roadmap';
|
import { RoadmapType } from '../../lib/roadmap';
|
||||||
import RoadmapGroup from '../../pages/[roadmap]/[group]';
|
import RoadmapGroup from '../../pages/[roadmap]/[group]';
|
||||||
import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
|
import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
|
||||||
import { queryGroupElementsById } from '../../lib/renderer/utils';
|
import { queryGroupElementsById } from '../../lib/renderer';
|
||||||
|
|
||||||
type ContentDrawerProps = {
|
type ContentDrawerProps = {
|
||||||
roadmap: RoadmapType;
|
roadmap: RoadmapType;
|
||||||
|
21
lib/renderer.ts
Normal file
21
lib/renderer.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
export function removeSortingInfo(groupId: string) {
|
||||||
|
return (groupId || '').replace(/^\d+-/, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryGroupElementsById(groupId: string) {
|
||||||
|
const elements = document.querySelectorAll(
|
||||||
|
`[data-group-id$="-${groupId}"]`
|
||||||
|
) as any;
|
||||||
|
const matchingElements: HTMLElement[] = [];
|
||||||
|
|
||||||
|
elements.forEach((element: HTMLElement) => {
|
||||||
|
const foundGroupId = element?.dataset?.groupId || '';
|
||||||
|
const validGroupRegex = new RegExp(`^\\d+-${groupId}$`);
|
||||||
|
|
||||||
|
if (validGroupRegex.test(foundGroupId)) {
|
||||||
|
matchingElements.push(element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return matchingElements;
|
||||||
|
}
|
10
package-lock.json
generated
10
package-lock.json
generated
@@ -26,6 +26,7 @@
|
|||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-remove-scroll": "^2.4.3",
|
"react-remove-scroll": "^2.4.3",
|
||||||
|
"roadmap-renderer": "github:kamranahmedse/roadmap-renderer",
|
||||||
"styled-components": "^5.3.3",
|
"styled-components": "^5.3.3",
|
||||||
"use-http": "^1.0.26"
|
"use-http": "^1.0.26"
|
||||||
},
|
},
|
||||||
@@ -11552,6 +11553,11 @@
|
|||||||
"inherits": "^2.0.1"
|
"inherits": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/roadmap-renderer": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "git+ssh://git@github.com/kamranahmedse/roadmap-renderer.git#957c75fa7124bc38ea019a57061596684259839a",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/run-async": {
|
"node_modules/run-async": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
||||||
@@ -22490,6 +22496,10 @@
|
|||||||
"inherits": "^2.0.1"
|
"inherits": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"roadmap-renderer": {
|
||||||
|
"version": "git+ssh://git@github.com/kamranahmedse/roadmap-renderer.git#957c75fa7124bc38ea019a57061596684259839a",
|
||||||
|
"from": "roadmap-renderer@git+ssh://git@github.com/kamranahmedse/roadmap-renderer.git"
|
||||||
|
},
|
||||||
"run-async": {
|
"run-async": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
||||||
|
@@ -34,6 +34,7 @@
|
|||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-remove-scroll": "^2.4.3",
|
"react-remove-scroll": "^2.4.3",
|
||||||
|
"roadmap-renderer": "github:kamranahmedse/roadmap-renderer",
|
||||||
"styled-components": "^5.3.3",
|
"styled-components": "^5.3.3",
|
||||||
"use-http": "^1.0.26"
|
"use-http": "^1.0.26"
|
||||||
},
|
},
|
||||||
|
@@ -1,17 +1,17 @@
|
|||||||
import { useFetch } from 'use-http';
|
import { useFetch } from 'use-http';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { Box, Container } from '@chakra-ui/react';
|
import { Box, Container } from '@chakra-ui/react';
|
||||||
|
import { wireframeJSONToSVG } from 'roadmap-renderer';
|
||||||
import { GlobalHeader } from '../../components/global-header';
|
import { GlobalHeader } from '../../components/global-header';
|
||||||
import { OpensourceBanner } from '../../components/opensource-banner';
|
import { OpensourceBanner } from '../../components/opensource-banner';
|
||||||
import { Footer } from '../../components/footer';
|
import { Footer } from '../../components/footer';
|
||||||
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
|
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
|
||||||
import Helmet from '../../components/helmet';
|
import Helmet from '../../components/helmet';
|
||||||
import { wireframeJSONToSVG } from '../../lib/renderer';
|
|
||||||
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
|
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
|
||||||
import { ContentDrawer } from '../../components/roadmap/content-drawer';
|
import { ContentDrawer } from '../../components/roadmap/content-drawer';
|
||||||
import { RoadmapError } from '../../components/roadmap/roadmap-error';
|
import { RoadmapError } from '../../components/roadmap/roadmap-error';
|
||||||
import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
|
import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
|
||||||
import { removeSortingInfo } from '../../lib/renderer/utils';
|
import { removeSortingInfo } from '../../lib/renderer';
|
||||||
|
|
||||||
type RoadmapProps = {
|
type RoadmapProps = {
|
||||||
roadmap: RoadmapType;
|
roadmap: RoadmapType;
|
||||||
@@ -216,7 +216,6 @@ type ContextType = {
|
|||||||
|
|
||||||
export async function getStaticProps(context: ContextType) {
|
export async function getStaticProps(context: ContextType) {
|
||||||
const roadmapId: string = context?.params?.roadmap;
|
const roadmapId: string = context?.params?.roadmap;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
roadmap: getRoadmapById(roadmapId),
|
roadmap: getRoadmapById(roadmapId),
|
||||||
|
Reference in New Issue
Block a user