Add module resolver and refactor guide loading

components/featured-content/guides.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { FeaturedContentWrap } from './style';
-import guides from '../../data/guides';
-import GuideBlock from '../guide-block';
+import guides from 'data/guides';
+import GuideBlock from 'components/guide-block';
 
 const FeaturedGuides = () => (
   <FeaturedContentWrap className="featured-content-wrap">

components/featured-content/index.js

@@ -1,5 +1,4 @@
 import { FeaturedWrap } from './style';
-import FeaturedJourneys from './journeys';
 import FeaturedGuides from './guides';
 import FeaturedRoadmaps from './roadmaps';
 

components/featured-content/roadmaps.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { FeaturedContentWrap } from './style';
-import roadmaps from '../../data/roadmaps';
-import RoadmapBlock from '../roadmap-block';
+import roadmaps from 'data/roadmaps';
+import RoadmapBlock from 'components/roadmap-block';
 
 const FeaturedRoadmaps = () => (
   <FeaturedContentWrap className="featured-content-wrap">

components/guide-block/index.js

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
-import { findByUsername } from '../../lib/author';
+import { findByUsername } from 'lib/author';
 
 const GuideBlock = ({ guide }) => {
   const author = findByUsername(guide.author) || {};

components/guide-body/index.js

@@ -1,5 +1,5 @@
 import { MDXProvider } from '@mdx-js/react';
-import MdxComponents from '../mdx-components';
+import MdxComponents from 'components/mdx-components';
 import { GuideBodyWrap } from './style';
 
 const GuideBody = (props) => (

data/guides.json

@@ -3,6 +3,7 @@
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
     "slug": "/guides/design-patterns-for-humans",
+    "path": "/data/guides/design-patterns-for-humans.md",
     "featured": true,
     "author": "kamranahmedse",
     "createdAt": "June 12, 2019",
@@ -12,6 +13,7 @@
     "title": "Learn Regex",
     "description": "An easy to understand guide on regular expressions with real world examples",
     "slug": "/guides/learn-regex",
+    "path": "/data/guides/learn-regex.md",
     "featured": true,
     "author": "ziishaned",
     "createdDate": "June 19, 2019",
@@ -21,6 +23,7 @@
     "title": "Bash Guide",
     "description": "Easy to understand guide for bash with real world usage examples.",
     "slug": "/guides/bash-guide",
+    "path": "/data/guides/bash-guide.md",
     "featured": true,
     "author": "idnan",
     "createdAt": "May 18, 2018",
@@ -30,6 +33,7 @@
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
     "slug": "/guides/dns-in-one-picture",
+    "path": "/data/guides/dns-in-one-picture.md",
     "featured": true,
     "author": "kamranahmedse",
     "createdAt": "May 11, 2018",
@@ -39,6 +43,7 @@
     "title": "Using React Hooks",
     "description": "Start using React hooks in your react applications today with this guide.",
     "slug": "/guides/using-react-hooks",
+    "path": "/data/guides/using-react-hooks.md",
     "featured": true,
     "author": "kamranahmedse",
     "createdAt": "October 22, 2019",
@@ -48,6 +53,7 @@
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
     "slug": "/guides/http-caching",
+    "path": "/data/guides/http-caching.md",
     "featured": true,
     "author": "kamranahmedse",
     "updatedAt": "November 01, 2019",

layouts/guide/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import DefaultLayout from '../default';
-import PageHeader from '../../components/page-header';
-import PageFooter from '../../components/page-footer';
+import DefaultLayout from 'layouts/default';
+import PageHeader from 'components/page-header';
+import PageFooter from 'components/page-footer';
 
 class GuideLayout extends React.Component {
   render() {

lib/author.js

@@ -1,3 +1,3 @@
-import authors from "../data/authors";
+import authors from "data/authors";
 
 export const findByUsername = (username) => authors.find(author => author.username === username) || {};

lib/guide.js

@@ -0,0 +1,28 @@
+import guides from "data/guides";
+
+export const getRequestedGuide = req => {
+  const guide = guides.find(guide => guide.slug === req.url);
+  if (!guide) {
+    return null;
+  }
+
+  // Remove any slashes from the beginning
+  //   Webpack module resolver takes care of the base path
+  //   Look at `config.resolve.modules` in next.config.js
+  // Remove `.md` from the end
+  //   We need to put that in `require` below to make
+  //   webpack bundle all the markdown files
+  const path = guide.path.replace(/^\//, '').replace(/\.md$/, '');
+
+  try {
+    return {
+      ...guide,
+      component: require(`../${path}.md`).default,
+      // component: require(guide.path.replace(/^\//, '')).default
+    };
+  } catch (e) {
+    console.log(e);
+  }
+
+  return null;
+};

lib/roadmap.js

@@ -1,4 +1,4 @@
-import roadmaps from "../data/roadmaps";
+import roadmaps from "data/roadmaps";
 
 export const getRequestedRoadmap = req => {
   // Considering it a new roadmap URL e.g. `/roadmaps/frontend`

lib/server.js

@@ -6,6 +6,7 @@
 export const serverOnlyProps = (callback) => {
   return async (props) => {
     if (process.browser) {
+      // noinspection ES6ModulesDependencies,JSUnresolvedVariable
       return __NEXT_DATA__.props.pageProps;
     }
 

next.config.js

@@ -1,6 +1,7 @@
+const path = require('path');
 const withSass = require('@zeit/next-sass');
 const withCSS = require('@zeit/next-css');
-const rehypePrism = require('@mapbox/rehype-prism')
+const rehypePrism = require('@mapbox/rehype-prism');
 
 const withMDX = require('@next/mdx')({
   extension: /\.(md|mdx)?$/,
@@ -19,6 +20,7 @@ const options = {
       '/terms': { page: '/terms' },
       '/roadmaps': { page: '/roadmaps' },
       '/guides': { page: '/guides' },
+      '/guides/design-patterns-for-humans': { page: '/guides/[guide]', query: "design-patterns-for-humans" },
       '/frontend': { page: '/[fallback]', query: "frontend" },
       '/backend': { page: '/[fallback]', query: "backend" },
       '/devops': { page: '/[fallback]', query: "devops" },
@@ -38,6 +40,8 @@ const options = {
       use: ['@svgr/webpack'],
     });
 
+  config.resolve.modules.push(path.resolve('./'));
+
     // Allow loading images
     config.module.rules.push({
       test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,

pages/[fallback]/index.js

@@ -1,7 +1,7 @@
 import Error from 'next/error';
-import Roadmap from '../roadmaps/[roadmap]/index';
-import { serverOnlyProps } from '../../lib/server';
-import { getRequestedRoadmap } from '../../lib/roadmap';
+import Roadmap from 'pages/roadmaps/[roadmap]/index';
+import { serverOnlyProps } from 'lib/server';
+import { getRequestedRoadmap } from 'lib/roadmap';
 
 // Fallback page to handle the old roadmap pages implementation
 const OldRoadmap = ({ roadmap }) => {

pages/about.js

@@ -1,8 +1,8 @@
-import AboutHeader from '../components/about-header/index';
-import PageFooter from '../components/page-footer/index';
-import PageHeader from '../components/page-header/index';
-import DefaultLayout from '../layouts/default/index';
-import FaqList from '../components/faq-list/index';
+import AboutHeader from 'components/about-header/index';
+import PageFooter from 'components/page-footer/index';
+import PageHeader from 'components/page-header/index';
+import DefaultLayout from 'layouts/default/index';
+import FaqList from 'components/faq-list/index';
 
 const About = () => (
   <DefaultLayout>

pages/guides/[guide].js

@@ -1,18 +1,22 @@
-import GuideLayout from '../../layouts/guide';
-import { serverOnlyProps } from '../../lib/server';
-
-import GuideHeader from '../../components/guide-header';
-import GuideContent from '../../data/guides/keep-it-clean.md';
-import GuideBody from '../../components/guide-body';
-import ShareGuide from '../../components/share-guide';
-import GuideFooter from '../../components/guide-footer';
+import Error from "next/error";
+import GuideLayout from 'layouts/guide';
+import { serverOnlyProps } from 'lib/server';
+import GuideHeader from 'components/guide-header';
+import GuideBody from 'components/guide-body';
+import ShareGuide from 'components/share-guide';
+import GuideFooter from 'components/guide-footer';
+import { getRequestedGuide } from "lib/guide";
 
 const Guide = ({ guide }) => {
+  if (!guide) {
+    return <Error statusCode={404} />
+  }
+
   return (
     <GuideLayout>
       <GuideHeader/>
       <GuideBody>
-        <GuideContent/>
+        <guide.component />
         <ShareGuide/>
       </GuideBody>
       <GuideFooter/>
@@ -21,13 +25,8 @@ const Guide = ({ guide }) => {
 };
 
 Guide.getInitialProps = serverOnlyProps(({ req }) => {
-  // Remove URL chunk to make it a slug e.g. /guides/some-guide-item to become `some-guide-item
-  const slug = req.url
-    .replace(/^\/*?guides\/*?/, '/')
-    .replace(/\/*$/, '');
-
   return {
-    slug,
+    guide: getRequestedGuide(req)
   };
 });
 

pages/guides/index.js

@@ -1,5 +1,5 @@
-import DefaultLayout from '../../layouts/default/index';
-import PageHeader from '../../components/page-header/index';
+import DefaultLayout from 'layouts/default/index';
+import PageHeader from 'components/page-header/index';
 
 const Roadmap = () => (
   <DefaultLayout>

pages/home.js

@@ -1,8 +1,8 @@
-import FeaturedContent from '../components/featured-content/index';
-import HeroSection from '../components/hero-section/index';
-import PageFooter from '../components/page-footer/index';
-import PageHeader from '../components/page-header/index';
-import DefaultLayout from '../layouts/default/index';
+import FeaturedContent from 'components/featured-content/index';
+import HeroSection from 'components/hero-section/index';
+import PageFooter from 'components/page-footer/index';
+import PageHeader from 'components/page-header/index';
+import DefaultLayout from 'layouts/default/index';
 
 const Home = (props) => (
   <DefaultLayout>

pages/index.js

@@ -1,5 +1,5 @@
 import Home from './home';
-import DefaultLayout from '../layouts/default';
+import DefaultLayout from 'layouts/default';
 
 const Index = () => (
   <DefaultLayout>

pages/privacy.js

@@ -1,7 +1,7 @@
-import PageHeader from '../components/page-header/index';
-import PageFooter from '../components/page-footer/index';
-import { TosPage } from '../components/tos-page/index';
-import DefaultLayout from '../layouts/default/index';
+import PageHeader from 'components/page-header/index';
+import PageFooter from 'components/page-footer/index';
+import { TosPage } from 'components/tos-page/index';
+import DefaultLayout from 'layouts/default/index';
 
 const Privacy = () => (
   <DefaultLayout>

pages/roadmaps/[roadmap]/index.js

@@ -1,10 +1,10 @@
 import Error from 'next/error';
-import DefaultLayout from '../../../layouts/default';
-import { serverOnlyProps } from '../../../lib/server';
-import PageHeader from '../../../components/page-header';
-import PageFooter from '../../../components/page-footer';
-import { getRequestedRoadmap } from '../../../lib/roadmap';
-import RoadmapSummary from '../../../components/roadmap-summary';
+import DefaultLayout from 'layouts/default';
+import { serverOnlyProps } from 'lib/server';
+import PageHeader from 'components/page-header';
+import PageFooter from 'components/page-footer';
+import { getRequestedRoadmap } from 'lib/roadmap';
+import RoadmapSummary from 'components/roadmap-summary';
 
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {

pages/roadmaps/index.js

@@ -1,5 +1,5 @@
-import DefaultLayout from '../../layouts/default/index';
-import PageHeader from '../../components/page-header/index';
+import DefaultLayout from 'layouts/default/index';
+import PageHeader from 'components/page-header/index';
 
 const Roadmap = () => (
   <DefaultLayout>

pages/terms.js

@@ -1,7 +1,7 @@
-import PageFooter from '../components/page-footer/index';
-import PageHeader from '../components/page-header/index';
-import { TosPage } from '../components/tos-page/index';
-import DefaultLayout from '../layouts/default/index';
+import PageFooter from 'components/page-footer/index';
+import PageHeader from 'components/page-header/index';
+import { TosPage } from 'components/tos-page/index';
+import DefaultLayout from 'layouts/default/index';
 
 const Terms = () => (
   <DefaultLayout>