github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add module resolver and refactor guide loading

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent a4338eb00c
commit 2cf22c1777
23 changed files with 116 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      components/featured-content/guides.js
  2. 3
      components/featured-content/index.js
  3. 6
      components/featured-content/roadmaps.js
  4. 4
      components/guide-block/index.js
  5. 4
      components/guide-body/index.js
  6. 8
      data/guides.json
  7. 0
      data/guides/learn-regex.md
  8. 8
      layouts/guide/index.js
  9. 4
      lib/author.js
  10. 28
      lib/guide.js
  11. 4
      lib/roadmap.js
  12. 3
      lib/server.js
  13. 8
      next.config.js
  14. 8
      pages/[fallback]/index.js
  15. 12
      pages/about.js
  16. 29
      pages/guides/[guide].js
  17. 6
      pages/guides/index.js
  18. 12
      pages/home.js
  19. 2
      pages/index.js
  20. 10
      pages/privacy.js
  21. 14
      pages/roadmaps/[roadmap]/index.js
  22. 6
      pages/roadmaps/index.js
  23. 10
      pages/terms.js

6
components/featured-content/guides.js
Unescape View File

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

3
components/featured-content/index.js
Unescape View File

@ -1,5 +1,4 @@
import { FeaturedWrap } from './style'; import { FeaturedWrap } from './style';
import FeaturedJourneys from './journeys';
import FeaturedGuides from './guides'; import FeaturedGuides from './guides';
import FeaturedRoadmaps from './roadmaps'; import FeaturedRoadmaps from './roadmaps';
@ -14,4 +13,4 @@ FeaturedContent.defaultProps = {
className: '', className: '',
}; };
export default FeaturedContent; export default FeaturedContent;

6
components/featured-content/roadmaps.js
Unescape View File

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

4
components/guide-block/index.js
Unescape View File

@ -1,6 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style'; 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 GuideBlock = ({ guide }) => {
const author = findByUsername(guide.author) || {}; const author = findByUsername(guide.author) || {};
@ -23,4 +23,4 @@ const GuideBlock = ({ guide }) => {
) )
}; };
export default GuideBlock; export default GuideBlock;

4
components/guide-body/index.js
Unescape View File

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

8
data/guides.json
Unescape View File

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

0
data/guides/keep-it-clean.md → data/guides/learn-regex.md
Unescape View File

8
layouts/guide/index.js
Unescape View File

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

4
lib/author.js
Unescape View File

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

28
lib/guide.js
Unescape View File

@ -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;
};

4
lib/roadmap.js
Unescape View File

@ -1,4 +1,4 @@
import roadmaps from "../data/roadmaps"; import roadmaps from "data/roadmaps";
export const getRequestedRoadmap = req => { export const getRequestedRoadmap = req => {
// Considering it a new roadmap URL e.g. `/roadmaps/frontend` // Considering it a new roadmap URL e.g. `/roadmaps/frontend`
@ -29,4 +29,4 @@ export const getRequestedRoadmap = req => {
version: foundVersion, version: foundVersion,
picture: (foundRoadmap.picture || '').replace('{version}', foundVersion), picture: (foundRoadmap.picture || '').replace('{version}', foundVersion),
}; };
}; };

3
lib/server.js
Unescape View File

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

8
next.config.js
Unescape View File

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

8
pages/[fallback]/index.js
Unescape View File

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

12
pages/about.js
Unescape View File

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

29
pages/guides/[guide].js
Unescape View File

@ -1,18 +1,22 @@
import GuideLayout from '../../layouts/guide'; import Error from "next/error";
import { serverOnlyProps } from '../../lib/server'; import GuideLayout from 'layouts/guide';
import { serverOnlyProps } from 'lib/server';
import GuideHeader from '../../components/guide-header'; import GuideHeader from 'components/guide-header';
import GuideContent from '../../data/guides/keep-it-clean.md'; import GuideBody from 'components/guide-body';
import GuideBody from '../../components/guide-body'; import ShareGuide from 'components/share-guide';
import ShareGuide from '../../components/share-guide'; import GuideFooter from 'components/guide-footer';
import GuideFooter from '../../components/guide-footer'; import { getRequestedGuide } from "lib/guide";
const Guide = ({ guide }) => { const Guide = ({ guide }) => {
if (!guide) {
return <Error statusCode={404} />
}
return ( return (
<GuideLayout> <GuideLayout>
<GuideHeader/> <GuideHeader/>
<GuideBody> <GuideBody>
<GuideContent/> <guide.component />
<ShareGuide/> <ShareGuide/>
</GuideBody> </GuideBody>
<GuideFooter/> <GuideFooter/>
@ -21,13 +25,8 @@ const Guide = ({ guide }) => {
}; };
Guide.getInitialProps = serverOnlyProps(({ req }) => { 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 { return {
slug, guide: getRequestedGuide(req)
}; };
}); });

6
pages/guides/index.js
Unescape View File

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

12
pages/home.js
Unescape View File

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

2
pages/index.js
Unescape View File

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

10
pages/privacy.js
Unescape View File

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

14
pages/roadmaps/[roadmap]/index.js
Unescape View File

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

6
pages/roadmaps/index.js
Unescape View File

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

10
pages/terms.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save