Make guide page dynamic

pull/1331/head
Kamran Ahmed 5 years ago
parent c51bae8b9e
commit 972bea55b7
  1. 18
      components/guide-footer/index.js
  2. 22
      components/guide-header/index.js
  3. 11
      data/authors.json
  4. 12
      data/guides.json
  5. 4
      data/site.json
  6. 9
      lib/guide.js
  7. 4
      pages/guides/[guide].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>

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

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

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

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

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

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

Loading…
Cancel
Save