feat: share through social platforms

src/components/Blog/ContentTable/index.tsx → src/components/Blog/ContentsTable/index.tsx

@@ -1,12 +1,11 @@
 import kebabCase from 'lodash/kebabCase'
-import css from '../styles.module.css'
 import { BLOCKS, type Document as ContentfulDocument, type Text } from '@contentful/rich-text-types'
 import { isText } from '@/lib/typeGuards'
 import { useMemo } from 'react'
 import { scrollToElement } from '@/lib/scrollSmooth'
 import { Typography } from '@mui/material'
 
-const ContentTable = ({ content }: { content: ContentfulDocument }) => {
+const ContentsTable = ({ content }: { content: ContentfulDocument }) => {
   const handleContentTableClick = (e: React.MouseEvent<HTMLAnchorElement>, target: string) => {
     e.preventDefault()
 
@@ -26,24 +25,22 @@ const ContentTable = ({ content }: { content: ContentfulDocument }) => {
   )
 
   return (
-    <aside className={css.contentTable}>
-      <ul>
-        {headings.map((heading) => {
-          const headingKey = kebabCase(heading.id)
+    <ul>
+      {headings.map((heading) => {
+        const headingKey = kebabCase(heading.id)
 
-          return (
-            <li key={headingKey}>
-              <Typography>
-                <a onClick={(e) => handleContentTableClick(e, headingKey)} href={`#${headingKey}`}>
-                  {heading.text}
-                </a>
-              </Typography>
-            </li>
-          )
-        })}
-      </ul>
-    </aside>
+        return (
+          <li key={headingKey}>
+            <Typography>
+              <a onClick={(e) => handleContentTableClick(e, headingKey)} href={`#${headingKey}`}>
+                {heading.text}
+              </a>
+            </Typography>
+          </li>
+        )
+      })}
+    </ul>
   )
 }
 
-export default ContentTable
+export default ContentsTable

src/components/Blog/Post/index.tsx

@@ -11,7 +11,8 @@ import BreadcrumbsNav from '@/components/Blog/BreadcrumbsNav'
 import Tags from '@/components/Blog/Tags'
 import Authors from '@/components/Blog/Authors'
 import RichText from '@/components/Campaign/RichText'
-import ContentTable from '@/components/Blog/ContentTable'
+import ContentsTable from '@/components/Blog/ContentsTable'
+import Socials from '@/components/Blog/Socials'
 import RelatedPosts from '@/components/Blog/RelatedPosts'
 import CategoryIcon from '@/public/images/Blog/category-icon.svg'
 import css from '../styles.module.css'
@@ -27,15 +28,6 @@ const BlogPost = ({ blogPost }: { blogPost: BlogPostEntry }) => {
       <Container className={css.post}>
         <BreadcrumbsNav category={category} title={title} />
 
-        {isAsset(coverImage) && coverImage.fields.file?.url ? (
-          <Image
-            src={coverImage.fields.file.url}
-            alt={(coverImage.fields.title = '')}
-            width={coverImage.fields.file.details.image?.width}
-            height={coverImage.fields.file.details.image?.height}
-          />
-        ) : undefined}
-
         <div className={css.meta}>
           <div className={css.metaStart}>
             <Typography className={css.category}>
@@ -65,10 +57,21 @@ const BlogPost = ({ blogPost }: { blogPost: BlogPostEntry }) => {
 
         <Grid container className={css.content} columnSpacing={3}>
           <Grid item xs={12} md={4}>
-            <ContentTable content={content} />
+            <aside className={css.sidebar}>
+              <ContentsTable content={content} />
+              <Socials title={title} authors={authors.filter(isEntryTypeAuthor)} />
+            </aside>
           </Grid>
 
           <Grid item xs={12} md={8}>
+            {isAsset(coverImage) && coverImage.fields.file?.url ? (
+              <Image
+                src={coverImage.fields.file.url}
+                alt={(coverImage.fields.title = '')}
+                width={coverImage.fields.file.details.image?.width}
+                height={coverImage.fields.file.details.image?.height}
+              />
+            ) : undefined}
             <RichText {...content} />
           </Grid>
         </Grid>

src/components/Blog/Socials/index.tsx

@@ -0,0 +1,40 @@
+import { useRouter } from 'next/router'
+import { AppRoutes } from '@/config/routes'
+import XIcon from '@/public/images/x-icon.svg'
+import LinkedinIcon from '@/public/images/linkedin-icon.svg'
+import { type Entry } from 'contentful'
+import { type TypeAuthorSkeleton } from '@/contentful/types'
+import { IconButton, SvgIcon } from '@mui/material'
+import css from '../styles.module.css'
+
+const Socials = ({ title, authors }: { title: string; authors: Entry<TypeAuthorSkeleton, undefined, string>[] }) => {
+  const router = useRouter()
+
+  const currentUrl = `${AppRoutes.blog}${router.asPath}`
+
+  const sharingText = `${title} by @${authors
+    .map((author) => author.fields.name)
+    .join(', @')
+    .toString()}`
+
+  const xUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}&text=${encodeURIComponent(
+    sharingText,
+  )}`
+  const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(currentUrl)}`
+
+  return (
+    <div className={css.socials}>
+      {/* X */}
+      <IconButton aria-label="Share on X" href={xUrl} target="_blank" rel="noreferrer" size="small">
+        <SvgIcon component={XIcon} fontSize="inherit" color="inherit" inheritViewBox />
+      </IconButton>
+
+      {/* Linkedin */}
+      <IconButton aria-label="Share on Linkedin" href={linkedinUrl} target="_blank" rel="noreferrer" size="small">
+        <SvgIcon component={LinkedinIcon} fontSize="inherit" color="inherit" inheritViewBox />
+      </IconButton>
+    </div>
+  )
+}
+
+export default Socials

src/components/Blog/styles.module.css

@@ -71,15 +71,25 @@
   color: var(--mui-palette-primary-main);
 }
 
-.contentTable ul {
+.sidebar ul {
   padding-left: 0px;
   list-style: none;
 }
 
-.contentTable li {
+.sidebar li {
   margin-bottom: 8px;
 }
 
+.socials {
+  display: flex;
+  gap: 16px;
+}
+
+.socials svg {
+  width: 24px;
+  height: 24px;
+}
+
 @media (min-width: 900px) {
   .title {
     margin-top: 24px;
@@ -93,7 +103,7 @@
     flex-direction: row-reverse;
   }
 
-  .contentTable {
+  .sidebar {
     position: sticky;
     top: calc(var(--header-height) + 24px);
   }