Resolve merge conflicts

__tests__/path-map.spec.js

@@ -0,0 +1,84 @@
+const path = require('path');
+const fs = require('fs');
+const guides = require('../data/guides');
+const roadmaps = require('../data/roadmaps');
+
+const {
+  getPageRoutes,
+  getGuideRoutes,
+  getRoadmapRoutes
+} = require("../path-map");
+
+describe("Build scripts tests", () => {
+  test('it should generate valid pathmap for pages', () => {
+    const pageRoutes = getPageRoutes();
+
+    expect(pageRoutes).toEqual({
+      '/': { page: '/index' },
+      '/about': { page: '/about' },
+      '/privacy': { page: '/privacy' },
+      '/terms': { page: '/terms' },
+      '/guides': { page: '/guides/index' },
+      '/roadmaps': { page: '/roadmaps' },
+    });
+  });
+
+  test('it should generate valid guides pathmap', () => {
+    const expectedGuideRoutes = guides.reduce((acc, guide) => {
+      const [,, slug] = guide.url.split('/');
+      return {
+        ...acc,
+        [guide.url]: {
+          page: '/guides/[guide]',
+          query: slug,
+        }
+      };
+    }, {});
+
+    // Valid path map is generated
+    expect(expectedGuideRoutes).toEqual(getGuideRoutes());
+
+    const pageFilePath = path.join(__dirname, '../pages/guides/[guide].js');
+    const foundFilePath = fs.existsSync(pageFilePath) ? pageFilePath : '';
+
+    // Given page component exists
+    expect(foundFilePath).toEqual(pageFilePath);
+  });
+
+  test('it should have markdown file for each guide', () => {
+    guides.forEach(guide => {
+      const [,, slug] = guide.url.split('/');
+
+      const expectedFile = path.join(__dirname, `../data/guides/${slug}.md`);
+      const foundFile = fs.existsSync(expectedFile) ? expectedFile : '';
+
+      expect(foundFile).toEqual(expectedFile);
+    })
+  });
+
+  test('it should generate valid roadmap routes', () => {
+    const expectedPathMap = roadmaps.reduce((roadmapAcc, roadmap) => {
+      // Routes for each of the versions of this roadmap
+      const versionRoutes = roadmap.versions.reduce((versionAcc, version) => ({
+        ...versionAcc,
+        [`${roadmap.url}/${version}`]: {
+          page: '/[roadmap]/[version]',
+          query: `${roadmap.url.split('/')[1]}/${version}`,
+        }
+      }), {});
+
+      // Route for the route roadmap itself
+      return {
+        ...roadmapAcc,
+        [roadmap.url]: {
+          page: '/[roadmap]/index',
+          query: roadmap.url.split('/')[1]
+        },
+        // Expected roadmap for versions
+        ...versionRoutes
+      };
+    }, {});
+
+    expect(getRoadmapRoutes()).toEqual(expectedPathMap);
+  })
+});

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">
@@ -16,11 +16,11 @@ const FeaturedGuides = () => (
         { guides
           .filter(({ featured }) => featured)
           .map(guide => (
-            <GuideBlock guide={ guide } key={ guide.slug } />
+            <GuideBlock guide={ guide } key={ guide.url } />
           )) }
       </div>
     </div>
   </FeaturedContentWrap>
 );
 
-export default FeaturedGuides;
+export default FeaturedGuides;

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;
+export default FeaturedContent;

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">
@@ -21,11 +21,11 @@ const FeaturedRoadmaps = () => (
         { roadmaps
           .filter(({ featured }) => featured)
           .map(roadmap => (
-            <RoadmapBlock roadmap={ roadmap } key={ roadmap.slug } />
+            <RoadmapBlock roadmap={ roadmap } key={ roadmap.url } />
           )) }
       </div>
     </div>
   </FeaturedContentWrap>
 );
 
-export default FeaturedRoadmaps;
+export default FeaturedRoadmaps;

components/guide-block/index.js

@@ -1,12 +1,14 @@
 import Link from 'next/link';
+import formatDate from 'date-fns/format'
+
 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) || {};
   return (
     <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-      <Link href={ guide.slug } passHref>
+      <Link href={ guide.url } passHref>
         <BlockLink>
           <BlockTitle>{ guide.title }</BlockTitle>
           <BlockSubtitle>{ guide.featuredDescription || guide.description }</BlockSubtitle>
@@ -15,12 +17,12 @@ const GuideBlock = ({ guide }) => {
               <AuthorImage src={ author.picture } />
               <AuthorName>{ author.name }</AuthorName>
             </Author>
-            <PublishDate>{ guide.updatedAt }</PublishDate>
+            <PublishDate>{ formatDate(new Date(guide.createdAt), 'MMMM d, yyyy') }</PublishDate>
           </BlockMeta>
         </BlockLink>
       </Link>
     </div>
   )
 };
 
-export default GuideBlock;
+export default GuideBlock;

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) => (
   </MDXProvider>
 );
 
-export default GuideBody;
+export default GuideBody;

components/guide-body/style.js

