Add drawer for interactive roadmap

components/md-renderer/mdx-components/heading.tsx

@@ -35,10 +35,10 @@ const HeaderLink = styled.a`
 
 const H1 = styled.h1`
   position: relative;
-  font-size: 42px;
+  font-size: 32px;
   line-height: 40px;
   font-weight: 700;
-  margin: 32px 0 10px !important;
+  margin: 20px 0 10px !important;
 
   &:hover ${HeaderLink} {
     display: flex;
@@ -46,12 +46,12 @@ const H1 = styled.h1`
 `;
 
 const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 32px;
+  font-size: 30px;
 `;
 
 const H3 = styled(H1).attrs({ as: 'h3' })`
   margin: 22px 0 8px;
-  font-size: 30px;
+  font-size: 28px;
 `;
 
 const H4 = styled(H1).attrs({ as: 'h4' })`

components/roadmap/content-drawer.tsx

@@ -0,0 +1,54 @@
+import { Box, CloseButton } from '@chakra-ui/react';
+import { RemoveScroll } from 'react-remove-scroll';
+import { RoadmapType } from '../../lib/roadmap';
+import RoadmapGroup from '../../pages/[roadmap]/[group]';
+
+type ContentDrawerProps = {
+  roadmap: RoadmapType;
+  groupId: string;
+  onClose?: () => void;
+};
+
+export function ContentDrawer(props: ContentDrawerProps) {
+  const { roadmap, groupId, onClose = () => null } = props;
+  if (!groupId) {
+    return null;
+  }
+
+  return (
+    <Box zIndex={999} pos="relative">
+      <Box
+        onClick={onClose}
+        pos="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        bg="black"
+        opacity={0.4}
+      />
+      <RemoveScroll>
+        <Box
+          p="0px 30px 30px"
+          position="fixed"
+          w={['100%', '70%', '40%']}
+          bg="white"
+          top={0}
+          right={0}
+          bottom={0}
+          borderLeftWidth={'1px'}
+          overflowY="scroll"
+        >
+          <CloseButton
+            onClick={onClose}
+            pos="absolute"
+            top={'20px'}
+            right={'20px'}
+            zIndex={1}
+          />
+          <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
+        </Box>
+      </RemoveScroll>
+    </Box>
+  );
+}

content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md

@@ -1 +1,2 @@
-internet:browsers-and-how-they-work
+## Browsers
+Browsers let you open stuff and see stuff in the browser.

content/roadmaps/100-frontend/content/100-internet/readme.md

@@ -1 +1,6 @@
-internet
+# Internet
+
+Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from code.org, you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:
+
+- [Browsers](/frontend/internet:how-does-the-internet-work)
+- [DNS and how it Works?](/frontend/internet:how-does-the-internet-work)

lib/renderer/renderer.ts

@@ -262,7 +262,7 @@ export class Renderer {
       'g',
       {
         ...(controlName
-          ? { class: 'clickable-group', 'data-group-name': controlName }
+          ? { class: 'clickable-group', 'data-group-id': controlName }
           : {}),
       },
       container

package-lock.json

@@ -25,6 +25,7 @@
         "prism-themes": "^1.9.0",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-remove-scroll": "^2.4.3",
         "styled-components": "^5.3.3",
         "use-http": "^1.0.26"
       },
@@ -2312,71 +2313,11 @@
         }
       }
     },
-    "node_modules/@chakra-ui/react/node_modules/react-remove-scroll-bar": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
-      "dependencies": {
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@chakra-ui/react/node_modules/react-style-singleton": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
-      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@chakra-ui/react/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
-    "node_modules/@chakra-ui/react/node_modules/use-callback-ref": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-      "engines": {
-        "node": ">=8.5.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@chakra-ui/select": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-1.2.1.tgz",
@@ -10968,10 +10909,30 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
-    "node_modules/react-focus-lock/node_modules/use-callback-ref": {
+    "node_modules/react-is": {
-      "version": "1.2.5",
+      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/react-refresh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
+      "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
+      "integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.1.0",
+        "react-style-singleton": "^2.1.0",
+        "tslib": "^1.0.0",
+        "use-callback-ref": "^1.2.3",
+        "use-sidecar": "^1.0.1"
+      },
       "engines": {
         "node": ">=8.5.0"
       },
@@ -10985,19 +10946,64 @@
         }
       }
     },
