github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add drawer for interactive roadmap

Browse Source
pull/1657/head
Kamran Ahmed 3 years ago
parent 902f0913eb
commit 36eeca8d49
8 changed files with 239 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      components/md-renderer/mdx-components/heading.tsx
  2. 54
      components/roadmap/content-drawer.tsx
  3. 3
      content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
  4. 7
      content/roadmaps/100-frontend/content/100-internet/readme.md
  5. 260
      package-lock.json
  6. 1
      package.json
  7. 1
      pages/[roadmap]/[group].tsx
  8. 23
      pages/[roadmap]/interactive.tsx

8
components/md-renderer/mdx-components/heading.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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)

260
package-lock.json generated
Unescape 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,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"
},
"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",

1
package.json
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save