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

Add shareable URLs in the guide

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-06 22:56:57 +04:00
parent 972bea55b7
commit f45d00eb22
7 changed files with 113 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/guide-footer/index.js
View File

@@ -1,7 +1,25 @@
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 { 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 = ({
@@ -22,7 +40,7 @@ const GuideFooter = ({
</a>
</ContributeIcon>
<ContributeIcon hasMargins>
<a href={ author.twitter } target="_blank">
<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}/>
@@ -31,10 +49,18 @@ const GuideFooter = ({
<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>
@@ -45,7 +71,7 @@ const GuideFooter = ({
<AuthorInfoWrap>
<AuthorImg src={ author.picture } alt={ author.name }/>
<AuthorMeta>
<h4><a href={ author.twitter } target="_blank">{ author.name }</a></h4>
<h4><a href={ getTwitterUrl(author.twitter) } target="_blank">{ author.name }</a></h4>
<AuthorBio>{ author.bio }</AuthorBio>
</AuthorMeta>
</AuthorInfoWrap>