Add group age

content/roadmaps/100-frontend/content-paths.json

@@ -48,27 +48,27 @@
   "css-preprocessors:less": "/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md",
   "build-tools": "/roadmaps/100-frontend/content/110-build-tools/readme.md",
   "build-tools:task-runners": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md",
-  "build-tools:100-task-runners/npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/npm-scripts.md",
+  "build-tools:task-runners:npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md",
   "build-tools:linters-formatters": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md",
-  "build-tools:102-linters-formatters/prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/prettier.md",
-  "build-tools:102-linters-formatters/eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/eslint.md",
-  "build-tools:102-linters-formatters/standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/standardjs.md",
+  "build-tools:linters-formatters:prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md",
+  "build-tools:linters-formatters:eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md",
+  "build-tools:linters-formatters:standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md",
   "build-tools:module-bundlers": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md",
-  "build-tools:101-module-bundlers/webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/webpack.md",
-  "build-tools:101-module-bundlers/esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/esbuild.md",
-  "build-tools:101-module-bundlers/rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/rollup.md",
-  "build-tools:101-module-bundlers/parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/parcel.md",
-  "build-tools:101-module-bundlers/vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/vite.md",
+  "build-tools:module-bundlers:webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md",
+  "build-tools:module-bundlers:esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md",
+  "build-tools:module-bundlers:rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md",
+  "build-tools:module-bundlers:parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md",
+  "build-tools:module-bundlers:vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md",
   "pick-a-framework": "/roadmaps/100-frontend/content/111-pick-a-framework/readme.md",
   "pick-a-framework:react-js": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md",
-  "pick-a-framework:100-react-js/recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/recoil.md",
-  "pick-a-framework:100-react-js/redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/redux.md",
-  "pick-a-framework:100-react-js/mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/mobx.md",
+  "pick-a-framework:react-js:recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md",
+  "pick-a-framework:react-js:redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md",
+  "pick-a-framework:react-js:mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md",
   "pick-a-framework:angular": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md",
-  "pick-a-framework:101-angular/rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/rxjs.md",
-  "pick-a-framework:101-angular/ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/ngrx.md",
+  "pick-a-framework:angular:rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md",
+  "pick-a-framework:angular:ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md",
   "pick-a-framework:vue-js": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md",
-  "pick-a-framework:102-vue-js/vuex": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/vuex.md",
+  "pick-a-framework:vue-js:vuex": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md",
   "modern-css": "/roadmaps/100-frontend/content/112-modern-css/readme.md",
   "modern-css:styled-components": "/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md",
   "modern-css:css-modules": "/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md",
@@ -80,13 +80,13 @@
   "web-components:shadow-dom": "/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md",
   "css-frameworks": "/roadmaps/100-frontend/content/114-css-frameworks/readme.md",
   "css-frameworks:js-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md",
-  "css-frameworks:114-js-first/chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/chakra-ui.md",
-  "css-frameworks:114-js-first/material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/material-ui.md",
-  "css-frameworks:114-js-first/radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/radix-ui.md",
-  "css-frameworks:114-js-first/tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/tailwind-css.md",
+  "css-frameworks:js-first:chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md",
+  "css-frameworks:js-first:material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md",
+  "css-frameworks:js-first:radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md",
+  "css-frameworks:js-first:tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md",
   "css-frameworks:css-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md",
-  "css-frameworks:114-css-first/bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bootstrap.md",
-  "css-frameworks:114-css-first/bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/bulma.md",
+  "css-frameworks:css-first:bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md",
+  "css-frameworks:css-first:bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md",
   "testing-your-apps": "/roadmaps/100-frontend/content/115-testing-your-apps/readme.md",
   "testing-your-apps:jest": "/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md",
   "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md",
@@ -101,12 +101,12 @@
   "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md",
   "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md",
   "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md",
-  "server-side-rendering:100-react-js/next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/next-js.md",
-  "server-side-rendering:100-react-js/after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/after-js.md",
+  "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md",
+  "server-side-rendering:react-js:after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md",
   "server-side-rendering:angular": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md",
-  "server-side-rendering:101-angular/universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/universal.md",
+  "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md",
   "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md",
-  "server-side-rendering:102-vue-js/nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/nuxt-js.md",
+  "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md",
   "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md",
   "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md",
   "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md",

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

@@ -0,0 +1 @@
+Here is how the internet work

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

@@ -0,0 +1 @@
+Here is the internet

pages/[roadmap]/[group].tsx

