refactor: react sharing icons

.frontmatter/database/mediaDb.json

@@ -1 +1 @@
-{"public":{"images":{"articles":{"astuces-dexpat-pour-faciliter-demarches-administratives":{"map-earth-carnet-camera.jpeg":{"caption":"Carnet open on an old brown map. Multiple objects around like a pair of glasses, an old camera.","alt":"Photo by Dariusz Sankowski on Unsplash"},"american-passport-airplane-ticket.jpeg":{}},"decade-web-development-personal-journey":{"wikiktosource-fr.jpg":{}}}}},"apps":{"blog":{"public":{"images":{"articles":{"desk-setup":{"desk-setup-front.jpg":{},"daily-setup-01.jpg":{},"music-setup-01.jpg":{},"electronics-setup-01.jpg":{},"craft-setup-01.jpg":{}}}}}}}}
+{"public":{"images":{"articles":{"astuces-dexpat-pour-faciliter-demarches-administratives":{"map-earth-carnet-camera.jpeg":{"caption":"Carnet open on an old brown map. Multiple objects around like a pair of glasses, an old camera.","alt":"Photo by Dariusz Sankowski on Unsplash"},"american-passport-airplane-ticket.jpeg":{}},"decade-web-development-personal-journey":{"wikiktosource-fr.jpg":{}}}}},"apps":{"blog":{"public":{"images":{"articles":{"desk-setup":{"desk-setup-front.jpg":{},"daily-setup-01.jpg":{},"music-setup-01.jpg":{},"electronics-setup-01.jpg":{},"craft-setup-01.jpg":{}}}}},"src":{"declarations":{}}}}}

.github/workflows/production-deployment.yml

@@ -40,7 +40,7 @@ jobs:
           run_install: false
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run tests
         run: pnpm test

.github/workflows/staging-deployment.yml

@@ -52,7 +52,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.pnpm-cache.outputs.cache-hit != 'true'
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run tests
         run: pnpm test

apps/blog/package.json

@@ -44,6 +44,7 @@
     "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-share": "^5.1.0",
     "reading-time": "^1.5.0",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
@@ -100,7 +101,6 @@
     "pretty-ms": "^8.0.0",
     "react-goodreads-shelf": "^3.1.5",
     "react-social-media-embed": "^2.3.5",
-    "react-social-sharing": "^3.3.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-figure": "^1.0.1",
     "rehype-image-placeholder": "^1.0.1",

apps/blog/src/components/Share/Share.tsx

@@ -1,6 +1,15 @@
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
-import { Facebook, Linkedin, Reddit, Twitter } from 'react-social-sharing'
+import {
+  FacebookShareButton,
+  LinkedinShareButton,
+  RedditShareButton,
+  TwitterShareButton,
+  LinkedinIcon,
+  XIcon,
+  RedditIcon,
+  FacebookMessengerIcon,
+} from 'react-share'
 
 export type ShareProps = {
   permalink: string
@@ -13,10 +22,18 @@ export const Share: React.FC<ShareProps> = ({ permalink, title }) => {
   return (
     <aside>
       <p className="small-title">{t('share.title')}</p>
-      <Twitter small message={`${title} by @thedaviddias`} link={permalink} className="h-8 w-10" />
-      <Linkedin small message={title} link={permalink} className="h-8 w-10" />
-      <Reddit small link={permalink} className="h-8 w-10" />
-      <Facebook small link={permalink} className="h-8 w-10" />
+      <TwitterShareButton title={`${title} by @thedaviddias`} url={permalink} className="h-8 w-10">
+        <XIcon size={32} round />
+      </TwitterShareButton>
+      <LinkedinShareButton title={title} url={permalink} className="h-8 w-10">
+        <LinkedinIcon size={32} round />
+      </LinkedinShareButton>
+      <RedditShareButton url={permalink} className="h-8 w-10">
+        <RedditIcon size={32} round />
+      </RedditShareButton>
+      <FacebookShareButton url={permalink} className="h-8 w-10">
+        <FacebookMessengerIcon size={32} round />
+      </FacebookShareButton>
     </aside>
   )
 }