Make guide page dynamic

components/guide-footer/index.js

@@ -1,22 +1,28 @@
 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";
 
 
-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={ 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}/>
@@ -37,10 +43,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={ author.twitter } target="_blank">{ author.name }</a></h4>
+            <AuthorBio>{ author.bio }</AuthorBio>
           </AuthorMeta>
         </AuthorInfoWrap>
       </FooterContainer>

components/guide-header/index.js

@@ -9,21 +9,27 @@ import {
   GuideTitle,
   HeaderWrap,
 } from './style';
+import { getContributionUrl } from "lib/guide";
 
-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={ author.twitter } target="_blank">
+        <AuthorImage src={ author.picture } />
+        { author.name }
       </GuideAuthor>
       &middot;
-      <GuideDate>Wednesday, October 9th 2019</GuideDate>
+      <GuideDate>{ guide.createdAt }</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>

data/authors.json

@@ -2,16 +2,21 @@
   {
     "username": "kamranahmedse",
     "name": "Kamran Ahmed",
-    "picture": "/static/authors/kamranahmedse.jpeg"
+    "twitter": "https://twitter.com/kamranahmedse",
+    "picture": "/static/authors/kamranahmedse.jpeg",
+    "bio": "Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones."
   },
   {
     "username": "ziishaned",
     "name": "Zeeshan Ahmed",
-    "picture": "/static/authors/ziishaned.png"
+    "twitter": "https://twitter.com/ziishaned",
+    "picture": "/static/authors/ziishaned.png",
+    "bio": "Playing with computers ever since I started walking. Loves hiking, cycling, JavaScript, OpenSource, challenging myself and communities."
   },
   {
     "username": "idnan",
     "name": "Adnan Ahmed",
+    "twitter": "https://twitter.com/idnan",
     "picture": "/static/authors/idnan.jpeg"
   }
-]
+]

data/guides.json

@@ -5,7 +5,7 @@
     "url": "/guides/design-patterns-for-humans",
     "featured": true,
     "author": "kamranahmedse",
-    "createdAt": "June 12, 2019",
+    "createdAt": "Wednesday, June 12, 2019",
     "updatedAt": "June 12, 2019"
   },
   {
@@ -14,7 +14,7 @@
     "url": "/guides/learn-regex",
     "featured": true,
     "author": "ziishaned",
-    "createdDate": "June 19, 2019",
+    "createdAt": "Wednesday, June 19, 2019",
     "updatedAt": "June 19, 2019"
   },
   {
@@ -23,7 +23,7 @@
     "url": "/guides/bash-guide",
     "featured": true,
     "author": "idnan",
-    "createdAt": "May 18, 2018",
+    "createdAt": "Wednesday, May 18, 2018",
     "updatedAt": "May 18, 2018"
   },
   {
@@ -32,7 +32,7 @@
     "url": "/guides/dns-in-one-picture",
     "featured": true,
     "author": "kamranahmedse",
-    "createdAt": "May 11, 2018",
+    "createdAt": "Wednesday, May 11, 2018",
     "updatedAt": "May 11, 2018"
   },
   {
@@ -41,7 +41,7 @@
     "url": "/guides/using-react-hooks",
     "featured": true,
     "author": "kamranahmedse",
-    "createdAt": "October 22, 2019",
+    "createdAt": "Wednesday, October 22, 2019",
     "updatedAt": "October 22, 2019"
   },
   {
@@ -51,6 +51,6 @@
     "featured": true,
     "author": "kamranahmedse",
     "updatedAt": "November 01, 2019",
-    "createdAt": "November 01, 2019"
+    "createdAt": "Wednesday, November 01, 2019"
   }
 ]

data/site.json

@@ -0,0 +1,4 @@
+{
+  "repoUrl": "https://github.com/kamranahmedse/roadmap-next",
+  "dataUrl": "/tree/master/data"
+}

lib/guide.js

@@ -1,4 +1,7 @@
 import guides from "data/guides";
+import authors from "data/authors";
+import siteConfig from "data/site";
+
 
 export const getRequestedGuide = req => {
   const guide = guides.find(guide => guide.url === req.url);
@@ -14,8 +17,8 @@ export const getRequestedGuide = req => {
   try {
     return {
       ...guide,
+      author: authors.find(author => author.username === guide.author) || {},
       component: require(`../data/${path}.md`).default,
-      // component: require(guide.path.replace(/^\//, '')).default
     };
   } catch (e) {
     console.log(e);
@@ -23,3 +26,7 @@ export const getRequestedGuide = req => {
 
   return null;
 };
+
+export const getContributionUrl = (guide) => {
+  return `${siteConfig.repoUrl}${siteConfig.dataUrl}${guide.url}.md`
+};

pages/guides/[guide].js

@@ -14,12 +14,12 @@ const Guide = ({ guide }) => {
 
   return (
     <GuideLayout>
-      <GuideHeader/>
+      <GuideHeader guide={guide} />
       <GuideBody>
         <guide.component />
         <ShareGuide/>
       </GuideBody>
-      <GuideFooter/>
+      <GuideFooter guide={guide} />
     </GuideLayout>
   );
 };