@@ -0,0 +1,154 @@
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Container,
+} from '@chakra-ui/react';
+import { GlobalHeader } from '../../components/global-header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
+import MdRenderer from '../../components/md-renderer';
+import Helmet from '../../components/helmet';
+import React from 'react';
+import { ChevronRightIcon } from '@chakra-ui/icons';
+
+type RoadmapProps = {
+  roadmap: RoadmapType;
+  group: string;
+};
+
+function TextualRoadmap(props: RoadmapProps) {
+  const { roadmap, group } = props;
+  if (!roadmap.contentPathsFilePath) {
+    return null;
+  }
+
+  // Remove trailing slashes
+  const contentsPathsFilePath = roadmap.contentPathsFilePath.replace(/^\//, '');
+  const contentPathMapping = require(`../../content/${contentsPathsFilePath}`);
+
+  const contentFilePath = contentPathMapping[group] || '';
+  const normalizedContentFilePath = contentFilePath.replace(/^\//, '');
+
+  const GroupContent = require(`../../content/${normalizedContentFilePath}`).default;
+
+  return (
+    <Container maxW={'container.md'} position="relative">
+      <Box d="block" m="60px 0 20px">
+        <Breadcrumb
+          fontWeight="medium"
+          fontSize="sm"
+          separator={<ChevronRightIcon color="gray.500" />}
+        >
+          <BreadcrumbItem>
+            <BreadcrumbLink color="blue.500" href="/frontend">
+              Frontend
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem>
+            <BreadcrumbLink color="blue.500" href="/frontend/internet">
+              Internet
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem isCurrentPage>
+            <BreadcrumbLink
+              color="blue.500"
+              href="/frontend/internet:what-is-internet"
+            >
+              What is Internet
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </Box>
+      <MdRenderer>
+        <GroupContent />
+      </MdRenderer>
+    </Container>
+  );
+}
+
+export default function Roadmap(props: RoadmapProps) {
+  const { roadmap, group } = props;
+
+  return (
+    <Box bg="white" minH="100vh">
+      <GlobalHeader />
+      <Helmet
+        title={roadmap?.seo?.title || roadmap.title}
+        description={roadmap?.seo?.description || roadmap.description}
+        keywords={roadmap?.seo.keywords || []}
+      />
+      <Box mb="60px">
+        <TextualRoadmap roadmap={roadmap} group={group} />
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
+  );
+}
+
+type StaticPathItem = {
+  params: {
+    roadmap: string;
+    group: string;
+  };
+};
+
+export async function getStaticPaths() {
+  const roadmaps = getAllRoadmaps();
+
+  // Return all the groups from here
+  const paramsList: StaticPathItem[] = roadmaps.flatMap((roadmap) => {
+    if (roadmap.contentPathsFilePath) {
+      const normalizedPath = roadmap.contentPathsFilePath.replace(/^\/+?/, '');
+      const contentPaths = require(`../../content/${normalizedPath}`);
+      const groupNames = Object.keys(contentPaths);
+
+      // For each of the group names, return the param list
+      return groupNames.map((groupName: string) => ({
+        params: {
+          roadmap: roadmap.id,
+          group: groupName,
+        },
+      }));
+    }
+
+    return {
+      params: {
+        roadmap: roadmap.id,
+        group: '',
+      },
+    };
+  });
+
+  return {
+    paths: paramsList,
+    fallback: false,
+  };
+}
+
+type ContextType = {
+  params: {
+    roadmap: string;
+    group: string;
+  };
+};
+
+export async function getStaticProps(context: ContextType) {
+  const roadmapId: string = context?.params?.roadmap;
+  const groupId: string = context?.params?.group;
+
+  return {
+    props: {
+      roadmap: getRoadmapById(roadmapId),
+      group: groupId,
+    },
+  };
+}

public/sitemap.xml

@@ -3,7 +3,7 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2021-12-03T18:57:23.101Z</lastmod>
+              <lastmod>2021-12-04T11:15:51.351Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -261,7 +261,7 @@
 <url>
               <loc>https://roadmap.sh/roadmaps</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2021-11-24T08:02:48.423Z</lastmod>
+              <lastmod>2021-12-03T19:10:57.335Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>

scripts/content-skeleton.ts

@@ -167,11 +167,13 @@ function createDirTree(
   const childrenDirNames = Object.keys(dirTree);
   const hasChildren = childrenDirNames.length !== 0;
 
+  // @todo write test for this, yolo for now
   const groupName = parentDir
     .replace(roadmapContentDirPath, '') // Remove base dir path
     .replace(/(^\/)|(\/$)/g, '') // Remove trailing slashes
     .replace(/(^\d+?-)/g, '') // Remove sorting information
-    .replace('/', ':'); // Replace slashes with `:`
+    .replaceAll('/', ':') // Replace slashes with `:`
+    .replace(/:\d+-/, ':');
 
   const sortOrder = sortOrders[groupName] || '';