fix: Blog posts: add all social media share button (#750)

adoptium · Feb 3, 2025 · 0a149a8 · 0a149a8
1 parent 81c9127
commit 0a149a8
Show file tree

Hide file tree

Showing 6 changed files with 333 additions and 598 deletions.
diff --git a/src/components/Common/Icon.tsx b/src/components/Common/Icon.tsx
@@ -941,64 +941,7 @@ export const MobileFooterIcon = () => (
     </defs>
   </svg>
 )
-export const MobileFooterFacebook = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_501_4312)">
-      <path
-        d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z"
-        fill="white"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_501_4312">
-        <rect width="24" height="24" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export const MobileFooterSocial = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M18.3263 1.90381H21.6998L14.3297 10.3273L23 21.7898H16.2112L10.894 14.8378L4.80995 21.7898H1.43443L9.31743 12.7799L1 1.90381H7.96111L12.7674 8.25814L18.3263 1.90381ZM17.1423 19.7706H19.0116L6.94539 3.81694H4.93946L17.1423 19.7706Z"
-      fill="white"
-    />
-  </svg>
-)
-export const MobileFooterCat = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_501_4316)">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.0099 0C5.36875 0 0 5.40833 0 12.0992C0 17.4475 3.43994 21.9748 8.21205 23.5771C8.80869 23.6976 9.02724 23.3168 9.02724 22.9965C9.02724 22.716 9.00757 21.7545 9.00757 20.7527C5.6667 21.474 4.97099 19.3104 4.97099 19.3104C4.43409 17.9082 3.63858 17.5478 3.63858 17.5478C2.54511 16.8066 3.71823 16.8066 3.71823 16.8066C4.93117 16.8868 5.56763 18.0486 5.56763 18.0486C6.64118 19.8913 8.37111 19.3707 9.06706 19.0501C9.16638 18.2688 9.48473 17.728 9.82275 17.4276C7.15817 17.1471 4.35469 16.1055 4.35469 11.458C4.35469 10.1359 4.8316 9.05428 5.58729 8.21304C5.46807 7.91263 5.0504 6.67043 5.70677 5.00787C5.70677 5.00787 6.72083 4.6873 9.00732 6.24981C9.98625 5.98497 10.9958 5.85024 12.0099 5.84911C13.024 5.84911 14.0577 5.98948 15.0123 6.24981C17.299 4.6873 18.3131 5.00787 18.3131 5.00787C18.9695 6.67043 18.5515 7.91263 18.4323 8.21304C19.2079 9.05428 19.6652 10.1359 19.6652 11.458C19.6652 16.1055 16.8617 17.1269 14.1772 17.4276C14.6148 17.8081 14.9924 18.5292 14.9924 19.6711C14.9924 21.2936 14.9727 22.5957 14.9727 22.9962C14.9727 23.3168 15.1915 23.6976 15.7879 23.5774C20.56 21.9745 23.9999 17.4475 23.9999 12.0992C24.0196 5.40833 18.6312 0 12.0099 0Z"
-        fill="white"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_501_4316">
-        <rect width="24" height="24" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-)
+
 export const MobileFooterYoutube = () => (
   <svg
     width="24"

diff --git a/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
@@ -576,6 +576,62 @@ exports[`Footer component > renders correctly 1`] = `
                 </svg>
               </a>
             </li>
+            <li>
+              <a
+                class="leading-6 transition hover:opacity-75 dark:text-gray-200"
+                href="https://bsky.app/profile/adoptium.net"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  Bluesky
+                </span>
+                <svg
+                  class="h-6 w-6"
+                  fill="currentColor"
+                  height="1em"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 576 512"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                class="leading-6 transition hover:opacity-75 dark:text-gray-200"
+                href="https://mastodon.social/@[email protected]"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  Mastodon
+                </span>
+                <svg
+                  class="h-6 w-6"
+                  fill="currentColor"
+                  height="1em"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 448 512"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"
+                  />
+                </svg>
+              </a>
+            </li>
           </ul>
         </div>
       </div>

diff --git 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 = () => {
           <FaSlack className="h-6 w-6" />
         </Link>
       </li>
+
+      <li>
+        <a
+          href="https://bsky.app/profile/adoptium.net"
+          rel="noreferrer"
+          target="_blank"
+          className="leading-6 transition hover:opacity-75 dark:text-gray-200"
+        >
+          <span className="sr-only">Bluesky</span>
+          <FaBluesky className="h-6 w-6" />
+        </a>
+      </li>
+
+      <li>
+        <a
+          href="https://mastodon.social/@[email protected]"
+          rel="noreferrer"
+          target="_blank"
+          className="leading-6 transition hover:opacity-75 dark:text-gray-200"
+        >
+          <span className="sr-only">Mastodon</span>
+          <FaMastodon className="h-6 w-6" />
+        </a>
+      </li>
     </>
   )
 }

diff --git 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 = () => {
             <div className="flex flex-col items-center">
                 <p className="tab-button-text">Share this post</p>
                 <div className="flex items-center gap-4">
-                    <button className="bg-primary px-6 py-3 rounded-[80px] tab-button-text flex items-center gap-3">
-                        <svg
-                            width="21"
-                            height="20"
-                            viewBox="0 0 21 20"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M15.5 6.66675C16.8807 6.66675 18 5.54746 18 4.16675C18 2.78604 16.8807 1.66675 15.5 1.66675C14.1193 1.66675 13 2.78604 13 4.16675C13 5.54746 14.1193 6.66675 15.5 6.66675Z"
-                                stroke="white"
-                                stroke-Width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                            <path
-                                d="M5.5 12.5C6.88071 12.5 8 11.3807 8 10C8 8.61929 6.88071 7.5 5.5 7.5C4.11929 7.5 3 8.61929 3 10C3 11.3807 4.11929 12.5 5.5 12.5Z"
-                                stroke="white"
-                                stroke-Width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                            <path
-                                d="M15.5 18.3335C16.8807 18.3335 18 17.2142 18 15.8335C18 14.4528 16.8807 13.3335 15.5 13.3335C14.1193 13.3335 13 14.4528 13 15.8335C13 17.2142 14.1193 18.3335 15.5 18.3335Z"
-                                stroke="white"
-                                stroke-Width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                            <path
-                                d="M7.65625 11.2583L13.3479 14.575"
-                                stroke="white"
-                                stroke-Width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                            <path
-                                d="M13.3396 5.42505L7.65625 8.74172"
-                                stroke="white"
-                                stroke-Width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                        </svg>
-                        Share
-                    </button>
-                    <a aria-label="Share on FB" href="">
-                        <MobileFooterFacebook />
-                    </a>
-                    <a aria-label="Share on X" href="">
-                        <MobileFooterSocial />
-                    </a>
-                    <a aria-label="Share on GitHub" href="">
-                        <MobileFooterCat />
-                    </a>
+                    <Link to="#share-buttons">
+                        <button className="bg-primary px-6 py-3 rounded-[80px] tab-button-text flex items-center gap-3">
+                            <CiShare2 size={25} />
+                            Share
+                        </button>
+                    </Link>
                 </div>
             </div>
             <div className="bg-[#3E3355] w-full h-[1px] inline-block"></div>

diff --git 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 (
-    <>
+    <div id="share-buttons">
       <TwitterShareButton
         aria-label="x"
         url={url}
@@ -33,7 +38,7 @@ const ShareButton = props => {
         related={twitter}
         style={iconStyle}
       >
-        <XIcon size={iconSize} />
+        <FaSquareXTwitter size={30} />
       </TwitterShareButton>
 
       <LinkedinShareButton
@@ -43,11 +48,11 @@ const ShareButton = props => {
         source={siteMetadata.siteUrl}
         style={iconStyle}
       >
-        <LinkedinIcon size={iconSize} />
+        <FaLinkedin size={30}/>
       </LinkedinShareButton>
 
       <FacebookShareButton aria-label="facebook" url={url} style={iconStyle}>
-        <FacebookIcon size={iconSize} />
+        <FaFacebookSquare size={30} />
       </FacebookShareButton>
 
       <RedditShareButton
@@ -56,7 +61,7 @@ const ShareButton = props => {
         title={post.title}
         style={iconStyle}
       >
-        <RedditIcon size={iconSize} />
+        <FaRedditSquare size={30} />
       </RedditShareButton>
 
       <EmailShareButton
@@ -65,9 +70,9 @@ const ShareButton = props => {
         subject={post.title}
         style={iconStyle}
       >
-        <EmailIcon size={iconSize} />
+        <FaSquareEnvelope size={30} />
       </EmailShareButton>
-    </>
+    </div>
   )
 }