Add resource group

components/md-renderer/mdx-components/index.tsx

@@ -10,6 +10,7 @@ import EnrichedLink from './a';
 import { BadgeLink } from './badge-link';
 import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
+import { ResourceGroupTitle } from './resource-group-title';
 
 const MdxComponents = {
   p: P,
@@ -22,6 +23,7 @@ const MdxComponents = {
   img: Img,
   code: Code,
   BadgeLink: BadgeLink,
+  ResourceGroupTitle: ResourceGroupTitle,
   PremiumBlock: PremiumBlock,
   ul: Ul,
   li: Li

components/md-renderer/mdx-components/resource-group-title.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Heading } from '@chakra-ui/react';
+
+type ResourceGroupTitleProps = {
+  children: React.ReactNode;
+};
+
+export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
+  const { children } = props;
+
+  return <Heading fontSize='22px' as="h2" mb={'10px'}>{children}</Heading>;
+}

content/roadmaps/100-frontend/content/100-internet/readme.md

@@ -2,6 +2,7 @@
 
 The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
 
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>