Interactive frontend roadmap with contribution links

pull/1657/head
Kamran Ahmed 3 years ago
parent 60575073c0
commit 1bb2f62ee7
  1. 8
      components/md-renderer/mdx-components/badge-link.tsx
  2. 39
      components/roadmap/edit-content-page-link.tsx
  3. 2
      components/roadmap/roadmap-page-header.tsx
  4. 2
      content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md
  5. 2
      content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md
  6. 3
      content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
  7. 2
      content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md
  8. 2
      content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md
  9. 2
      content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md
  10. 8
      content/roadmaps/100-frontend/content/100-internet/readme.md
  11. 2
      content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
  12. 2
      content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
  13. 2
      content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md
  14. 2
      content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
  15. 2
      content/roadmaps/100-frontend/content/101-html/104-accessibility.md
  16. 2
      content/roadmaps/100-frontend/content/101-html/105-seo-basics.md
  17. 2
      content/roadmaps/100-frontend/content/101-html/readme.md
  18. 2
      content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
  19. 2
      content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
  20. 2
      content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md
  21. 2
      content/roadmaps/100-frontend/content/102-css/readme.md
  22. 2
      content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md
  23. 2
      content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md
  24. 2
      content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md
  25. 2
      content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md
  26. 2
      content/roadmaps/100-frontend/content/103-javascript/104-concepts.md
  27. 2
      content/roadmaps/100-frontend/content/103-javascript/readme.md
  28. 2
      content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
  29. 2
      content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
  30. 2
      content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
  31. 2
      content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md
  32. 2
      content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
  33. 2
      content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
  34. 2
      content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md
  35. 2
      content/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md
  36. 2
      content/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md
  37. 2
      content/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md
  38. 2
      content/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md
  39. 2
      content/roadmaps/100-frontend/content/107-package-managers/100-npm.md
  40. 2
      content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md
  41. 2
      content/roadmaps/100-frontend/content/107-package-managers/readme.md
  42. 2
      content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md
  43. 2
      content/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md
  44. 2
      content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md
  45. 2
      content/roadmaps/100-frontend/content/108-css-architecture/readme.md
  46. 2
      content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md
  47. 2
      content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md
  48. 2
      content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md
  49. 2
      content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
  50. 2
      content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md
  51. 2
      content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md
  52. 2
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md
  53. 2
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md
  54. 2
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md
  55. 2
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md
  56. 2
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md
  57. 2
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md
  58. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md
  59. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
  60. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
  61. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
  62. 2
      content/roadmaps/100-frontend/content/110-build-tools/readme.md
  63. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md
  64. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md
  65. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md
  66. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
  67. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
  68. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
  69. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md
  70. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md
  71. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
  72. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/readme.md
  73. 2
      content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
  74. 2
      content/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md
  75. 2
      content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md
  76. 2
      content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
  77. 2
      content/roadmaps/100-frontend/content/112-modern-css/readme.md
  78. 2
      content/roadmaps/100-frontend/content/113-web-components/100-html-templates.md
  79. 2
      content/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md
  80. 2
      content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md
  81. 2
      content/roadmaps/100-frontend/content/113-web-components/readme.md
  82. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
  83. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
  84. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md
  85. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
  86. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
  87. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
  88. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
  89. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md
  90. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
  91. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md
  92. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
  93. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
  94. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md
  95. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md
  96. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/readme.md
  97. 2
      content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
  98. 2
      content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
  99. 2
      content/roadmaps/100-frontend/content/116-type-checkers/readme.md
  100. 2
      content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md
  101. Some files were not shown because too many files have changed in this diff Show More

@ -5,16 +5,18 @@ type BadgeLinkType = {
target: string;
badgeText: string;
href: string;
colorScheme?: string;
children: React.ReactNode
};
export function BadgeLink(props: BadgeLinkType) {
const { target = '_blank', badgeText, href, children } = props;
const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
return (
<Text mb={0}>
<Link fontWeight={500} textDecoration='underline' href={href} target={target}>
<Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
<Link color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
<Badge mr='10px' colorScheme={colorScheme} pos='relative' top='-2px'>{badgeText}</Badge>
{children}
</Link>
</Text>
);

@ -0,0 +1,39 @@
import React from 'react';
import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
type EditContentPageLinkProps = {
href: string;
};
export function EditContentPageLink(props: EditContentPageLinkProps) {
const { href } = props;
return (
<Box my='30px'>
<Divider mb="15px" orientation="horizontal" />
<Text
lineHeight="23px"
fontWeight={500}
fontSize="14px"
color="gray.500"
mb="10px"
>
This page is a work in progress. Help us by writing a small
introduction to the topic and suggesting a few links to read more
about this topic.
</Text>
<Button
size="sm"
py="20px"
as={Link}
href={href}
target="_blank"
isFullWidth
colorScheme={'purple'}
_hover={{ textDecoration: 'none' }}
>
Edit this Page
</Button>
</Box>
);
}

@ -1,6 +1,6 @@
import { RoadmapType } from '../../lib/roadmap';
import { NewAlertBanner } from './new-alert-banner';
import { Button, Link, Stack, Text } from '@chakra-ui/react';
import { Button, Link, Stack, Tab, TabList, Tabs, Text } from '@chakra-ui/react';
import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
import { PageHeader } from '../page-header';
import React from 'react';

@ -1,2 +1 @@
## Browsers
Browsers let you open stuff and see stuff in the browser.
# Browsers

@ -1,6 +1,8 @@
# 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:
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
- [Browsers](/frontend/internet:how-does-the-internet-work)
- [DNS and how it Works?](/frontend/internet:how-does-the-internet-work)
<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>

@ -1 +1 @@
html:writing-semantic-html
# Writing semantic html

@ -1 +1 @@
html:forms-and-validations
# Forms and validations

@ -1 +1 @@
html:conventions-and-best-practices
# Conventions and best practices

@ -1 +1 @@
css:responsive-design-and-media-queries
# Responsive Design

@ -1 +1 @@
javascript:syntax-and-basic-constructs
# Syntax and basic constructs

@ -1 +1 @@
javascript:learn-dom-manipulation
# Learn dom manipulation

@ -1 +1 @@
javascript:learn-fetch-api-ajax-xhr
# Learn fetch api ajax xhr

@ -1 +1 @@
javascript:es6-and-modular-javascript
# Es6 and modular javascript

@ -1 +1 @@
version-control-systems:basic-usage-of-git
# Basic usage of git

@ -1 +1 @@
version-control-systems
# Version control systems

@ -1 +1 @@
web-security-knowledge:content-security-policy
# Content security policy

@ -1 +1 @@
web-security-knowledge:owasp-security-risks
# Owasp security risks

@ -1 +1 @@
testing-your-apps:react-testing-library
# React testing library

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save