Add interactive frontend roadmap version

components/roadmap/roadmap-error.tsx

@@ -20,7 +20,7 @@ export function RoadmapError(props: RoadmapProps) {
       color='white'
     >
       <Heading mb='4px' size='md'>Oops! There&apos;s an error</Heading>
-      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/${roadmap.id}`}>non-interactive version</Link></Text>
+      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/roadmaps/${roadmap.id}.png`}>non-interactive version</Link></Text>
     </Container>
   );
 }

components/roadmap/roadmap-page-header.tsx

@@ -20,9 +20,6 @@ type RoadmapPageHeaderType = {
 
 export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
   const { roadmap } = props;
-  const router = useRouter()
-
-  const isInteractive = router.pathname.includes('/interactive');
 
   return (
     <Box
@@ -92,22 +89,6 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
               Subscribe
             </Button>
           </Stack>
-          {roadmap.id === 'frontend' && !isInteractive && (
-            <Button
-              d={['none', 'flex', 'flex']}
-              as={Link}
-              href={'/frontend/interactive'}
-              size="xs"
-              py="14px"
-              px="10px"
-              variant="solid"
-              _hover={{ textDecoration: 'none' }}
-              colorScheme="purple"
-            >
-              <Text as='span' d={['none', 'none', 'inline']}>✨ Interactive Version (Beta)</Text>
-              <Text as='span' d={['inline', 'inline', 'none']}>✨ Try Beta</Text>
-            </Button>
-          )}
         </Flex>
       </Container>
     </Box>

content/roadmaps/100-frontend/content/101-html/readme.md

@@ -1 +1,8 @@
 # HTML
+
+HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>

pages/[roadmap]/index.tsx

@@ -8,6 +8,7 @@ import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import MdRenderer from '../../components/md-renderer';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
+import { InteractiveRoadmapRenderer } from './interactive';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -15,6 +16,11 @@ type RoadmapProps = {
 
 function ImageRoadmap(props: RoadmapProps) {
   const { roadmap } = props;
+
+  if (roadmap.id === 'frontend') {
+    return <InteractiveRoadmapRenderer roadmap={roadmap} />;
+  }
+
   if (!roadmap.imageUrl) {
     return null;
   }

pages/[roadmap]/interactive.tsx

@@ -17,8 +17,11 @@ type RoadmapProps = {
   roadmap: RoadmapType;
 };
 
-function RoadmapRenderer(props: RoadmapProps) {
+export function InteractiveRoadmapRenderer(props: RoadmapProps) {
   const { roadmap } = props;
+  if (!roadmap.jsonUrl) {
+    return null;
+  }
 
   const { loading: isLoading, error: hasErrorLoading, get } = useFetch();
 
@@ -132,7 +135,7 @@ export default function InteractiveRoadmap(props: RoadmapProps) {
       />
       <Box mb="60px">
         <RoadmapPageHeader roadmap={roadmap} />
-        <RoadmapRenderer roadmap={roadmap} />
+        <InteractiveRoadmapRenderer roadmap={roadmap} />
       </Box>
 
       <OpensourceBanner />