gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add module resolver and refactor guide loading

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-06 18:20:09 +04:00
parent a4338eb00c
commit 2cf22c1777
23 changed files with 116 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/featured-content/guides.js
View File

@ -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">

1
components/featured-content/index.js
View File

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

4
components/featured-content/roadmaps.js
View File

@ -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">

2
components/guide-block/index.js
View File

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

2
components/guide-body/index.js
View File

@ -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) => (

6
data/guides.json
View File

@ -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",

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

6
layouts/guide/index.js
View File

@ -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() {

2
lib/author.js
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) || {};

28
lib/guide.js Normal file
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;
};

2
lib/roadmap.js
View File

@ -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`

1
lib/server.js
View File

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

6
next.config.js
View File

@ -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)$/,

6
pages/[fallback]/index.js
View File

@ -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 }) => {

10
pages/about.js
View File

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

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

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

4
pages/guides/index.js
View File

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

10
pages/home.js
View File

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

2
pages/index.js
View File

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

8
pages/privacy.js
View File

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

12
pages/roadmaps/[roadmap]/index.js
View File

@ -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) {

4
pages/roadmaps/index.js
View File

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

8
pages/terms.js
View File

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