gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add drawer for interactive roadmap

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-04 16:04:31 +01:00
parent ff3d0489cc
commit 0d71b2b1e6
9 changed files with 241 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/md-renderer/mdx-components/heading.tsx
View File

@ -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' })`

54
components/roadmap/content-drawer.tsx Normal file
View File

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

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

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

7
content/roadmaps/100-frontend/content/100-internet/readme.md
View File

@ -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)

2
lib/renderer/renderer.ts
View File

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

260
package-lock.json generated
View File

@ -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,18 +10946,63 @@
}
}
},
"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"
},
"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",
@ -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",

1
package.json
View File

@ -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"
},

1
pages/[roadmap]/[group].tsx
View File

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

23
pages/[roadmap]/interactive.tsx
View File

@ -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 (
<Container maxW={'container.lg'} position="relative">
{group && <RoadmapGroup isOutlet roadmap={roadmap} group={group} />}
<ContentDrawer
roadmap={roadmap}
groupId={groupId}
onClose={() => setGroupId('')}
/>
<div ref={roadmapRef} />
</Container>