feat: add social sharing buttons to blog posts (#3649) #4773
Conversation
vivekyadav-3
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![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.
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a new React SocialShareButtons component (Twitter, LinkedIn, copy link) used in the BlogLayout header; removes the previous AddThis script/styles and makes canonical link rendering conditional on Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BlogLayout
participant SocialShareButtons
participant Clipboard
participant ExternalSite
rect rgb(230,240,255)
Note over BlogLayout,SocialShareButtons: BlogLayout renders SocialShareButtons in header
end
User->>SocialShareButtons: Click "Twitter"
SocialShareButtons->>ExternalSite: Open Twitter share URL (new tab)
User->>SocialShareButtons: Click "LinkedIn"
SocialShareButtons->>ExternalSite: Open LinkedIn share URL (new tab)
User->>SocialShareButtons: Click "Copy Link"
SocialShareButtons->>Clipboard: navigator.clipboard.writeText(url)
Clipboard-->>SocialShareButtons: success/failure
SocialShareButtons-->>User: show "Copied!" tooltip on success
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 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 |
There was a problem hiding this comment.
Pull request overview
This PR modernizes the blog post sharing functionality by replacing the deprecated AddThis widget with a custom social sharing component featuring Twitter, LinkedIn, and copy-to-clipboard functionality.
- Created a new
SocialShareButtonscomponent with modern share buttons - Removed legacy AddThis script dependencies and associated styling hacks
- Refactored the canonical link rendering to use conditional rendering
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| components/SocialShareButtons.tsx | New component implementing social sharing buttons with Twitter, LinkedIn, and copy link functionality |
| components/layout/BlogLayout.tsx | Integrated the new SocialShareButtons component and removed deprecated AddThis scripts and styling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
components/SocialShareButtons.tsx
Outdated
| if (navigator.clipboard) { | ||
| navigator.clipboard.writeText(currentUrl).then(() => { | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }); |
There was a problem hiding this comment.
The handleCopy function is missing error handling for the clipboard.writeText promise. If the promise is rejected (e.g., due to permissions issues or browser incompatibility), the error will be silently swallowed. Additionally, the function should check if navigator is defined before accessing navigator.clipboard to ensure SSR compatibility, similar to the pattern used in the getUrl function.
Consider adding a catch block to handle potential errors and adding a typeof check for navigator.
| if (navigator.clipboard) { | |
| navigator.clipboard.writeText(currentUrl).then(() => { | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }); | |
| if (typeof navigator !== 'undefined' && navigator.clipboard) { | |
| navigator.clipboard | |
| .writeText(currentUrl) | |
| .then(() => { | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }) | |
| .catch((error) => { | |
| // Optional: log or otherwise handle clipboard write errors | |
| console.error('Failed to copy to clipboard:', error); | |
| }); |
components/SocialShareButtons.tsx
Outdated
| if (navigator.clipboard) { | ||
| navigator.clipboard.writeText(currentUrl).then(() => { | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); |
There was a problem hiding this comment.
The setTimeout call on line 29 creates a potential memory leak if the component unmounts before the timeout completes. The timeout should be stored in a ref and cleared in a useEffect cleanup function to prevent the state update on an unmounted component.
Consider using useEffect with a cleanup function that calls clearTimeout when the component unmounts or when the copied state changes.
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4773--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: 6
🧹 Nitpick comments (1)
components/SocialShareButtons.tsx (1)
25-32: Add error handling for clipboard operations.The clipboard write operation doesn't handle potential errors. If the promise rejects (e.g., due to permissions), the user receives no feedback.
🔎 Suggested error handling
const handleCopy = () => { if (navigator.clipboard) { - navigator.clipboard.writeText(currentUrl).then(() => { - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }); + navigator.clipboard + .writeText(currentUrl) + .then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }) + .catch(() => { + // Optionally show error feedback to user + console.error('Failed to copy to clipboard'); + }); } };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/SocialShareButtons.tsxcomponents/layout/BlogLayout.tsx
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
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.
📚 Learning: 2025-12-23T06:30:43.275Z
Learnt from: katara-Jayprakash
Repo: asyncapi/website PR: 4760
File: components/layout/GenericPostLayout.tsx:50-52
Timestamp: 2025-12-23T06:30:43.275Z
Learning: In the asyncapi/website repository, `GenericPostLayout` (components/layout/GenericPostLayout.tsx) is used for rendering about pages, not blog posts, even though it accepts a post typed as `IPosts['blog'][number]`. The type is reused for convenience. Blog posts use `BlogLayout.tsx` instead. When reviewing EditPageButton usage in GenericPostLayout, `contentType='about'` is the correct value.
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-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
🧬 Code graph analysis (2)
components/layout/BlogLayout.tsx (1)
components/SocialShareButtons.tsx (1)
SocialShareButtons(11-75)
components/SocialShareButtons.tsx (3)
components/icons/Twitter.tsx (1)
IconTwitter(7-13)components/icons/LinkedIn.tsx (1)
IconLinkedIn(7-17)components/icons/Clipboard.tsx (1)
IconClipboard(7-13)
🪛 GitHub Actions: PR testing - if Node project
components/layout/BlogLayout.tsx
[error] 1-1: simple-import-sort/imports: Run autofix to sort imports.
components/SocialShareButtons.tsx
[error] 1-1: Prettier/JSX quotes: Replace double quotes with single quotes in several attributes. Run autofix or fix formatting issues as indicated by the lint output.
[error] 1-1: simple-import-sort/imports: Run autofix to sort imports.
[error] 11-11: require-jsdoc: Missing JSDoc comment.
[error] 18-18: eslint: padding-line-between-statements: Expected blank line before this statement.
[error] 35-35: Prettier/prettier: Replace "flex·items-center·space-x-4·mt-6" with 'flex items-center space-x-4 mt-6' (and related formatting fixes).
[error] 35-35: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 36-36: Prettier/prettier: Replace "text-gray-500·text-sm·font-medium" with 'text-gray-500 text-sm font-medium'.
[error] 36-36: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 37-37: Prettier/prettier: Delete extra spaces. Trailing spaces not allowed.
[error] 41-41: Prettier/prettier: Replace "_blank" with '_blank'.
[error] 41-41: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 42-42: Prettier/prettier: Replace "noopener·noreferrer" with 'noopener noreferrer'.
[error] 42-42: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 43-43: Prettier/prettier: Replace "text-gray-500·hover:text-[#1DA1F2]·transition-colors·duration-200" with 'text-gray-500 hover:text-[#1DA1F2] transition-colors duration-200'.
[error] 43-43: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 44-44: Prettier/prettier: Replace "Share·on·Twitter" with 'Share on Twitter'.
[error] 44-44: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 46-46: Prettier/prettier: Replace "w-6·h-6" with 'w-6 h-6'.
[error] 46-46: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 52-52: Prettier/prettier: Replace "_blank" with '_blank'.
[error] 52-52: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 53-53: Prettier/prettier: Replace "noopener·noreferrer" with 'noopener noreferrer'.
[error] 53-53: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 54-54: Prettier/prettier: Replace "text-gray-500·hover:text-[#0A66C2]·transition-colors·duration-200" with 'text-gray-500 hover:text-[#0A66C2] transition-colors duration-200'.
[error] 54-54: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 55-55: Prettier/prettier: Replace "Share·on·LinkedIn" with 'Share on LinkedIn'.
[error] 55-55: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 57-57: Prettier/prettier: Replace "w-6·h-6" with 'w-6 h-6'.
[error] 57-57: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 63-63: Prettier/prettier: Replace "text-gray-500·hover:text-gray-800·transition-colors·duration-200·relative·group" with 'text-gray-500 hover:text-gray-800 transition-colors duration-200 relative group'.
[error] 63-63: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 64-64: Prettier/prettier: Replace "Copy·Link" with 'Copy Link'.
[error] 64-64: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 66-66: Prettier/prettier: Replace "w-6·h-6" with 'w-6 h-6'.
[error] 66-66: JSX: Unexpected usage of doublequote. jsx-quotes
[error] 68-68: Prettier/prettier: Replace "absolute·-top-8·left-1/2·transform·-translate-x-1/2·bg-gray-800·text-white·text-xs·px-2·py-1·rounded·shadow-lg·whitespace-nowrap" with 'absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded shadow-lg whitespace-nowrap'.
[error] 68-68: JSX: Unexpected usage of doublequote. jsx-quotes
⏰ 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). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (6)
components/SocialShareButtons.tsx (4)
6-9: LGTM!The interface is well-defined with clear prop types and helpful comments.
39-47: LGTM - Twitter share implementation.The Twitter share URL is correctly formatted with encoded title and URL parameters. Good use of accessibility attributes and proper link security with
rel="noopener noreferrer".
50-58: LGTM - LinkedIn share implementation.The LinkedIn share URL is correctly formatted. Proper accessibility and security attributes are in place.
61-72: LGTM - Copy link functionality.The clipboard button with tooltip feedback is well-implemented. The "Copied!" indicator provides good user feedback and automatically dismisses after 2 seconds.
components/layout/BlogLayout.tsx (2)
81-81: LGTM - SocialShareButtons integration.The component is appropriately placed in the blog post header and correctly passes the post title. The URL will default to the current page, which is correct for blog posts.
Note: This integration assumes the SSR hydration issue in SocialShareButtons.tsx is addressed.
85-89: LGTM - Canonical link implementation.The conditional rendering of the canonical link is correct. It only renders when
post.canonicalis defined and properly wraps the link tag inHtmlHead.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (2)
components/SocialShareButtons.tsx (2)
1-4: Run autofix to sort imports.The pipeline reports an import sorting violation. Run the project's lint autofix command to resolve this.
11-11: Add JSDoc comment.The pipeline reports a missing JSDoc comment. Add documentation describing the component's purpose and parameters.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/SocialShareButtons.tsxcomponents/layout/BlogLayout.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- components/layout/BlogLayout.tsx
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
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.
📚 Learning: 2024-12-31T09:25:52.573Z
Learnt from: JeelRajodiya
Repo: asyncapi/website PR: 3423
File: scripts/adopters/index.ts:9-11
Timestamp: 2024-12-31T09:25:52.573Z
Learning: The `writeJSON` function already includes error handling, so additional try/catch blocks around it may be redundant.
Applied to files:
components/SocialShareButtons.tsx
📚 Learning: 2024-11-11T21:30:32.478Z
Learnt from: amanbhoria
Repo: asyncapi/website PR: 3373
File: components/AlgoliaSearch.tsx:313-313
Timestamp: 2024-11-11T21:30:32.478Z
Learning: In the `SearchButton` component within `components/AlgoliaSearch.tsx`, if the component re-renders on every button click and the `useEffect` runs accordingly, adding dependencies to the dependency array might not be necessary.
Applied to files:
components/SocialShareButtons.tsx
📚 Learning: 2024-10-11T07:38:35.745Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:38:35.745Z
Learning: In Next.js, nested `<a>` tags cause hydration issues due to invalid HTML. To fix this, avoid nesting `<a>` tags by replacing inner `<a>` tags with non-interactive elements like `<span>`, and use click handlers to maintain interactivity if needed.
Applied to files:
components/SocialShareButtons.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/SocialShareButtons.tsx
📚 Learning: 2024-10-11T10:46:58.882Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested `<a>` tags due to hydration issues, use accessible non-link elements like `<button>` or `<span>` with appropriate roles, `tabIndex`, and event handlers to maintain accessibility and SEO.
Applied to files:
components/SocialShareButtons.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/SocialShareButtons.tsx
🧬 Code graph analysis (1)
components/SocialShareButtons.tsx (3)
components/icons/Twitter.tsx (1)
IconTwitter(7-13)components/icons/LinkedIn.tsx (1)
IconLinkedIn(7-17)components/icons/Clipboard.tsx (1)
IconClipboard(7-13)
🪛 GitHub Actions: PR testing - if Node project
components/SocialShareButtons.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 11-11: Missing JSDoc comment. require-jsdoc
[error] 23-23: Expected blank line after variable declarations. newline-after-var
[error] 23-23: 'NodeJS' is not defined. no-undef
[error] 24-24: Expected blank line before this statement. padding-line-between-statements
[error] 27-27: Expected blank line before this statement. padding-line-between-statements
[error] 34-34: Insert ⏎········ prettier/prettier
[error] 39-39: Unexpected console statement. no-console
[error] 47-47: Delete ······ prettier/prettier
[error] 47-47: Trailing spaces not allowed. no-trailing-spaces
⏰ 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)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
🔇 Additional comments (1)
components/SocialShareButtons.tsx (1)
15-17: Good fix for the hydration mismatch.The use of
useEffectto setcurrentUrlproperly addresses the server/client hydration issue flagged in previous reviews. The empty initial state ensures consistent rendering between server and client.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/SocialShareButtons.tsx (1)
30-30: Consider using a more specific type for the timeout variable.Using
anyremoves type safety. A more specific type would improve maintainability.🔎 Suggested type improvement
- let timeout: any; + let timeout: ReturnType<typeof setTimeout>;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/SocialShareButtons.tsx
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
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.
📚 Learning: 2024-12-31T09:25:52.573Z
Learnt from: JeelRajodiya
Repo: asyncapi/website PR: 3423
File: scripts/adopters/index.ts:9-11
Timestamp: 2024-12-31T09:25:52.573Z
Learning: The `writeJSON` function already includes error handling, so additional try/catch blocks around it may be redundant.
Applied to files:
components/SocialShareButtons.tsx
📚 Learning: 2024-11-11T21:30:32.478Z
Learnt from: amanbhoria
Repo: asyncapi/website PR: 3373
File: components/AlgoliaSearch.tsx:313-313
Timestamp: 2024-11-11T21:30:32.478Z
Learning: In the `SearchButton` component within `components/AlgoliaSearch.tsx`, if the component re-renders on every button click and the `useEffect` runs accordingly, adding dependencies to the dependency array might not be necessary.
Applied to files:
components/SocialShareButtons.tsx
📚 Learning: 2024-10-11T07:38:35.745Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:38:35.745Z
Learning: In Next.js, nested `<a>` tags cause hydration issues due to invalid HTML. To fix this, avoid nesting `<a>` tags by replacing inner `<a>` tags with non-interactive elements like `<span>`, and use click handlers to maintain interactivity if needed.
Applied to files:
components/SocialShareButtons.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/SocialShareButtons.tsx
📚 Learning: 2024-10-11T10:46:58.882Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested `<a>` tags due to hydration issues, use accessible non-link elements like `<button>` or `<span>` with appropriate roles, `tabIndex`, and event handlers to maintain accessibility and SEO.
Applied to files:
components/SocialShareButtons.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/SocialShareButtons.tsx
🧬 Code graph analysis (1)
components/SocialShareButtons.tsx (3)
components/icons/Twitter.tsx (1)
IconTwitter(7-13)components/icons/LinkedIn.tsx (1)
IconLinkedIn(7-17)components/icons/Clipboard.tsx (1)
IconClipboard(7-13)
🪛 GitHub Actions: PR testing - if Node project
components/SocialShareButtons.tsx
[error] 1-1: simple-import-sort: Run autofix to sort imports.
🔇 Additional comments (3)
components/SocialShareButtons.tsx (3)
18-41: Well-structured component with proper SSR handling and cleanup.The implementation demonstrates good practices:
- SSR-safe URL access using
useEffect- Proper timeout cleanup to prevent memory leaks
- Addresses hydration concerns from past reviews
43-54: Good defensive programming in clipboard handling.The implementation correctly checks for
navigator.clipboardavailability before attempting to write, and handles errors gracefully. This ensures compatibility across different browser environments.
61-80: Proper security and accessibility attributes.All external share links correctly use
target="_blank"withrel="noopener noreferrer"to prevent security vulnerabilities, and include appropriatearia-labelattributes for screen readers.
| import React, { useState, useEffect } from 'react'; | ||
|
|
||
| import IconClipboard from './icons/Clipboard'; | ||
| import IconLinkedIn from './icons/LinkedIn'; | ||
| import IconTwitter from './icons/Twitter'; |
There was a problem hiding this comment.
Fix import sorting to pass CI.
The pipeline reports an import sorting violation. Run the project's lint autofix to resolve this automatically.
#!/bin/bash
# Run the lint autofix to correct import order
npm run lint -- --fixBased on pipeline failures.
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: simple-import-sort: Run autofix to sort imports.
🤖 Prompt for AI Agents
In components/SocialShareButtons.tsx around lines 1 to 5, the import statements
are not sorted according to the project's linting rules; run the lint autofix or
reorder imports to satisfy the sorter. Either run the suggested command (npm run
lint -- --fix) to auto-correct import order, or manually reorder imports so
external modules (React) come first, followed by a blank line, then the local
icon imports in the project's configured alphabetical/group order; save and
re-run lint to confirm the violation is resolved.
3 participants
This PR adds social sharing buttons (Twitter, LinkedIn, Copy Link) to blog posts, replacing the deprecated/broken AddThis widget.
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.