blog: add social share (#355)

Author: jiashengguo

package.json

@@ -31,6 +31,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
+        "react-share": "^5.1.0",
         "react-simple-typewriter": "^5.0.1",
         "tailwindcss": "^3.2.4"
     },

pnpm-lock.yaml

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export const Twitter = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={36}
+        height={36}
+        fill="none"
+        {...props}
+        viewBox="0 0 24 24"
+        className={clsx('text-black dark:text-white', props.className)}
+    >
+        <title>Twitter</title>
+        <rect
+            width={24}
+            height={24}
+            fill="currentColor"
+            rx={12}
+            className={clsx('text-gray-200 dark:text-black', props.className)}
+        />
+        <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="m6 6 4.62 6.75L6.098 18H7.1l3.963-4.604L14.214 18H18l-4.827-7.052L17.433 6h-1l-3.703 4.3L9.786 6H6Zm1.196.632h2.258l7.35 10.736h-2.258L7.196 6.632Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);

src/theme/BlogPostPage/icons.tsx

@@ -10,6 +10,9 @@ import TOC from '@theme/TOC';
 import Unlisted from '@theme/Unlisted';
 import GiscusComponent from '@site/src/components/GiscusComponent';
 import { PostPaginator } from '@site/src/components/blog/post-paginator';
+import { LinkedinShareButton, RedditShareButton, TwitterShareButton, RedditIcon, LinkedinIcon } from 'react-share';
+import { Twitter } from './icons';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function getMultipleRandomPosts(relatedPosts, number) {
     // Create a copy of the original array to avoid modifying it
@@ -53,9 +56,8 @@ function getMultipleRandomPosts(relatedPosts, number) {
 
 function BlogPostPageContent({ children }) {
     const { metadata, toc } = useBlogPost();
-    const { relatedPosts } = metadata;
 
-    const { nextItem, prevItem, frontMatter, unlisted } = metadata;
+    const { relatedPosts, nextItem, prevItem, frontMatter, unlisted, permalink, title, description } = metadata;
     const {
         hide_table_of_contents: hideTableOfContents,
         toc_min_heading_level: tocMinHeadingLevel,
@@ -65,6 +67,9 @@ function BlogPostPageContent({ children }) {
     const randomThreeRelatedPosts = getMultipleRandomPosts(relatedPosts, 3);
 
     console.log('relatedPosts', relatedPosts);
+    const {
+        siteConfig: { url },
+    } = useDocusaurusContext();
 
     return (
         <BlogLayout
@@ -77,6 +82,36 @@ function BlogPostPageContent({ children }) {
             {unlisted && <Unlisted />}
 
             <BlogPostItem>{children}</BlogPostItem>
+            <div className="flex items-center gap-3 pt-10 not-prose">
+                <span className="text-base">Share on</span>
+                <TwitterShareButton
+                    windowWidth={750}
+                    windowHeight={800}
+                    url={url + permalink}
+                    className="flex"
+                    title={title}
+                >
+                    <Twitter width={36} height={36} />
+                </TwitterShareButton>
+                <RedditShareButton
+                    className="flex"
+                    windowWidth={750}
+                    windowHeight={600}
+                    url={url + permalink}
+                    title={title}
+                >
+                    <RedditIcon size={36} round />
+                </RedditShareButton>
+                <LinkedinShareButton
+                    url={url + permalink}
+                    title={title}
+                    source={url}
+                    summary={description}
+                    className="flex"
+                >
+                    <LinkedinIcon size={36} round />
+                </LinkedinShareButton>
+            </div>
             <PostPaginator title="Related Articles" posts={randomThreeRelatedPosts}></PostPaginator>
             <GiscusComponent />
             {(nextItem || prevItem) && <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />}