Add shareable URLs in the guide

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 = ({
             </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={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
-            <a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
+              <FontAwesomeIcon icon={faTwitterSquare}/>
-            <a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
+            </a>
-            <a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></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>

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 = ({
 }) => (
   <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>

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",
+    "twitter": "idnan_se",
-    "picture": "/static/authors/idnan.jpeg"
+    "picture": "/static/authors/idnan.jpeg",
+    "bio": "Playing with computers ever since I started walking. Loves hiking, cycling, JavaScript, OpenSource, challenging myself and communities."
   }
 ]

data/site.json

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

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

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"

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"