Add functionality to add note to the roadmaps

src/components/FAQs/FAQs.astro

@@ -1,10 +1,8 @@
 ---
-import MarkdownIt from 'markdown-it';
+import { markdownToHtml } from '../../lib/markdown';
 import Answer from './Answer.astro';
 import Question from './Question.astro';
 
-const md = new MarkdownIt();
-
 export type FAQType = {
   question: string;
   answer: string[];
@@ -32,8 +30,8 @@ if (faqs.length === 0) {
         faqs.map((faq, questionIndex) => (
           <Question isActive={questionIndex === 0} question={faq.question}>
             <Answer>
-              {faq.answer.map((answer, index) => (
+              {faq.answer.map((answer) => (
-                <Fragment set:html={md.render(answer)} />
+                <p set:html={markdownToHtml(answer)} />
               ))}
             </Answer>
           </Question>

src/components/RoadmapHeader.astro

@@ -1,26 +1,21 @@
 ---
 import Icon from './Icon.astro';
 import ResourcesAlert from './ResourcesAlert.astro';
+import RoadmapNote from './RoadmapNote.astro';
 import TopicSearch from './TopicSearch/TopicSearch.astro';
 import YouTubeAlert from './YouTubeAlert.astro';
 
 export interface Props {
   title: string;
   description: string;
+  note?: string;
   roadmapId: string;
   isUpcoming?: boolean;
   hasSearch?: boolean;
   hasTopics?: boolean;
 }
 
-const {
+const { title, description, roadmapId, isUpcoming = false, hasSearch = false, note, hasTopics = false } = Astro.props;
-  title,
-  description,
-  roadmapId,
-  isUpcoming = false,
-  hasSearch = false,
-  hasTopics = false,
-} = Astro.props;
 
 const isRoadmapReady = !isUpcoming;
 ---
@@ -114,3 +109,5 @@ const isRoadmapReady = !isUpcoming;
     {hasSearch && <TopicSearch />}
   </div>
 </div>
+
+{note && <RoadmapNote text={note} />}

src/components/RoadmapNote.astro

@@ -0,0 +1,19 @@
+---
+import { Debug } from 'astro/components';
+import { markdownToHtml } from '../lib/markdown';
+
+export interface Props {
+  text: string;
+}
+
+const { text } = Astro.props;
+---
+
+<div class='bg-gray-50'>
+  <div class='container pt-1'>
+    <p
+      class='text-sm bg-yellow-100 text-yellow-900 p-2 rounded-md mt-2 sm:mt-5 mb-0 sm:-mb-6 z-10 relative [&>a]:underline'
+      set:html={markdownToHtml(text.trim())}
+    />
+  </div>
+</div>

src/lib/markdown.ts

@@ -0,0 +1,8 @@
+// @ts-ignore
+import MarkdownIt from 'markdown-it';
+
+export function markdownToHtml(markdown: string): string {
+  const md = new MarkdownIt();
+
+  return md.renderInline(markdown);
+}

src/lib/roadmap.ts

@@ -12,6 +12,7 @@ export interface RoadmapFrontmatter {
   hasTopics: boolean;
   isNew: boolean;
   isUpcoming: boolean;
+  note?: string;
   dimensions?: {
     width: number;
     height: number;

src/pages/[roadmapId]/index.astro

@@ -57,8 +57,9 @@ if (roadmapFAQs.length) {
   jsonLd={jsonLdSchema}
 >
   <RoadmapHeader
-    description={roadmapData.description}
     title={roadmapData.title}
+    description={roadmapData.description}
+    note={roadmapData.note}
     roadmapId={roadmapId}
     hasTopics={roadmapData.hasTopics}
     isUpcoming={roadmapData.isUpcoming}

src/roadmaps/design-system/design-system.md

@@ -8,6 +8,7 @@ title: "Design System"
 description: "Learn how to create a design system with this step by step guide"
 isNew: false
 hasTopics: true
+note: "**Note:** System Design is a different topic, visit [System Design roadmap](/system-design) for that."
 dimensions:
   width: 968
   height: 2309.7
@@ -16,7 +17,7 @@ schema:
   description: "Learn how to create a Design System 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/design-system.png"
   datePublished: "2023-01-05"
-  dateModified: "2023-01-20"
+  dateModified: "2023-01-19"
 seo:
   title: "How to Create a Design System"
   description: "Learn how to create a design system or become a design system engineer with this step by step guide with resources."
@@ -55,4 +56,3 @@ tags:
   - "main-sitemap"
   - "skill-roadmap"
 ---
-

src/roadmaps/system-design/content/100-introduction/100-what-is-system-design.md

@@ -1 +1,9 @@
-# What is system design
+# What is System Design?
+
+System design is the process of defining the elements of a system, as well as their interactions and relationships, in order to satisfy a set of specified requirements.
+
+It involves taking a problem statement, breaking it down into smaller components and designing each component to work together effectively to achieve the overall goal of the system. This process typically includes analyzing the current system (if any) and determining any deficiencies, creating a detailed plan for the new system, and testing the design to ensure that it meets the requirements. It is an iterative process that may involve multiple rounds of design, testing, and refinement. 
+
+In software engineering, system design is a phase in the software development process that focuses on the high-level design of a software system, including the architecture and components.
+
+It is also one of the important aspects of the interview process for software engineers. Most of the companies have a dedicated system design interview round, where they ask the candidates to design a system for a given problem statement. The candidates are expected to come up with a detailed design of the system, including the architecture, components, and their interactions. They are also expected to discuss the trade-offs involved in their design and the alternatives that they considered.

src/roadmaps/system-design/content/100-introduction/101-how-to-approach-system-design.md

@@ -1 +1,13 @@
-# How to approach system design
+# How to approach System Design?
+
+There are several steps that can be taken when approaching a system design:
+
+- **Understand the problem**: Gather information about the problem you are trying to solve and the requirements of the system. Identify the users and their needs, as well as any constraints or limitations of the system.
+- **Identify the scope of the system:** Define the boundaries of the system, including what the system will do and what it will not do.
+- **Research and analyze existing systems:** Look at similar systems that have been built in the past and identify what worked well and what didn't. Use this information to inform your design decisions.
+- **Create a high-level design:** Outline the main components of the system and how they will interact with each other. This can include a rough diagram of the system's architecture, or a flowchart outlining the process the system will follow.
+- **Refine the design:** As you work on the details of the design, iterate and refine it until you have a complete and detailed design that meets all the requirements.
+- **Document the design:** Create detailed documentation of your design for future reference and maintenance.
+- **Continuously monitor and improve the system:** The system design is not a one-time process, it needs to be continuously monitored and improved to meet the changing requirements.
+
+Note that this is a general approach and the steps may vary depending on the specific system and requirements.

src/roadmaps/system-design/content/100-introduction/index.md

@@ -1 +1,9 @@
 # Introduction
+
+System design is the process of defining the elements of a system, as well as their interactions and relationships, in order to satisfy a set of specified requirements.
+
+It involves taking a problem statement, breaking it down into smaller components and designing each component to work together effectively to achieve the overall goal of the system. This process typically includes analyzing the current system (if any) and determining any deficiencies, creating a detailed plan for the new system, and testing the design to ensure that it meets the requirements. It is an iterative process that may involve multiple rounds of design, testing, and refinement. 
+
+In software engineering, system design is a phase in the software development process that focuses on the high-level design of a software system, including the architecture and components.
+
+It is also one of the important aspects of the interview process for software engineers. Most of the companies have a dedicated system design interview round, where they ask the candidates to design a system for a given problem statement. The candidates are expected to come up with a detailed design of the system, including the architecture, components, and their interactions. They are also expected to discuss the trade-offs involved in their design and the alternatives that they considered.