diff --git a/components/featured-content/guides.js b/components/featured-content/guides.js
index acab1fe80..8e76eae67 100644
--- a/components/featured-content/guides.js
+++ b/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 = () => (
@@ -23,4 +23,4 @@ const FeaturedGuides = () => (
);
-export default FeaturedGuides;
\ No newline at end of file
+export default FeaturedGuides;
diff --git a/components/featured-content/index.js b/components/featured-content/index.js
index 88a80197b..665fd2d4e 100644
--- a/components/featured-content/index.js
+++ b/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';
@@ -14,4 +13,4 @@ FeaturedContent.defaultProps = {
className: '',
};
-export default FeaturedContent;
\ No newline at end of file
+export default FeaturedContent;
diff --git a/components/featured-content/roadmaps.js b/components/featured-content/roadmaps.js
index 37ebbb793..1feadaa80 100644
--- a/components/featured-content/roadmaps.js
+++ b/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 = () => (
@@ -28,4 +28,4 @@ const FeaturedRoadmaps = () => (
);
-export default FeaturedRoadmaps;
\ No newline at end of file
+export default FeaturedRoadmaps;
diff --git a/components/guide-block/index.js b/components/guide-block/index.js
index 606475948..c19afd66f 100644
--- a/components/guide-block/index.js
+++ b/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) || {};
@@ -23,4 +23,4 @@ const GuideBlock = ({ guide }) => {
)
};
-export default GuideBlock;
\ No newline at end of file
+export default GuideBlock;
diff --git a/components/guide-body/index.js b/components/guide-body/index.js
index 1bc9681f3..c0ffc8dc6 100644
--- a/components/guide-body/index.js
+++ b/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) => (
@@ -10,4 +10,4 @@ const GuideBody = (props) => (
);
-export default GuideBody;
\ No newline at end of file
+export default GuideBody;
diff --git a/data/guides.json b/data/guides.json
index 4b4e7acd9..50100927a 100644
--- a/data/guides.json
+++ b/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,9 +53,10 @@
"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",
"createdAt": "November 01, 2019"
}
-]
\ No newline at end of file
+]
diff --git a/data/guides/keep-it-clean.md b/data/guides/learn-regex.md
similarity index 100%
rename from data/guides/keep-it-clean.md
rename to data/guides/learn-regex.md
diff --git a/layouts/guide/index.js b/layouts/guide/index.js
index e4c67a348..71a3640ad 100644
--- a/layouts/guide/index.js
+++ b/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() {
@@ -17,4 +17,4 @@ class GuideLayout extends React.Component {
}
}
-export default GuideLayout;
\ No newline at end of file
+export default GuideLayout;
diff --git a/lib/author.js b/lib/author.js
index fc89ff989..9c53b1c6c 100644
--- a/lib/author.js
+++ b/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) || {};
\ No newline at end of file
+export const findByUsername = (username) => authors.find(author => author.username === username) || {};
diff --git a/lib/guide.js b/lib/guide.js
new file mode 100644
index 000000000..e51a66368
--- /dev/null
+++ b/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;
+};
diff --git a/lib/roadmap.js b/lib/roadmap.js
index c4078fa53..b84101020 100644
--- a/lib/roadmap.js
+++ b/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`
@@ -29,4 +29,4 @@ export const getRequestedRoadmap = req => {
version: foundVersion,
picture: (foundRoadmap.picture || '').replace('{version}', foundVersion),
};
-};
\ No newline at end of file
+};
diff --git a/lib/server.js b/lib/server.js
index f395a112a..4fa19c432 100644
--- a/lib/server.js
+++ b/lib/server.js
@@ -6,9 +6,10 @@
export const serverOnlyProps = (callback) => {
return async (props) => {
if (process.browser) {
+ // noinspection ES6ModulesDependencies,JSUnresolvedVariable
return __NEXT_DATA__.props.pageProps;
}
return await callback(props)
};
-};
\ No newline at end of file
+};
diff --git a/next.config.js b/next.config.js
index d147765e9..652c592e2 100644
--- a/next.config.js
+++ b/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)$/,
@@ -58,4 +62,4 @@ let nextConfig = withSass(options);
nextConfig = withCSS(nextConfig);
nextConfig = withMDX(nextConfig);
-module.exports = nextConfig;
\ No newline at end of file
+module.exports = nextConfig;
diff --git a/pages/[fallback]/index.js b/pages/[fallback]/index.js
index 6880a9214..f6ae56d6c 100644
--- a/pages/[fallback]/index.js
+++ b/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 }) => {
@@ -19,4 +19,4 @@ OldRoadmap.getInitialProps = serverOnlyProps(({ req }) => {
});
-export default OldRoadmap;
\ No newline at end of file
+export default OldRoadmap;
diff --git a/pages/about.js b/pages/about.js
index 776227841..b71fdcb4a 100644
--- a/pages/about.js
+++ b/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 = () => (
@@ -13,4 +13,4 @@ const About = () => (
);
-export default About;
\ No newline at end of file
+export default About;
diff --git a/pages/guides/[guide].js b/pages/guides/[guide].js
index e4324d173..3fcbf97e8 100644
--- a/pages/guides/[guide].js
+++ b/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
+ }
+
return (
-
+
@@ -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)
};
});
diff --git a/pages/guides/index.js b/pages/guides/index.js
index fd6878e16..58864bbbc 100644
--- a/pages/guides/index.js
+++ b/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 = () => (
@@ -10,4 +10,4 @@ const Roadmap = () => (
);
-export default Roadmap;
\ No newline at end of file
+export default Roadmap;
diff --git a/pages/home.js b/pages/home.js
index c980aaa88..f3313472e 100644
--- a/pages/home.js
+++ b/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) => (
@@ -13,4 +13,4 @@ const Home = (props) => (
);
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/pages/index.js b/pages/index.js
index 6066fa5d0..202ab2803 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
import Home from './home';
-import DefaultLayout from '../layouts/default';
+import DefaultLayout from 'layouts/default';
const Index = () => (
diff --git a/pages/privacy.js b/pages/privacy.js
index 9c424edbe..43f3a9a58 100644
--- a/pages/privacy.js
+++ b/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 = () => (
@@ -109,4 +109,4 @@ const Privacy = () => (
);
-export default Privacy;
\ No newline at end of file
+export default Privacy;
diff --git a/pages/roadmaps/[roadmap]/index.js b/pages/roadmaps/[roadmap]/index.js
index 53a410fee..eb852c3d4 100644
--- a/pages/roadmaps/[roadmap]/index.js
+++ b/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) {
@@ -26,4 +26,4 @@ Roadmap.getInitialProps = serverOnlyProps(({ req }) => {
};
});
-export default Roadmap;
\ No newline at end of file
+export default Roadmap;
diff --git a/pages/roadmaps/index.js b/pages/roadmaps/index.js
index e5bbf639e..290cc371c 100644
--- a/pages/roadmaps/index.js
+++ b/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 = () => (
@@ -10,4 +10,4 @@ const Roadmap = () => (
);
-export default Roadmap;
\ No newline at end of file
+export default Roadmap;
diff --git a/pages/terms.js b/pages/terms.js
index eb0bacdf4..ed705bf28 100644
--- a/pages/terms.js
+++ b/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 = () => (
@@ -162,4 +162,4 @@ const Terms = () => (
);
-export default Terms;
\ No newline at end of file
+export default Terms;