diff --git a/layouts/default/global.scss b/layouts/default/global.scss
index a1e978fc6..9e394728b 100644
--- a/layouts/default/global.scss
+++ b/layouts/default/global.scss
@@ -1,4 +1,5 @@
@import '~bootstrap/dist/css/bootstrap.min.css';
+@import '~prismjs/themes/prism.css';
.container-small {
max-width: 800px;
diff --git a/layouts/guide/index.js b/layouts/guide/index.js
new file mode 100644
index 000000000..0292ae4fb
--- /dev/null
+++ b/layouts/guide/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import DefaultLayout from '../default';
+import PageHeader from '../../components/page-header';
+import PageFooter from '../../components/page-footer';
+
+class GuideLayout extends React.Component {
+ render() {
+ const { children } = this.props;
+
+ return (
+
+
+
+ { children }
+
+
+
+ );
+ }
+}
+
+export default GuideLayout;
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 6abfe91d9..66833b8ba 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,14 +1,24 @@
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
+const rehypePrism = require('@mapbox/rehype-prism')
-module.exports = withCSS(withSass({
+const withMDX = require('@next/mdx')({
+ extension: /\.(md|mdx)?$/,
+ options: {
+ rehypePlugins: [rehypePrism],
+ },
+});
+
+const options = {
exportPathMap: () => {
+ // @todo make it dynamic for pages, authors and guides
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/privacy': { page: '/privacy' },
'/terms': { page: '/terms' },
'/roadmaps': { page: '/roadmaps' },
+ '/guides': { page: '/guides' },
'/frontend': { page: '/[fallback]', query: "frontend" },
'/backend': { page: '/[fallback]', query: "backend" },
'/devops': { page: '/[fallback]', query: "devops" },
@@ -18,6 +28,9 @@ module.exports = withCSS(withSass({
};
},
+ // Allow mdx and md files to be pages
+ pageExtensions: ['jsx', 'js', 'mdx', 'md'],
+
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
@@ -31,4 +44,11 @@ module.exports = withCSS(withSass({
return config
},
-}));
\ No newline at end of file
+};
+
+//
+let nextConfig = withSass(options);
+nextConfig = withCSS(nextConfig);
+nextConfig = withMDX(nextConfig);
+
+module.exports = nextConfig;
\ No newline at end of file
diff --git a/package.json b/package.json
index 8731f777c..49ccfb4e4 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,9 @@
"@fortawesome/free-brands-svg-icons": "^5.10.2",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/react-fontawesome": "^0.1.4",
+ "@mapbox/rehype-prism": "^0.3.1",
+ "@mdx-js/loader": "^1.5.1",
+ "@next/mdx": "^9.1.2",
"@zeit/next-css": "latest",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^9.6.1",
diff --git a/pages/guides/design-patterns-for-humans.mdx b/pages/guides/design-patterns-for-humans.mdx
new file mode 100644
index 000000000..b1eb266a6
--- /dev/null
+++ b/pages/guides/design-patterns-for-humans.mdx
@@ -0,0 +1,11 @@
+import Guide from '../../layouts/guide';
+
+## Here be dragons
+> There should be dragons here
+
+```javascript
+const abc = 'abc';
+alert(abc)
+```
+
+export default ({ children }) => {children}
\ No newline at end of file
diff --git a/pages/guides/index.js b/pages/guides/index.js
new file mode 100644
index 000000000..fd6878e16
--- /dev/null
+++ b/pages/guides/index.js
@@ -0,0 +1,13 @@
+import DefaultLayout from '../../layouts/default/index';
+import PageHeader from '../../components/page-header/index';
+
+const Roadmap = () => (
+
+
+
+
+);
+
+export default Roadmap;
\ No newline at end of file
diff --git a/pages/roadmaps/index.js b/pages/roadmaps/index.js
index 279c97ad8..e5bbf639e 100644
--- a/pages/roadmaps/index.js
+++ b/pages/roadmaps/index.js
@@ -4,7 +4,9 @@ import PageHeader from '../../components/page-header/index';
const Roadmap = () => (
- Show all roadmaps here
+
+
Show all roadmaps here
+