Add frontend roadmap node types

scripts/assign-label-types.cjs

@@ -14,10 +14,6 @@ function getHostNameWithoutTld(hostname) {
 }
 
 function isOfficialWebsite(hostname, fileName, roadmapId) {
-  if (hostname === 'javascript.info') {
-    return false;
-  }
-
   fileName = fileName.replace('/index.md', '').replace('.md', '');
 
   const parts = fileName.split('/');
@@ -46,14 +42,17 @@ function isOfficialWebsite(hostname, fileName, roadmapId) {
 // - @video@
 // - @website@
 // content is only educational websites
-function getTypeFromHostname(hostname) {
+function getTypeFromHostname(hostname, fileName, roadmapId) {
   hostname = hostname.replace('www.', '');
 
-  const videoHostnames = ['youtube.com', 'vimeo.com'];
+  const videoHostnames = ['youtube.com', 'vimeo.com', 'youtu.be'];
   const courseHostnames = ['coursera.org', 'udemy.com', 'edx.org'];
   const podcastHostnames = ['spotify.com', 'apple.com'];
   const opensourceHostnames = ['github.com', 'gitlab.com'];
   const articleHostnames = [
+    'neilpatel.com',
+    'learningseo.io',
+    'htmlreference.io',
     'docs.gitlab.com',
     'docs.github.com',
     'skills.github.com',
@@ -96,10 +95,14 @@ function getTypeFromHostname(hostname) {
   }
 
   if (hostname === 'roadmap.sh') {
-    return 'website';
+    return 'roadmap.sh';
+  }
+
+  if (isOfficialWebsite(hostname, fileName, roadmapId)) {
+    return 'official';
   }
 
-  return '';
+  return 'article';
 }
 
 function readNestedMarkdownFiles(dir, files = []) {
@@ -133,14 +136,17 @@ files.forEach((file) => {
   const content = fs.readFileSync(file, 'utf-8');
   const lines = content.split('\n');
 
-  const newContent = lines.map((line) => {
+  const newContent = lines
+    .map((line) => {
       if (line.startsWith('- [')) {
         const type = line.match(/@(\w+)@/);
         if (type) {
           return line;
         }
 
-      let fullUrl = line.match(/\((https?:\/\/[^)]+)\)/)?.[1];
+        let urlMatches = line.match(/\((https?:\/\/[^)]+)\)/);
+        let fullUrl = urlMatches?.[1];
+
         if (!fullUrl) {
           // is it slashed URL i.e. - [abc](/xyz)
           fullUrl = line.match(/\((\/[^)]+)\)/)?.[1];
@@ -157,23 +163,22 @@ files.forEach((file) => {
         const url = new URL(fullUrl);
         const hostname = url.hostname;
 
-      const urlType =
+        let urlType = getTypeFromHostname(hostname, file, roadmapId);
-        getTypeFromHostname(hostname) ||
+        const linkText = line.match(/\[([^\]]+)\]/)[1];
-        (isOfficialWebsite(hostname, file, roadmapId) ? 'official' : '');
 
-      if (urlType === 'official') {
+        if (
-        console.log('Official:', hostname);
+          linkText.toLowerCase().startsWith('visit dedicated') &&
-        process.exit(0);
+          linkText.toLowerCase().endsWith('roadmap')
+        ) {
+          urlType = 'roadmap';
         }
 
-      if (!urlType) {
+        return line.replace('- [', `- [@${urlType}@`).replace('](', '](');
-        console.error('Missing type:', hostname);
-        return;
-      }
       }
 
       return line;
-  });
+    })
+    .join('\n');
 
-  console.log(file);
+  fs.writeFileSync(file, newContent);
 });

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -15,6 +15,9 @@ export const allowedLinkTypes = [
   'course',
   'website',
   'podcast',
+  'roadmap.sh',
+  'official',
+  'roadmap',
 ] as const;
 
 export type AllowedLinkTypes = (typeof allowedLinkTypes)[number];

src/components/TopicDetail/TopicDetail.tsx

@@ -49,11 +49,14 @@ type TopicDetailProps = {
 
 const linkTypes: Record<AllowedLinkTypes, string> = {
   article: 'bg-yellow-300',
-  course: 'bg-green-300',
+  course: 'bg-green-400',
   opensource: 'bg-black text-white',
+  'roadmap.sh': 'bg-black text-white',
+  'roadmap': 'bg-black text-white',
   podcast: 'bg-purple-300',
-  video: 'bg-pink-300',
+  video: 'bg-purple-300',
   website: 'bg-blue-300',
+  'official': 'bg-blue-600 text-white',
 };
 
 export function TopicDetail(props: TopicDetailProps) {
@@ -368,7 +371,14 @@ export function TopicDetail(props: TopicDetailProps) {
                                 : 'bg-gray-200',
                             )}
                           >
-                            {link.type}
+                            {link.type === 'opensource' ? (
+                              <>
+                                {link.url.includes('github') && 'GitHub'}
+                                {link.url.includes('gitlab') && 'GitLab'}
+                              </>
+                            ) : (
+                              link.type
+                            )}
                           </span>
                           {link.title}
                         </a>

src/data/roadmaps/frontend/content/100-internet/100-how-does-the-internet-work.md

@@ -4,8 +4,8 @@ The Internet is a global network of computers connected to each other which comm
 
 Visit the following resources to learn more:
 
-- [How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work)
+- [@article@How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work)
-- [How Does the Internet Work? MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
+- [@article@How Does the Internet Work? MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
-- [Introduction to Internet](/guides/what-is-internet)
+- [@roadmap.sh@Introduction to Internet](/guides/what-is-internet)
-- [How does the Internet work?](https://www.youtube.com/watch?v=TNQsmPf24go)
+- [@video@How does the Internet work?](https://www.youtube.com/watch?v=TNQsmPf24go)
-- [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
+- [@video@How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)

src/data/roadmaps/frontend/content/100-internet/101-what-is-http.md

@@ -4,10 +4,10 @@ HTTP is the `TCP/IP` based application layer communication protocol which standa
 
 Visit the following resources to learn more:
 
-- [Everything you need to know about HTTP](https://cs.fyi/guide/http-in-depth)
+- [@article@Everything you need to know about HTTP](https://cs.fyi/guide/http-in-depth)
-- [What is HTTP?](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/)
+- [@article@What is HTTP?](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/)
-- [How HTTPS Works ...in a comic!](https://howhttps.works)
+- [@article@How HTTPS Works ...in a comic!](https://howhttps.works)
-- [An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
+- [@article@An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
-- [HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/)
+- [@article@HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/)
-- [HTTP/3 Is Now a Standard: Why Use It and How to Get Started](https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/)
+- [@article@HTTP/3 Is Now a Standard: Why Use It and How to Get Started](https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/)
-- [HTTP Crash Course & Exploration](https://www.youtube.com/watch?v=iYM2zFP3Zn0)
+- [@video@HTTP Crash Course & Exploration](https://www.youtube.com/watch?v=iYM2zFP3Zn0)

src/data/roadmaps/frontend/content/100-internet/102-browsers-and-how-they-work.md

@@ -4,7 +4,7 @@ A web browser is a software application that enables a user to access and displa
 
 Visit the following resources to learn more:
 
-- [How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
+- [@article@How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
-- [Role of Rendering Engine in Browsers](https://www.browserstack.com/guide/browser-rendering-engine)
+- [@article@Role of Rendering Engine in Browsers](https://www.browserstack.com/guide/browser-rendering-engine)
-- [Populating the Page: How Browsers Work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work)
+- [@article@Populating the Page: How Browsers Work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work)
-- [How Do Web Browsers Work?](https://www.youtube.com/watch?v=WjDrMKZWCt0)
+- [@video@How Do Web Browsers Work?](https://www.youtube.com/watch?v=WjDrMKZWCt0)

src/data/roadmaps/frontend/content/100-internet/103-dns-and-how-it-works.md

@@ -4,10 +4,10 @@ The Domain Name System (DNS) is the phonebook of the Internet. Humans access inf
 
 Visit the following resources to learn more:
 
-- [What is DNS?](https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/)
+- [@article@What is DNS?](https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/)
-- [Mess with DNS - DNS Playground](https://messwithdns.net/)
+- [@article@Mess with DNS - DNS Playground](https://messwithdns.net/)
-- [How DNS works (comic)](https://howdns.works/)
+- [@article@How DNS works (comic)](https://howdns.works/)
-- [DNS and How does it Work?](https://www.youtube.com/watch?v=Wj0od2ag5sk)
+- [@video@DNS and How does it Work?](https://www.youtube.com/watch?v=Wj0od2ag5sk)
-- [DNS Records](https://www.youtube.com/watch?v=7lxgpKh_fRY)
+- [@video@DNS Records](https://www.youtube.com/watch?v=7lxgpKh_fRY)
-- [When to add glue records to DNS settings](https://www.youtube.com/watch?v=e48AyJOA9W8)
+- [@video@When to add glue records to DNS settings](https://www.youtube.com/watch?v=e48AyJOA9W8)
-- [DNS Records for Newbies - How To Manage Website Records](https://www.youtube.com/watch?v=YV5tkQYcvfg)
+- [@video@DNS Records for Newbies - How To Manage Website Records](https://www.youtube.com/watch?v=YV5tkQYcvfg)

src/data/roadmaps/frontend/content/100-internet/104-what-is-domain-name.md

@@ -4,6 +4,6 @@ A domain name is a unique, easy-to-remember address used to access websites, suc
 
 Visit the following resources to learn more:
 
-- [What is a Domain Name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name)
+- [@article@What is a Domain Name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name)
-- [What is a Domain Name? | Domain name vs. URL](https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/)
+- [@article@What is a Domain Name? | Domain name vs. URL](https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/)
-- [A Beginners Guide to How Domain Names Work](https://www.youtube.com/watch?v=Y4cRx19nhJk)
+- [@video@A Beginners Guide to How Domain Names Work](https://www.youtube.com/watch?v=Y4cRx19nhJk)

src/data/roadmaps/frontend/content/100-internet/105-what-is-hosting.md

@@ -4,6 +4,6 @@ Web hosting is an online service that allows you to publish your website files o
 
 Visit the following resources to learn more:
 
-- [What Is Web Hosting? Explained](https://www.youtube.com/watch?v=htbY9-yggB0)
+- [@video@What Is Web Hosting? Explained](https://www.youtube.com/watch?v=htbY9-yggB0)
-- [Different Types of Web Hosting Explained](https://www.youtube.com/watch?v=AXVZYzw8geg)
+- [@video@Different Types of Web Hosting Explained](https://www.youtube.com/watch?v=AXVZYzw8geg)
-- [Where to Host a Fullstack Project on a Budget](https://www.youtube.com/watch?v=Kx_1NYYJS7Q)
+- [@video@Where to Host a Fullstack Project on a Budget](https://www.youtube.com/watch?v=Kx_1NYYJS7Q)

src/data/roadmaps/frontend/content/101-html/100-learn-the-basics.md

@@ -4,10 +4,9 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives
 
 Visit the following resources to learn more:
 
-- [W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp)
+- [@article@W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp)
-- [MDN Docs: Getting Started with HTML ](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+- [@article@MDN Docs: Getting Started with HTML ](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
-- [web.dev: Learn HTML](https://web.dev/learn/html)
+- [@article@web.dev: Learn HTML](https://web.dev/learn/html)
-- [HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg)
+- [@video@HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg)
-- [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
+- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
-- [HTML Cheatsheet](https://htmlcheatsheet.com)
+- [@article@HTML Cheatsheet](https://htmlcheatsheet.com)
-- [Scaler: HTML](https://www.scaler.com/topics/html)

src/data/roadmaps/frontend/content/101-html/101-writing-semantic-html.md

@@ -4,10 +4,10 @@ Semantic element clearly describes its meaning to both the browser and the devel
 
 Visit the following resources to learn more:
 
-- [Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html)
+- [@article@Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html)
-- [W3Schools: Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
+- [@article@W3Schools: Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
-- [How To Write Semantic HTML](https://hackernoon.com/how-to-write-semantic-html-dkq3ulo)
+- [@article@How To Write Semantic HTML](https://hackernoon.com/how-to-write-semantic-html-dkq3ulo)
-- [HTML Best Practices – How to Build a Better HTML-Based Website](https://www.freecodecamp.org/news/html-best-practices/)
+- [@article@HTML Best Practices – How to Build a Better HTML-Based Website](https://www.freecodecamp.org/news/html-best-practices/)
-- [Semantic HTML: What It Is and How It Improves Your Site](https://blog.hubspot.com/website/semantic-html)
+- [@article@Semantic HTML: What It Is and How It Improves Your Site](https://blog.hubspot.com/website/semantic-html)
-- [Semantic Markup](https://html.com/semantic-markup)
+- [@article@Semantic Markup](https://html.com/semantic-markup)
-- [Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/)
+- [@article@Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/)

src/data/roadmaps/frontend/content/101-html/102-forms-and-validations.md

@@ -4,6 +4,6 @@ Before submitting data to the server, it is important to ensure all required for
 
 Visit the following resources to learn more:
 
-- [MDN Web Docs: Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+- [@article@MDN Web Docs: Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
-- [Learn Forms by web.dev](https://web.dev/learn/forms/)
+- [@article@Learn Forms by web.dev](https://web.dev/learn/forms/)
-- [W3Schools: JavaScript Form Validation](https://www.w3schools.com/js/js_validation.asp)
+- [@article@W3Schools: JavaScript Form Validation](https://www.w3schools.com/js/js_validation.asp)

src/data/roadmaps/frontend/content/101-html/103-conventions-and-best-practices.md

@@ -4,4 +4,4 @@ Learn to follow the best practices for writing maintainable and scalable HTML do
 
 Visit the following resources to learn more:
 
-- [HTML Best Practices](https://github.com/hail2u/html-best-practices)
+- [@opensource@HTML Best Practices](https://github.com/hail2u/html-best-practices)

src/data/roadmaps/frontend/content/101-html/104-accessibility.md

@@ -4,11 +4,11 @@ Web accessibility means that websites, tools, and technologies are designed and
 
 Visit the following resources to learn more:
 
-- [Developing for Web Accessibility by W3C WAI](https://www.w3.org/WAI/tips/developing/)
+- [@article@Developing for Web Accessibility by W3C WAI](https://www.w3.org/WAI/tips/developing/)
-- [Accessibility Tutorial](https://www.w3schools.com/accessibility/index.php)
+- [@article@Accessibility Tutorial](https://www.w3schools.com/accessibility/index.php)
-- [A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/)
+- [@article@A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/)
-- [Complete Playlist on Accessibility](https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
+- [@video@Complete Playlist on Accessibility](https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
-- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [@article@MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
-- [Accessibility for Developers by Google](https://web.dev/accessibility)
+- [@article@Accessibility for Developers by Google](https://web.dev/accessibility)
-- [Web Accessibility by Udacity](https://www.udacity.com/course/web-accessibility--ud891)
+- [@article@Web Accessibility by Udacity](https://www.udacity.com/course/web-accessibility--ud891)
-- [Accessibility as an Essential Part of the Inclusive Developer Experience](https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/)
+- [@article@Accessibility as an Essential Part of the Inclusive Developer Experience](https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/)

src/data/roadmaps/frontend/content/101-html/105-seo-basics.md

@@ -4,10 +4,10 @@ SEO or Search Engine Optimization is the technique used to optimize your website
 
 Visit the following resources to learn more:
 
-- [Google Search Central — SEO Docs](https://developers.google.com/search/docs)
+- [@article@Google Search Central — SEO Docs](https://developers.google.com/search/docs)
-- [SEO Guide](https://github.com/seo/guide)
+- [@opensource@SEO Guide](https://github.com/seo/guide)
-- [8 Must-Know SEO Best Practices For Developers](https://neilpatel.com/blog/seo-developers/)
+- [@article@8 Must-Know SEO Best Practices For Developers](https://neilpatel.com/blog/seo-developers/)
-- [SEO for Developers](https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679)
+- [@article@SEO for Developers](https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679)
-- [Complete SEO Course for Beginners](https://www.youtube.com/watch?v=xsVTqzratPs)
+- [@video@Complete SEO Course for Beginners](https://www.youtube.com/watch?v=xsVTqzratPs)
-- [SEO Expert Course](https://www.youtube.com/watch?v=SnxeXZpZkI0)
+- [@video@SEO Expert Course](https://www.youtube.com/watch?v=SnxeXZpZkI0)
-- [Learning SEO](https://learningseo.io/)
+- [@article@Learning SEO](https://learningseo.io/)

src/data/roadmaps/frontend/content/101-html/index.md

@@ -4,12 +4,12 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives
 
 Visit the following resources to learn more:
 
-- [W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp)
+- [@article@W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp)
-- [htmlreference.io: All HTML elements at a glance](https://htmlreference.io/)
+- [@article@htmlreference.io: All HTML elements at a glance](https://htmlreference.io/)
-- [HTML For Beginners The Easy Way](https://html.com)
+- [@article@HTML For Beginners The Easy Way](https://html.com)
-- [Web Development Basics](https://internetingishard.netlify.app/html-and-css/index.html)
+- [@article@Web Development Basics](https://internetingishard.netlify.app/html-and-css/index.html)
-- [Interactive HTML Course](https://github.com/denysdovhan/learnyouhtml)
+- [@opensource@Interactive HTML Course](https://github.com/denysdovhan/learnyouhtml)
-- [HTML Full Course for Beginners | Complete All-in-One Tutorial ](https://youtu.be/mJgBOIoGihA)
+- [@video@HTML Full Course for Beginners | Complete All-in-One Tutorial ](https://youtu.be/mJgBOIoGihA)
-- [HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg)
+- [@video@HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg)
-- [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
+- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
-- [You don't need JavaScript for that](https://www.htmhell.dev/adventcalendar/2023/2/)
+- [@article@You don't need JavaScript for that](https://www.htmhell.dev/adventcalendar/2023/2/)

src/data/roadmaps/frontend/content/102-css/100-learn-the-basics.md

@@ -4,10 +4,10 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 
 Visit the following resources to learn more:
 
-- [W3Schools — Learn CSS](https://www.w3schools.com/css/)
+- [@article@W3Schools — Learn CSS](https://www.w3schools.com/css/)
-- [web.dev — Learn CSS](https://web.dev/learn/css/)
+- [@article@web.dev — Learn CSS](https://web.dev/learn/css/)
-- [freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [@article@freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)
-- [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/)
+- [@article@Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/)
-- [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)
+- [@video@CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)
-- [HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w)
+- [@video@HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w)
-- [CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA)
+- [@video@CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA)

src/data/roadmaps/frontend/content/102-css/101-making-layouts.md

@@ -4,14 +4,14 @@ Float, grid, flexbox, positioning, display and box model are some of the key top
 
 Visit the following resources to learn more:
 
-- [Learn and Practice Flexbox](https://flexboxfroggy.com/)
+- [@article@Learn and Practice Flexbox](https://flexboxfroggy.com/)
-- [Game for learning CSS Grid](https://cssgridgarden.com/)
+- [@article@Game for learning CSS Grid](https://cssgridgarden.com/)
-- [All about Floats](https://css-tricks.com/all-about-floats/)
+- [@article@All about Floats](https://css-tricks.com/all-about-floats/)
-- [Positioning Types: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
+- [@article@Positioning Types: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
-- [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- [@article@The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
-- [The CSS Display Property](https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/)
+- [@article@The CSS Display Property](https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/)
-- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox)
+- [@article@A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox)
-- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid)
+- [@article@A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid)
-- [Learn CSS Grid - Course](https://cssgrid.io/)
+- [@article@Learn CSS Grid - Course](https://cssgrid.io/)
-- [Learn CSS Grid for free](https://scrimba.com/learn/cssgrid)
+- [@course@Learn CSS Grid for free](https://scrimba.com/learn/cssgrid)
-- [Get on the Grid at Last with the CSS Grid Layout Module](https://thenewstack.io/get-grid-last-css-grid-template-markup/)
+- [@article@Get on the Grid at Last with the CSS Grid Layout Module](https://thenewstack.io/get-grid-last-css-grid-template-markup/)

src/data/roadmaps/frontend/content/102-css/102-responsive-design-and-media-queries.md

@@ -4,9 +4,9 @@ Responsive Web Designing is the technique to make your webpages look good on all
 
 Visit the following resources to learn more:
 
-- [Responsive Web Design](https://www.w3schools.com/css/css_rwd_intro.asp)
+- [@article@Responsive Web Design](https://www.w3schools.com/css/css_rwd_intro.asp)
-- [Learn Responsive Design](https://web.dev/learn/design/)
+- [@article@Learn Responsive Design](https://web.dev/learn/design/)
-- [The Beginner’s Guide to Responsive Web Design](https://kinsta.com/blog/responsive-web-design/)
+- [@article@The Beginner’s Guide to Responsive Web Design](https://kinsta.com/blog/responsive-web-design/)
-- [The guide to responsive web design in 2022](https://webflow.com/blog/responsive-web-design)
+- [@article@The guide to responsive web design in 2022](https://webflow.com/blog/responsive-web-design)
-- [5 simple tips to making responsive layouts the easy way](https://www.youtube.com/watch?v=VQraviuwbzU)
+- [@video@5 simple tips to making responsive layouts the easy way](https://www.youtube.com/watch?v=VQraviuwbzU)
-- [Introduction To Responsive Web Design](https://www.youtube.com/watch?v=srvUrASNj0s)
+- [@video@Introduction To Responsive Web Design](https://www.youtube.com/watch?v=srvUrASNj0s)

src/data/roadmaps/frontend/content/102-css/index.md

@@ -4,17 +4,16 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 
 Visit the following resources to learn more:
 
-- [The Odin Project](https://www.theodinproject.com//)
+- [@article@The Odin Project](https://www.theodinproject.com//)
-- [What The Flexbox!](https://flexbox.io/)
+- [@article@What The Flexbox!](https://flexbox.io/)
-- [CSS Complete Course](https://youtu.be/n4R2E7O-Ngo)
+- [@video@CSS Complete Course](https://youtu.be/n4R2E7O-Ngo)
-- [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)
+- [@video@CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)
-- [HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w)
+- [@video@HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w)
-- [CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA)
+- [@video@CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA)
-- [W3Schools — Learn CSS](https://www.w3schools.com/css/)
+- [@article@W3Schools — Learn CSS](https://www.w3schools.com/css/)
-- [cssreference.io: All CSS properties at a glance](https://cssreference.io/)
+- [@article@cssreference.io: All CSS properties at a glance](https://cssreference.io/)
-- [Web.dev by Google — Learn CSS](https://web.dev/learn/css/)
+- [@article@Web.dev by Google — Learn CSS](https://web.dev/learn/css/)
-- [freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [@article@freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)
-- [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/)
+- [@article@Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/)
-- [Joshw Comeaus CSS Hack Blog Posts](https://www.joshwcomeau.com/)
+- [@article@Joshw Comeaus CSS Hack Blog Posts](https://www.joshwcomeau.com/)
-- [100 Days CSS Challenge](https://100dayscss.com)
+- [@article@100 Days CSS Challenge](https://100dayscss.com)
-- [CSS Tutorial | Scaler](https://www.scaler.com/topics/css)

src/data/roadmaps/frontend/content/103-javascript/100-syntax-and-basic-constructs.md

@@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
+- [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
-- [The Modern JavaScript Tutorial](https://javascript.info/)
+- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
-- [JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
+- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
-- [Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22)
+- [@video@Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22)

src/data/roadmaps/frontend/content/103-javascript/101-learn-dom-manipulation.md

@@ -4,12 +4,12 @@ The Document Object Model (DOM) is a programming interface built for HTML and XM
 
 Visit the following resources to learn more:
 
-- [DOM Tree](https://javascript.info/dom-nodes)
+- [@article@DOM Tree](https://javascript.info/dom-nodes)
-- [GeeksForGeeks - DOM (Document Object Model)](https://www.geeksforgeeks.org/dom-document-object-model/)
+- [@article@GeeksForGeeks - DOM (Document Object Model)](https://www.geeksforgeeks.org/dom-document-object-model/)
-- [What is the DOM?](https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/)
+- [@article@What is the DOM?](https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/)
-- [Eloquent JavaScript, 3rd Edition: The Document Object Model](https://eloquentjavascript.net/14_dom.html)
+- [@article@Eloquent JavaScript, 3rd Edition: The Document Object Model](https://eloquentjavascript.net/14_dom.html)
-- [JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)
+- [@article@JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)
-- [JavaScript DOM](https://www.javascripttutorial.net/javascript-dom/)
+- [@article@JavaScript DOM](https://www.javascripttutorial.net/javascript-dom/)
-- [Learn the HTML DOM with Exercises - CodeGuage](https://www.codeguage.com/courses/js/html-dom-introduction)
+- [@article@Learn the HTML DOM with Exercises - CodeGuage](https://www.codeguage.com/courses/js/html-dom-introduction)
-- [What is DOM, Shadow DOM and Virtual DOM?](https://www.youtube.com/watch?v=7Tok22qxPzQ)
+- [@video@What is DOM, Shadow DOM and Virtual DOM?](https://www.youtube.com/watch?v=7Tok22qxPzQ)
-- [JavaScript DOM Crash Course](https://www.youtube.com/watch?v=0ik6X4DJKCc)
+- [@video@JavaScript DOM Crash Course](https://www.youtube.com/watch?v=0ik6X4DJKCc)

src/data/roadmaps/frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md

@@ -4,7 +4,7 @@ Ajax is the technique that lets us send and receive the data asynchronously from
 
 Visit the following resources to learn more:
 
-- [Fetch API MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- [@article@Fetch API MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
-- [A Simple Guide to JavaScript Fetch API](https://www.javascripttutorial.net/javascript-fetch-api/)
+- [@article@A Simple Guide to JavaScript Fetch API](https://www.javascripttutorial.net/javascript-fetch-api/)
-- [Introduction to Fetch](https://web.dev/introduction-to-fetch/)
+- [@article@Introduction to Fetch](https://web.dev/introduction-to-fetch/)
-- [JavaScript Fetch API](https://www.youtube.com/watch?v=-ZI0ea5O2oA)
+- [@video@JavaScript Fetch API](https://www.youtube.com/watch?v=-ZI0ea5O2oA)

src/data/roadmaps/frontend/content/103-javascript/103-es6-and-modular-javascript.md

@@ -4,10 +4,10 @@ ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming
 
 Visit the following resources to learn more:
 
-- [ES6 Tutorial](https://www.javascripttutorial.net/es6/)
+- [@article@ES6 Tutorial](https://www.javascripttutorial.net/es6/)
-- [W3Schools: Javascript ES6](https://www.w3schools.com/js/js_es6.asp)
+- [@article@W3Schools: Javascript ES6](https://www.w3schools.com/js/js_es6.asp)
-- [Learn Modern JavaScript in 1 Hour](https://www.youtube.com/watch?v=NCwa_xi0Uuc)
+- [@video@Learn Modern JavaScript in 1 Hour](https://www.youtube.com/watch?v=NCwa_xi0Uuc)
-- [JavaScript ES6, ES7, ES8](https://www.youtube.com/watch?v=nZ1DMMsyVyI)
+- [@video@JavaScript ES6, ES7, ES8](https://www.youtube.com/watch?v=nZ1DMMsyVyI)
-- [Build 15 JavaScript Projects - Vanilla JavaScript](https://www.youtube.com/watch?v=3PHXvlpOkf4)
+- [@video@Build 15 JavaScript Projects - Vanilla JavaScript](https://www.youtube.com/watch?v=3PHXvlpOkf4)
-- [Modern JavaScript ES6, ES7 & ES8](https://codeloop.org/learn-modern-javascript-es6-es7-es8)
+- [@article@Modern JavaScript ES6, ES7 & ES8](https://codeloop.org/learn-modern-javascript-es6-es7-es8)
-- [Easy ES6 Goodies for Busy JavaScript Developers](https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/)
+- [@article@Easy ES6 Goodies for Busy JavaScript Developers](https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/)

src/data/roadmaps/frontend/content/103-javascript/104-concepts.md

@@ -4,12 +4,12 @@ Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Proto
 
 Visit the following resources to learn more:
 
-- [JavaScript Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+- [@article@JavaScript Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
-- [Event Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
+- [@article@Event Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
-- [Scope in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
+- [@article@Scope in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
-- [Var, Let and Const — Whats the difference?](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/)
+- [@article@Var, Let and Const — Whats the difference?](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/)
-- [Inheritance and Prototype Chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+- [@article@Inheritance and Prototype Chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
-- [JavaScript Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
+- [@article@JavaScript Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
-- [JavaScript Visualized (7 Part Series)](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
+- [@article@JavaScript Visualized (7 Part Series)](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
-- [DOM vs Shadow DOM vs Virtual DOM](https://www.youtube.com/watch?v=7Tok22qxPzQ)
+- [@video@DOM vs Shadow DOM vs Virtual DOM](https://www.youtube.com/watch?v=7Tok22qxPzQ)
-- [Demystifying JavaScript Promises](https://blog.greenroots.info/series/javascript-promises)
+- [@article@Demystifying JavaScript Promises](https://blog.greenroots.info/series/javascript-promises)

src/data/roadmaps/frontend/content/103-javascript/index.md

@@ -4,14 +4,13 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated JavaScript Roadmap](/javascript)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript)
-- [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
+- [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
-- [The Modern JavaScript Tutorial](https://javascript.info/)
+- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
-- [Learn JavaScript: Covered many topics](https://www.javascripttutorial.net/)
+- [@article@Learn JavaScript: Covered many topics](https://www.javascripttutorial.net/)
-- [Eloquent JavaScript textbook](https://eloquentjavascript.net/)
+- [@article@Eloquent JavaScript textbook](https://eloquentjavascript.net/)
-- [You Dont Know JS Yet (book series) ](https://github.com/getify/You-Dont-Know-JS)
+- [@opensource@You Dont Know JS Yet (book series) ](https://github.com/getify/You-Dont-Know-JS)
-- [JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
+- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
-- [Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22)
+- [@video@Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22)
-- [Build 30 Javascript projects in 30 days](https://javascript30.com/)
+- [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/)
-- [Learn the basics of JavaScript](https://github.com/workshopper/javascripting)
+- [@opensource@Learn the basics of JavaScript](https://github.com/workshopper/javascripting)
-- [JavaScript for Beginners ](https://www.scaler.com/topics/course/javascript-beginners)

src/data/roadmaps/frontend/content/104-version-control-systems/100-basic-usage-of-git.md

@@ -4,7 +4,7 @@
 
 Visit the following resources to learn more:
 
-- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
+- [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
-- [Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git)
+- [@article@Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git)
-- [Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet)
+- [@article@Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet)
-- [Tutorial: Git for Absolutely Everyone](https://thenewstack.io/tutorial-git-for-absolutely-everyone/)
+- [@article@Tutorial: Git for Absolutely Everyone](https://thenewstack.io/tutorial-git-for-absolutely-everyone/)

src/data/roadmaps/frontend/content/104-version-control-systems/index.md

@@ -4,8 +4,8 @@ Version control systems allow you to track changes to your codebase/files over t
 
 Visit the following resources to learn more:
 
-- [Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg)
+- [@video@Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg)
-- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
+- [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
-- [Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21)
+- [@video@Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21)
-- [Git Documentation](https://git-scm.com/docs)
+- [@article@Git Documentation](https://git-scm.com/docs)
-- [Learn Git by Atlassian](https://www.atlassian.com/git)
+- [@article@Learn Git by Atlassian](https://www.atlassian.com/git)

src/data/roadmaps/frontend/content/105-repo-hosting-services/100-github.md

@@ -4,9 +4,9 @@
 
 Visit the following resources to learn more:
 
-- [GitHub: Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world)
+- [@article@GitHub: Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world)
-- [Learn GitHub by doing](https://skills.github.com/)
+- [@article@Learn GitHub by doing](https://skills.github.com/)
-- [What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)
+- [@video@What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)
-- [Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU)
+- [@video@Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU)
-- [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk)
+- [@video@Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk)
-- [Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I)
+- [@video@Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I)

src/data/roadmaps/frontend/content/105-repo-hosting-services/101-gitlab.md

@@ -4,6 +4,6 @@
 
 Visit the following resources to learn more:
 
-- [GitLab Documentation](https://docs.gitlab.com/)
+- [@article@GitLab Documentation](https://docs.gitlab.com/)
-- [GitLab Website](https://gitlab.com/)
+- [@opensource@GitLab Website](https://gitlab.com/)
-- [Development: Connect git to GitLab for Small Projects](https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/)
+- [@article@Development: Connect git to GitLab for Small Projects](https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/)

src/data/roadmaps/frontend/content/105-repo-hosting-services/102-bitbucket.md

@@ -4,5 +4,5 @@
 
 Visit the following resources to learn more:
 
-- [How to use BitBucket?](https://bitbucket.org/product/guides)
+- [@official@How to use BitBucket?](https://bitbucket.org/product/guides)
-- [BitBucket Website](https://bitbucket.com/)
+- [@official@BitBucket Website](https://bitbucket.com/)

src/data/roadmaps/frontend/content/105-repo-hosting-services/index.md

@@ -4,6 +4,6 @@ There are different repository hosting services with the most famous one being G
 
 Visit the following resources to learn more:
 
-- [GitHub: Where the world builds software](https://github.com)
+- [@opensource@GitHub: Where the world builds software](https://github.com)
-- [GitLab: Iterate faster, innovate together](https://gitlab.com)
+- [@opensource@GitLab: Iterate faster, innovate together](https://gitlab.com)
-- [BitBucket: The Git solution for professional teams](https://bitbucket.com)
+- [@article@BitBucket: The Git solution for professional teams](https://bitbucket.com)

src/data/roadmaps/frontend/content/106-web-security-knowledge/100-https.md

@@ -6,9 +6,9 @@ Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which
 
 Visit the following resources to learn more:
 
-- [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/)
+- [@article@What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/)
-- [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
+- [@article@Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
-- [Enabling HTTPS on Your Servers](https://web.dev/enable-https/)
+- [@article@Enabling HTTPS on Your Servers](https://web.dev/enable-https/)
-- [How HTTPS works (comic)](https://howhttps.works/)
+- [@article@How HTTPS works (comic)](https://howhttps.works/)
-- [SSL, TLS, HTTP, HTTPS Explained](https://www.youtube.com/watch?v=hExRDVZHhig)
+- [@video@SSL, TLS, HTTP, HTTPS Explained](https://www.youtube.com/watch?v=hExRDVZHhig)
-- [HTTPS — Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)
+- [@video@HTTPS — Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)

src/data/roadmaps/frontend/content/106-web-security-knowledge/101-content-security-policy.md

@@ -4,6 +4,6 @@ Content Security Policy is a computer security standard introduced to prevent cr
 
 Visit the following resources to learn more:
 
-- [MDN Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- [@article@MDN Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
-- [Google Devs Content Security Policy (CSP)](https://developers.google.com/web/fundamentals/security/csp)
+- [@article@Google Devs Content Security Policy (CSP)](https://developers.google.com/web/fundamentals/security/csp)
-- [Web.dev - Content Security Policy (CSP)](https://web.dev/csp/)
+- [@article@Web.dev - Content Security Policy (CSP)](https://web.dev/csp/)

src/data/roadmaps/frontend/content/106-web-security-knowledge/102-cors.md

@@ -4,7 +4,7 @@ Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allo
 
 Visit the following resources to learn more:
 
-- [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
+- [@article@Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
-- [CORS in 100 Seconds](https://www.youtube.com/watch?v=4KHiSt0oLJ0)
+- [@video@CORS in 100 Seconds](https://www.youtube.com/watch?v=4KHiSt0oLJ0)
-- [CORS in 6 minutes](https://www.youtube.com/watch?v=PNtFSVU-YTI)
+- [@video@CORS in 6 minutes](https://www.youtube.com/watch?v=PNtFSVU-YTI)
-- [Understanding CORS](https://rbika.com/blog/understanding-cors)
+- [@article@Understanding CORS](https://rbika.com/blog/understanding-cors)

src/data/roadmaps/frontend/content/106-web-security-knowledge/103-owasp-security-risks.md

@@ -4,8 +4,8 @@ OWASP or Open Web Application Security Project is an online community that produ
 
 Visit the following resources to learn more:
 
-- [Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)
+- [@article@Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)
-- [OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist)
+- [@opensource@OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist)
-- [OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/)
+- [@article@OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/)
-- [OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html)
+- [@article@OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html)
-- [OWASP Top 10: A Guide to the Worst Software Vulnerabilities](https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/)
+- [@article@OWASP Top 10: A Guide to the Worst Software Vulnerabilities](https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/)

src/data/roadmaps/frontend/content/106-web-security-knowledge/index.md

@@ -4,10 +4,10 @@ Web security refers to the protective measures taken by the developers to protec
 
 Visit the following resources to learn more:
 
-- [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
+- [@article@Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
-- [Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)
+- [@article@Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)
-- [OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist)
+- [@opensource@OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist)
-- [OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/)
+- [@article@OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/)
-- [OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html)
+- [@article@OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html)
-- [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- [@article@Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
-- [OWASP ZAP Step-by-Step Tutorial](https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5)
+- [@video@OWASP ZAP Step-by-Step Tutorial](https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5)

src/data/roadmaps/frontend/content/107-package-managers/100-npm.md

@@ -4,8 +4,8 @@ npm is a package manager for the JavaScript programming language maintained by n
 
 Visit the following resources to learn more:
 
-- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
+- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
-- [An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)
+- [@article@An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)
-- [How to NPM](https://github.com/workshopper/how-to-npm)
+- [@opensource@How to NPM](https://github.com/workshopper/how-to-npm)
-- [NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y)
+- [@video@NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y)
-- [NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0)
+- [@video@NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0)

src/data/roadmaps/frontend/content/107-package-managers/101-yarn.md

@@ -4,6 +4,6 @@ Yarn is a software packaging system developed in 2016 by Facebook for Node.js Ja
 
 Visit the following resources to learn more:
 
-- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
+- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
-- [Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started)
+- [@article@Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started)
-- [Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk)
+- [@video@Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk)

src/data/roadmaps/frontend/content/107-package-managers/102-pnpm.md

@@ -4,5 +4,5 @@ PNPM is an alternative package manager for Node. js which stands for “Performa
 
 Visit the following resources to learn more:
 
-- [Official Website](https://pnpm.io)
+- [@official@Official Website](https://pnpm.io)
-- [Meet PNPM: The Faster, More Performant NPM](https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9)
+- [@article@Meet PNPM: The Faster, More Performant NPM](https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9)

src/data/roadmaps/frontend/content/107-package-managers/index.md

@@ -4,9 +4,9 @@ Package managers allow you to manage the dependencies (external code written by
 
 Visit the following resources to learn more:
 
-- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
+- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
-- [An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)
+- [@article@An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)
-- [Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started)
+- [@article@Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started)
-- [NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y)
+- [@video@NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y)
-- [NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0)
+- [@video@NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0)
-- [Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk)
+- [@video@Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk)

src/data/roadmaps/frontend/content/108-css-architecture/100-bem.md

@@ -4,7 +4,7 @@ The Block, Element, Modifier methodology (commonly referred to as BEM) is a popu
 
 Visit the following resources to learn more:
 
-- [BEM Official Website](https://en.bem.info)
+- [@article@BEM Official Website](https://en.bem.info)
-- [BEM Documentation](https://en.bem.info/methodology/quick-start)
+- [@article@BEM Documentation](https://en.bem.info/methodology/quick-start)
-- [BEM 101](https://css-tricks.com/bem-101)
+- [@article@BEM 101](https://css-tricks.com/bem-101)
-- [BEM Tutorials](https://en.bem.info/tutorials/)
+- [@article@BEM Tutorials](https://en.bem.info/tutorials/)

src/data/roadmaps/frontend/content/108-css-architecture/101-oocss.md

@@ -4,5 +4,5 @@ As with any object-based coding method, the purpose of OOCSS or Object Oriented
 
 Visit the following resources to learn more:
 
-- [OOCSS Official Website](http://oocss.org/)
+- [@official@OOCSS Official Website](http://oocss.org/)
-- [Introduction to Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)
+- [@article@Introduction to Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)

src/data/roadmaps/frontend/content/108-css-architecture/102-smacss.md

@@ -4,4 +4,4 @@ SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACS
 
 Visit the following resources to learn more:
 
-- [SMACSS Official Website](http://smacss.com/)
+- [@official@SMACSS Official Website](http://smacss.com/)

src/data/roadmaps/frontend/content/108-css-architecture/index.md

@@ -4,7 +4,7 @@ CSS is notoriously difficult to manage in large, complex, rapidly-iterated syste
 
 Visit the following resources to learn more:
 
-- [A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/)
+- [@article@A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/)
-- [BEM Official Website](https://en.bem.info)
+- [@article@BEM Official Website](https://en.bem.info)
-- [OOCSS Official Website](http://oocss.org/)
+- [@article@OOCSS Official Website](http://oocss.org/)
-- [SMACSS Official Website](http://smacss.com/)
+- [@article@SMACSS Official Website](http://smacss.com/)

src/data/roadmaps/frontend/content/109-css-preprocessors/100-sass.md

@@ -4,7 +4,7 @@ Sass is a preprocessor scripting language that is interpreted or compiled into C
 
 Visit the following resources to learn more:
 
-- [Sass Website](https://sass-lang.com/)
+- [@article@Sass Website](https://sass-lang.com/)
-- [Official Documentation](https://sass-lang.com/documentation)
+- [@article@Official Documentation](https://sass-lang.com/documentation)
-- [ Sass Tutorial for Beginners](https://www.youtube.com/watch?v=_a5j7KoflTs)
+- [@video@ Sass Tutorial for Beginners](https://www.youtube.com/watch?v=_a5j7KoflTs)
-- [ Sass, BEM, & Responsive Design](https://www.youtube.com/watch?v=jfMHA8SqUL4)
+- [@video@ Sass, BEM, & Responsive Design](https://www.youtube.com/watch?v=jfMHA8SqUL4)

src/data/roadmaps/frontend/content/109-css-preprocessors/101-postcss.md

@@ -4,4 +4,4 @@ PostCSS is a tool for transforming styles with JS plugins. These plugins can lin
 
 Visit the following resources to learn more:
 
-- [Official Website](https://postcss.org/)
+- [@official@Official Website](https://postcss.org/)

src/data/roadmaps/frontend/content/109-css-preprocessors/102-less.md

@@ -4,6 +4,6 @@ Less extends CSS with dynamic behavior such as variables, mixins, operations and
 
 Visit the following resources to learn more:
 
-- [Official Website](https://lesscss.org/)
+- [@article@Official Website](https://lesscss.org/)
-- [Official Documentation](https://lesscss.org/usage/)
+- [@article@Official Documentation](https://lesscss.org/usage/)
-- [ Less CSS Pre-Processor Tutorial](https://www.youtube.com/watch?v=YD91G8DdUsw)
+- [@video@ Less CSS Pre-Processor Tutorial](https://www.youtube.com/watch?v=YD91G8DdUsw)

src/data/roadmaps/frontend/content/109-css-preprocessors/index.md

@@ -4,5 +4,5 @@ CSS Preprocessors are scripting languages that extend the default capabilities o
 
 Visit the following resources to learn more:
 
-- [CSS Preprocessors Explained](https://www.freecodecamp.org/news/css-preprocessors/)
+- [@article@CSS Preprocessors Explained](https://www.freecodecamp.org/news/css-preprocessors/)
-- [Why Use Preprocessors?](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/)
+- [@article@Why Use Preprocessors?](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/)

src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md

@@ -4,5 +4,5 @@ npm scripts are the entries in the scripts field of the package.json file. The s
 
 Visit the following resources to learn more:
 
-- [Introduction to npm scripts](https://www.geeksforgeeks.org/introduction-to-npm-scripts/)
+- [@article@Introduction to npm scripts](https://www.geeksforgeeks.org/introduction-to-npm-scripts/)
-- [Codevolution: npm scripts](https://www.youtube.com/watch?v=hHt3oVk3XVk)
+- [@video@Codevolution: npm scripts](https://www.youtube.com/watch?v=hHt3oVk3XVk)

src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/index.md

@@ -4,7 +4,7 @@ Task Runners are tools to simplify certain tedious tasks of development, like au
 
 Visit the following resources to learn more:
 
-- [What is a Javascript task runner](https://www.educative.io/answers/what-is-a-javascript-task-runner)
+- [@article@What is a Javascript task runner](https://www.educative.io/answers/what-is-a-javascript-task-runner)
-- [npm script](https://docs.npmjs.com/cli/v8/using-npm/scripts)
+- [@article@npm script](https://docs.npmjs.com/cli/v8/using-npm/scripts)
-- [yarn script](https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script)
+- [@article@yarn script](https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script)
-- [bun script](https://bun.sh/docs/cli/run#run-a-package-json-script)
+- [@article@bun script](https://bun.sh/docs/cli/run#run-a-package-json-script)

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/100-webpack.md

@@ -4,6 +4,6 @@ Webpack is a module bundler. Its main purpose is to bundle JavaScript files for
 
 Visit the following resources to learn more:
 
-- [Webpack Official Website](https://webpack.js.org/)
+- [@article@Webpack Official Website](https://webpack.js.org/)
-- [Webpack Documentation](https://webpack.js.org/concepts/)
+- [@article@Webpack Documentation](https://webpack.js.org/concepts/)
-- [A Complete Guide to Webpack 5](https://www.valentinog.com/blog/webpack)
+- [@article@A Complete Guide to Webpack 5](https://www.valentinog.com/blog/webpack)

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md

@@ -4,7 +4,7 @@ Our current build tools for the web are 10-100x slower than they could be. The m
 
 Visit the following resources to learn more:
 
-- [Esbuild Official Website](https://esbuild.github.io/)
+- [@article@Esbuild Official Website](https://esbuild.github.io/)
-- [Esbuild Documentation](https://esbuild.github.io/api/)
+- [@article@Esbuild Documentation](https://esbuild.github.io/api/)
-- [Why are People Obsessed with esbuild?](https://www.youtube.com/watch?v=9XS_RA6zyyU)
+- [@video@Why are People Obsessed with esbuild?](https://www.youtube.com/watch?v=9XS_RA6zyyU)
-- [What Is ESBuild?](https://www.youtube.com/watch?v=ZY8Vu8cbWF0)
+- [@video@What Is ESBuild?](https://www.youtube.com/watch?v=ZY8Vu8cbWF0)

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/102-rollup.md

@@ -4,5 +4,5 @@ Rollup is a module bundler for JavaScript which compiles small pieces of code in
 
 Visit the following resources to learn more:
 
-- [Official Website and Docs](https://rollupjs.org/)
+- [@article@Official Website and Docs](https://rollupjs.org/)
-- [How to Set Up JavaScript Bundling Using Rollup](https://www.youtube.com/watch?v=ICYLOZuFMz8)
+- [@video@How to Set Up JavaScript Bundling Using Rollup](https://www.youtube.com/watch?v=ICYLOZuFMz8)

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/103-parcel.md

@@ -4,5 +4,5 @@ Parcel is a web application bundler, differentiated by its developer experience.
 
 Visit the following resources to learn more:
 
-- [Official Website and Docs](https://parceljs.org/plugin-system/bundler/)
+- [@article@Official Website and Docs](https://parceljs.org/plugin-system/bundler/)
-- [Using Parcel Bundler with React](https://www.youtube.com/watch?v=hCxvp3_o0gM)
+- [@video@Using Parcel Bundler with React](https://www.youtube.com/watch?v=hCxvp3_o0gM)

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/104-vite.md

@@ -4,7 +4,7 @@ Vite is a build tool that aims to provide a faster and leaner development experi
 
 Visit the following resources to learn more:
 
-- [Vite Website](https://vitejs.dev)
+- [@article@Vite Website](https://vitejs.dev)
-- [Vite Documentation](https://vitejs.dev/guide)
+- [@article@Vite Documentation](https://vitejs.dev/guide)
-- [Vite Crash Course](https://youtu.be/LQQ3CR2JTX8)
+- [@video@Vite Crash Course](https://youtu.be/LQQ3CR2JTX8)
-- [Vite Tutorial Video](https://www.youtube.com/watch?v=VAeRhmpcWEQ)
+- [@video@Vite Tutorial Video](https://www.youtube.com/watch?v=VAeRhmpcWEQ)

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/index.md

@@ -6,5 +6,5 @@ It usually starts with an entry file, and from there it bundles up all of the co
 
 Visit the following resources to learn more:
 
-- [Let’s learn how module bundlers work](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/)
+- [@article@Let’s learn how module bundlers work](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/)
-- [Module Bundlers Explained](https://www.youtube.com/watch?v=5IG4UmULyoA)
+- [@video@Module Bundlers Explained](https://www.youtube.com/watch?v=5IG4UmULyoA)

src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/100-prettier.md

@@ -4,5 +4,5 @@ Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS
 
 Visit the following resources to learn more:
 
-- [Prettier Website](https://prettier.io)
+- [@official@Prettier Website](https://prettier.io)
-- [Why Prettier](https://prettier.io/docs/en/why-prettier.html)
+- [@official@Why Prettier](https://prettier.io/docs/en/why-prettier.html)

src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/101-eslint.md

@@ -4,6 +4,6 @@ With ESLint you can impose the coding standard using a certain set of standalone
 
 Visit the following resources to learn more:
 
-- [ESLint Official Website](https://eslint.org/)
+- [@official@ESLint Official Website](https://eslint.org/)
-- [Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d)
+- [@article@Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d)
-- [ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es)
+- [@video@ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es)

src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md

@@ -5,4 +5,4 @@ Standard JS is a tool in the Code Review category of a tech stack.
 
 Visit the following resources to learn more:
 
-- [Official Website](https://standardjs.com/)
+- [@official@Official Website](https://standardjs.com/)

src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/index.md

@@ -4,4 +4,4 @@ A linter is a tool used to analyze code and discover bugs, syntax errors, stylis
 
 Visit the following resources to learn more:
 
-- [What Is a Linter?](https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)
+- [@article@What Is a Linter?](https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)

src/data/roadmaps/frontend/content/110-build-tools/index.md

@@ -6,6 +6,6 @@ Common usages of task runners include numerous development tasks such as: spinni
 
 Visit the following resources to learn more:
 
-- [webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/)
+- [@article@webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/)
-- [Vite Next Generation Frontend Tooling](https://vitejs.dev)
+- [@article@Vite Next Generation Frontend Tooling](https://vitejs.dev)
-- [Parcel is a zero configuration build tool for the web](https://parceljs.org/)
+- [@article@Parcel is a zero configuration build tool for the web](https://parceljs.org/)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/100-redux.md

@@ -4,6 +4,6 @@ Redux is a predictable state container for JavaScript apps. It helps you write a
 
 Visit the following resources to learn more:
 
-- [Official Website](https://redux.js.org/)
+- [@article@Official Website](https://redux.js.org/)
-- [Official Getting Started to Redux](https://redux.js.org/introduction/getting-started)
+- [@article@Official Getting Started to Redux](https://redux.js.org/introduction/getting-started)
-- [Official Tutorial to Learn Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)
+- [@article@Official Tutorial to Learn Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/101-mobx.md

@@ -4,5 +4,5 @@ MobX is an open source state management tool. MobX, a simple, scalable, and stan
 
 Visit the following resources to learn more:
 
-- [MobX Official Website](https://mobx.js.org/)
+- [@article@MobX Official Website](https://mobx.js.org/)
-- [Intro to MobX Tutorial](https://www.youtube.com/watch?v=WQQq1QbYlAw)
+- [@video@Intro to MobX Tutorial](https://www.youtube.com/watch?v=WQQq1QbYlAw)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/102-recoil.md

@@ -4,6 +4,6 @@ Recoil is a new state management library built by the Facebook team that simplif
 
 Visit the following resources to learn more:
 
-- [Recoil Official Website](https://recoiljs.org/)
+- [@article@Recoil Official Website](https://recoiljs.org/)
-- [Official Documentation](https://recoiljs.org/docs/introduction/getting-started)
+- [@article@Official Documentation](https://recoiljs.org/docs/introduction/getting-started)
-- [Learn the basics of Recoil.js](https://www.youtube.com/watch?v=BchtCWxs7sA)
+- [@video@Learn the basics of Recoil.js](https://www.youtube.com/watch?v=BchtCWxs7sA)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md

@@ -4,9 +4,9 @@ React is the most popular front-end JavaScript library for building user interfa
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated React Roadmap](/react)
+- [@roadmap@Visit Dedicated React Roadmap](/react)
-- [React Website](https://react.dev)
+- [@official@React Website](https://react.dev)
-- [Official Getting Started](https://react.dev/learn/tutorial-tic-tac-toe)
+- [@official@Official Getting Started](https://react.dev/learn/tutorial-tic-tac-toe)
-- [React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE)
+- [@video@React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE)
-- [React Course - Beginners Tutorial for React JavaScript Library [2022]](https://www.youtube.com/watch?v=bMknfKXIFA8)
+- [@video@React Course - Beginners Tutorial for React JavaScript Library [2022]](https://www.youtube.com/watch?v=bMknfKXIFA8)
-- [Understanding Reacts UI Rendering Process](https://www.youtube.com/watch?v=i793Qm6kv3U)
+- [@video@Understanding Reacts UI Rendering Process](https://www.youtube.com/watch?v=i793Qm6kv3U)

src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/100-rxjs.md

@@ -4,7 +4,7 @@ RxJS (Reactive Extensions for JavaScript) is a library for reactive programming
 
 Visit the following resources to learn more:
 
-- [RxJS Official Website](https://rxjs.dev/guide/overview)
+- [@official@RxJS Official Website](https://rxjs.dev/guide/overview)
-- [RxJS Angular Docs](https://angular.io/guide/rx-library)
+- [@article@RxJS Angular Docs](https://angular.io/guide/rx-library)
-- [RxJS Crash Course](https://www.youtube.com/watch?v=PhggNGsSQyg)
+- [@video@RxJS Crash Course](https://www.youtube.com/watch?v=PhggNGsSQyg)
-- [RxJS Quick Start](https://www.youtube.com/watch?v=2LCo926NFLI)
+- [@video@RxJS Quick Start](https://www.youtube.com/watch?v=2LCo926NFLI)

src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/101-ngrx.md

@@ -4,6 +4,6 @@ NgRx is an open source library that provides reactive state management for your
 
 Visit the following resources to learn more:
 
-- [Official Documentation](https://ngrx.io/docs)
+- [@official@Official Documentation](https://ngrx.io/docs)
-- [Angular NgRx Redux Quick Start Tutorial](https://www.youtube.com/watch?v=2LCo926NFLI)
+- [@video@Angular NgRx Redux Quick Start Tutorial](https://www.youtube.com/watch?v=2LCo926NFLI)
-- [NgRx Course](https://www.youtube.com/watch?v=nuHBHD32iw8)
+- [@video@NgRx Course](https://www.youtube.com/watch?v=nuHBHD32iw8)

src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md

@@ -4,6 +4,6 @@ Angular is a component based front-end development framework built on TypeScript
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Angular Roadmap](/angular)
+- [@roadmap@Visit Dedicated Angular Roadmap](/angular)
-- [Official - Getting started with Angular](https://angular.io/start)
+- [@official@Official - Getting started with Angular](https://angular.io/start)
-- [Angular for Beginners Course [Full Front End Tutorial with TypeScript]](https://www.youtube.com/watch?v=3qBXWUpoPHo)
+- [@video@Angular for Beginners Course [Full Front End Tutorial with TypeScript]](https://www.youtube.com/watch?v=3qBXWUpoPHo)

src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md

@@ -4,4 +4,4 @@ Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with th
 
 Visit the following resources to learn more:
 
-- [Official Documentation](https://pinia.vuejs.org/)
+- [@article@Official Documentation](https://pinia.vuejs.org/)

src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md

@@ -4,9 +4,9 @@ Vue.js is an open-source JavaScript framework for building user interfaces and s
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Vue Roadmap](/vue)
+- [@roadmap@Visit Dedicated Vue Roadmap](/vue)
-- [Vue.js Website](https://vuejs.org/)
+- [@official@Vue.js Website](https://vuejs.org/)
-- [Official Getting Started](https://vuejs.org/v2/guide/)
+- [@official@Official Getting Started](https://vuejs.org/v2/guide/)
-- [Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c)
+- [@video@Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c)
-- [Vue.js Crash Course](https://www.youtube.com/watch?v=qZXt1Aom3Cs)
+- [@video@Vue.js Crash Course](https://www.youtube.com/watch?v=qZXt1Aom3Cs)
-- [Meet Vue.js, the Flexible JavaScript Framework](https://thenewstack.io/meet-vue-js-flexible-javascript-framework/)
+- [@article@Meet Vue.js, the Flexible JavaScript Framework](https://thenewstack.io/meet-vue-js-flexible-javascript-framework/)

src/data/roadmaps/frontend/content/111-pick-a-framework/103-svelte.md

@@ -4,8 +4,8 @@ Svelte is a javascript framework that unlike Vue and React does not use vertical
 
 Visit the following resources to learn more:
 
-- [Svelte Website](https://svelte.dev/)
+- [@official@Svelte Website](https://svelte.dev/)
-- [Svelte Documentation](https://svelte.dev/docs)
+- [@official@Svelte Documentation](https://svelte.dev/docs)
-- [Svelte Course Playlist for beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO)
+- [@video@Svelte Course Playlist for beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO)
-- [All About Svelte, the Much-Loved, State-Driven Web Framework](https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/)
+- [@article@All About Svelte, the Much-Loved, State-Driven Web Framework](https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/)
-- [Svelte and the Future of Frontend Development](https://thenewstack.io/svelte-and-the-future-of-front-end-development/)
+- [@article@Svelte and the Future of Frontend Development](https://thenewstack.io/svelte-and-the-future-of-front-end-development/)

src/data/roadmaps/frontend/content/111-pick-a-framework/104-solid-js.md

@@ -4,5 +4,5 @@ Solid is a reactive JavaScript toolkit for building user interfaces without a vi
 
 Visit the following resources to learn more:
 
-- [Official Website - SolidJS](https://www.solidjs.com/)
+- [@official@Official Website - SolidJS](https://www.solidjs.com/)
-- [SolidJS Tutorial](https://www.solidjs.com/tutorial/introduction_basics)
+- [@official@SolidJS Tutorial](https://www.solidjs.com/tutorial/introduction_basics)

src/data/roadmaps/frontend/content/111-pick-a-framework/index.md

@@ -4,5 +4,5 @@ Web frameworks are designed to write web applications. Frameworks are collection
 
 Visit the following resources to learn more:
 
-- [What is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA)
+- [@video@What is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA)
-- [ Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
+- [@video@ Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)

src/data/roadmaps/frontend/content/112-modern-css/100-styled-components.md

@@ -4,6 +4,6 @@ Styled-components is a CSS-in-JS library that enables you to write regular CSS a
 
 Visit the following resources to learn more:
 
-- [Official Website](https://styled-components.com/)
+- [@article@Official Website](https://styled-components.com/)
-- [Official Docs](https://styled-components.com/docs)
+- [@article@Official Docs](https://styled-components.com/docs)
-- [Styled Components Crash Course & Project](https://www.youtube.com/watch?v=02zO0hZmwnw)
+- [@video@Styled Components Crash Course & Project](https://www.youtube.com/watch?v=02zO0hZmwnw)

src/data/roadmaps/frontend/content/112-modern-css/101-css-modules.md

@@ -4,6 +4,6 @@ CSS files in which all class names and animation names are scoped locally by def
 
 Visit the following resources to learn more:
 
-- [Project GitHub Repository](https://github.com/css-modules/css-modules)
+- [@opensource@Project GitHub Repository](https://github.com/css-modules/css-modules)
-- [Using CSS Modules In React App](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87)
+- [@article@Using CSS Modules In React App](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87)
-- [CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s)
+- [@video@CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s)

src/data/roadmaps/frontend/content/112-modern-css/102-styled-jsx.md

@@ -4,5 +4,5 @@ Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scop
 
 Visit the following resources to learn more:
 
-- [Getting started](https://github.com/vercel/styled-jsx)
+- [@opensource@Getting started](https://github.com/vercel/styled-jsx)
-- [Styled JSX in Next.js: Master Next.js](https://www.youtube.com/watch?v=SM5uVbfgfdo)
+- [@video@Styled JSX in Next.js: Master Next.js](https://www.youtube.com/watch?v=SM5uVbfgfdo)

src/data/roadmaps/frontend/content/112-modern-css/103-emotion.md

@@ -4,5 +4,5 @@ Emotion is a library designed for writing css styles with JavaScript. It provide
 
 Visit the following resources to learn more:
 
-- [Official Website and Docs](https://emotion.sh/docs/introduction)
+- [@official@Official Website and Docs](https://emotion.sh/docs/introduction)
-- [Styled components using emotion in React](https://www.youtube.com/watch?v=yO3JU2bMLGA)
+- [@video@Styled components using emotion in React](https://www.youtube.com/watch?v=yO3JU2bMLGA)

src/data/roadmaps/frontend/content/113-web-components/100-html-templates.md

@@ -4,4 +4,4 @@ The `<template>` HTML element is a mechanism for holding HTML that is not to be
 
 Visit the following resources to learn more:
 
-- [Using templates and slots | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)
+- [@article@Using templates and slots | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)

src/data/roadmaps/frontend/content/113-web-components/101-custom-elements.md

@@ -4,4 +4,4 @@ One of the key features of the Web Components standard is the ability to create
 
 Visit the following resources to learn more:
 
-- [Using custom elements | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+- [@article@Using custom elements | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)

src/data/roadmaps/frontend/content/113-web-components/102-shadow-dom.md

@@ -4,4 +4,4 @@ An important aspect of web components is encapsulation — being able to keep th
 
 Visit the following resources to learn more:
 
-- [Using shadow DOM | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
+- [@article@Using shadow DOM | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)

src/data/roadmaps/frontend/content/113-web-components/index.md

@@ -4,6 +4,6 @@ Web Components is a suite of different technologies allowing you to create reusa
 
 Visit the following resources to learn more:
 
-- [Web Components | MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+- [@article@Web Components | MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
-- [WebComponents.org](https://webcomponents.github.io/)
+- [@article@WebComponents.org](https://webcomponents.github.io/)
-- [Web Components Crash Course](https://www.youtube.com/watch?v=PCWaFLy3VUo)
+- [@video@Web Components Crash Course](https://www.youtube.com/watch?v=PCWaFLy3VUo)

src/data/roadmaps/frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md

@@ -4,6 +4,6 @@ Quickly design and customize responsive mobile-first sites with Bootstrap, the w
 
 Visit the following resources to learn more:
 
-- [Bootstrap Website](https://getbootstrap.com)
+- [@article@Bootstrap Website](https://getbootstrap.com)
-- [Bootstrap Official Blog](https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/)
+- [@article@Bootstrap Official Blog](https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/)
-- [Bootstrap CSS Framework - Full Course for Beginners](https://www.youtube.com/watch?v=-qfEOE4vtxE)
+- [@video@Bootstrap CSS Framework - Full Course for Beginners](https://www.youtube.com/watch?v=-qfEOE4vtxE)

src/data/roadmaps/frontend/content/114-css-frameworks/114-css-first/101-bulma.md

@@ -4,7 +4,7 @@ Bulma is a free, open source framework that provides ready-to-use frontend compo
 
 Visit the following resources to learn more:
 
-- [Bulma Website](https://bulma.io/)
+- [@official@Bulma Website](https://bulma.io/)
-- [Learn Bulma CSS](https://scrimba.com/learn/bulma)
+- [@course@Learn Bulma CSS](https://scrimba.com/learn/bulma)
-- [How To Build A ? Responsive Blog Design With Bulma CSS](https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b)
+- [@article@How To Build A ? Responsive Blog Design With Bulma CSS](https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b)
-- [Bulma CSS Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a)
+- [@video@Bulma CSS Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md

@@ -4,8 +4,8 @@ CSS Framework that provides atomic CSS classes to help you style components e.g.
 
 Visit the following resources to learn more:
 
-- [Tailwind Website](https://tailwindcss.com)
+- [@official@Tailwind Website](https://tailwindcss.com)
-- [Tailwind CSS Full Course for Beginners](https://www.youtube.com/watch?v=lCxcTsOHrjo)
+- [@video@Tailwind CSS Full Course for Beginners](https://www.youtube.com/watch?v=lCxcTsOHrjo)
-- [Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME)
+- [@video@Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME)
-- [Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)
+- [@video@Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)
-- [Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos)
+- [@video@Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md

@@ -4,8 +4,8 @@ Chakra UI is a simple, modular and accessible component library that gives you t
 
 Visit the following resources to learn more:
 
-- [Chakra UI Website](https://chakra-ui.com/)
+- [@article@Chakra UI Website](https://chakra-ui.com/)
-- [Chakra UI Official Getting Started](https://chakra-ui.com/docs/getting-started)
+- [@article@Chakra UI Official Getting Started](https://chakra-ui.com/docs/getting-started)
-- [Why You Should Start Using Chakra UI](https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/)
+- [@article@Why You Should Start Using Chakra UI](https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/)
-- [Official Getting Started Video](https://youtu.be/wI2vqXsjsIo)
+- [@video@Official Getting Started Video](https://youtu.be/wI2vqXsjsIo)
-- [Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c)
+- [@video@Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/102-material-ui.md

@@ -4,6 +4,6 @@ Material-UI is an open-source framework that features React components that impl
 
 Visit the following resources to learn more:
 
-- [Official Website](https://mui.com/material-ui/)
+- [@article@Official Website](https://mui.com/material-ui/)
-- [Official Documentation](https://mui.com/material-ui/getting-started/)
+- [@article@Official Documentation](https://mui.com/material-ui/getting-started/)
-- [Material UI React Tutorial](https://www.youtube.com/watch?v=o1chMISeTC0)
+- [@video@Material UI React Tutorial](https://www.youtube.com/watch?v=o1chMISeTC0)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md

@@ -4,5 +4,5 @@ An open-source UI component library for building high-quality, accessible design
 
 Visit the following resources to learn more:
 
-- [Official Website](https://www.radix-ui.com/)
+- [@article@Official Website](https://www.radix-ui.com/)
-- [Official Documentation](https://www.radix-ui.com/docs/primitives/overview/introduction)
+- [@article@Official Documentation](https://www.radix-ui.com/docs/primitives/overview/introduction)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/103-shadcn-ui.md

@@ -2,5 +2,5 @@
 
 Shadcn UI are beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. They are built with Tailwind CSS and Radix UI.
 
-- [Official Website](https://ui.shadcn.com/)
+- [@article@Official Website](https://ui.shadcn.com/)
-- [Official GitHub Repository](https://github.com/shadcn-ui/ui)
+- [@opensource@Official GitHub Repository](https://github.com/shadcn-ui/ui)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/104-mantine.md

@@ -4,6 +4,6 @@ Mantine is a React components library with more than 100 customizable components
 
 Visit the following resources to learn more:
 
-- [Mantine Website](https://mantine.dev/)
+- [@official@Mantine Website](https://mantine.dev/)
-- [Usage with Create React App](https://mantine.dev/guides/cra/)
+- [@official@Usage with Create React App](https://mantine.dev/guides/cra/)
-- [5 Mantine Hooks for UI management](https://blog.logrocket.com/5-mantine-hooks-simplifying-ui-management-react/)
+- [@article@5 Mantine Hooks for UI management](https://blog.logrocket.com/5-mantine-hooks-simplifying-ui-management-react/)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/105-daisy-ui.md

@@ -4,5 +4,5 @@ Component library around Tailwind CSS that comes with several built-in component
 
 Visit the following resources to learn more:
 
-- [DaisyUI Website](https://daisyui.com/)
+- [@official@DaisyUI Website](https://daisyui.com/)
-- [DaisyUI Documentation](https://daisyui.com/docs/install/)
+- [@official@DaisyUI Documentation](https://daisyui.com/docs/install/)

src/data/roadmaps/frontend/content/114-css-frameworks/index.md

@@ -4,5 +4,5 @@ A CSS framework provides the user with a fully functional CSS stylesheet, allowi
 
 Visit the following resources to learn more:
 
-- [CSS Frameworks Introduction](https://en.wikipedia.org/wiki/CSS_framework)
+- [@article@CSS Frameworks Introduction](https://en.wikipedia.org/wiki/CSS_framework)
-- [What are the benefits of using a css framework](https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/)
+- [@article@What are the benefits of using a css framework](https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/)

src/data/roadmaps/frontend/content/115-testing-your-apps/100-jest.md

@@ -5,5 +5,5 @@ It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and m
 
 Visit the following resources to learn more:
 
-- [Jest Website](https://jestjs.io/)
+- [@article@Jest Website](https://jestjs.io/)
-- [JavaScript Testing With Jest](https://youtu.be/IPiUDhwnZxA?si=2_lE2bDo2fRuo2CU)
+- [@video@JavaScript Testing With Jest](https://youtu.be/IPiUDhwnZxA?si=2_lE2bDo2fRuo2CU)

src/data/roadmaps/frontend/content/115-testing-your-apps/101-react-testing-library.md

@@ -4,4 +4,4 @@ The React Testing Library is a very lightweight solution for testing React compo
 
 Visit the following resources to learn more:
 
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+- [@article@React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)

src/data/roadmaps/frontend/content/115-testing-your-apps/102-cypress.md

@@ -4,6 +4,6 @@ Cypress framework is a JavaScript-based end-to-end testing framework built on to
 
 Visit the following resources to learn more:
 
-- [Official Website](https://www.cypress.io/)
+- [@official@Official Website](https://www.cypress.io/)
-- [Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other)
+- [@article@Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other)
-- [Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE)
+- [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE)

src/data/roadmaps/frontend/content/115-testing-your-apps/104-playwright.md

@@ -4,7 +4,7 @@ Playwright is an open-source test automation library initially developed by Micr
 
 Visit the following resources to learn more:
 
-- [Playwright Website](https://playwright.dev/)
+- [@official@Playwright Website](https://playwright.dev/)
-- [Get started with end-to-end testing: Playwright](https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p)
+- [@video@Get started with end-to-end testing: Playwright](https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p)
-- [Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)
+- [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)
-- [Playwright, a Time-Saving End-to-End Testing Framework](https://thenewstack.io/playwright-a-time-saving-end-to-end-testing-framework/)
+- [@article@Playwright, a Time-Saving End-to-End Testing Framework](https://thenewstack.io/playwright-a-time-saving-end-to-end-testing-framework/)

src/data/roadmaps/frontend/content/115-testing-your-apps/105-mocha.md

@@ -4,5 +4,5 @@ Mocha is a feature-rich JavaScript test framework running on Node.js and in the
 
 Visit the following resources to learn more:
 
-- [Official Website and Docs](https://mochajs.org/)
+- [@article@Official Website and Docs](https://mochajs.org/)
-- [Testing Node.js with Mocha](https://www.youtube.com/watch?v=Bs68k6xfR3E)
+- [@video@Testing Node.js with Mocha](https://www.youtube.com/watch?v=Bs68k6xfR3E)

src/data/roadmaps/frontend/content/115-testing-your-apps/106-chai.md

@@ -4,6 +4,6 @@ Chai is a BDD / TDD assertion library for node and the browser that can be delig
 
 Visit the following resources to learn more:
 
-- [Official Website and Docs](https://www.chaijs.com/)
+- [@article@Official Website and Docs](https://www.chaijs.com/)
-- [Official Docs](https://www.chaijs.com/guide/)
+- [@article@Official Docs](https://www.chaijs.com/guide/)
-- [Intro To JavaScript Unit Testing With Mocha JS & Chai](https://www.youtube.com/watch?v=MLTRHc5dk6s)
+- [@video@Intro To JavaScript Unit Testing With Mocha JS & Chai](https://www.youtube.com/watch?v=MLTRHc5dk6s)

src/data/roadmaps/frontend/content/115-testing-your-apps/107-ava.md

@@ -4,6 +4,6 @@ Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and ru
 
 Visit the following resources to learn more:
 
-- [Official Repository](https://github.com/avajs/ava)
+- [@opensource@Official Repository](https://github.com/avajs/ava)
-- [Testing your Node.js applications with Ava.js](https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/)
+- [@article@Testing your Node.js applications with Ava.js](https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/)
-- [AVA Tutorial](https://www.youtube.com/watch?v=RxLW6-3dk5A)
+- [@video@AVA Tutorial](https://www.youtube.com/watch?v=RxLW6-3dk5A)

src/data/roadmaps/frontend/content/115-testing-your-apps/108-jasmine.md

@@ -4,7 +4,7 @@ Jasmine is a behavior-driven development framework for testing JavaScript code.
 
 Visit the following resources to learn more:
 
-- [Official Website](https://jasmine.github.io/)
+- [@article@Official Website](https://jasmine.github.io/)
-- [Official Docs](https://jasmine.github.io/pages/docs_home.html)
+- [@article@Official Docs](https://jasmine.github.io/pages/docs_home.html)
-- [Official Repository](https://github.com/jasmine/jasmine)
+- [@opensource@Official Repository](https://github.com/jasmine/jasmine)
-- [Javascript Unit Testing with Jasmine](https://www.youtube.com/watch?v=rw4KlxKEENQ)
+- [@video@Javascript Unit Testing with Jasmine](https://www.youtube.com/watch?v=rw4KlxKEENQ)