diff --git a/content/roadmaps/100-frontend/content-paths.json b/content/roadmaps/100-frontend/content-paths.json index fa275af97..e1a93b701 100644 --- a/content/roadmaps/100-frontend/content-paths.json +++ b/content/roadmaps/100-frontend/content-paths.json @@ -48,27 +48,27 @@ "css-preprocessors:less": "/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md", "build-tools": "/roadmaps/100-frontend/content/110-build-tools/readme.md", "build-tools:task-runners": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md", - "build-tools:100-task-runners/npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/npm-scripts.md", + "build-tools:task-runners:npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md", "build-tools:linters-formatters": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md", - "build-tools:102-linters-formatters/prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/prettier.md", - "build-tools:102-linters-formatters/eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/eslint.md", - "build-tools:102-linters-formatters/standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/standardjs.md", + "build-tools:linters-formatters:prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md", + "build-tools:linters-formatters:eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md", + "build-tools:linters-formatters:standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md", "build-tools:module-bundlers": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md", - "build-tools:101-module-bundlers/webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/webpack.md", - "build-tools:101-module-bundlers/esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/esbuild.md", - "build-tools:101-module-bundlers/rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/rollup.md", - "build-tools:101-module-bundlers/parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/parcel.md", - "build-tools:101-module-bundlers/vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/vite.md", + "build-tools:module-bundlers:webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md", + "build-tools:module-bundlers:esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md", + "build-tools:module-bundlers:rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md", + "build-tools:module-bundlers:parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md", + "build-tools:module-bundlers:vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md", "pick-a-framework": "/roadmaps/100-frontend/content/111-pick-a-framework/readme.md", "pick-a-framework:react-js": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md", - "pick-a-framework:100-react-js/recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/recoil.md", - "pick-a-framework:100-react-js/redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/redux.md", - "pick-a-framework:100-react-js/mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/mobx.md", + "pick-a-framework:react-js:recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md", + "pick-a-framework:react-js:redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md", + "pick-a-framework:react-js:mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md", "pick-a-framework:angular": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md", - "pick-a-framework:101-angular/rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/rxjs.md", - "pick-a-framework:101-angular/ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/ngrx.md", + "pick-a-framework:angular:rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md", + "pick-a-framework:angular:ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md", "pick-a-framework:vue-js": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md", - "pick-a-framework:102-vue-js/vuex": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/vuex.md", + "pick-a-framework:vue-js:vuex": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md", "modern-css": "/roadmaps/100-frontend/content/112-modern-css/readme.md", "modern-css:styled-components": "/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md", "modern-css:css-modules": "/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md", @@ -80,13 +80,13 @@ "web-components:shadow-dom": "/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md", "css-frameworks": "/roadmaps/100-frontend/content/114-css-frameworks/readme.md", "css-frameworks:js-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md", - "css-frameworks:114-js-first/chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/chakra-ui.md", - "css-frameworks:114-js-first/material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/material-ui.md", - "css-frameworks:114-js-first/radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/radix-ui.md", - "css-frameworks:114-js-first/tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/tailwind-css.md", + "css-frameworks:js-first:chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md", + "css-frameworks:js-first:material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md", + "css-frameworks:js-first:radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md", + "css-frameworks:js-first:tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md", "css-frameworks:css-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md", - "css-frameworks:114-css-first/bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bootstrap.md", - "css-frameworks:114-css-first/bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bulma.md", + "css-frameworks:css-first:bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md", + "css-frameworks:css-first:bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md", "testing-your-apps": "/roadmaps/100-frontend/content/115-testing-your-apps/readme.md", "testing-your-apps:jest": "/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md", "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md", @@ -101,12 +101,12 @@ "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md", "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md", "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md", - "server-side-rendering:100-react-js/next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/next-js.md", - "server-side-rendering:100-react-js/after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/after-js.md", + "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md", + "server-side-rendering:react-js:after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md", "server-side-rendering:angular": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md", - "server-side-rendering:101-angular/universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/universal.md", + "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md", "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md", - "server-side-rendering:102-vue-js/nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/nuxt-js.md", + "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md", "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md", "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md", "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md", diff --git a/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md b/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md index e69de29bb..cf7b9b5c0 100644 --- a/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md +++ b/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md @@ -0,0 +1 @@ +Here is how the internet work diff --git a/content/roadmaps/100-frontend/content/100-internet/readme.md b/content/roadmaps/100-frontend/content/100-internet/readme.md index e69de29bb..e93116b9d 100644 --- a/content/roadmaps/100-frontend/content/100-internet/readme.md +++ b/content/roadmaps/100-frontend/content/100-internet/readme.md @@ -0,0 +1 @@ +Here is the internet diff --git a/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/npm-scripts.md b/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/npm-scripts.md rename to content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/esbuild.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/esbuild.md rename to content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/parcel.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/parcel.md rename to content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/rollup.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/rollup.md rename to content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/vite.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/vite.md rename to content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/webpack.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/webpack.md rename to content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/eslint.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/eslint.md rename to content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/prettier.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/prettier.md rename to content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/standardjs.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md similarity index 100% rename from content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/standardjs.md rename to content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/mobx.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md similarity index 100% rename from content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/mobx.md rename to content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/recoil.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md similarity index 100% rename from content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/recoil.md rename to content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/redux.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md similarity index 100% rename from content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/redux.md rename to content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/ngrx.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md similarity index 100% rename from content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/ngrx.md rename to content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/rxjs.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md similarity index 100% rename from content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/rxjs.md rename to content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/vuex.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md similarity index 100% rename from content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/vuex.md rename to content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bootstrap.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md similarity index 100% rename from content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bootstrap.md rename to content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bulma.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md similarity index 100% rename from content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bulma.md rename to content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/chakra-ui.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md similarity index 100% rename from content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/chakra-ui.md rename to content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/material-ui.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md similarity index 100% rename from content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/material-ui.md rename to content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/radix-ui.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md similarity index 100% rename from content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/radix-ui.md rename to content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/tailwind-css.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md similarity index 100% rename from content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/tailwind-css.md rename to content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/after-js.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md similarity index 100% rename from content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/after-js.md rename to content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/next-js.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md similarity index 100% rename from content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/next-js.md rename to content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/universal.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md similarity index 100% rename from content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/universal.md rename to content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/nuxt-js.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md similarity index 100% rename from content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/nuxt-js.md rename to content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md diff --git a/pages/[roadmap]/[group].tsx b/pages/[roadmap]/[group].tsx new file mode 100644 index 000000000..1b019448a --- /dev/null +++ b/pages/[roadmap]/[group].tsx @@ -0,0 +1,154 @@ +import { + Box, + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + Container, +} from '@chakra-ui/react'; +import { GlobalHeader } from '../../components/global-header'; +import { OpensourceBanner } from '../../components/opensource-banner'; +import { UpdatesBanner } from '../../components/updates-banner'; +import { Footer } from '../../components/footer'; +import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap'; +import MdRenderer from '../../components/md-renderer'; +import Helmet from '../../components/helmet'; +import React from 'react'; +import { ChevronRightIcon } from '@chakra-ui/icons'; + +type RoadmapProps = { + roadmap: RoadmapType; + group: string; +}; + +function TextualRoadmap(props: RoadmapProps) { + const { roadmap, group } = props; + if (!roadmap.contentPathsFilePath) { + return null; + } + + // Remove trailing slashes + const contentsPathsFilePath = roadmap.contentPathsFilePath.replace(/^\//, ''); + const contentPathMapping = require(`../../content/${contentsPathsFilePath}`); + + const contentFilePath = contentPathMapping[group] || ''; + const normalizedContentFilePath = contentFilePath.replace(/^\//, ''); + + const GroupContent = require(`../../content/${normalizedContentFilePath}`).default; + + return ( + + + } + > + + + Frontend + + + + + + Internet + + + + + + What is Internet + + + + + + + + + ); +} + +export default function Roadmap(props: RoadmapProps) { + const { roadmap, group } = props; + + return ( + + + + + + + + + +