-    "node_modules/react-is": {
+    "node_modules/react-remove-scroll-bar": {
-      "version": "17.0.2",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
+      "dependencies": {
+        "react-style-singleton": "^2.1.0",
+        "tslib": "^1.0.0"
       },
-    "node_modules/react-refresh": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
-      "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/react-remove-scroll/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
+      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
+    "node_modules/react-style-singleton/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13322,6 +13328,23 @@
         "react-dom": "^16.13.1 || ^17.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
+      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
+      "engines": {
+        "node": ">=8.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-http": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/use-http/-/use-http-1.0.26.tgz",
@@ -15459,35 +15482,10 @@
             "use-sidecar": "^1.0.1"
           }
         },
-        "react-remove-scroll-bar": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-          "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
-          "requires": {
-            "react-style-singleton": "^2.1.0",
-            "tslib": "^1.0.0"
-          }
-        },
-        "react-style-singleton": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
-          "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
-          "requires": {
-            "get-nonce": "^1.0.0",
-            "invariant": "^2.2.4",
-            "tslib": "^1.0.0"
-          }
-        },
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        },
-        "use-callback-ref": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-          "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-          "requires": {}
         }
       }
     },
@@ -21881,14 +21879,6 @@
         "react-clientside-effect": "^1.2.5",
         "use-callback-ref": "^1.2.5",
         "use-sidecar": "^1.0.5"
-      },
-      "dependencies": {
-        "use-callback-ref": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-          "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-          "requires": {}
-        }
       }
     },
     "react-is": {
@@ -21901,6 +21891,58 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-remove-scroll": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
+      "integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
+      "requires": {
+        "react-remove-scroll-bar": "^2.1.0",
+        "react-style-singleton": "^2.1.0",
+        "tslib": "^1.0.0",
+        "use-callback-ref": "^1.2.3",
+        "use-sidecar": "^1.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "react-remove-scroll-bar": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
+      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
+      "requires": {
+        "react-style-singleton": "^2.1.0",
+        "tslib": "^1.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "react-style-singleton": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
+      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
+      "requires": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^1.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -23646,6 +23688,12 @@
       "integrity": "sha512-LaSSPpr91XrVA3vW2zPupw4K6DSQEDKdL4yQZX1mO2fpljIMpB5zctrjRvxLurelWSgKsHsCmfHNCImscryirQ==",
       "requires": {}
     },
+    "use-callback-ref": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
+      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
+      "requires": {}
+    },
     "use-http": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/use-http/-/use-http-1.0.26.tgz",

package.json

@@ -33,6 +33,7 @@
     "prism-themes": "^1.9.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-remove-scroll": "^2.4.3",
     "styled-components": "^5.3.3",
     "use-http": "^1.0.26"
   },

pages/[roadmap]/[group].tsx

@@ -54,7 +54,6 @@ function RoadmapBreadcrumb(props: RoadmapProps) {
     <Breadcrumb
       fontWeight="medium"
       fontSize="sm"
-      mb="20px"
       separator={<ChevronRightIcon color="gray.500" />}
     >
       <BreadcrumbItem>

pages/[roadmap]/interactive.tsx

@@ -9,6 +9,7 @@ import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from '../../lib/renderer';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
 import RoadmapGroup from './[group]';
+import { ContentDrawer } from '../../components/roadmap/content-drawer';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -19,18 +20,26 @@ function RoadmapRenderer(props: RoadmapProps) {
   const { json, roadmap } = props;
 
   const roadmapRef = useRef(null);
-  const [group, setGroup] = useState('');
+  const [groupId, setGroupId] = useState('');
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
+    window.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key.toLowerCase() === 'escape') {
+        setGroupId('');
+      }
+    });
+
     window.addEventListener('click', (event: MouseEvent) => {
       const targetGroup = (event?.target as HTMLElement)?.closest('g');
-      const groupName = targetGroup?.dataset?.groupName;
+      const groupId = targetGroup?.dataset?.groupId;
-      if (!targetGroup || !groupName) {
+      if (!targetGroup || !groupId) {
         return;
       }
 
-      setGroup(groupName.replace(/^\d+-/, ''));
+      // e.g. 100-internet:how-does-the-internet-work
+      // will be translated to `internet:how-does-the-internet-work`
+      setGroupId(groupId.replace(/^\d+-/, ''));
     });
   });
 
@@ -55,7 +64,11 @@ function RoadmapRenderer(props: RoadmapProps) {
 
   return (
     <Container maxW={'container.lg'} position="relative">
-      {group && <RoadmapGroup isOutlet roadmap={roadmap} group={group} />}
+      <ContentDrawer
+        roadmap={roadmap}
+        groupId={groupId}
+        onClose={() => setGroupId('')}
+      />
 
       <div ref={roadmapRef} />
     </Container>