From f5e980d8ec9abd2c6b4dd2f6a41b2d72fc2a34c0 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 19 Jan 2023 15:05:25 +0400
Subject: [PATCH] Add functionality to add note to the roadmaps

---
 src/components/FAQs/FAQs.astro                |  8 +++-----
 src/components/RoadmapHeader.astro            | 13 +++++--------
 src/components/RoadmapNote.astro              | 19 +++++++++++++++++++
 src/lib/markdown.ts                           |  8 ++++++++
 src/lib/roadmap.ts                            |  1 +
 src/pages/[roadmapId]/index.astro             |  3 ++-
 src/roadmaps/design-system/design-system.md   |  6 +++---
 .../100-what-is-system-design.md              | 10 +++++++++-
 .../101-how-to-approach-system-design.md      | 14 +++++++++++++-
 .../content/100-introduction/index.md         | 10 +++++++++-
 10 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 src/components/RoadmapNote.astro
 create mode 100644 src/lib/markdown.ts

diff --git a/src/components/FAQs/FAQs.astro b/src/components/FAQs/FAQs.astro
index ce97d8ec6..bb17a540c 100644
--- a/src/components/FAQs/FAQs.astro
+++ b/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) => (
-                <Fragment set:html={md.render(answer)} />
+              {faq.answer.map((answer) => (
+                <p set:html={markdownToHtml(answer)} />
               ))}
             </Answer>
           </Question>
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index e53468995..1c25adeab 100644
--- a/src/components/RoadmapHeader.astro
+++ b/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 {
-  title,
-  description,
-  roadmapId,
-  isUpcoming = false,
-  hasSearch = false,
-  hasTopics = false,
-} = Astro.props;
+const { title, description, roadmapId, isUpcoming = false, hasSearch = false, note, hasTopics = false } = Astro.props;
 
 const isRoadmapReady = !isUpcoming;
 ---
@@ -114,3 +109,5 @@ const isRoadmapReady = !isUpcoming;
     {hasSearch && <TopicSearch />}
   </div>
 </div>
+
+{note && <RoadmapNote text={note} />}
diff --git a/src/components/RoadmapNote.astro b/src/components/RoadmapNote.astro
new file mode 100644
index 000000000..84854369b
--- /dev/null
+++ b/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>
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
new file mode 100644
index 000000000..e18d01a1b
--- /dev/null
+++ b/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);
+}
diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts
index 84031d4ce..c8686e9db 100644
--- a/src/lib/roadmap.ts
+++ b/src/lib/roadmap.ts
@@ -12,6 +12,7 @@ export interface RoadmapFrontmatter {
   hasTopics: boolean;
   isNew: boolean;
   isUpcoming: boolean;
+  note?: string;
   dimensions?: {
     width: number;
     height: number;
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index 681558bab..1995f1aad 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/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}
diff --git a/src/roadmaps/design-system/design-system.md b/src/roadmaps/design-system/design-system.md
index d5cad748f..cead4fc5a 100644
--- a/src/roadmaps/design-system/design-system.md
+++ b/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."
@@ -54,5 +55,4 @@ tags:
   - "roadmap"
   - "main-sitemap"
   - "skill-roadmap"
----
-
+---
\ No newline at end of file
diff --git a/src/roadmaps/system-design/content/100-introduction/100-what-is-system-design.md b/src/roadmaps/system-design/content/100-introduction/100-what-is-system-design.md
index 32f037455..df6c4b66d 100644
--- a/src/roadmaps/system-design/content/100-introduction/100-what-is-system-design.md
+++ b/src/roadmaps/system-design/content/100-introduction/100-what-is-system-design.md
@@ -1 +1,9 @@
-# What is system design
\ No newline at end of file
+# 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.
\ No newline at end of file
diff --git a/src/roadmaps/system-design/content/100-introduction/101-how-to-approach-system-design.md b/src/roadmaps/system-design/content/100-introduction/101-how-to-approach-system-design.md
index 5ded58e57..b17dfc86c 100644
--- a/src/roadmaps/system-design/content/100-introduction/101-how-to-approach-system-design.md
+++ b/src/roadmaps/system-design/content/100-introduction/101-how-to-approach-system-design.md
@@ -1 +1,13 @@
-# How to approach system design
\ No newline at end of file
+# 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.
\ No newline at end of file
diff --git a/src/roadmaps/system-design/content/100-introduction/index.md b/src/roadmaps/system-design/content/100-introduction/index.md
index f6ecaa676..403077737 100644
--- a/src/roadmaps/system-design/content/100-introduction/index.md
+++ b/src/roadmaps/system-design/content/100-introduction/index.md
@@ -1 +1,9 @@
-# Introduction
\ No newline at end of file
+# 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.
\ No newline at end of file