From 8da735f8cfb378b1f35f53d4029775984786805e Mon Sep 17 00:00:00 2001 From: suthesan Date: Wed, 30 Jun 2021 10:31:17 +0800 Subject: [PATCH 1/5] added social sharing buttons --- src/images/svg/blog/facebook.svg | 4 ++ src/images/svg/blog/instagram.svg | 4 ++ src/images/svg/blog/pinterest.svg | 3 ++ src/images/svg/blog/twitter.svg | 4 ++ src/pages/blog/_social-sharing.js | 65 ++++++++++++++++++++++++++ src/pages/blog/social-sharing/index.js | 14 ++++++ 6 files changed, 94 insertions(+) create mode 100644 src/images/svg/blog/facebook.svg create mode 100644 src/images/svg/blog/instagram.svg create mode 100644 src/images/svg/blog/pinterest.svg create mode 100644 src/images/svg/blog/twitter.svg create mode 100644 src/pages/blog/_social-sharing.js create mode 100644 src/pages/blog/social-sharing/index.js diff --git a/src/images/svg/blog/facebook.svg b/src/images/svg/blog/facebook.svg new file mode 100644 index 00000000000..7baf34ec97e --- /dev/null +++ b/src/images/svg/blog/facebook.svg @@ -0,0 +1,4 @@ + diff --git a/src/images/svg/blog/instagram.svg b/src/images/svg/blog/instagram.svg new file mode 100644 index 00000000000..8f5686b150f --- /dev/null +++ b/src/images/svg/blog/instagram.svg @@ -0,0 +1,4 @@ + diff --git a/src/images/svg/blog/pinterest.svg b/src/images/svg/blog/pinterest.svg new file mode 100644 index 00000000000..94ac827ceed --- /dev/null +++ b/src/images/svg/blog/pinterest.svg @@ -0,0 +1,3 @@ + diff --git a/src/images/svg/blog/twitter.svg b/src/images/svg/blog/twitter.svg new file mode 100644 index 00000000000..d4ba58ac923 --- /dev/null +++ b/src/images/svg/blog/twitter.svg @@ -0,0 +1,4 @@ + diff --git a/src/pages/blog/_social-sharing.js b/src/pages/blog/_social-sharing.js new file mode 100644 index 00000000000..55902a5c403 --- /dev/null +++ b/src/pages/blog/_social-sharing.js @@ -0,0 +1,65 @@ +import React from 'react' +import styled from 'styled-components' +import { SectionContainer, Container, Flex } from 'components/containers' +import { LocalizedLink } from 'components/localization' +import { Header } from 'components/elements/typography' +import device from 'themes/device' +import InstagramIcon from 'images/svg/blog/instagram.svg' +import FacebookIcon from 'images/svg/blog/facebook.svg' +import PinterestIcon from 'images/svg/blog/pinterest.svg' +import TwitterIcon from 'images/svg/blog/twitter.svg' + +const IconWrapper = styled.div` + width: 120px; +` + +const HeaderWrapper = styled.span` + margin-right: 16px; + + @media ${device.tablet}{ + margin: 0 auto 8px; + } +` + +const StyledFlex = styled(Flex)` + @media ${device.tablet}{ + width: 120px; + margin-left: auto; + } +` + +const url = typeof window !== 'undefined' ? window.location.href : ''; + +const SocialSharing = () => { + return ( + + + + +

+ Share this post +

+ + + + +

+ + +

+ + + + + + + ) +} + +export default SocialSharing diff --git a/src/pages/blog/social-sharing/index.js b/src/pages/blog/social-sharing/index.js new file mode 100644 index 00000000000..1f3a72473f2 --- /dev/null +++ b/src/pages/blog/social-sharing/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import SocialSharing from '../_social-sharing' +import { WithIntl } from 'components/localization' +import Layout from 'components/layout/layout' + +const Index = () => { + return ( + + + + ) +} + +export default WithIntl()(Index) \ No newline at end of file From 919dda1d3cc93bf9b256b0e333aec926000297c9 Mon Sep 17 00:00:00 2001 From: suthesan Date: Wed, 30 Jun 2021 10:34:35 +0800 Subject: [PATCH 2/5] minimise svg files --- src/images/svg/blog/facebook.svg | 5 +---- src/images/svg/blog/instagram.svg | 5 +---- src/images/svg/blog/pinterest.svg | 4 +--- src/images/svg/blog/twitter.svg | 5 +---- src/pages/blog/_social-sharing.js | 8 +++++--- 5 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/images/svg/blog/facebook.svg b/src/images/svg/blog/facebook.svg index 7baf34ec97e..e1dbc69506a 100644 --- a/src/images/svg/blog/facebook.svg +++ b/src/images/svg/blog/facebook.svg @@ -1,4 +1 @@ - + \ No newline at end of file diff --git a/src/images/svg/blog/instagram.svg b/src/images/svg/blog/instagram.svg index 8f5686b150f..5c3a4508f03 100644 --- a/src/images/svg/blog/instagram.svg +++ b/src/images/svg/blog/instagram.svg @@ -1,4 +1 @@ - + \ No newline at end of file diff --git a/src/images/svg/blog/pinterest.svg b/src/images/svg/blog/pinterest.svg index 94ac827ceed..0e3a818b300 100644 --- a/src/images/svg/blog/pinterest.svg +++ b/src/images/svg/blog/pinterest.svg @@ -1,3 +1 @@ - + \ No newline at end of file diff --git a/src/images/svg/blog/twitter.svg b/src/images/svg/blog/twitter.svg index d4ba58ac923..a29d02f259c 100644 --- a/src/images/svg/blog/twitter.svg +++ b/src/images/svg/blog/twitter.svg @@ -1,4 +1 @@ - + \ No newline at end of file diff --git a/src/pages/blog/_social-sharing.js b/src/pages/blog/_social-sharing.js index 55902a5c403..3b612362c09 100644 --- a/src/pages/blog/_social-sharing.js +++ b/src/pages/blog/_social-sharing.js @@ -1,5 +1,6 @@ import React from 'react' import styled from 'styled-components' +import { useLocation } from '@gatsbyjs/reach-router' import { SectionContainer, Container, Flex } from 'components/containers' import { LocalizedLink } from 'components/localization' import { Header } from 'components/elements/typography' @@ -28,9 +29,10 @@ const StyledFlex = styled(Flex)` } ` -const url = typeof window !== 'undefined' ? window.location.href : ''; - const SocialSharing = () => { + const url = useLocation().href + console.log(url) //eslint-disable-line + return ( @@ -42,7 +44,7 @@ const SocialSharing = () => { - +

From fb9c21875ab3e881102f93a60450be09abfb0f74 Mon Sep 17 00:00:00 2001 From: suthesan Date: Thu, 1 Jul 2021 10:53:39 +0800 Subject: [PATCH 3/5] added usemetadata hook and queried location --- src/components/containers/seo.js | 10 +++++----- src/components/hooks/use-site-metadata.js | 21 +++++++++++++++++++++ src/pages/blog/_social-sharing.js | 13 +++++-------- src/pages/blog/social-sharing/index.js | 4 +++- 4 files changed, 34 insertions(+), 14 deletions(-) create mode 100644 src/components/hooks/use-site-metadata.js diff --git a/src/components/containers/seo.js b/src/components/containers/seo.js index 8c9e72d2795..95637d70cbc 100644 --- a/src/components/containers/seo.js +++ b/src/components/containers/seo.js @@ -148,11 +148,11 @@ const SEO = ({ description, meta, title, no_index, has_organization_schema, meta }, ...(no_index || no_index_staging || is_ach_page ? [ - { - name: 'robots', - content: 'noindex', - }, - ] + { + name: 'robots', + content: 'noindex', + }, + ] : []), ].concat(meta)} > diff --git a/src/components/hooks/use-site-metadata.js b/src/components/hooks/use-site-metadata.js new file mode 100644 index 00000000000..31ae4d21ae6 --- /dev/null +++ b/src/components/hooks/use-site-metadata.js @@ -0,0 +1,21 @@ +import { useStaticQuery, graphql } from 'gatsby'; + +const useSiteMetadata = () => { + const { site } = useStaticQuery( + graphql` + query { + site { + siteMetadata { + title + description + author + siteUrl + } + } + } + `, + ); + return site.siteMetadata; +}; + +export default useSiteMetadata; \ No newline at end of file diff --git a/src/pages/blog/_social-sharing.js b/src/pages/blog/_social-sharing.js index 3b612362c09..31bb5c995c5 100644 --- a/src/pages/blog/_social-sharing.js +++ b/src/pages/blog/_social-sharing.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { useLocation } from '@gatsbyjs/reach-router' +import { getLocationPathname } from 'common/utility' import { SectionContainer, Container, Flex } from 'components/containers' import { LocalizedLink } from 'components/localization' import { Header } from 'components/elements/typography' @@ -29,10 +29,7 @@ const StyledFlex = styled(Flex)` } ` -const SocialSharing = () => { - const url = useLocation().href - console.log(url) //eslint-disable-line - +const SocialSharing = (siteUrl) => { return ( @@ -44,16 +41,16 @@ const SocialSharing = () => { - +

- +

diff --git a/src/pages/blog/social-sharing/index.js b/src/pages/blog/social-sharing/index.js index 1f3a72473f2..5d3fa25b4f8 100644 --- a/src/pages/blog/social-sharing/index.js +++ b/src/pages/blog/social-sharing/index.js @@ -1,12 +1,14 @@ import React from 'react' import SocialSharing from '../_social-sharing' +import useSiteMetadata from 'components/hooks/use-site-metadata' import { WithIntl } from 'components/localization' import Layout from 'components/layout/layout' const Index = () => { + const { siteUrl } = useSiteMetadata(); return ( - + ) } From 0252fbf5b833522d8e46b43ff0d4a230b3ec45e3 Mon Sep 17 00:00:00 2001 From: suthesan Date: Thu, 1 Jul 2021 16:25:14 +0800 Subject: [PATCH 4/5] removed use metadata hook, pass pageContext props via WithIntl component, access pathname from pageContext props --- src/components/hooks/use-site-metadata.js | 21 --------------------- src/components/localization/withIntl.js | 2 +- src/pages/blog/_social-sharing.js | 14 +++++++++----- src/pages/blog/social-sharing/index.js | 12 ++++++++---- 4 files changed, 18 insertions(+), 31 deletions(-) delete mode 100644 src/components/hooks/use-site-metadata.js diff --git a/src/components/hooks/use-site-metadata.js b/src/components/hooks/use-site-metadata.js deleted file mode 100644 index 31ae4d21ae6..00000000000 --- a/src/components/hooks/use-site-metadata.js +++ /dev/null @@ -1,21 +0,0 @@ -import { useStaticQuery, graphql } from 'gatsby'; - -const useSiteMetadata = () => { - const { site } = useStaticQuery( - graphql` - query { - site { - siteMetadata { - title - description - author - siteUrl - } - } - } - `, - ); - return site.siteMetadata; -}; - -export default useSiteMetadata; \ No newline at end of file diff --git a/src/components/localization/withIntl.js b/src/components/localization/withIntl.js index 5d25f9250e1..ffb21702660 100644 --- a/src/components/localization/withIntl.js +++ b/src/components/localization/withIntl.js @@ -34,7 +34,7 @@ export const WithIntl = () => (WrappedComponent) => { } return ( - + ) } diff --git a/src/pages/blog/_social-sharing.js b/src/pages/blog/_social-sharing.js index 31bb5c995c5..577e52cd453 100644 --- a/src/pages/blog/_social-sharing.js +++ b/src/pages/blog/_social-sharing.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { getLocationPathname } from 'common/utility' +import PropTypes from 'prop-types' import { SectionContainer, Container, Flex } from 'components/containers' import { LocalizedLink } from 'components/localization' import { Header } from 'components/elements/typography' @@ -29,7 +29,7 @@ const StyledFlex = styled(Flex)` } ` -const SocialSharing = (siteUrl) => { +const SocialSharing = ({ pathname }) => { return ( @@ -41,16 +41,16 @@ const SocialSharing = (siteUrl) => { - +

- +

@@ -61,4 +61,8 @@ const SocialSharing = (siteUrl) => { ) } +SocialSharing.propTypes = { + pathname: PropTypes.string, +} + export default SocialSharing diff --git a/src/pages/blog/social-sharing/index.js b/src/pages/blog/social-sharing/index.js index 5d3fa25b4f8..49b4573777b 100644 --- a/src/pages/blog/social-sharing/index.js +++ b/src/pages/blog/social-sharing/index.js @@ -1,16 +1,20 @@ import React from 'react' +import PropTypes from 'prop-types' import SocialSharing from '../_social-sharing' -import useSiteMetadata from 'components/hooks/use-site-metadata' import { WithIntl } from 'components/localization' import Layout from 'components/layout/layout' -const Index = () => { - const { siteUrl } = useSiteMetadata(); +const Index = (props) => { + const pathname = props.pageContext.pathname return ( - + ) } +Index.propTypes = { + pageContext: PropTypes.object, +} + export default WithIntl()(Index) \ No newline at end of file From c48b1ada2790484ea9354373c71489b0fe0e1e0c Mon Sep 17 00:00:00 2001 From: suthesan Date: Fri, 2 Jul 2021 12:32:02 +0800 Subject: [PATCH 5/5] replaced instagram with linkedin --- src/pages/blog/_social-sharing.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/blog/_social-sharing.js b/src/pages/blog/_social-sharing.js index 577e52cd453..781383752c4 100644 --- a/src/pages/blog/_social-sharing.js +++ b/src/pages/blog/_social-sharing.js @@ -5,10 +5,10 @@ import { SectionContainer, Container, Flex } from 'components/containers' import { LocalizedLink } from 'components/localization' import { Header } from 'components/elements/typography' import device from 'themes/device' -import InstagramIcon from 'images/svg/blog/instagram.svg' import FacebookIcon from 'images/svg/blog/facebook.svg' import PinterestIcon from 'images/svg/blog/pinterest.svg' import TwitterIcon from 'images/svg/blog/twitter.svg' +import LinkedInIcon from 'images/svg/footer-linkedin.svg' const IconWrapper = styled.div` width: 120px; @@ -44,13 +44,13 @@ const SocialSharing = ({ pathname }) => {

- -

+ +

- +