From 98f12605aa6518370a2b78fc989ab2781a007cf5 Mon Sep 17 00:00:00 2001 From: Joseph Davidson <josephdavidson1989@gmail.com> Date: Thu, 19 Oct 2017 22:33:26 +0300 Subject: [PATCH] Facebook share button and link --- app/public/index.html | 66 +++++++++---------- app/src/App.jsx | 26 ++++---- app/src/components/Navbar/Navbar.jsx | 18 ++--- app/src/components/SocialShare/Facebook.jsx | 16 +++++ .../components/SocialShare/SocialShare.css | 6 +- .../components/SocialShare/SocialShare.jsx | 13 ++-- app/src/components/SocialShare/Twitter.jsx | 14 ++-- app/src/components/SocialShare/icons.js | 57 ++++++++-------- 8 files changed, 121 insertions(+), 95 deletions(-) create mode 100644 app/src/components/SocialShare/Facebook.jsx diff --git a/app/public/index.html b/app/public/index.html index 90e26772fb..868bbbedbe 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -1,40 +1,40 @@ <!doctype html> <html lang="en"> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> - <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> - <!-- - Notice the use of %PUBLIC_URL% in the tag above. - It will be replaced with the URL of the `public` folder during the build. - Only files inside the `public` folder can be referenced from the HTML. +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> + <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> + <!-- + Notice the use of %PUBLIC_URL% in the tag above. + It will be replaced with the URL of the `public` folder during the build. + Only files inside the `public` folder can be referenced from the HTML. - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will - work correctly both with client-side routing and a non-root public URL. - Learn how to configure a non-root public URL by running `npm run build`. - --> - <title>First Contributions</title> - </head> - <body> - <div id="root"></div> - <!-- - This HTML file is a template. - If you open it directly in the browser, you will see an empty page. + Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will + work correctly both with client-side routing and a non-root public URL. + Learn how to configure a non-root public URL by running `npm run build`. + --> + <title>First Contributions</title> +</head> +<body> +<div id="root"></div> +<!-- +This HTML file is a template. +If you open it directly in the browser, you will see an empty page. - You can add webfonts, meta tags, or analytics to this file. - The build step will place the bundled scripts into the <body> tag. +You can add webfonts, meta tags, or analytics to this file. +The build step will place the bundled scripts into the <body> tag. - To begin the development, run `npm start`. - To create a production bundle, use `npm run build`. - --> - <script> - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('service-worker.js').catch(function(ex) { + To begin the development, run `npm start`. + To create a production bundle, use `npm run build`. + --> +<script> + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js').catch(function(ex) { console.warn(ex); console.warn('(This warning can be safely ignored outside of the production build.)'); - }); - } - </script> - </body> - </html> + }); + } +</script> +</body> +</html> diff --git a/app/src/App.jsx b/app/src/App.jsx index ccc4c6561e..6bf295e539 100644 --- a/app/src/App.jsx +++ b/app/src/App.jsx @@ -6,19 +6,19 @@ import CardsContainer from './components/ProjectList/CardsContainer'; import SocialShare from './components/SocialShare/SocialShare'; class App extends Component { - render() { - return ( - <div className="App"> - <Navbar /> - <div className="App-header"> - <h1>Make your first open source contribution in 5 minutes</h1> - </div> - <LinkButton /> - <CardsContainer /> - <SocialShare/> - </div> - ); - } + render() { + return ( + <div className="App"> + <Navbar /> + <div className="App-header"> + <h1>Make your first open source contribution in 5 minutes</h1> + </div> + <LinkButton /> + <CardsContainer /> + <SocialShare/> + </div> + ); + } } export default App; diff --git a/app/src/components/Navbar/Navbar.jsx b/app/src/components/Navbar/Navbar.jsx index b7da934b06..f6c5cb91d5 100644 --- a/app/src/components/Navbar/Navbar.jsx +++ b/app/src/components/Navbar/Navbar.jsx @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import './Navbar.css'; class Navbar extends Component { - render() { - return ( - <div className="topnav"> - <a href="https://github.com/Roshanjossey/first-contributions" target="_blank" rel="noopener noreferrer">GitHub</a> - <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">Twitter</a> - <a href="https://firstcontributions.herokuapp.com" target="_blank" rel="noopener noreferrer">Slack</a> - </div> - ); - } + render() { + return ( + <div className="topnav"> + <a href="https://github.com/Roshanjossey/first-contributions" target="_blank" rel="noopener noreferrer">GitHub</a> + <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">Twitter</a> + <a href="https://firstcontributions.herokuapp.com" target="_blank" rel="noopener noreferrer">Slack</a> + </div> + ); + } } export default Navbar; diff --git a/app/src/components/SocialShare/Facebook.jsx b/app/src/components/SocialShare/Facebook.jsx new file mode 100644 index 0000000000..88d1f645a2 --- /dev/null +++ b/app/src/components/SocialShare/Facebook.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Icon, IconPaths } from './icons.js'; + +const facebookLink = "https://www.facebook.com/sharer/sharer.php?u=https://roshanjossey.github.io/first-contributions"e=Yay%21%20I%20just%20made%20my%20first%20open%20source%20contribution%20with%20First%20Contributions.%20You%20can%20too,%20by%20following%20a%20simple%20tutorial%20at%20https%3A//goo.gl/66Axwe" + +const FacebookCard = () => ( + <a className="icon-card twitter" href={facebookLink} target="_blank"> + <Icon + color="rgb(255, 255, 255)" + size={40} + icon={IconPaths.facebook} + /> + </a> +); + +export default FacebookCard; diff --git a/app/src/components/SocialShare/SocialShare.css b/app/src/components/SocialShare/SocialShare.css index 33ec83377a..3ee51e735c 100644 --- a/app/src/components/SocialShare/SocialShare.css +++ b/app/src/components/SocialShare/SocialShare.css @@ -11,6 +11,10 @@ margin-right: .25em; } +#social-shares-container { + display: flex; +} + .icon-card { display: flex; align-items: center; @@ -26,7 +30,7 @@ } .icon-card:hover{ - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px; } .twitter { diff --git a/app/src/components/SocialShare/SocialShare.jsx b/app/src/components/SocialShare/SocialShare.jsx index 84637d17f3..18a1ae5145 100644 --- a/app/src/components/SocialShare/SocialShare.jsx +++ b/app/src/components/SocialShare/SocialShare.jsx @@ -1,12 +1,17 @@ import React from 'react'; import TwitterCard from './Twitter'; +import FacebookCard from './Facebook'; import './SocialShare.css'; const SocialShare = () => ( - <section id='social-share'> - <h2>Share the news of your first contribution</h2> - <TwitterCard/> - </section> + <section id='social-share'> + <h2>Share the news of your first contribution</h2> + <div id='social-shares-container'> + <TwitterCard/> + <FacebookCard/> + + </div> + </section> ); export default SocialShare diff --git a/app/src/components/SocialShare/Twitter.jsx b/app/src/components/SocialShare/Twitter.jsx index 17b846ab1c..cb2a58532e 100644 --- a/app/src/components/SocialShare/Twitter.jsx +++ b/app/src/components/SocialShare/Twitter.jsx @@ -4,13 +4,13 @@ import { Icon, IconPaths } from './icons.js'; const twitterLink = "https://twitter.com/intent/tweet?text=Yay%21%20I%20just%20made%20my%20first%20open%20source%20contribution%20with%20@1stcontribution.%20You%20can%20too%20at%20https%3A//goo.gl/66Axwe%0A&hashtags=Hacktoberfest,OpenSource" const TwitterCard = () => ( - <a className="icon-card twitter" href={twitterLink} target="_blank"> - <Icon - color="rgb(255, 255, 255)" - size={40} - icon={IconPaths.twitter} - /> - </a> + <a className="icon-card twitter" href={twitterLink} target="_blank"> + <Icon + color="rgb(255, 255, 255)" + size={40} + icon={IconPaths.twitter} + /> + </a> ); export default TwitterCard; diff --git a/app/src/components/SocialShare/icons.js b/app/src/components/SocialShare/icons.js index 939127642a..b8773a4370 100644 --- a/app/src/components/SocialShare/icons.js +++ b/app/src/components/SocialShare/icons.js @@ -2,42 +2,43 @@ import React from 'react'; import PropTypes from 'prop-types'; export const IconPaths = { - twitter: 'M22 4.864c-0.808 0.361-1.68 0.602-2.591 0.709 0.932-0.559 1.646-1.444 1.985-2.496-0.872 0.516-1.839 0.894-2.866 1.096-0.825-0.877-1.998-1.422-3.296-1.422-2.492 0-4.512 2.020-4.512 4.512 0 0.352 0.039 0.696 0.116 1.027-3.751-0.189-7.077-1.985-9.303-4.718-0.387 0.666-0.61 1.444-0.61 2.269 0 1.564 0.795 2.948 2.007 3.755-0.739-0.021-1.435-0.228-2.045-0.563 0 0.017 0 0.039 0 0.056 0 2.187 1.555 4.013 3.622 4.426-0.378 0.103-0.778 0.159-1.19 0.159-0.292 0-0.571-0.030-0.851-0.082 0.576 1.792 2.243 3.098 4.215 3.137-1.547 1.212-3.489 1.934-5.607 1.934-0.365 0-0.722-0.021-1.079-0.064 2.002 1.285 4.374 2.028 6.922 2.028 8.302 0 12.843-6.879 12.843-12.843 0-0.198-0.004-0.391-0.013-0.584 0.881-0.632 1.646-1.427 2.252-2.333z', - github: 'M11 0.272c-6.074 0-11 4.925-11 11 0 4.86 3.152 8.983 7.522 10.438 0.55 0.102 0.752-0.239 0.752-0.529 0-0.262-0.010-1.129-0.015-2.048-3.060 0.666-3.706-1.298-3.706-1.298-0.5-1.271-1.221-1.61-1.221-1.61-0.998-0.683 0.075-0.669 0.075-0.669 1.104 0.078 1.686 1.134 1.686 1.134 0.981 1.682 2.573 1.195 3.201 0.914 0.099-0.711 0.384-1.196 0.698-1.471-2.443-0.278-5.012-1.221-5.012-5.436 0-1.201 0.43-2.182 1.134-2.953-0.114-0.277-0.491-1.396 0.106-2.911 0 0 0.924-0.295 3.026 1.128 0.877-0.244 1.818-0.366 2.753-0.37 0.935 0.004 1.876 0.126 2.755 0.37 2.1-1.423 3.022-1.128 3.022-1.128 0.599 1.515 0.222 2.634 0.108 2.911 0.705 0.77 1.132 1.752 1.132 2.953 0 4.225-2.573 5.155-5.023 5.427 0.395 0.341 0.746 1.011 0.746 2.037 0 1.472-0.013 2.656-0.013 3.019 0 0.293 0.198 0.636 0.756 0.528 4.368-1.456 7.516-5.578 7.516-10.436 0-6.075-4.925-11-11-11z', + twitter: 'M22 4.864c-0.808 0.361-1.68 0.602-2.591 0.709 0.932-0.559 1.646-1.444 1.985-2.496-0.872 0.516-1.839 0.894-2.866 1.096-0.825-0.877-1.998-1.422-3.296-1.422-2.492 0-4.512 2.020-4.512 4.512 0 0.352 0.039 0.696 0.116 1.027-3.751-0.189-7.077-1.985-9.303-4.718-0.387 0.666-0.61 1.444-0.61 2.269 0 1.564 0.795 2.948 2.007 3.755-0.739-0.021-1.435-0.228-2.045-0.563 0 0.017 0 0.039 0 0.056 0 2.187 1.555 4.013 3.622 4.426-0.378 0.103-0.778 0.159-1.19 0.159-0.292 0-0.571-0.030-0.851-0.082 0.576 1.792 2.243 3.098 4.215 3.137-1.547 1.212-3.489 1.934-5.607 1.934-0.365 0-0.722-0.021-1.079-0.064 2.002 1.285 4.374 2.028 6.922 2.028 8.302 0 12.843-6.879 12.843-12.843 0-0.198-0.004-0.391-0.013-0.584 0.881-0.632 1.646-1.427 2.252-2.333z', + github: 'M11 0.272c-6.074 0-11 4.925-11 11 0 4.86 3.152 8.983 7.522 10.438 0.55 0.102 0.752-0.239 0.752-0.529 0-0.262-0.010-1.129-0.015-2.048-3.060 0.666-3.706-1.298-3.706-1.298-0.5-1.271-1.221-1.61-1.221-1.61-0.998-0.683 0.075-0.669 0.075-0.669 1.104 0.078 1.686 1.134 1.686 1.134 0.981 1.682 2.573 1.195 3.201 0.914 0.099-0.711 0.384-1.196 0.698-1.471-2.443-0.278-5.012-1.221-5.012-5.436 0-1.201 0.43-2.182 1.134-2.953-0.114-0.277-0.491-1.396 0.106-2.911 0 0 0.924-0.295 3.026 1.128 0.877-0.244 1.818-0.366 2.753-0.37 0.935 0.004 1.876 0.126 2.755 0.37 2.1-1.423 3.022-1.128 3.022-1.128 0.599 1.515 0.222 2.634 0.108 2.911 0.705 0.77 1.132 1.752 1.132 2.953 0 4.225-2.573 5.155-5.023 5.427 0.395 0.341 0.746 1.011 0.746 2.037 0 1.472-0.013 2.656-0.013 3.019 0 0.293 0.198 0.636 0.756 0.528 4.368-1.456 7.516-5.578 7.516-10.436 0-6.075-4.925-11-11-11z', + facebook: 'M16.5,0l-2.9,0c-3.2,0-5.3,2.1-5.3,5.4v2.5H5.5c-0.2,0-0.4,0.2-0.4,0.4V12c0,0.2,0.2,0.4,0.4,0.4h2.9v9.1 c0,0.2,0.2,0.4,0.4,0.4h3.7c0.2,0,0.4-0.2,0.4-0.4v-9.1h3.4c0.2,0,0.4-0.2,0.4-0.4l0-3.6c0-0.1,0-0.2-0.1-0.3s-0.2-0.1-0.3-0.1H13 V5.8c0-1,0.2-1.5,1.6-1.5l1.9,0c0.2,0,0.4-0.2,0.4-0.4V0.5C16.9,0.2,16.7,0,16.5,0z', }; export const Icon = props => { - const styles = { - svg: { - display: 'block', - margin: '0 auto', - }, - path: { - fill: props.color, - }, - }; + const styles = { + svg: { + display: 'block', + margin: '0 auto', + }, + path: { + fill: props.color, + }, + }; - return ( - <svg - style={styles.svg} - width={`${props.size}px`} - height={`${props.size}px`} - viewBox="0 0 22 22" - > - <path - style={styles.path} - d={props.icon} - /> - </svg> - ); + return ( + <svg + style={styles.svg} + width={`${props.size}px`} + height={`${props.size}px`} + viewBox="0 0 22 22" + > + <path + style={styles.path} + d={props.icon} +/> +</svg> +); }; Icon.propTypes = { - icon: PropTypes.string.isRequired, - size: PropTypes.number, - color: PropTypes.string, + icon: PropTypes.string.isRequired, + size: PropTypes.number, + color: PropTypes.string, }; Icon.defaultProps = { - size: 22, + size: 22, }; -- GitLab