Fix types of resources

contributing.md

@@ -44,7 +44,7 @@ Visit the following resources to learn more:
 - [@type@Description of link](Link)
 ```
 
-`@type@` can be one of the following:
+`@type@` must be one of the following and describes the type of content you are adding:
 
 - `@official@`
 - `@opensource@`
@@ -54,6 +54,8 @@ Visit the following resources to learn more:
 - `@podcast@`
 - `@video@`
 
+It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap.
+
 ## Guidelines
 
 - <p><strong>Adding everything available out there is not the goal!</strong><br />

src/components/TopicDetail/TopicDetail.tsx

@@ -52,11 +52,11 @@ const linkTypes: Record<AllowedLinkTypes, string> = {
   course: 'bg-green-400',
   opensource: 'bg-black text-white',
   'roadmap.sh': 'bg-black text-white',
-  'roadmap': 'bg-black text-white',
+  roadmap: 'bg-black text-white',
   podcast: 'bg-purple-300',
   video: 'bg-purple-300',
   website: 'bg-blue-300',
-  'official': 'bg-blue-600 text-white',
+  official: 'bg-blue-600 text-white',
 };
 
 export function TopicDetail(props: TopicDetailProps) {
@@ -190,22 +190,30 @@ export function TopicDetail(props: TopicDetailProps) {
 
           const otherElems = topicDom.querySelectorAll('body > *:not(h1, div)');
 
-          const listLinks = Array.from(
-            topicDom.querySelectorAll('ul > li > a'),
-          ).map((link, counter) => {
-            const typePattern = /@([a-z]+)@/;
-            let linkText = link.textContent || '';
-            const linkHref = link.getAttribute('href') || '';
-            const linkType = linkText.match(typePattern)?.[1] || 'article';
-            linkText = linkText.replace(typePattern, '');
-
-            return {
-              id: `link-${linkHref}-${counter}`,
-              title: linkText,
-              url: linkHref,
-              type: linkType as AllowedLinkTypes,
-            };
-          });
+          const listLinks = Array.from(topicDom.querySelectorAll('ul > li > a'))
+            .map((link, counter) => {
+              const typePattern = /@([a-z]+)@/;
+              let linkText = link.textContent || '';
+              const linkHref = link.getAttribute('href') || '';
+              const linkType = linkText.match(typePattern)?.[1] || 'article';
+              linkText = linkText.replace(typePattern, '');
+
+              return {
+                id: `link-${linkHref}-${counter}`,
+                title: linkText,
+                url: linkHref,
+                type: linkType as AllowedLinkTypes,
+              };
+            })
+            .sort((a, b) => {
+              // official at the top
+              // opensource at second
+              // article at third
+              // videos at fourth
+              // rest at last
+              const order = ['official', 'opensource', 'article', 'video'];
+              return order.indexOf(a.type) - order.indexOf(b.type);
+            });
 
           const lastUl = topicDom.querySelector('ul:last-child');
           if (lastUl) {

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

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

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.
 
-- [@article@Official Website](https://ui.shadcn.com/)
+- [@official@Official Shadcn UI Website](https://ui.shadcn.com/)
 - [@opensource@Official GitHub Repository](https://github.com/shadcn-ui/ui)