Add roadmap-renderer package

.github/workflows/deploy.yml

@@ -18,6 +18,7 @@ jobs:
     - name: Setup Environment
       run: |
         npm install
+    - run: git config --global url."https://${{ GITHUB_TOKEN }}@github.com/".insteadOf ssh://[email protected]/
     - name: Generate meta and build
       run: |
         npm run meta

components/roadmap/content-drawer.tsx

@@ -3,7 +3,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { RoadmapType } from '../../lib/roadmap';
 import RoadmapGroup from '../../pages/[roadmap]/[group]';
 import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
-import { queryGroupElementsById } from '../../lib/renderer/utils';
+import { queryGroupElementsById } from '../../lib/renderer';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;

lib/renderer.ts

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

package.json

@@ -34,6 +34,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-remove-scroll": "^2.4.3",
+    "roadmap-renderer": "github:kamranahmedse/roadmap-renderer",
     "styled-components": "^5.3.3",
     "use-http": "^1.0.26"
   },

pages/[roadmap]/interactive.tsx

@@ -1,17 +1,17 @@
 import { useFetch } from 'use-http';
 import { useEffect, useRef, useState } from 'react';
 import { Box, Container } from '@chakra-ui/react';
+import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { Footer } from '../../components/footer';
 import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import Helmet from '../../components/helmet';
-import { wireframeJSONToSVG } from '../../lib/renderer';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
 import { ContentDrawer } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
-import { removeSortingInfo } from '../../lib/renderer/utils';
+import { removeSortingInfo } from '../../lib/renderer';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -216,7 +216,6 @@ type ContextType = {
 
 export async function getStaticProps(context: ContextType) {
   const roadmapId: string = context?.params?.roadmap;
-
   return {
     props: {
       roadmap: getRoadmapById(roadmapId),