From 0d71b2b1e631de7da6964bda02f22966600a58b2 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 4 Dec 2021 16:04:31 +0100 Subject: [PATCH] Add drawer for interactive roadmap --- .../md-renderer/mdx-components/heading.tsx | 8 +- components/roadmap/content-drawer.tsx | 54 ++++ .../102-browsers-and-how-they-work.md | 3 +- .../content/100-internet/readme.md | 7 +- lib/renderer/renderer.ts | 2 +- package-lock.json | 260 +++++++++++------- package.json | 1 + pages/[roadmap]/[group].tsx | 1 - pages/[roadmap]/interactive.tsx | 23 +- 9 files changed, 240 insertions(+), 119 deletions(-) create mode 100644 components/roadmap/content-drawer.tsx diff --git a/components/md-renderer/mdx-components/heading.tsx b/components/md-renderer/mdx-components/heading.tsx index 42aa7d557..53e25bfcc 100644 --- a/components/md-renderer/mdx-components/heading.tsx +++ b/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' })` diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx new file mode 100644 index 000000000..7706ebb58 --- /dev/null +++ b/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 ( + + + + + + + + + + ); +} diff --git a/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md b/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md index cd4d373ea..0b967f6da 100644 --- a/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md +++ b/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md @@ -1 +1,2 @@ -internet:browsers-and-how-they-work \ No newline at end of file +## Browsers +Browsers let you open stuff and see stuff in the browser. diff --git a/content/roadmaps/100-frontend/content/100-internet/readme.md b/content/roadmaps/100-frontend/content/100-internet/readme.md index d71e4e321..93d3f30cb 100644 --- a/content/roadmaps/100-frontend/content/100-internet/readme.md +++ b/content/roadmaps/100-frontend/content/100-internet/readme.md @@ -1 +1,6 @@ -internet \ No newline at end of file +# 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) diff --git a/lib/renderer/renderer.ts b/lib/renderer/renderer.ts index 0251322dc..35c1afd30 100644 --- a/lib/renderer/renderer.ts +++ b/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 diff --git a/package-lock.json b/package-lock.json index fce5567d1..19296f599 100644 --- a/package-lock.json +++ b/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": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", + "node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "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": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "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/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==", + "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": ">=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-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", diff --git a/package.json b/package.json index d433358a0..57409db8e 100644 --- a/package.json +++ b/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" }, diff --git a/pages/[roadmap]/[group].tsx b/pages/[roadmap]/[group].tsx index 4ca77b753..dc6481959 100644 --- a/pages/[roadmap]/[group].tsx +++ b/pages/[roadmap]/[group].tsx @@ -54,7 +54,6 @@ function RoadmapBreadcrumb(props: RoadmapProps) { } > diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx index cef30f9c3..5ea42d084 100644 --- a/pages/[roadmap]/interactive.tsx +++ b/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; - if (!targetGroup || !groupName) { + const groupId = targetGroup?.dataset?.groupId; + 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 ( - {group && } + setGroupId('')} + />