@@ -5,4 +5,5 @@ export const GuideBodyWrap = styled.div`
   max-width: 750px;
   margin: 0 auto;
   padding: 0 20px;
-`;
+  min-height: 300px;
+`;

components/guide-footer/index.js

@@ -1,22 +1,46 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
-import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterBg, FooterContainer, FooterWrap, ShareIcons, ShareWrap } from './style';
+import { getContributionUrl } from "lib/guide";
+import {
+  getTwitterUrl,
+  getTwitterShareUrl,
+  getFacebookShareUrl,
+  getRedditShareUrl,
+  getHnShareUrl
+} from "lib/url";
+import {
+  AuthorBio,
+  AuthorImg,
+  AuthorInfoWrap,
+  AuthorMeta,
+  ContributeIcon,
+  FooterBg,
+  FooterContainer,
+  FooterWrap,
+  ShareIcons,
+  ShareWrap
+} from './style';
 
 
-const GuideFooter = (props) => (
+const GuideFooter = ({
+  guide,
+  guide: {
+    author = {}
+  } = {}
+}) => (
   <FooterWrap>
     <FooterBg className="border-top">
       <FooterContainer>
         <ShareWrap>
           <ContributeIcon>
-            <a href="#">
+            <a href={ getContributionUrl(guide) } target="_blank">
               <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
               <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
               <FontAwesomeIcon icon={faGithub}/>
             </a>
           </ContributeIcon>
           <ContributeIcon hasMargins>
-            <a href="#">
+            <a href={ getTwitterUrl(author.twitter) } target="_blank">
               <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
               <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
               <FontAwesomeIcon icon={faTwitter}/>
@@ -25,10 +49,18 @@ const GuideFooter = (props) => (
           <ShareIcons>
             <span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
             <span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
-            <a href="#"><FontAwesomeIcon icon={faTwitterSquare}/></a>
-            <a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
-            <a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
-            <a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></a>
+            <a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
+              <FontAwesomeIcon icon={faTwitterSquare}/>
+            </a>
+            <a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
+              <FontAwesomeIcon icon={faFacebookSquare}/>
+            </a>
+            <a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+              <FontAwesomeIcon icon={faRedditSquare}/>
+            </a>
+            <a href={ getHnShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+              <FontAwesomeIcon icon={faHackerNewsSquare}/>
+            </a>
           </ShareIcons>
         </ShareWrap>
       </FooterContainer>
@@ -37,10 +69,10 @@ const GuideFooter = (props) => (
     <FooterBg className="border-top">
       <FooterContainer>
         <AuthorInfoWrap>
-          <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt=""/>
+          <AuthorImg src={ author.picture } alt={ author.name }/>
           <AuthorMeta>
-            <h4><a href="#">Kamran Ahmed</a></h4>
-            <AuthorBio>Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones.</AuthorBio>
+            <h4><a href={ getTwitterUrl(author.twitter) } target="_blank">{ author.name }</a></h4>
+            <AuthorBio>{ author.bio }</AuthorBio>
           </AuthorMeta>
         </AuthorInfoWrap>
       </FooterContainer>

components/guide-header/index.js

@@ -1,3 +1,4 @@
+import formatDate from 'date-fns/format'
 import {
   ActionItems,
   AuthorImage,
@@ -9,21 +10,28 @@ import {
   GuideTitle,
   HeaderWrap,
 } from './style';
+import { getContributionUrl } from "lib/guide";
+import { getTwitterUrl } from "lib/url";
 
-const GuideHeader = (props) => (
+const GuideHeader = ({
+ guide,
+ guide: {
+   author = {}
+ } = {}
+}) => (
   <HeaderWrap className="border-bottom">
     <GuideMeta>
-      <GuideAuthor href="https://github.com/kamranahmedse" target="_blank">
-        <AuthorImage src="/static/authors/kamranahmedse.jpeg" />
-        Kamran Ahmed
+      <GuideAuthor href={ getTwitterUrl(author.twitter) } target="_blank">
+        <AuthorImage src={ author.picture } />
+        { author.name }
       </GuideAuthor>
       &middot;
-      <GuideDate>Wednesday, October 9th 2019</GuideDate>
+      <GuideDate>{ formatDate(new Date(guide.createdAt), 'EEEE, MMMM d yyyy') }</GuideDate>
       &middot;
-      <EditGuide href="#">Improve this Guide</EditGuide>
+      <EditGuide href={ getContributionUrl(guide) } target="_blank">Improve this Guide</EditGuide>
     </GuideMeta>
-    <GuideTitle>Design Patterns for Humans</GuideTitle>
-    <GuideSubtitle>An ultra-simplified explanation to design patterns</GuideSubtitle>
+    <GuideTitle>{ guide.title }</GuideTitle>
+    <GuideSubtitle>{ guide.description }</GuideSubtitle>
     <ActionItems>
     </ActionItems>
   </HeaderWrap>

components/roadmap-block/index.js

@@ -3,7 +3,7 @@ import { BlockLink, BlockSubtitle, BlockTitle } from './style';
 
 const RoadmapBlock = ({ roadmap }) => (
   <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-    <Link href={ roadmap.slug } passHref>
+    <Link href={ roadmap.url } passHref>
       <BlockLink>
         <BlockTitle>{ roadmap.title }</BlockTitle>
         <BlockSubtitle>{ roadmap.featuredDescription || roadmap.description }</BlockSubtitle>
@@ -12,4 +12,4 @@ const RoadmapBlock = ({ roadmap }) => (
   </div>
 );
 
-export default RoadmapBlock;
+export default RoadmapBlock;

components/roadmap-summary/index.js

@@ -24,7 +24,7 @@ const RoadmapSummary = ({ roadmap }) => (
       <Description>{ roadmap.description }</Description>
       <VersionList className="border-bottom">
         { (roadmap.versions || []).map(versionItem => (
-          <Link href={ `${roadmap.slug}/${versionItem}` } passHref key={ versionItem }>
+          <Link href={ `${roadmap.url}/${versionItem}` } passHref key={ versionItem }>
             <VersionLink className={ classNames({
               active: isActiveRoadmap(versionItem, roadmap.version),
             }) }>{ versionItem } Version</VersionLink>
@@ -40,4 +40,4 @@ const RoadmapSummary = ({ roadmap }) => (
   </SummaryContainer>
 );
 
-export default RoadmapSummary;
+export default RoadmapSummary;