diff --git a/components/layout/BlogLayout.tsx b/components/layout/BlogLayout.tsx index a1570bf25c6b..bbfd56ee7a97 100644 --- 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 ; } + const shareUrl = encodeURIComponent(`https://www.asyncapi.com${router.asPath}`); + const shareText = encodeURIComponent(post.title); + return ( {/* @TODO Will uncomment the component once it is in use */} @@ -83,6 +88,24 @@ export default function BlogLayout({ +
+ + + + + + +
@@ -113,6 +136,24 @@ export default function BlogLayout({ {post.coverCaption} {children} +
+ + + + + + +
diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx index 264fe0b6c66e..d857582e61a2 100644 --- 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 (
  • @@ -127,6 +132,24 @@ export default forwardRef(function BlogPostItem( +
    + + + + + + +
    diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx index 49b4c8ef4ab4..5e9486422bf9 100644 --- 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 (
    @@ -107,6 +112,24 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
    +
    + + + + + + +
    diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index b6a13e507157..76100c645568 100644 --- 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() { )} +
    + + + + + + +