Add shareable URLs in the guide

pull/1331/head
Kamran Ahmed 5 years ago
parent 972bea55b7
commit f45d00eb22
  1. 42
      components/guide-footer/index.js
  2. 3
      components/guide-header/index.js
  3. 9
      data/authors.json
  4. 2
      data/site.json
  5. 50
      lib/url.js
  6. 1
      package.json
  7. 19
      yarn.lock

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

@ -10,6 +10,7 @@ import {
HeaderWrap,
} from './style';
import { getContributionUrl } from "lib/guide";
import { getTwitterUrl } from "lib/url";
const GuideHeader = ({
guide,
@ -19,7 +20,7 @@ const GuideHeader = ({
}) => (
<HeaderWrap className="border-bottom">
<GuideMeta>
<GuideAuthor href={ author.twitter } target="_blank">
<GuideAuthor href={ getTwitterUrl(author.twitter) } target="_blank">
<AuthorImage src={ author.picture } />
{ author.name }
</GuideAuthor>

@ -2,21 +2,22 @@
{
"username": "kamranahmedse",
"name": "Kamran Ahmed",
"twitter": "https://twitter.com/kamranahmedse",
"twitter": "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",
"twitter": "https://twitter.com/ziishaned",
"twitter": "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"
"twitter": "idnan_se",
"picture": "/static/authors/idnan.jpeg",
"bio": "Playing with computers ever since I started walking. Loves hiking, cycling, JavaScript, OpenSource, challenging myself and communities."
}
]

@ -1,4 +1,6 @@
{
"twitter": "roadmapsh",
"url": "https://roadmap.sh",
"repoUrl": "https://github.com/kamranahmedse/roadmap-next",
"dataUrl": "/tree/master/data"
}

@ -0,0 +1,50 @@
import queryString from 'query-string';
import siteConfig from 'data/site';
export const prefixHost = (url) => {
return /^\//.test(url) ? `${siteConfig.url}${url}` : url;
};
export const getTwitterUrl = (username) => {
return `https://twitter.com/${username}`;
};
export const getTwitterShareUrl = ({ text, url }) => {
const urlToShare = `${prefixHost(url)}?${queryString.stringify({
utm_source: 'roadmap.sh',
utm_campaign: 'share',
utm_medium: 'twitter',
})}`;
return `https://twitter.com/intent/tweet?text=${text}&url=${encodeURI(urlToShare)}`;
};
export const getFacebookShareUrl = ({ text, url }) => {
const urlToShare = `${prefixHost(url)}?${queryString.stringify({
utm_source: 'roadmap.sh',
utm_campaign: 'share',
utm_medium: 'facebook',
})}`;
return `https://www.facebook.com/sharer/sharer.php?quote=${text}&u=${encodeURI(urlToShare)}`;
};
export const getRedditShareUrl = ({ text, url }) => {
const urlToShare = `${prefixHost(url)}?${queryString.stringify({
utm_source: 'roadmap.sh',
utm_campaign: 'share',
utm_medium: 'reddit'
})}`;
return `https://www.reddit.com/submit?title=${text}&url=${encodeURI(urlToShare)}`;
};
export const getHnShareUrl = ({ text, url }) => {
const urlToShare = `${prefixHost(url)}?${queryString.stringify({
utm_source: 'roadmap.sh',
utm_campaign: 'share',
utm_medium: 'hn'
})}`;
return `https://news.ycombinator.com/submitlink?t=${text}&u=${urlToShare}`;
};

@ -31,6 +31,7 @@
"node-sass": "^4.12.0",
"postcss-css-variables": "^0.13.0",
"prism-themes": "^1.3.0",
"query-string": "^6.8.3",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"styled-components": "^4.4.0"

@ -6663,6 +6663,15 @@ qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
query-string@^6.8.3:
version "6.8.3"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.8.3.tgz#fd9fb7ffb068b79062b43383685611ee47777d4b"
integrity sha512-llcxWccnyaWlODe7A9hRjkvdCKamEKTh+wH8ITdTc3OhchaqUZteiSCX/2ablWHVrkVIe04dntnaZJ7BdyW0lQ==
dependencies:
decode-uri-component "^0.2.0"
split-on-first "^1.0.0"
strict-uri-encode "^2.0.0"
querystring-es3@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@ -7474,6 +7483,11 @@ spdx-license-ids@^3.0.0:
resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
split-on-first@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
split-string@^3.0.1, split-string@^3.0.2:
version "3.1.0"
resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@ -7580,6 +7594,11 @@ stream-shift@^1.0.0:
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
strict-uri-encode@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
string-hash@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"

Loading…
Cancel
Save