Interactive frontend roadmap with contribution links

2026-09-24 15:00:31 +08:00 · 2021-12-05 01:50:05 +01:00
parent 60575073c0
commit 1bb2f62ee7
137 changed files with 220 additions and 148 deletions
@@ -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 +1 @@
-internet:how-does-the-internet-work
+# Internet
@@ -1 +1 @@
-internet:what-is-http
+# What is HTTP?
@@ -1,2 +1 @@
-## Browsers
-Browsers let you open stuff and see stuff in the browser.
+# Browsers
@@ -1 +1 @@
-internet:dns-and-how-it-works
+# DNS
@@ -1 +1 @@
-internet:what-is-domain-name
+# Domain Name
@@ -1 +1 @@
-internet:what-is-hosting
+# Hosting
@@ -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:learn-the-basics
+# Learn the basics
@@ -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 @@
-html:accessibility
+# Accessibility
@@ -1 +1 @@
-html:seo-basics
+# Basics of SEO
@@ -1 +1 @@
-html
+# HTML
@@ -1 +1 @@
-css:learn-the-basics
+# Learn the basics
@@ -1 +1 @@
-css:making-layouts
+# Making layouts
@@ -1 +1 @@
-css:responsive-design-and-media-queries
+# Responsive Design
@@ -1 +1 @@
-css
+# Css
@@ -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 @@
-javascript:concepts
+# Concepts
@@ -1 +1 @@
-javascript
+# Javascript
@@ -1 +1 @@
-version-control-systems:basic-usage-of-git
+# Basic usage of git
@@ -1 +1 @@
-version-control-systems
+# Version control systems
@@ -1 +1 @@
-repo-hosting-services:github
+# Github
@@ -1 +1 @@
-repo-hosting-services:gitlab
+# Gitlab
@@ -1 +1 @@
-repo-hosting-services:bitbucket
+# Bitbucket
@@ -1 +1 @@
-repo-hosting-services
+# Repo hosting services
@@ -1 +1 @@
-web-security-knowledge:https
+# Https
@@ -1 +1 @@
-web-security-knowledge:content-security-policy
+# Content security policy
@@ -1 +1 @@
-web-security-knowledge:cors
+# Cors
@@ -1 +1 @@
-web-security-knowledge:owasp-security-risks
+# Owasp security risks
@@ -1 +1 @@
-web-security-knowledge
+# Web security knowledge
@@ -1 +1 @@
-package-managers:npm
+# Npm
@@ -1 +1 @@
-package-managers:yarn
+# Yarn
@@ -1 +1 @@
-package-managers
+# Package managers
@@ -1 +1 @@
-css-architecture:bem
+# Bem
@@ -1 +1 @@
-css-architecture:oocss
+# Oocss
@@ -1 +1 @@
-css-architecture:smacss
+# Smacss
@@ -1 +1 @@
-css-architecture
+# Css architecture
@@ -1 +1 @@
-css-preprocessors:sass
+# Sass
@@ -1 +1 @@
-css-preprocessors:postcss
+# Postcss
@@ -1 +1 @@
-css-preprocessors:less
+# Less
@@ -1 +1 @@
-css-preprocessors
+# Css preprocessors
@@ -1 +1 @@
-build-tools:task-runners:npm-scripts
+# Npm scripts
@@ -1 +1 @@
-build-tools:task-runners
+# Task runners
@@ -1 +1 @@
-build-tools:module-bundlers:webpack
+# Webpack
@@ -1 +1 @@
-build-tools:module-bundlers:esbuild
+# Esbuild
@@ -1 +1 @@
-build-tools:module-bundlers:rollup
+# Rollup
@@ -1 +1 @@
-build-tools:module-bundlers:parcel
+# Parcel
@@ -1 +1 @@
-build-tools:module-bundlers:vite
+# Vite
@@ -1 +1 @@
-build-tools:module-bundlers
+# Module bundlers
@@ -1 +1 @@
-build-tools:linters-formatters:prettier
+# Prettier
@@ -1 +1 @@
-build-tools:linters-formatters:eslint
+# Eslint
@@ -1 +1 @@
-build-tools:linters-formatters:standardjs
+# Standardjs
@@ -1 +1 @@
-build-tools:linters-formatters
+# Linters formatters
@@ -1 +1 @@
-build-tools
+# Build tools
@@ -1 +1 @@
-pick-a-framework:react-js:redux
+# Redux
@@ -1 +1 @@
-pick-a-framework:react-js:mobx
+# Mobx
@@ -1 +1 @@
-pick-a-framework:react-js:recoil
+# Recoil
@@ -1 +1 @@
-pick-a-framework:react-js
+# React js
@@ -1 +1 @@
-pick-a-framework:angular:rxjs
+# Rxjs
@@ -1 +1 @@
-pick-a-framework:angular:ngrx
+# Ngrx
@@ -1 +1 @@
-pick-a-framework:angular
+# Angular
@@ -1 +1 @@
-pick-a-framework:vue-js:vuex
+# Vuex
@@ -1 +1 @@
-pick-a-framework:vue-js
+# Vue js
@@ -1 +1 @@
-pick-a-framework
+# Pick a framework
@@ -1 +1 @@
-modern-css:styled-components
+# Styled components
@@ -1 +1 @@
-modern-css:css-modules
+# Css modules
@@ -1 +1 @@
-modern-css:styled-jsx
+# Styled jsx
@@ -1 +1 @@
-modern-css:emotion
+# Emotion
@@ -1 +1 @@
-modern-css
+# Modern css
@@ -1 +1 @@
-web-components:html-templates
+# Html templates
@@ -1 +1 @@
-web-components:custom-elements
+# Custom elements
@@ -1 +1 @@
-web-components:shadow-dom
+# Shadow dom
@@ -1 +1 @@
-web-components
+# Web components
@@ -1 +1 @@
-css-frameworks:css-first:bootstrap
+# Bootstrap
@@ -1 +1 @@
-css-frameworks:css-first:bulma
+# Bulma
@@ -1 +1 @@
-css-frameworks:css-first
+# Css first
@@ -1 +1 @@
-css-frameworks:js-first:tailwind-css
+# Tailwind css
@@ -1 +1 @@
-css-frameworks:js-first:chakra-ui
+# Chakra ui
@@ -1 +1 @@
-css-frameworks:js-first:material-ui
+# Material ui
@@ -1 +1 @@
-css-frameworks:js-first:radix-ui
+# Radix ui
@@ -1 +1 @@
-css-frameworks:js-first
+# Js first
@@ -1 +1 @@
-css-frameworks
+# Css frameworks
@@ -1 +1 @@
-testing-your-apps:jest
+# Jest
@@ -1 +1 @@
-testing-your-apps:react-testing-library
+# React testing library
@@ -1 +1 @@
-testing-your-apps:cypress
+# Cypress
@@ -1 +1 @@
-testing-your-apps:enzyme
+# Enzyme
@@ -1 +1 @@
-testing-your-apps:other-options
+# Other options
@@ -1 +1 @@
-testing-your-apps
+# Testing your apps
@@ -1 +1 @@
-type-checkers:typescript
+# Typescript
@@ -1 +1 @@
-type-checkers:flow
+# Flow
@@ -1 +1 @@
-type-checkers
+# Type checkers
@@ -1 +1 @@
-progressive-web-apps:apis
+# Apis
--- a/Show More
+++ b/Show More