From 0a149a8a92777262776e946e83d230eb6df32149 Mon Sep 17 00:00:00 2001 From: George Adams Date: Mon, 3 Feb 2025 21:05:46 +0000 Subject: [PATCH] fix: Blog posts: add all social media share button (#750) --- src/components/Common/Icon.tsx | 59 +- .../__snapshots__/Footer.test.tsx.snap | 56 ++ src/components/IconSocial/index.tsx | 26 +- src/components/News/SharePost/index.tsx | 69 +- src/components/Share/index.tsx | 31 +- .../__snapshots__/blogPost.test.tsx.snap | 690 ++++++------------ 6 files changed, 333 insertions(+), 598 deletions(-) diff --git a/src/components/Common/Icon.tsx b/src/components/Common/Icon.tsx index 83b7bf0f..291aba25 100644 --- a/src/components/Common/Icon.tsx +++ b/src/components/Common/Icon.tsx @@ -941,64 +941,7 @@ export const MobileFooterIcon = () => ( ) -export const MobileFooterFacebook = () => ( - - - - - - - - - - -) -export const MobileFooterSocial = () => ( - - - -) -export const MobileFooterCat = () => ( - - - - - - - - - - -) + export const MobileFooterYoutube = () => ( renders correctly 1`] = ` +
  • + + + Bluesky + + + + + +
    • +
  • + + + Mastodon + + + + + +
    • diff --git a/src/components/IconSocial/index.tsx b/src/components/IconSocial/index.tsx index 1292c8f0..fa5ae828 100644 --- a/src/components/IconSocial/index.tsx +++ b/src/components/IconSocial/index.tsx @@ -1,7 +1,7 @@ import React from "react" import { Link } from "gatsby-plugin-react-i18next" import { FaGithub, FaLinkedin, FaSlack, FaYoutube } from "react-icons/fa" -import { FaXTwitter } from "react-icons/fa6" +import { FaXTwitter, FaBluesky, FaMastodon } from "react-icons/fa6" const SocialIcons = () => { return ( @@ -65,6 +65,30 @@ const SocialIcons = () => { + +
  • + + Bluesky + + +
    • + +
  • + + Mastodon + + +
    • ) } diff --git a/src/components/News/SharePost/index.tsx b/src/components/News/SharePost/index.tsx index 4e24a967..0d321242 100644 --- a/src/components/News/SharePost/index.tsx +++ b/src/components/News/SharePost/index.tsx @@ -1,9 +1,7 @@ import React from "react" -import { - MobileFooterCat, - MobileFooterFacebook, - MobileFooterSocial, - } from "../../Common/Icon" +import { Link } from "gatsby-plugin-react-i18next" + +import { CiShare2 } from "react-icons/ci"; const SharePost = () => { return ( @@ -12,61 +10,12 @@ const SharePost = () => {

    Share this post

    - - - - - - - - - - + + +
    diff --git a/src/components/Share/index.tsx b/src/components/Share/index.tsx index ed6d1964..c32ae984 100644 --- a/src/components/Share/index.tsx +++ b/src/components/Share/index.tsx @@ -1,30 +1,35 @@ import React from "react" import { TwitterShareButton, - XIcon, EmailShareButton, - EmailIcon, FacebookShareButton, - FacebookIcon, LinkedinShareButton, - LinkedinIcon, RedditShareButton, - RedditIcon, } from "react-share" +import { + FaLinkedin, + FaFacebookSquare, + FaRedditSquare, +} from "react-icons/fa"; + +import { + FaSquareXTwitter, + FaSquareEnvelope, +} from "react-icons/fa6"; + const ShareButton = props => { const { location, siteMetadata, post } = props const twitter = [siteMetadata.social.twitter] const url = siteMetadata.siteUrl + location.pathname - const iconSize = 30 const iconStyle = { paddingRight: "0.3em", marginBottom: "0.2em", } return ( - <> +
    { related={twitter} style={iconStyle} > - + { source={siteMetadata.siteUrl} style={iconStyle} > - + - + { title={post.title} style={iconStyle} > - + { subject={post.title} style={iconStyle} > - + - +
    ) } diff --git a/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap b/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap index 9eb58bb6..f5828dbc 100644 --- a/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap +++ b/src/templates/__tests__/__snapshots__/blogPost.test.tsx.snap @@ -121,121 +121,105 @@ exports[`BlogPost Template page > renders correctly - featured image 1`] = `
    - - + - + - + - + + + + + +