feat: add social sharing buttons to blog posts

asyncapi · Feb 17, 2025 · ee19852 · ee19852
1 parent 1b240da
commit ee19852
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 0 deletions.
diff --git a/components/layout/BlogLayout.tsx b/components/layout/BlogLayout.tsx
@@ -12,6 +12,8 @@ import AuthorAvatars from '../AuthorAvatars';
 import Head from '../Head';
 import TOC from '../TOC';
 import Container from './Container';
+import IconTwitter from '../icons/Twitter';
+import IconLinkedIn from '../icons/LinkedIn';
 
 interface IBlogLayoutProps {
   post: IPosts['blog'][number];
@@ -39,6 +41,9 @@ export default function BlogLayout({
     return <ErrorPage statusCode={404} />;
   }
 
+  const shareUrl = encodeURIComponent(`https://www.asyncapi.com${router.asPath}`);
+  const shareText = encodeURIComponent(post.title);
+
   return (
     <BlogContext.Provider value={{ post }}>
       {/* @TODO Will uncomment the component once it is in use */}
@@ -83,6 +88,24 @@ export default function BlogLayout({
                 </div>
               </div>
             </div>
+            <div className='mt-4 flex space-x-4'>
+              <a
+                href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='text-blue-500 hover:text-blue-700'
+              >
+                <IconTwitter className='h-6 w-6' />
+              </a>
+              <a
+                href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='text-blue-700 hover:text-blue-900'
+              >
+                <IconLinkedIn className='h-6 w-6' />
+              </a>
+            </div>
           </header>
           <article className='mb-32'>
             <Head title={post.title} description={post.excerpt} image={post.cover} />
@@ -113,6 +136,24 @@ export default function BlogLayout({
             </HtmlHead>
             <img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className='my-6 w-full' />
             {children}
+            <div className='mt-8 flex space-x-4'>
+              <a
+                href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='text-blue-500 hover:text-blue-700'
+              >
+                <IconTwitter className='h-6 w-6' />
+              </a>
+              <a
+                href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='text-blue-700 hover:text-blue-900'
+              >
+                <IconLinkedIn className='h-6 w-6' />
+              </a>
+            </div>
           </article>
         </main>
       </Container>

diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx
@@ -12,6 +12,8 @@ import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 import AuthorAvatars from '../AuthorAvatars';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
+import IconTwitter from '../icons/Twitter';
+import IconLinkedIn from '../icons/LinkedIn';
 
 interface BlogPostItemProps {
   // eslint-disable-next-line prettier/prettier
@@ -51,6 +53,9 @@ export default forwardRef(function BlogPostItem(
     default:
   }
 
+  const shareUrl = encodeURIComponent(`https://www.asyncapi.com${post.slug}`);
+  const shareText = encodeURIComponent(post.title);
+
   return (
     <li className={`list-none rounded-lg ${className}`} ref={ref} id={id}>
       <article className='h-full rounded-lg'>
@@ -127,6 +132,24 @@ export default forwardRef(function BlogPostItem(
                   </Paragraph>
                 </div>
               </div>
+              <div className='mt-4 flex space-x-4'>
+                <a
+                  href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='text-blue-500 hover:text-blue-700'
+                >
+                  <IconTwitter className='h-6 w-6' />
+                </a>
+                <a
+                  href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='text-blue-700 hover:text-blue-900'
+                >
+                  <IconLinkedIn className='h-6 w-6' />
+                </a>
+              </div>
             </div>
           </span>
         </Link>

diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx
@@ -11,6 +11,8 @@ import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 import AuthorAvatars from '../AuthorAvatars';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
+import IconTwitter from '../icons/Twitter';
+import IconLinkedIn from '../icons/LinkedIn';
 
 interface FeaturedBlogPostProps {
   post: IBlogPost;
@@ -41,6 +43,9 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
     default:
   }
 
+  const shareUrl = encodeURIComponent(`https://www.asyncapi.com${post.slug}`);
+  const shareText = encodeURIComponent(post.title);
+
   return (
     <div className={`rounded-lg ${className}`}>
       <article className='h-full rounded-lg'>
@@ -107,6 +112,24 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
                   </Paragraph>
                 </div>
               </div>
+              <div className='mt-4 flex space-x-4'>
+                <a
+                  href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='text-blue-500 hover:text-blue-700'
+                >
+                  <IconTwitter className='h-6 w-6' />
+                </a>
+                <a
+                  href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='text-blue-700 hover:text-blue-900'
+                >
+                  <IconLinkedIn className='h-6 w-6' />
+                </a>
+              </div>
             </div>
           </span>
         </Link>

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -13,6 +13,8 @@ import BlogContext from '@/context/BlogContext';
 import type { IBlogPost } from '@/types/post';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import IconTwitter from '@/components/icons/Twitter';
+import IconLinkedIn from '@/components/icons/LinkedIn';
 
 /**
  * @description The BlogIndexPage is the blog index page of the website.
@@ -133,6 +135,24 @@ export default function BlogIndexPage() {
               </div>
             )}
           </div>
+          <div className='mt-8 flex space-x-4 justify-center'>
+            <a
+              href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-blue-500 hover:text-blue-700'
+            >
+              <IconTwitter className='h-6 w-6' />
+            </a>
+            <a
+              href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-blue-700 hover:text-blue-900'
+            >
+              <IconLinkedIn className='h-6 w-6' />
+            </a>
+          </div>
         </div>
       </div>
     </GenericLayout>