feat: ✨ add react-share social media to blog posts

components/icons/index.js

@@ -1,9 +1,11 @@
 import Calendar from './calendar.svg'
+import Clipboard from './clipboard.svg'
 
 // Icons taken from: https://heroicons.com/
 
 const components = {
   calendar: Calendar,
+  clipboard: Clipboard,
 }
 
 const AppIcons = ({ kind, size = 8 }) => {

data/authors/uses.md

@@ -15,7 +15,7 @@ github: https://github.com/lucasdsalves
    💻 Laptop Dell Vostro 5402
     <ul>
       <li>
-        Specs: 16GB 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz  1.69 GHz
+        Specs: 256GB SSD 16GB DDR4 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz  1.69 GHz
       </li>
     </ul>  
   </li>

data/siteMetadata.js

@@ -2,11 +2,11 @@ const siteMetadata = {
   title: 'lucasdsalves | Lucas dos Santos Alves',
   author: 'Lucas dos Santos Alves',
   headerTitle: 'Lucas dos Santos Alves',
-  description: 'A blog created with Next.js and Tailwind.css',
+  description: 'Lucas dos Santos Alves website',
   language: 'en-us',
   theme: 'system', // system, dark or light
-  siteUrl: 'https://tailwind-nextjs-starter-blog.vercel.app',
-  siteRepo: 'https://github.com/timlrx/tailwind-nextjs-starter-blog',
+  siteUrl: 'https://lucasdsalves.com',
+  siteRepo: 'https://github.com/lucasdsalves/lucasdsalves.com',
   siteLogo: '/static/images/logo.png',
   image: '/static/images/profile.png',
   socialBanner: '/static/images/twitter-card.png',

layouts/PostLayout.js

@@ -7,7 +7,25 @@ import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import Comments from '@/components/comments'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
+import SocialIcon from '@/components/social-icons'
 import AppIcons from '@/components/icons'
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  TelegramShareButton,
+  EmailShareButton,
+  LinkedinShareButton,
+  RedditShareButton,
+  WhatsappShareButton,
+  TwitterIcon,
+  FacebookIcon,
+  TelegramIcon,
+  PocketShareButton,
+  PocketIcon,
+  WhatsappIcon,
+  EmailIcon,
+  LinkedinIcon,
+} from 'react-share'
 
 const editUrl = (fileName) => `${siteMetadata.siteRepo}/blob/master/data/blog/${fileName}`
 const discussUrl = (slug) =>
@@ -19,6 +37,7 @@ const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day:
 
 export default function PostLayout({ frontMatter, authorDetails, next, prev, children }) {
   const { slug, fileName, date, title, images, tags } = frontMatter
+  const postUrl = `${siteMetadata.siteUrl}/blog/${slug}`
 
   return (
     <SectionContainer>
@@ -59,6 +78,51 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
           >
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-4 xl:row-span-2 xl:pb-0">
               <div className="prose max-w-none pt-8 pb-8 dark:prose-dark">{children}</div>
+              <div className="grid place-items-center pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
+                <div className="flex items-center space-x-4 pb-2 italic">Share this post</div>
+                <div className="flex items-center space-x-4">
+                  <TwitterShareButton url={postUrl} title={title} via="lucasdsalves">
+                    <TwitterIcon size={32} round={true} />
+                  </TwitterShareButton>
+                  <FacebookShareButton url={postUrl} quote={title} caption="Share on Facebook">
+                    <FacebookIcon size={32} round={true} />
+                  </FacebookShareButton>
+                  <WhatsappShareButton url={postUrl} title={title}>
+                    <WhatsappIcon size={32} round={true} />
+                  </WhatsappShareButton>
+                  <TelegramShareButton url={postUrl} title={title} alt="Telegram">
+                    <TelegramIcon size={32} round={true} />
+                  </TelegramShareButton>
+                  <EmailShareButton
+                    body={'Check out this blog post'}
+                    subject={title}
+                    separator=" : "
+                    url={postUrl}
+                    title="Email"
+                  >
+                    <EmailIcon size={32} round={true} />
+                  </EmailShareButton>
+                  <LinkedinShareButton
+                    summary={'Check out this blog post'}
+                    title={title}
+                    source={siteMetadata.siteUrl}
+                    url={postUrl}
+                  >
+                    <LinkedinIcon size={32} round={true} />
+                  </LinkedinShareButton>
+                  <PocketShareButton url={postUrl} title={title}>
+                    <PocketIcon size={32} round={true} />
+                  </PocketShareButton>
+                  <button
+                    onClick={() =>
+                      navigator.clipboard.writeText(`${siteMetadata.siteUrl}/blog/${slug}`)
+                    }
+                    title="Copy post link to clipboard"
+                  >
+                    <AppIcons kind="clipboard" size="5" />
+                  </button>
+                </div>
+              </div>
             </div>
             <footer>
               <div className="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y">

package.json

@@ -29,6 +29,7 @@
     "preact": "^10.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-share": "^4.4.1",
     "reading-time": "1.3.0",
     "rehype-autolink-headings": "^6.1.0",
     "rehype-citation": "^0.4.0",