diff --git a/components/guide-footer/index.js b/components/guide-footer/index.js index e1d3e4b85..f7e3a10bd 100644 --- a/components/guide-footer/index.js +++ b/components/guide-footer/index.js @@ -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 = ({ - + Follow the author Author @@ -31,10 +49,18 @@ const GuideFooter = ({ Help spread the word Share - - - - + + + + + + + + + + + + @@ -45,7 +71,7 @@ const GuideFooter = ({ -

{ author.name }

+

{ author.name }

{ author.bio }
diff --git a/components/guide-header/index.js b/components/guide-header/index.js index e3ea5c965..f864fafe7 100644 --- a/components/guide-header/index.js +++ b/components/guide-header/index.js @@ -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 = ({ }) => ( - + { author.name } diff --git a/data/authors.json b/data/authors.json index be71f04bb..0333512bd 100644 --- a/data/authors.json +++ b/data/authors.json @@ -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." } ] diff --git a/data/site.json b/data/site.json index e3b6900b8..c178ae8a3 100644 --- a/data/site.json +++ b/data/site.json @@ -1,4 +1,6 @@ { + "twitter": "roadmapsh", + "url": "https://roadmap.sh", "repoUrl": "https://github.com/kamranahmedse/roadmap-next", "dataUrl": "/tree/master/data" } diff --git a/lib/url.js b/lib/url.js new file mode 100644 index 000000000..ee76ec580 --- /dev/null +++ b/lib/url.js @@ -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}`; +}; diff --git a/package.json b/package.json index 55a6f09bd..eb663f3ad 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/yarn.lock b/yarn.lock index b7f4462fb..ee8971a19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"