github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add shareable URLs in the guide

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent 972bea55b7
commit f45d00eb22
7 changed files with 113 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

42
components/guide-footer/index.js
Unescape 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>

3
components/guide-header/index.js
Unescape View File

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

9
data/authors.json
Unescape View File

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

2
data/site.json
Unescape View File

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

50
lib/url.js
Unescape View File

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

1
package.json
Unescape View File

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

19
yarn.lock
Unescape View File

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

Write Preview
Loading…
Cancel
Save