feat: add social sharing buttons to blog posts #4673
Conversation
SinghSwayam
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
as code owners
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdds a new SocialShare component and integrates it into the blog post header, refactors the author/share header layout (responsive), removes AddThis script integration, and adds FontAwesome dependencies; several unrelated files receive non-functional formatting/whitespace edits. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4673--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/layout/BlogLayout.tsx (1)
95-116: Remove deprecated AddThis script and styles.The PR description states that the deprecated AddThis script and styles were removed, but they're still present in lines 95-116. This contradicts the stated objective.
Apply this diff to remove the AddThis integration:
<article className='mb-32'> <Head title={post.title} description={post.excerpt} image={post.cover} /> <HtmlHead> - <script - type='text/javascript' - src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cb852c7b57ed596' - async - /> - <style>{` - /* AddThis hack */ - - #at4-share { - left: 50%; - margin-left: -500px !important; - position: absolute; - - &.addthis-animated { - animation-duration: 0s !important; - } - } - - #at4-scc { - display: none !important; - } - `}</style> {post.canonical && <link rel='canonical' href={post.canonical} />} </HtmlHead>
🧹 Nitpick comments (2)
components/layout/BlogLayout.tsx (1)
82-89: Clean up unused CSS class.Line 82 includes
border-gray-200in the className but there's no border applied (noborderorborder-*class). This appears to be leftover from development.Apply this diff to clean up the className:
- <div className=" border-gray-200 flex items-center "> + <div className="flex items-center">components/navigation/SocialShare.tsx (1)
48-56: Simplify redundant ternary operator.Line 50 contains a redundant ternary:
text + (text ? ' ' : '') + title. Since we're already inside thetext ? ... : ...branch wheretextis truthy, the inner ternary will always evaluate to' '.Apply this diff to simplify:
const twitterParams = [ text - ? `text=${encode(text + (text ? ' ' : '') + title)}` + ? `text=${encode(text + ' ' + title)}` : `text=${encode(title)}`, shareUrl ? `url=${encode(shareUrl)}` : '', hashtagParam ? `hashtags=${encode(hashtagParam)}` : '', ]
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
components/layout/BlogLayout.tsx(3 hunks)components/navigation/SocialShare.tsx(1 hunks)package.json(2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T07:27:53.362Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:27:53.362Z
Learning: Using anchor tags for author names in 'FeaturedBlogPost' component leads to hydration issues on the website.
Applied to files:
components/layout/BlogLayout.tsx
🧬 Code graph analysis (1)
components/layout/BlogLayout.tsx (2)
components/AuthorAvatars.tsx (1)
AuthorAvatars(20-33)components/navigation/SocialShare.tsx (1)
SocialShare(23-166)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (6)
components/layout/BlogLayout.tsx (1)
54-81: Well-structured responsive layout.The author section refactoring looks good. The responsive layout properly adapts from column (mobile) to row (desktop), and the author name handling with links is implemented correctly.
components/navigation/SocialShare.tsx (4)
10-21: Props type and encoding helper look good.The type definition is clear and the
encodehelper correctly handles URL encoding with fallback for undefined values.
31-44: Share URL computation is well-implemented.The three-tier fallback (provided URL → env variable + path → window location + path) with proper slash handling and SSR-safe window checks is robust.
82-94: Security and event handling are correctly implemented.Good practices:
- Early return when no URL prevents broken buttons
noopener,noreferrerin window.open prevents security vulnerabilities- SSR-safe window check
- Proper event handling with preventDefault and stopPropagation
99-165: Excellent accessibility and UI implementation.The share buttons are well-implemented with:
- Descriptive
aria-labelandtitleattributes for screen readers and tooltipsaria-hiddenon decorative icons- Focus rings for keyboard navigation
- Consistent styling and hover effects across all platforms
- Type safety with
type="button"package.json (1)
53-55: Verify dependency versions and remove unused package.Two concerns require verification:
Unused dependency:
react-share(line 108) is added but may not be imported or used incomponents/navigation/SocialShare.tsx. If the component constructs share URLs manually without using this package, it should be removed.Version verification needed: FontAwesome v7.x and react-share v5.2.2 should be verified as stable and compatible versions. Confirm these versions exist on npm and have no unresolved security advisories.
…nghSwayam/website into feat/add-social-share-buttons
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
components/layout/BlogLayout.tsx (2)
62-72: Type assertionas anyweakens type safety in the reduce call.The
reducecall usesas anyto concatenate author names with' & '. Consider using a typed approach or a simplerjoin-based pattern.- {post.authors - .map((author, index) => - author.link ? ( - <a key={index} href={author.link}> - {author.name} - </a> - ) : ( - author.name - ) - ) - .reduce((prev, curr) => [prev, ' & ', curr] as any)} + {post.authors.map((author, index) => ( + <React.Fragment key={index}> + {index > 0 && ' & '} + {author.link ? ( + <a href={author.link}>{author.name}</a> + ) : ( + author.name + )} + </React.Fragment> + ))}
96-96: Remove or convert the inline comment to a proper code comment.The
FIX:comment documents a removal but is visible in the JSX output. If this is intentional documentation, consider moving it outside the JSX or removing it entirely since the commit history already documents the change.components/navigation/SocialShare.tsx (1)
102-107: Consider memoizing click handlers to avoid creating new functions on each render.The current implementation creates new handler functions on every render. For a small number of buttons this is unlikely to cause performance issues, but if you want to optimize:
+import { useCallback } from 'react'; + +// Inside component: +const handleTwitterClick = useCallback( + (e: React.MouseEvent<HTMLButtonElement>) => { + e.preventDefault(); + e.stopPropagation(); + openInNewWindow(twitterShare); + }, + [twitterShare] +); +// Similar for other platforms...This is optional since the current approach is readable and the performance impact is negligible for 4 buttons.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
components/layout/BlogLayout.tsx(3 hunks)components/navigation/SocialShare.tsx(1 hunks)package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T07:27:53.362Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:27:53.362Z
Learning: Using anchor tags for author names in 'FeaturedBlogPost' component leads to hydration issues on the website.
Applied to files:
components/layout/BlogLayout.tsx
🧬 Code graph analysis (1)
components/layout/BlogLayout.tsx (2)
components/AuthorAvatars.tsx (1)
AuthorAvatars(20-33)components/navigation/SocialShare.tsx (1)
SocialShare(37-178)
🪛 GitHub Actions: PR testing - if Node project
components/layout/BlogLayout.tsx
[error] 1-1: Command: npm run lint --if-present. BlogLayout.tsx: Run autofix to sort these imports! simple-import-sort/imports
[error] 82-84: Command: npm run lint --if-present. BlogLayout.tsx: Prettier errors: Trailing spaces, incorrect quotes, and preferred line breaks. See individual messages: Delete trailing spaces, Replace double quotes with single quotes, Add proper newlines.
components/navigation/SocialShare.tsx
[error] 1-1: Command: npm run lint --if-present. SocialShare.tsx: Run autofix to sort these imports! simple-import-sort/imports
[error] 3-7: Command: npm run lint --if-present. SocialShare.tsx: Prettier/prettier errors and jsx-quotes. Fix usage of quotes and trailing commas.
🔇 Additional comments (4)
components/navigation/SocialShare.tsx (3)
45-58: SSR-safe URL computation looks good.The
useMemocorrectly prioritizesurlprop, then environment variable withpath, then falls back towindow.location.originonly when available. The empty string fallback ensures the component returnsnullduring SSR when no URL can be determined (line 95).
74-80: LinkedIn share URL correctly uses only theurlparameter.The previous review comment about removing the deprecated
titleparameter has been addressed. LinkedIn now pulls metadata from Open Graph tags as expected.
111-176: Well-structured accessible share buttons.Good implementation:
- Proper
aria-labelattributes with dynamic title for screen readersaria-hiddenon decorative icons- Explicit
type="button"prevents form submission- Hover/focus states for visual feedback
- Consistent styling pattern across all buttons
One minor consideration: the
focus:ring-2 focus:ring-offset-2classes don't specify a ring color, so it will use the browser/Tailwind default. This is likely fine but verify it meets your design system's focus indicator requirements.components/layout/BlogLayout.tsx (1)
15-15: Fix import order to resolve lint failure.The pipeline reports that imports need sorting. The
SocialShareimport should be grouped and ordered according to the project'ssimple-import-sortconfiguration.Run the autofix or manually reorder imports:
npm run lint -- --fix⛔ Skipped due to learnings
Learnt from: akshatnema Repo: asyncapi/website PR: 3262 File: components/navigation/BlogPostItem.tsx:95-119 Timestamp: 2024-10-11T11:32:30.226Z Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
components/layout/BlogLayout.tsx (1)
82-86: Fix Prettier violations to pass CI.The pipeline reports formatting issues in this section. The past review comment already flagged this - ensure trailing spaces are removed and quotes are consistent.
components/navigation/SocialShare.tsx (1)
1-8: Run Prettier autofix to resolve formatting violations.The pipeline reports multiple Prettier errors in the imports and throughout the file (trailing commas, quote style, import formatting). Run the autofix to resolve all issues at once:
npx prettier --write components/navigation/SocialShare.tsxOr run the project's lint fix command:
npm run lint -- --fix
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/layout/BlogLayout.tsx(3 hunks)components/navigation/SocialShare.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T07:27:53.362Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:27:53.362Z
Learning: Using anchor tags for author names in 'FeaturedBlogPost' component leads to hydration issues on the website.
Applied to files:
components/layout/BlogLayout.tsx
🧬 Code graph analysis (1)
components/layout/BlogLayout.tsx (2)
components/AuthorAvatars.tsx (1)
AuthorAvatars(20-33)components/navigation/SocialShare.tsx (1)
SocialShare(37-163)
🪛 GitHub Actions: PR testing - if Node project
components/navigation/SocialShare.tsx
[error] 1-1: Prettier/prettier: Replace ⏎··faFacebookF,⏎··faLinkedinIn,⏎··faRedditAlien,⏎··faXTwitter,⏎ with ·faFacebookF,·faLinkedinIn,·faRedditAlien,·faXTwitter·
[error] 5-5: Prettier/prettier: Unexpected trailing comma. comma-dangle
[error] 37-37: Prettier/prettier: Replace ⏎··url,⏎··path,⏎··title,⏎··hashtags·=·[],⏎··text·=·'',⏎··className·=·'',⏎ with ·url,·path,·title,·hashtags·=·[],·text·=·'',·className·=·''·
[error] 43-43: Prettier/prettier: Unexpected trailing comma. comma-dangle
[error] 71-71: Prettier/prettier: Delete ,
[error] 71-71: Prettier/prettier: Unexpected trailing comma. comma-dangle
[error] 82-82: Prettier/prettier: Replace ⏎····shareUrl·?·url=${encode(shareUrl)}·:·'',⏎····title·?·title=${encode(title)}·:·'',⏎·· with shareUrl·?·url=${encode(shareUrl)}·:·'',·title·?·title=${encode(title)}·:·''
[error] 84-84: Prettier/prettier: Unexpected trailing comma. comma-dangle
[error] 116-116: Prettier/prettier: Replace " with '
[error] 116-116: Prettier/prettier: Unexpected usage of doublequote. jsx-quotes
[error] 118-118: Prettier/prettier: Replace " with '
[error] 129-129: Prettier/prettier: Replace " with '
[error] 129-129: Prettier/prettier: Unexpected usage of doublequote. jsx-quotes
[error] 131-131: Prettier/prettier: Replace " with '
[error] 142-142: Prettier/prettier: Replace " with '
[error] 142-142: Prettier/prettier: Unexpected usage of doublequote. jsx-quotes
[error] 144-144: Prettier/prettier: Replace " with '
[error] 144-144: Prettier/prettier: Unexpected usage of doublequote. jsx-quotes
[error] 155-155: Prettier/prettier: Replace " with '
[error] 155-155: Prettier/prettier: Unexpected usage of doublequote. jsx-quotes
[error] 157-157: Prettier/prettier: Replace " with '
[error] 157-157: Prettier/prettier: Unexpected usage of doublequote. jsx-quotes
[error] 163-163: Prettier/prettier: Insert ⏎
[error] 163-163: Prettier/prettier: Newline required at end of file but not found. eol-last
components/layout/BlogLayout.tsx
[error] 91-91: Prettier/prettier: Replace ⏎··············{post.canonical·&&·<link·rel='canonical'·href={post.canonical}·/>}⏎············ with {post.canonical·&&·<link·rel='canonical'·href={post.canonical}·/>}
[error] 101-101: Prettier/prettier: Insert ⏎
[error] 101-101: Prettier/prettier: Newline required at end of file but not found. eol-last
🔇 Additional comments (7)
components/layout/BlogLayout.tsx (2)
13-13: LGTM!The import for
SocialShareis correctly added from the navigation module.
54-81: Responsive author section is well-structured.The layout correctly uses
flex-colon mobile andmd:flex-rowon larger screens with proper alignment and spacing. The author rendering logic with conditional links and thereducepattern for joining names with '&' is appropriate.Note: Based on retrieved learnings, nesting
<a>tags inside components that may already be wrapped in aLinkcan cause hydration issues. Verify that this header section is not nested within any parentLinkcomponent.components/navigation/SocialShare.tsx (5)
22-28: LGTM!The
encodehelper safely wrapsencodeURIComponentwith a fallback for undefined/null values.
45-64: URL computation logic is sound.The priority chain (explicit
url→NEXT_PUBLIC_SITE_URL+path→window.location.origin+path→ empty) provides good fallback behavior. The path normalization correctly handles leading slashes.One consideration: during SSR,
windowis undefined andNEXT_PUBLIC_SITE_URLmay not be set, resulting in an emptyshareUrland the component returningnull. This is acceptable behavior since the buttons will render correctly on the client after hydration.
68-91: Share URL construction is correct.The Twitter, LinkedIn, Reddit, and Facebook share URLs are properly constructed:
- Twitter uses
text,url, andhashtagsparameters correctly- LinkedIn correctly uses only the
urlparameter (relies on OG tags for metadata)- Reddit uses
urlandtitleparameters- Facebook uses the
uparameter for the sharer endpointAll parameters are properly URL-encoded.
95-104: LGTM!The click handlers correctly:
- Check for
windowavailability (SSR safety)- Use
noopener,noreferrerfor security when opening new windows- Prevent default and stop propagation to avoid unintended navigation
108-161: Buttons have good accessibility and styling.Each button includes:
- Descriptive
aria-labelwith the post title for screen readerstitleattribute for tooltip on hovertype='button'to prevent form submissionaria-hiddenon icons (correctly, since the button itself has the label)- Focus ring styles for keyboard navigation
Minor: The
classNamestrings use double quotes which violates the project's jsx-quotes rule. This will be fixed by running Prettier.
…nghSwayam/website into feat/add-social-share-buttons
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4673 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 799 799
Branches 146 146
=========================================
Hits 799 799 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (8)
.github/workflows/automerge-orphans.yml (1)
1-67: Unrelated formatting changes should be in a separate commit.This workflow file contains only non-functional whitespace/formatting changes that are unrelated to the social sharing feature. Consider separating infrastructure/formatting changes from feature changes for clearer PR history and easier review.
.github/workflows/release-announcements.yml (1)
1-96: Unrelated formatting changes should be in a separate commit.This workflow file contains only non-functional whitespace/formatting changes that are unrelated to the social sharing feature. Consider separating infrastructure/formatting changes from feature changes for clearer PR history.
config/MAINTAINERS.json (1)
1-969: Unrelated configuration file changes should be in a separate commit.This configuration file shows a complete rewrite with no semantic changes to maintainer data. These changes appear to be formatting-only and are unrelated to the social sharing feature. Consider separating such changes from feature PRs.
Note: The Gitleaks warnings about LinkedIn IDs are false positives—these are public LinkedIn profile usernames, not API secrets.
config/TSC_BOARD_MEMBERS.json (1)
1-909: Unrelated configuration file changes should be in a separate commit.This configuration file shows a complete rewrite with no semantic changes to board member data. These changes appear to be formatting-only and are unrelated to the social sharing feature. Consider separating such changes from feature PRs.
Note: The Gitleaks warnings about LinkedIn IDs are false positives—these are public LinkedIn profile usernames, not API secrets.
.github/workflows/issues-prs-notifications.yml (1)
1-85: Unrelated formatting changes should be in a separate commit.This workflow file contains only non-functional whitespace/formatting changes that are unrelated to the social sharing feature. Consider separating infrastructure/formatting changes from feature changes for clearer PR history.
markdown/docs/tools/generator/migration-nunjucks-react.md (1)
1-144: Unrelated documentation changes should be in a separate PR.This documentation file about migrating from Nunjucks to React template engines is entirely unrelated to the social sharing feature. Documentation updates should typically be in separate PRs from feature changes unless the documentation directly describes the new feature.
scripts/tools/tags-color.ts (1)
1-1: Good practice, but unrelated to this PR.Using
import typefor type-only imports is a TypeScript best practice that helps with tree-shaking. However, this change is unrelated to the social sharing feature and should ideally be in a separate refactoring PR.components/navigation/SocialShare.tsx (1)
56-64: Consider whether Twitter text should replace or append to title.When both
textandtitleare provided, line 57 concatenates them with a space, e.g.,"Check this out! My Blog Post". Depending on the intended UX, custom text might be meant to replace the title rather than prepend to it. Verify this behavior aligns with your sharing design.If text should replace the title, apply this diff:
const twitterParams = [ - text ? `text=${encode(`${text} ${title}`)}` : `text=${encode(title)}`, + text ? `text=${encode(text)}` : `text=${encode(title)}`, shareUrl ? `url=${encode(shareUrl)}` : '', hashtagParam ? `hashtags=${encode(hashtagParam)}` : '' ]
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
.github/workflows/automerge-orphans.yml(1 hunks).github/workflows/issues-prs-notifications.yml(1 hunks).github/workflows/notify-tsc-members-mention.yml(1 hunks).github/workflows/release-announcements.yml(1 hunks)components/layout/BlogLayout.tsx(2 hunks)components/navigation/SocialShare.tsx(1 hunks)config/MAINTAINERS.json(1 hunks)config/TSC_BOARD_MEMBERS.json(1 hunks)config/meetings.json(1 hunks)config/newsroom_videos.json(1 hunks)markdown/docs/tools/generator/migration-nunjucks-react.md(1 hunks)scripts/tools/tags-color.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- config/newsroom_videos.json
- config/meetings.json
🧰 Additional context used
🧠 Learnings (8)
📚 Learning: 2025-01-18T08:44:43.614Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., `require('../scripts/build-rss.ts')`). This is enforced by the project's configuration which uses `moduleResolution: "bundler"` in tsconfig.json and TypeScript-aware ESLint plugins. The .ts extensions are required even though the files are imported using CommonJS require statements.
Applied to files:
scripts/tools/tags-color.ts
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-11-25T18:34:51.303Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3378
File: scripts/markdown/check-markdown.js:1-1
Timestamp: 2024-11-25T18:34:51.303Z
Learning: When reviewing `scripts/markdown/check-markdown.js`, optimizations should be addressed in separate issues and not included in the current pull request.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T07:27:53.362Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:27:53.362Z
Learning: Using anchor tags for author names in 'FeaturedBlogPost' component leads to hydration issues on the website.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2025-02-18T12:07:42.211Z
Learnt from: asyncapi-bot
Repo: asyncapi/website PR: 0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
Applied to files:
.github/workflows/automerge-orphans.yml
📚 Learning: 2024-11-25T18:41:29.632Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3378
File: scripts/markdown/check-markdown.js:1-1
Timestamp: 2024-11-25T18:41:29.632Z
Learning: When updating workflows for the AsyncAPI website repository, use `.github/workflows/if-nodejs-pr-testing.yml` to include environment variables and secrets for Node.js PR testing.
Applied to files:
.github/workflows/notify-tsc-members-mention.yml
📚 Learning: 2025-11-03T08:14:22.714Z
Learnt from: thulieblack
Repo: asyncapi/website PR: 4512
File: markdown/blog/2025-october-summary.md:37-37
Timestamp: 2025-11-03T08:14:22.714Z
Learning: In AsyncAPI community blog posts, specifically for conference recaps, the phrase "building boats" is used intentionally and is not a typo. This appeared in the October 2025 community summary blog post (markdown/blog/2025-october-summary.md) in the context of networking at the API Standards booth.
Applied to files:
config/TSC_BOARD_MEMBERS.json
🧬 Code graph analysis (2)
scripts/tools/tags-color.ts (1)
types/scripts/tools.ts (1)
LanguageColorItem(34-38)
components/layout/BlogLayout.tsx (2)
components/AuthorAvatars.tsx (1)
AuthorAvatars(20-33)components/navigation/SocialShare.tsx (1)
SocialShare(32-140)
🪛 Gitleaks (8.30.0)
config/MAINTAINERS.json
[high] 659-659: Discovered a LinkedIn Client secret, potentially compromising LinkedIn application integrations and user data.
(linkedin-client-secret)
[high] 182-182: Found a LinkedIn Client ID, risking unauthorized access to LinkedIn integrations and professional data exposure.
(linkedin-client-id)
[high] 214-214: Found a LinkedIn Client ID, risking unauthorized access to LinkedIn integrations and professional data exposure.
(linkedin-client-id)
[high] 875-875: Found a LinkedIn Client ID, risking unauthorized access to LinkedIn integrations and professional data exposure.
(linkedin-client-id)
config/TSC_BOARD_MEMBERS.json
[high] 162-162: Found a LinkedIn Client ID, risking unauthorized access to LinkedIn integrations and professional data exposure.
(linkedin-client-id)
[high] 601-601: Found a LinkedIn Client ID, risking unauthorized access to LinkedIn integrations and professional data exposure.
(linkedin-client-id)
[high] 561-561: Discovered a LinkedIn Client secret, potentially compromising LinkedIn application integrations and user data.
(linkedin-client-secret)
🪛 LanguageTool
markdown/docs/tools/generator/migration-nunjucks-react.md
[grammar] ~66-~66: Ensure spelling is correct
Context: ...eplace macros with React components:
Nunjucks:
{% macro renderChannel(channel) %}
<div class="channel">
<h3>{{ channel.address() }}</h3>
<p>{{ channel.description() }}</p>
</div>
{% endmacro %}
{{ renderChannel(someChannel) }}React:
// components/Channel.js
...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
</details>
</details>
<details>
<summary>🪛 YAMLlint (1.37.1)</summary>
<details>
<summary>.github/workflows/automerge-orphans.yml</summary>
[error] 1-1: wrong new line character: expected \n
(new-lines)
</details>
<details>
<summary>.github/workflows/issues-prs-notifications.yml</summary>
[error] 1-1: wrong new line character: expected \n
(new-lines)
</details>
<details>
<summary>.github/workflows/notify-tsc-members-mention.yml</summary>
[error] 1-1: wrong new line character: expected \n
(new-lines)
</details>
<details>
<summary>.github/workflows/release-announcements.yml</summary>
[error] 1-1: wrong new line character: expected \n
(new-lines)
</details>
</details>
</details>
<details>
<summary>⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)</summary>
* GitHub Check: Redirect rules - asyncapi-website
* GitHub Check: Header rules - asyncapi-website
* GitHub Check: Pages changed - asyncapi-website
</details>
<details>
<summary>🔇 Additional comments (6)</summary><blockquote>
<details>
<summary>.github/workflows/notify-tsc-members-mention.yml (1)</summary><blockquote>
`1-2`: **Verify whether this centrally-managed file should be modified in this PR.**
The file header explicitly states: "Don't make changes to this file in this repo as they will be overwritten with changes made to the same file in above mentioned repo." Since changes in this file appear unrelated to the PR's social sharing feature objective, confirm whether these modifications were intentional or if they should be reverted to avoid conflicts with the central repository sync.
</blockquote></details>
<details>
<summary>components/layout/BlogLayout.tsx (3)</summary><blockquote>
`13-13`: **LGTM: SocialShare component imported correctly.**
The import is properly placed with other navigation component imports.
---
`54-87`: **Well-implemented responsive header with share UI.**
The header restructuring maintains all existing author information while cleanly integrating the new share functionality. The responsive layout properly stacks on mobile (`flex-col`) and arranges horizontally on larger screens (`md:flex-row md:items-center md:justify-between`). Props passed to `SocialShare` (title, path, hashtags) are appropriate for social sharing.
Ensure the responsive layout is tested on various screen sizes to confirm proper stacking and spacing behavior.
---
`91-91`: **Simplified canonical link rendering.**
The conditional rendering of the canonical link is clean and removes unnecessary complexity. This change aligns well with the removal of AddThis integration mentioned in the PR objectives.
</blockquote></details>
<details>
<summary>components/navigation/SocialShare.tsx (2)</summary><blockquote>
`78-89`: **LGTM! Secure and well-structured handler logic.**
The early return prevents invalid renders, the `window.open` call uses proper security attributes (`noopener,noreferrer`), and the event handlers correctly prevent default behavior and propagation. The SSR check ensures compatibility with Next.js server-side rendering.
---
`91-139`: **LGTM! Excellent accessibility and styling.**
The share buttons are well-implemented with proper accessibility attributes (`aria-label`, `title`, `aria-hidden` on icons), semantic HTML (`type='button'`), and comprehensive keyboard navigation support (focus rings). The platform-specific hover colors and smooth transitions provide good UX.
</blockquote></details>
</blockquote></details>
</details>
<!-- This is an auto-generated comment by CodeRabbit for review status -->| script: | | ||
| const sendEmail = require('./.github/workflows/scripts/mailchimp/index.js'); | ||
| sendEmail('${{github.event.comment.html_url}}', process.env.TITLE); | ||
| # This action is centrally managed in https://github.com/asyncapi/.github/ |
There was a problem hiding this comment.
Fix line ending character.
YAMLlint reports an incorrect line ending character on line 1. Ensure the file uses Unix line endings (LF) instead of Windows line endings (CRLF).
🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 1-1: wrong new line character: expected \n
(new-lines)
🤖 Prompt for AI Agents
.github/workflows/notify-tsc-members-mention.yml around line 1: the file
currently uses Windows CRLF line endings which YAMLlint flags; convert the file
to Unix LF line endings (e.g., run dos2unix or set your editor to use LF),
ensure .gitattributes enforces LF for YAML files or run git add --renormalize if
needed, and commit the updated file so the workflow uses LF line endings.
| if (typeof window !== 'undefined') { | ||
| const { origin } = window.location; | ||
| const p = path ?? ''; | ||
|
|
||
| return `${origin}${p}`; |
There was a problem hiding this comment.
Ensure path has leading slash in client-side fallback.
The NEXT_PUBLIC_SITE_URL branch (line 39) explicitly removes and re-adds the leading slash, but the window.location fallback doesn't normalize the path. If path lacks a leading slash (e.g., "blog/post"), line 48 produces a malformed URL: "https://example.comblog/post". While Next.js paths typically include a leading slash, defensive normalization prevents edge-case bugs.
Apply this diff to normalize the path:
if (typeof window !== 'undefined') {
const { origin } = window.location;
- const p = path ?? '';
+ const p = path?.startsWith('/') ? path : `/${path ?? ''}`;
return `${origin}${p}`;
}🤖 Prompt for AI Agents
In components/navigation/SocialShare.tsx around lines 44 to 48, the client-side
fallback builds a URL by concatenating window.location.origin and path without
ensuring a leading slash, which can produce malformed URLs like
"https://example.comblog/post"; ensure the path is normalized by prepending a
'/' when path is non-empty and does not already start with one (e.g., const p =
path ? (path.startsWith('/') ? path : `/${path}`) : ''), then return
`${origin}${p}` so the composed URL is always correct.
3 participants
Description
This PR implements social sharing buttons for blog posts, addressing issue #3649.
Currently, the blog lacks an easy way for readers to share content. This PR introduces a
SocialSharecomponent and integrates it into theBlogLayout.Changes
SocialShare.tsx):@fortawesomeicons.BlogLayout.tsx):AddThisscript/styles.SocialSharecomponent to the bottom of the article.@fortawesome/free-brands-svg-icons.How Has This Been Tested?
npm run dev).Screenshots
Before:
After:
Responsiveness:
Summary by CodeRabbit
New Features
Design / Layout
Chores
✏️ Tip: You can customize this high-level summary in your review settings.