diff --git a/components/md-renderer/mdx-components/blockquote.tsx b/components/md-renderer/mdx-components/blockquote.tsx index d8cf11614..e546c590a 100644 --- a/components/md-renderer/mdx-components/blockquote.tsx +++ b/components/md-renderer/mdx-components/blockquote.tsx @@ -5,6 +5,7 @@ const BlockQuote = styled.blockquote` position: relative; background: #e8e8e8; border-radius: 5px; + margin-bottom: 18px; h1, h2, h3, h4, h5, h6 { margin-top: 0; diff --git a/components/md-renderer/mdx-components/code.tsx b/components/md-renderer/mdx-components/code.tsx new file mode 100644 index 000000000..a0019da41 --- /dev/null +++ b/components/md-renderer/mdx-components/code.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Code as ChakraCode } from '@chakra-ui/react'; + +type CodeType = { + children: React.ReactNode; +} + +export default function Code(props: CodeType) { + return {props.children}; +} diff --git a/components/md-renderer/mdx-components/index.tsx b/components/md-renderer/mdx-components/index.tsx index 1bc2b96d2..78f1c373e 100644 --- a/components/md-renderer/mdx-components/index.tsx +++ b/components/md-renderer/mdx-components/index.tsx @@ -10,6 +10,7 @@ import { BadgeLink } from './badge-link'; import Ul from './ul'; import Li from './li'; import PremiumBlock from './premium-block'; +import { Code } from '@chakra-ui/react'; const MdxComponents = { p: P, @@ -20,6 +21,7 @@ const MdxComponents = { table: Table, iframe: IFrame, img: Img, + code: Code, BadgeLink: BadgeLink, PremiumBlock: PremiumBlock, ul: Ul, diff --git a/components/page-header.tsx b/components/page-header.tsx index e307bd521..2809ff5cb 100644 --- a/components/page-header.tsx +++ b/components/page-header.tsx @@ -16,7 +16,7 @@ export function PageHeader(props: PageHeaderProps) { diff --git a/content/roadmaps.json b/content/roadmaps.json index 071587d9c..23d4bbe2d 100644 --- a/content/roadmaps.json +++ b/content/roadmaps.json @@ -38,6 +38,7 @@ "featured": true, "imagePath": "/roadmaps/frontend.png", "resourcesPath": "/roadmaps/1-frontend/resources.md", + "id": "frontend", "url": "/frontend" }, { @@ -79,6 +80,7 @@ "name": "Kamran Ahmed", "url": "https://twitter.com/kamranahmedse" }, + "id": "backend", "url": "/backend" }, { @@ -119,6 +121,7 @@ "name": "Kamran Ahmed", "url": "https://twitter.com/kamranahmedse" }, + "id": "devops", "url": "/devops" }, { @@ -157,6 +160,7 @@ "name": "Kamran Ahmed", "url": "https://twitter.com/kamranahmedse" }, + "id": "react", "url": "/react" }, { @@ -199,6 +203,7 @@ "featured": true, "detailed": false, "versions": [], + "id": "postgresql-dba", "url": "/postgresql-dba" }, { @@ -237,6 +242,7 @@ "name": "Kamran Ahmed", "url": "https://twitter.com/kamranahmedse" }, + "id": "android", "url": "/android" }, { @@ -269,6 +275,7 @@ "name": "Anas Fitiani", "url": "https://github.com/anas-qa" }, + "id": "qa", "url": "/qa" } -] +] \ No newline at end of file diff --git a/content/roadmaps/4-react/landscape.md b/content/roadmaps/4-react/landscape.md index ff1a01253..444f08245 100644 --- a/content/roadmaps/4-react/landscape.md +++ b/content/roadmaps/4-react/landscape.md @@ -1,10 +1,7 @@ -The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that. +The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that. Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things. ![](/roadmaps/react.png) Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/roadmap.sh/issues/new) and incorporate them in the picture if suitable. - - -


diff --git a/content/roadmaps/7-qa/landscape.md b/content/roadmaps/7-qa/landscape.md index 540cb46c0..75ceb7a41 100644 --- a/content/roadmaps/7-qa/landscape.md +++ b/content/roadmaps/7-qa/landscape.md @@ -1,2 +1,11 @@ -## QA Roadmap -Roadmap to becoming a QA Engineer +> **Roadmap is not ready yet**. Please check back later or [subscribe to get notified](/signup). + +While we prepare the roadmap, follow this simple advice to learn anything + +> Just **pick a project and start working on it**, you will learn all that you need along the way. + +**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) + + + + diff --git a/lib/roadmap.ts b/lib/roadmap.ts index c829a3e07..428b26e8e 100644 --- a/lib/roadmap.ts +++ b/lib/roadmap.ts @@ -20,14 +20,12 @@ export type RoadmapType = { contentPath?: string; resourcesPath: string; isCommunity: boolean; + id: string; url: string; }; -export function getRequestedRoadmap(req: NextApiRequest): RoadmapType | undefined { - // remove trailing slashes - const normalizedUrl = req.url?.replace(/\/$/, '') || ''; - - return (roadmaps as RoadmapType[]).find(roadmap => normalizedUrl.startsWith(roadmap.url)); +export function getRoadmapById(id: string): RoadmapType | undefined { + return (roadmaps as RoadmapType[]).find(roadmap => roadmap.id === id); } export function getAllRoadmaps(): RoadmapType[] { diff --git a/package-lock.json b/package-lock.json index 238912db0..f466d0d51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6100,6 +6100,11 @@ } } }, + "prism-themes": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/prism-themes/-/prism-themes-1.8.0.tgz", + "integrity": "sha512-pj7A7C9C8juQRFkZHYeApQHdUiak5nkKYlHyWwh7n/b6WjI9KzGtqaGhxUZAIaV1PZ9Z1epJwe41Px3TUGsNJw==" + }, "prismjs": { "version": "1.24.1", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.24.1.tgz", diff --git a/package.json b/package.json index c0893cc4e..e771569de 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "date-fns": "^2.23.0", "framer-motion": "^4.1.17", "next": "^11.1.0", + "prism-themes": "^1.8.0", "react": "17.0.2", "react-dom": "17.0.2", "styled-components": "^5.3.0" diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx index 8392ce488..fef1962ed 100644 --- a/pages/[roadmap]/index.tsx +++ b/pages/[roadmap]/index.tsx @@ -1,50 +1,61 @@ -import { Box, Button, Container, SimpleGrid, Stack } from '@chakra-ui/react'; +import { Box, Button, Container, Stack } from '@chakra-ui/react'; import { DownloadIcon, EmailIcon } from '@chakra-ui/icons'; -import styled from 'styled-components'; -import Image from 'next/image'; import { GlobalHeader } from '../../components/global-header'; import { OpensourceBanner } from '../../components/opensource-banner'; import { UpdatesBanner } from '../../components/updates-banner'; import { Footer } from '../../components/footer'; import { PageHeader } from '../../components/page-header'; +import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap'; +import MdRenderer from '../../components/md-renderer'; -const RoadmapBody = styled.div` - margin-bottom: 30px; - font-size: 15px; +type RoadmapProps = { + roadmap: RoadmapType; +}; - h1 { - font-size: 32px; - font-weight: 700; +function ImageRoadmap(props: RoadmapProps) { + const { roadmap } = props; + if (!roadmap.imagePath) { + return null; } - p { - line-height: 25px; - margin-bottom: 20px - } - - ul, ol { - margin: 0 0 20px 40px; + return ( + + + Frontend Roadmap + + + ); +} - li + li { - margin-top: 7px; - } +function TextualRoadmap(props: RoadmapProps) { + const { roadmap } = props; + if (!roadmap.contentPath) { + return null; } - img { - max-width: 100%; - } -`; + // Remove trailing slashes + const normalizedPath = roadmap.contentPath.replace(/^\//, ''); + const RoadmapContent = require(`../../content/${normalizedPath}`).default; + + return ( + + + + + + ); +} -export default function Roadmap() { - const isImageOnly = true; +export default function Roadmap(props: RoadmapProps) { + const { roadmap } = props; return ( - - - Frontend Roadmap - - + + + @@ -68,3 +77,37 @@ export default function Roadmap() { ); } + +type StaticPathItem = { + params: { + roadmap: string + } +}; + +export async function getStaticPaths() { + const roadmaps = getAllRoadmaps(); + const paramsList: StaticPathItem[] = roadmaps.map(roadmap => ({ + params: { 'roadmap': roadmap.id } + })); + + return { + paths: paramsList, + fallback: false + }; +} + +type ContextType = { + params: { + roadmap: string + } +}; + +export async function getStaticProps(context: ContextType) { + const roadmapId: string = context?.params?.roadmap; + + return { + props: { + roadmap: getRoadmapById(roadmapId) + } + }; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index fea3b5fbc..3c0abbb75 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import type { AppProps } from 'next/app'; import { ChakraProvider } from '@chakra-ui/react'; import { roadmapTheme } from './theme'; +import 'prism-themes/themes/prism-shades-of-purple.css'; function MyApp({ Component, pageProps }: AppProps) { return ( diff --git a/pages/index.tsx b/pages/index.tsx index bb0a35c21..7c4996c56 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -82,6 +82,7 @@ export default function Home(props: HomeProps) { {videos.map(video => ( { ...metaAcc, { ...roadmapMeta, + id: roadmapSlug, url: `/${roadmapSlug}`, contentPath: contentPath, resourcesPath: resourcesPath