diff --git a/src/components/ResourceProgressStats.astro b/src/components/ResourceProgressStats.astro index 267b53f46..529f3f776 100644 --- a/src/components/ResourceProgressStats.astro +++ b/src/components/ResourceProgressStats.astro @@ -5,10 +5,10 @@ import { ProgressShareButton } from './UserProgress/ProgressShareButton'; export interface Props { resourceId: string; resourceType: ResourceType; - isSecondaryBanner?: boolean; + hasSecondaryBanner?: boolean; } -const { isSecondaryBanner = false, resourceId, resourceType } = Astro.props; +const { hasSecondaryBanner = false, resourceId, resourceType } = Astro.props; ---
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro index 6ea8f920c..c92acb324 100644 --- a/src/components/RoadmapHeader.astro +++ b/src/components/RoadmapHeader.astro @@ -8,6 +8,7 @@ import YouTubeAlert from './YouTubeAlert.astro'; import ProgressHelpPopup from './ProgressHelpPopup.astro'; import { MarkFavorite } from './FeaturedItems/MarkFavorite'; import { TeamVersions } from './TeamVersions/TeamVersions'; +import { RoadmapFrontmatter } from '../lib/roadmap'; export interface Props { title: string; @@ -17,6 +18,7 @@ export interface Props { roadmapId: string; isUpcoming?: boolean; hasSearch?: boolean; + question?: RoadmapFrontmatter['question']; hasTopics?: boolean; } @@ -29,25 +31,43 @@ const { hasSearch = false, note, hasTopics = false, + question, } = Astro.props; const isRoadmapReady = !isUpcoming; + +const roadmapTitle = + roadmapId === 'devops' + ? 'DevOps' + : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`; + +const hasTnsBanner = !!tnsBannerLink; --- -
-
+
+

{title} - + + +

{description}

@@ -121,7 +141,7 @@ const isRoadmapReady = !isUpcoming; { @@ -144,12 +164,31 @@ const isRoadmapReady = !isUpcoming; { hasTopics && ( - + ) } {hasSearch && }
+ + { + tnsBannerLink && ( + + ) + }
{note && } diff --git a/src/components/RoadmapHint.astro b/src/components/RoadmapHint.astro index 5396218f1..d565d6578 100644 --- a/src/components/RoadmapHint.astro +++ b/src/components/RoadmapHint.astro @@ -1,47 +1,57 @@ --- import AstroIcon from './AstroIcon.astro'; import Icon from './AstroIcon.astro'; +import { RoadmapTitleQuestion } from './RoadmapTitleQuestion.tsx'; import ResourceProgressStats from './ResourceProgressStats.astro'; export interface Props { roadmapId: string; tnsBannerLink?: string; + titleQuestion?: string; + titleAnswer?: string; } -const { roadmapId, tnsBannerLink = '' } = Astro.props; - -const hasTNSBanner = !!tnsBannerLink; -const roadmapTitle = - roadmapId === 'devops' - ? 'DevOps' - : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`; +const { + roadmapId, + titleQuestion = '', + titleAnswer = '', + tnsBannerLink, +} = Astro.props; +const hasTitleQuestion = titleQuestion && titleAnswer; +const hasTnsBanner = !!tnsBannerLink; ---
+ + { - hasTNSBanner && ( - + hasTitleQuestion && ( + ) } - - -
\ No newline at end of file +
diff --git a/src/components/RoadmapTitleQuestion.tsx b/src/components/RoadmapTitleQuestion.tsx new file mode 100644 index 000000000..39223b48d --- /dev/null +++ b/src/components/RoadmapTitleQuestion.tsx @@ -0,0 +1,63 @@ +import {ChevronDown, ChevronUp, GraduationCap} from 'lucide-react'; +import { useRef, useState } from 'react'; +import { useOutsideClick } from '../hooks/use-outside-click'; +import {markdownToHtml} from "../lib/markdown"; + +type RoadmapTitleQuestionProps = { + question: string; + answer: string; +}; + +export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) { + const { question, answer } = props; + + const [isAnswerVisible, setIsAnswerVisible] = useState(false); + const ref = useRef(null); + + useOutsideClick(ref, () => { + setIsAnswerVisible(false); + }); + + return ( +
+ {isAnswerVisible && ( +
+ )} +

{ + e.preventDefault(); + setIsAnswerVisible(!isAnswerVisible); + }} + > + + + { question } + + + + +

+ + {isAnswerVisible && ( +
+

setIsAnswerVisible(false)}> + + + { question } + + + + +

+
+
+
+ )} +
+ ); +} diff --git a/src/data/roadmaps/backend/backend.md b/src/data/roadmaps/backend/backend.md index d9e9691e5..eb669b423 100644 --- a/src/data/roadmaps/backend/backend.md +++ b/src/data/roadmaps/backend/backend.md @@ -8,18 +8,25 @@ title: 'Backend Developer' description: 'Step by step guide to becoming a modern backend developer in 2023' hasTopics: true tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert' +question: + title: 'What is Backend Development?' + description: | + Backend web development is the part of web development that deals with the server-side of a web application. This includes creating and managing the server-side logic, connecting the application to a database, creating server-side APIs, handling user authentication and authorization, and processing and responding to user requests. It often involves the use of programming languages such as Python, Java, Ruby, PHP, JavaScript (Node.js), and .NET languages. + + ## What does a Backend Developer do? + A backend developer is responsible for the development of server-side components of a web application i.e. working with databases, handling requests, creating server-side APIs that can be consumed by frontend developers to retrieve and manipulate data, ensuring the scalability of the systems i.e. making sure that the backend can handle a high volume of traffic and is performant, integrating external services like payment gateways, message queues, cloud services, etc. dimensions: width: 968 height: 2840.4 schema: - headline: 'Backend Developer Roadmap' + headline: 'Backend Developer Roadmap: What is Backend Development?' description: 'Learn how to become a Backend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' imageUrl: 'https://roadmap.sh/roadmaps/backend.png' datePublished: '2023-01-05' - dateModified: '2023-01-20' + dateModified: '2023-09-16' seo: - title: 'Backend Developer Roadmap' - description: 'Learn to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.' + title: 'Backend Developer Roadmap: What is Backend Development?' + description: 'Learn what is backend development, what do backend developers do and how to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.' keywords: - 'backend roadmap 2023' - 'backend developer roadmap 2023' diff --git a/src/data/roadmaps/devops/devops.md b/src/data/roadmaps/devops/devops.md index 9c7dce18d..e15c1fe2e 100644 --- a/src/data/roadmaps/devops/devops.md +++ b/src/data/roadmaps/devops/devops.md @@ -8,6 +8,15 @@ title: 'DevOps Roadmap' description: 'Step by step guide for DevOps, SRE or any other Operations Role in 2023' hasTopics: true tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert' +question: + title: 'What is DevOps?' + description: | + DevOps is a cultural and collaborative mindset that emphasizes communication, collaboration, integration, and automation between development and operations teams in order to achieve faster and more reliable software delivery. + + DevOps is not a specific job title or role, but rather a set of practices and principles that can be applied across a variety of roles in software development and IT operations. Anyone involved in the software development and delivery process can adopt a DevOps mindset and apply DevOps practices in their work, including developers, testers, operations engineers, product managers, and others. + + ## What is a DevOps Engineer? + While DevOps is not a specific job title or role, organizations often hire for a "DevOps Engineer" role. A DevOps Engineer is a software engineer who specializes in the practices and tools that enable the continuous delivery of software. DevOps Engineers are responsible for the design and implementation of applications, software, and services for their organization, and they work closely with developers, testers, and operations staff to oversee the code releases. dimensions: width: 968 height: 2527.46 diff --git a/src/data/roadmaps/frontend/frontend.md b/src/data/roadmaps/frontend/frontend.md index 6aa8cf0f4..5e358b6a3 100644 --- a/src/data/roadmaps/frontend/frontend.md +++ b/src/data/roadmaps/frontend/frontend.md @@ -8,18 +8,25 @@ title: 'Frontend Developer' description: 'Step by step guide to becoming a modern frontend developer in 2023' hasTopics: true tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert' +question: + title: 'What is Frontend Development?' + description: | + Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and [JavaScript](/javascript), where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity. + + ## What does a Frontend Developer do? + As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks good and is easy to use, with great focus on design principles and user experience. You'll be working closely with designers, back-end developers, and project managers to make sure the final product meets the client's needs and provides the best possible experience for the end-users. dimensions: width: 968 height: 2587.63 schema: - headline: 'Frontend Developer Roadmap' + headline: 'Frontend Developer Roadmap: What is Frontend Development?' description: 'Learn how to become a Frontend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' imageUrl: 'https://roadmap.sh/roadmaps/frontend.png' datePublished: '2023-01-05' dateModified: '2023-01-20' seo: - title: 'Frontend Developer Roadmap' - description: 'Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.' + title: 'Frontend Developer Roadmap: What is Frontend Development?' + description: 'Learn what is Frontend Development, what do frontend developers do and how to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.' keywords: - 'javascript roadmap 2023' - 'frontend roadmap 2023' diff --git a/src/data/roadmaps/full-stack/full-stack.md b/src/data/roadmaps/full-stack/full-stack.md index 99c0d0609..af08d3a6a 100644 --- a/src/data/roadmaps/full-stack/full-stack.md +++ b/src/data/roadmaps/full-stack/full-stack.md @@ -11,6 +11,10 @@ hasTopics: true dimensions: width: 968 height: 1951.64 +question: + title: 'What is Full Stack Development?' + description: | + Full stack development is the practice of being proficient in both the front-end and back-end aspects of web application development. A full stack developer is capable of working on all layers of a software application, from the user interface and user experience (front-end) to the server, database, and server-side logic (back-end). This versatility allows them to create and maintain complete web applications independently or as part of a development team. schema: headline: 'Full Stack Developer Roadmap' description: 'Learn how to become a Full Stack Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.' diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts index 6ff0fd87b..0cd77e738 100644 --- a/src/lib/roadmap.ts +++ b/src/lib/roadmap.ts @@ -12,6 +12,10 @@ export interface RoadmapFrontmatter { isUpcoming: boolean; tnsBannerLink?: string; note?: string; + question?: { + title: string; + description: string; + }; dimensions?: { width: number; height: number; diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro index d063e6e57..38d8ffaf0 100644 --- a/src/pages/[roadmapId]/index.astro +++ b/src/pages/[roadmapId]/index.astro @@ -86,6 +86,7 @@ if (roadmapFAQs.length) { roadmapId={roadmapId} hasTopics={roadmapData.hasTopics} isUpcoming={roadmapData.isUpcoming} + question={roadmapData.question} />
diff --git a/src/styles/global.css b/src/styles/global.css index 793049072..86746f96e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -7,6 +7,10 @@ @apply mx-auto !max-w-[830px] px-4; } + .badge { + @apply rounded-sm bg-gray-400 px-1.5 py-0.5 text-xs font-medium uppercase text-white + } + /* Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none;