Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add social sharing buttons to blog posts #3698

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+101 −0
Open

feat: add social sharing buttons to blog posts #3698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e24173b
feat: add social sharing buttons to blog posts
AritraDey-Dev Feb 17, 2025
d8b3bac
fix: add a general social media comonets
AritraDey-Dev Feb 17, 2025
ac70916
fix: add a general social media comonets
AritraDey-Dev Feb 17, 2025
939793a
Merge branch 'master' into feat/add-social-media-icons
asyncapi-bot Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions components/SocialShareButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import IconTwitter from './icons/Twitter';
import IconLinkedIn from './icons/LinkedIn';
interface SocialShareButtonsProps {
url: string;
text: string;
}
Comment on lines +1 to +6
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fix import sorting.

The imports need to be sorted according to the project's conventions.

Apply this diff to fix the import sorting:

-import IconTwitter from './icons/Twitter';
-import IconLinkedIn from './icons/LinkedIn';
+import IconLinkedIn from './icons/LinkedIn';
+import IconTwitter from './icons/Twitter';

interface SocialShareButtonsProps {
  url: string;
  text: string;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import IconTwitter from './icons/Twitter';
import IconLinkedIn from './icons/LinkedIn';
interface SocialShareButtonsProps {
url: string;
text: string;
}
import IconLinkedIn from './icons/LinkedIn';
import IconTwitter from './icons/Twitter';
interface SocialShareButtonsProps {
url: string;
text: string;
}
🧰 Tools
🪛 ESLint

[error] 1-2: Run autofix to sort these imports!

(simple-import-sort/imports)

[error] 2-2: Expected 1 empty line after import statement not followed by another import.

(import/newline-after-import)

[error] 4-4: Delete ··

(prettier/prettier)

[error] 5-5: Replace ···· with ··

(prettier/prettier)

[error] 6-6: Delete ··

(prettier/prettier)

🪛 GitHub Actions: PR testing - if Node project

[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports

[error] 2-2: Expected 1 empty line after import statement not followed by another import. import/newline-after-import

[error] 4-4: Delete ·· prettier/prettier

[error] 5-5: Replace ···· with ·· prettier/prettier

[error] 6-6: Delete ·· prettier/prettier


export function SocialShareButtons({ url, text }: SocialShareButtonsProps) {
return (
<div className='mt-4 flex space-x-4'>
<a
href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
<IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
<IconLinkedIn className='size-6' />
</a>
</div>
);
}
Comment on lines +8 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add URL encoding for share parameters.

The URL and text parameters should be properly encoded to prevent XSS and ensure the sharing links work correctly with special characters.

Apply this diff to add URL encoding:

 export function SocialShareButtons({ url, text }: SocialShareButtonsProps) {
   return (
     <div className='mt-4 flex space-x-4'>
       <a
-        href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`}
+        href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}&hashtags=AsyncAPI`}
         target='_blank'
         rel='noopener noreferrer'
         className='text-blue-500 hover:text-blue-700'
       >
         <IconTwitter className='size-6' />
       </a>
       <a
-        href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
+        href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`}
         target='_blank'
         rel='noopener noreferrer'
         className='text-blue-700 hover:text-blue-900'
       >
         <IconLinkedIn className='size-6' />
       </a>
     </div>
   );
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export function SocialShareButtons({ url, text }: SocialShareButtonsProps) {
return (
<div className='mt-4 flex space-x-4'>
<a
href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
<IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
<IconLinkedIn className='size-6' />
</a>
</div>
);
}
export function SocialShareButtons({ url, text }: SocialShareButtonsProps) {
return (
<div className='mt-4 flex space-x-4'>
<a
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
<IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
<IconLinkedIn className='size-6' />
</a>
</div>
);
}
🧰 Tools
🪛 ESLint

[error] 8-8: Delete ··

(prettier/prettier)

[error] 9-9: Delete ··

(prettier/prettier)

[error] 10-10: Delete ··

(prettier/prettier)

[error] 11-11: Delete ··

(prettier/prettier)

[error] 12-12: Delete ··

(prettier/prettier)

[error] 13-13: Delete ··

(prettier/prettier)

[error] 14-14: Replace ·········· with ········

(prettier/prettier)

[error] 15-15: Delete ··

(prettier/prettier)

[error] 16-16: Delete ··

(prettier/prettier)

[error] 17-17: Replace ·········· with ········

(prettier/prettier)

[error] 18-18: Delete ··

(prettier/prettier)

[error] 19-19: Delete ··

(prettier/prettier)

[error] 20-20: Delete ··

(prettier/prettier)

[error] 21-21: Delete ··

(prettier/prettier)

[error] 22-22: Delete ··

(prettier/prettier)

[error] 23-23: Delete ··

(prettier/prettier)

[error] 24-24: Delete ··

(prettier/prettier)

[error] 25-25: Delete ··

(prettier/prettier)

[error] 26-26: Delete ··

(prettier/prettier)

[error] 27-27: Delete ··

(prettier/prettier)

[error] 28-28: Replace ···· with ··

(prettier/prettier)

[error] 29-29: Replace ··} with }⏎

(prettier/prettier)

[error] 29-29: Newline required at end of file but not found.

(eol-last)

🪛 GitHub Actions: PR testing - if Node project

[error] 8-8: Delete ·· prettier/prettier

[error] 8-10: Delete ·· prettier/prettier

[error] 9-9: Delete ·· prettier/prettier

[error] 10-10: Delete ·· prettier/prettier

[error] 11-11: Delete ·· prettier/prettier

[error] 12-12: Delete ·· prettier/prettier

[error] 13-13: Delete ·· prettier/prettier

[error] 14-14: Replace ·········· with ········ prettier/prettier

[error] 15-15: Delete ·· prettier/prettier

[error] 16-16: Delete ·· prettier/prettier

[error] 17-17: Replace ·········· with ········ prettier/prettier

[error] 18-18: Delete ·· prettier/prettier

[error] 19-19: Delete ·· prettier/prettier

[error] 20-20: Delete ·· prettier/prettier

[error] 21-21: Delete ·· prettier/prettier

[error] 22-22: Delete ·· prettier/prettier

[error] 23-23: Delete ·· prettier/prettier

[error] 24-24: Delete ·· prettier/prettier

[error] 25-25: Delete ·· prettier/prettier

[error] 26-26: Delete ·· prettier/prettier

[error] 27-27: Delete ·· prettier/prettier

[error] 28-28: Replace ···· with ·· prettier/prettier

[error] 29-29: Replace ··} with }⏎ prettier/prettier

[error] 29-29: Newline required at end of file but not found. eol-last

6 changes: 6 additions & 0 deletions components/layout/BlogLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import AnnouncementHero from '../campaigns/AnnouncementHero';
import Head from '../Head';
import TOC from '../TOC';
import Container from './Container';
import { SocialShareButtons } from '../SocialShareButtons';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove trailing space in import statement.

The import statement has a trailing space that needs to be removed.

Apply this diff to fix the formatting:

-import { SocialShareButtons } from '../SocialShareButtons'; 
+import { SocialShareButtons } from '../SocialShareButtons';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { SocialShareButtons } from '../SocialShareButtons';
import { SocialShareButtons } from '../SocialShareButtons';
🧰 Tools
🪛 ESLint

[error] 1-15: Run autofix to sort these imports!

(simple-import-sort/imports)

[error] 15-15: Trailing spaces not allowed.

(no-trailing-spaces)

[error] 15-15: Delete ·

(prettier/prettier)

🪛 GitHub Actions: PR testing - if Node project

[error] 15-15: Trailing spaces not allowed. no-trailing-spaces

[error] 15-15: Delete · prettier/prettier


interface IBlogLayoutProps {
post: IPosts['blog'][number];
Expand Down Expand Up @@ -39,6 +40,9 @@ export default function BlogLayout({
return <ErrorPage statusCode={404} />;
}

const shareUrl = `https://www.asyncapi.com${router.asPath}`;
const shareText = post.title;

return (
<BlogContext.Provider value={{ post }}>
<AnnouncementHero className='mx-8 my-4' />
Expand Down Expand Up @@ -82,6 +86,7 @@ export default function BlogLayout({
</div>
</div>
</div>
<SocialShareButtons url={shareUrl} text={shareText} /> {/* Use the SocialShareButtons component */}
</header>
<article className='mb-32'>
<Head title={post.title} description={post.excerpt} image={post.cover} />
Expand Down Expand Up @@ -112,6 +117,7 @@ export default function BlogLayout({
</HtmlHead>
<img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className='my-6 w-full' />
{children}
<SocialShareButtons url={shareUrl} text={shareText} /> {/* Use the SocialShareButtons component */}
</article>
</main>
</Container>
Expand Down
23 changes: 23 additions & 0 deletions components/navigation/BlogPostItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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'>
Expand Down Expand Up @@ -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>
Comment on lines +135 to +152
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Prevent social share clicks from triggering parent Link navigation.

The social sharing buttons are inside a parent Link component, which might cause unintended navigation when clicking the share buttons.

-              <div className='mt-4 flex space-x-4'>
+              <div className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}>
                 <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'
+                  onClick={(e) => e.stopPropagation()}
                 >
                   <IconTwitter className='size-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'
+                  onClick={(e) => e.stopPropagation()}
                 >
                   <IconLinkedIn className='size-6' />
                 </a>
               </div>

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[warning] 142-142: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand

[warning] 150-150: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand

</div>
</span>
</Link>
Expand Down
23 changes: 23 additions & 0 deletions components/newsroom/FeaturedBlogPost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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'>
Expand Down Expand Up @@ -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>
Comment on lines +115 to +132
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Prevent social share clicks from triggering parent Link navigation.

The social sharing buttons are inside a parent Link component, which might cause unintended navigation when clicking the share buttons.

Apply this diff to prevent event propagation:

-              <div className='mt-4 flex space-x-4'>
+              <div className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}>
                 <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'
+                  onClick={(e) => e.stopPropagation()}
                 >
-                  <IconTwitter className='h-6 w-6' />
+                  <IconTwitter className='size-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'
+                  onClick={(e) => e.stopPropagation()}
                 >
-                  <IconLinkedIn className='h-6 w-6' />
+                  <IconLinkedIn className='size-6' />
                 </a>
               </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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 className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}>
<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'
onClick={(e) => e.stopPropagation()}
>
<IconTwitter className='size-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'
onClick={(e) => e.stopPropagation()}
>
<IconLinkedIn className='size-6' />
</a>
</div>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[warning] 122-122: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand

[warning] 130-130: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand

</div>
</span>
</Link>
Expand Down
20 changes: 20 additions & 0 deletions pages/blog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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>
Comment on lines +138 to +155
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove hardcoded values and maintain URL consistency.

The sharing implementation uses hardcoded values and a different URL format compared to other components.

-          <div className='mt-8 flex space-x-4 justify-center'>
+          <div className='mt-8 flex justify-center space-x-4'>
             <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')}`}
+              href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out AsyncAPI Blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog')}`}
               target='_blank'
               rel='noopener noreferrer'
               className='text-blue-500 hover:text-blue-700'
             >
-              <IconTwitter className='h-6 w-6' />
+              <IconTwitter className='size-6' />
             </a>
             <a
-              href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`}
+              href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog')}`}
               target='_blank'
               rel='noopener noreferrer'
               className='text-blue-700 hover:text-blue-900'
             >
-              <IconLinkedIn className='h-6 w-6' />
+              <IconLinkedIn className='size-6' />
             </a>
           </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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 className='mt-8 flex justify-center space-x-4'>
<a
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out AsyncAPI Blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog')}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
<IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog')}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
<IconLinkedIn className='size-6' />
</a>
</div>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[warning] 138-138: Invalid Tailwind CSS classnames order tailwindcss/classnames-order

[warning] 145-145: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand

[warning] 153-153: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand

</div>
</div>
</GenericLayout>
Expand Down
Loading