Add integration skill for SocialShareButton with detailed setup instr…#64
Merged
kpj2006 merged 2 commits intoAOSSIE-Org:mainfrom Mar 7, 2026
Merged
Add integration skill for SocialShareButton with detailed setup instr…#64kpj2006 merged 2 commits intoAOSSIE-Org:mainfrom
kpj2006 merged 2 commits intoAOSSIE-Org:mainfrom
Conversation
…uctions for various frameworks
Contributor
📝 WalkthroughWalkthroughAdds a Copilot integration prompt document for the SocialShareButton library that describes three loading methods (CDN, npm, React wrapper), a 3-step integration flow, framework-specific setup (Vanilla HTML, CRA, Next.js App/Pages Router, Vite/Vue/Angular), SPA dynamic URL/title guidance, and troubleshooting. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 18-19: The prompt contains contradictory instructions about
whether to create a new component file or only modify existing components
(conflict between the "Do NOT create new files" line and the "copy
src/social-share-button-react.jsx" lines); pick one consistent policy and update
the prompt text to match it: either remove the references to copying/importing
`src/social-share-button-react.jsx` and instead instruct Copilot to inject the
share button code directly into the existing component(s) like Header/Navbar, or
keep the copy/import approach and remove the "Do NOT create new files"
prohibition and the "add code directly to the developer's existing component"
sentence; ensure the prompt uses the same wording everywhere (referencing the
"Do NOT create new files" line, the "existing component (Header, Navbar, etc.)"
phrase, and the "copy src/social-share-button-react.jsx" instruction) so agents
can follow one clear rule.
- Around line 411-418: The example instructs users to copy
src/social-share-button-react.jsx and shows using <SocialShareButton
platforms={["twitter","linkedin"]}/> but omits required props; update the
example to pass the required url and title props expected by the
SocialShareButton wrapper (referencing the SocialShareButton component in
src/social-share-button-react.jsx) by including url and title values in the JSX
so the example matches the component's required prop signature.
- Around line 423-449: The options table documents keys that the
SocialShareButton constructor doesn't accept; update the docs to match
src/social-share-button.js constructor (the function in the file around the top
of the module) by removing the five nonexistent options: analytics, onAnalytics,
analyticsPlugins, componentId, and debug, and change the default value listed
for platforms to exclude email (i.e., list only whatsapp facebook twitter
linkedin telegram reddit) so the table matches the actual runtime API and won't
mislead Copilot suggestions.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3077d982-a4de-4d9b-86b9-bcdb296a98b1
📒 Files selected for processing (1)
.github/copilot/integrate-social-share-button.prompt.md
…ting separate files in the SocialShareButton integration guide
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
.github/copilot/integrate-social-share-button.prompt.md (1)
424-450:⚠️ Potential issue | 🟠 MajorRemove non-existent options from the table.
The constructor options table includes five options that don't exist in the actual
SocialShareButtonconstructor implementation (lines 7-49 of src/social-share-button.js):
analytics(line 445)onAnalytics(line 446)analyticsPlugins(line 447)componentId(line 448)debug(line 449)Additionally, line 434 incorrectly includes
These incorrect options will mislead Copilot into generating invalid configuration code.
📋 Required corrections
-| `platforms` | array | All platforms | `whatsapp facebook twitter linkedin telegram reddit email` | +| `platforms` | array | All platforms | `whatsapp facebook twitter linkedin telegram reddit` | | `buttonText` | string | `'Share'` | Button label text | | `buttonStyle` | string | `'default'` | `default` `primary` `compact` `icon-only` | | `buttonColor` | string | `''` | Custom button background color | | `buttonHoverColor` | string | `''` | Custom button hover color | | `customClass` | string | `''` | Additional CSS class for button | | `theme` | string | `'dark'` | `dark` or `light` | | `modalPosition` | string | `'center'` | Modal position on screen | | `showButton` | boolean | `true` | Show/hide the share button | | `onShare` | function | `null` | `(platform, url) => void` | | `onCopy` | function | `null` | `(url) => void` | -| `analytics` | boolean | `true` | Set `false` to disable all event emission | -| `onAnalytics` | function | `null` | `(payload) => void` — direct analytics hook | -| `analyticsPlugins` | array | `[]` | Adapter instances from `social-share-analytics.js` | -| `componentId` | string | `null` | Label this instance for analytics tracking | -| `debug` | boolean | `false` | Log analytics events to console |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/copilot/integrate-social-share-button.prompt.md around lines 424 - 450, Remove the five non-existent constructor options from the README table (analytics, onAnalytics, analyticsPlugins, componentId, debug) and update the "platforms" default value to match the actual SocialShareButton constructor implementation by removing "email" from the listed default platforms; locate the options table in the prompt file and cross-check against the SocialShareButton constructor in src/social-share-button.js to ensure the table only lists real constructor parameters.
🧹 Nitpick comments (4)
.github/copilot/integrate-social-share-button.prompt.md (4)
414-419: Consider adding expliciturlandtitleprops for clarity.While the React wrapper provides defaults for
url(window.location.href) andtitle(document.title), explicitly passing these props in the example would better demonstrate the component's full API and encourage developers to provide semantic values.📝 Suggested enhancement
import { SocialShareButton } from "./components/SocialShareButton"; function App() { - return <SocialShareButton platforms={["twitter", "linkedin"]} />; + return ( + <SocialShareButton + url="https://example.com/post" + title="Example post" + platforms={["twitter", "linkedin"]} + /> + ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/copilot/integrate-social-share-button.prompt.md around lines 414 - 419, Update the example to show passing explicit url and title props to the SocialShareButton component so consumers see the full API: modify the App usage of SocialShareButton to include url and title (e.g., SocialShareButton platforms={["twitter","linkedin"]} url={...} title={...}) while keeping the existing defaults in the component; reference the SocialShareButton component and its url and title props in the example to demonstrate their usage.
18-20: Clarify the file creation exception.The exception clause partially addresses the previous contradiction concern, but the phrasing remains ambiguous. Line 18 prohibits creating new files, while line 20 permits it when following Method 3, which itself instructs copying an existing file rather than creating from scratch.
Consider rephrasing for clarity:
-> 🚫 **IMPORTANT:** Do NOT create new files like `ShareButton.jsx` or `ShareButton.tsx`! +> 🚫 **IMPORTANT:** Do NOT create new component files from scratch! > ✅ Add code directly to the developer's **existing** component (Header, Navbar, etc.) -> 📄 **Exception:** If a separate file is needed (e.g. a dedicated share component), follow **Method 3 — React Wrapper Component** exclusively. +> 📄 **Exception:** If a reusable React component is needed, copy the pre-built wrapper from `src/social-share-button-react.jsx` per **Method 3** below.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/copilot/integrate-social-share-button.prompt.md around lines 18 - 20, The wording is ambiguous about creating new files for the share button: line text forbids new files (e.g., ShareButton.jsx/ShareButton.tsx) but then permits creating a separate file when following "Method 3 — React Wrapper Component"; clarify by updating the prompt to explicitly state that adding share code should be done inside existing components (e.g., Header, Navbar) by default, and only in the narrow, documented case of "Method 3 — React Wrapper Component" may a new dedicated file be added — and if allowed, require copying an existing component as a template rather than creating from scratch; mention the specific examples ShareButton.jsx and ShareButton.tsx and the section title "Method 3 — React Wrapper Component" so reviewers can locate and fix the wording.
210-215: Add a timeout safeguard to the script polling loop.The
setIntervalpolling on lines 210-215 runs indefinitely at 100ms intervals ifwindow.SocialShareButtonnever loads, potentially causing a memory leak or performance degradation.🛡️ Suggested safeguard with timeout
} else { + let attempts = 0; const checkInterval = setInterval(() => { + attempts++; + if (attempts > 50) { // 5 seconds max + clearInterval(checkInterval); + console.error("SocialShareButton script failed to load"); + return; + } if (window.SocialShareButton) { clearInterval(checkInterval); initButton(); } }, 100);Also applies to lines 314-319 (Pages Router example).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/copilot/integrate-social-share-button.prompt.md around lines 210 - 215, The polling loop using setInterval that checks for window.SocialShareButton (checkInterval calling initButton()) needs a timeout safeguard so it doesn't run forever; modify the polling in the function containing checkInterval (and the analogous block for the Pages Router example) to track elapsed time or attempts and clearInterval when a maximum wait (e.g., 5–10s or N attempts) is reached, then clear the interval and handle the failure (log an error/warn and optionally run a fallback or no-op init) to avoid leaks; ensure you reference and update the existing checkInterval variable and still call clearInterval before returning.
54-57: Add language identifier to code block.The code block displaying CDN URLs lacks a language identifier, which triggers a markdown linting warning. While not critical, adding an identifier improves consistency.
📝 Suggested fix
-``` +```text CSS: https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css JS: https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js ```🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/copilot/integrate-social-share-button.prompt.md around lines 54 - 57, Add a language identifier to the markdown code block that lists the CDN URLs so the markdown linter stops warning; edit the code block in .github/copilot/integrate-social-share-button.prompt.md (the block containing the two CDN lines for social-share-button.css and social-share-button.js) and change the opening fence to include a language tag such as "text" (e.g., ```text) to explicitly mark the snippet language.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 424-450: Remove the five non-existent constructor options from the
README table (analytics, onAnalytics, analyticsPlugins, componentId, debug) and
update the "platforms" default value to match the actual SocialShareButton
constructor implementation by removing "email" from the listed default
platforms; locate the options table in the prompt file and cross-check against
the SocialShareButton constructor in src/social-share-button.js to ensure the
table only lists real constructor parameters.
---
Nitpick comments:
In @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 414-419: Update the example to show passing explicit url and title
props to the SocialShareButton component so consumers see the full API: modify
the App usage of SocialShareButton to include url and title (e.g.,
SocialShareButton platforms={["twitter","linkedin"]} url={...} title={...})
while keeping the existing defaults in the component; reference the
SocialShareButton component and its url and title props in the example to
demonstrate their usage.
- Around line 18-20: The wording is ambiguous about creating new files for the
share button: line text forbids new files (e.g.,
ShareButton.jsx/ShareButton.tsx) but then permits creating a separate file when
following "Method 3 — React Wrapper Component"; clarify by updating the prompt
to explicitly state that adding share code should be done inside existing
components (e.g., Header, Navbar) by default, and only in the narrow, documented
case of "Method 3 — React Wrapper Component" may a new dedicated file be added —
and if allowed, require copying an existing component as a template rather than
creating from scratch; mention the specific examples ShareButton.jsx and
ShareButton.tsx and the section title "Method 3 — React Wrapper Component" so
reviewers can locate and fix the wording.
- Around line 210-215: The polling loop using setInterval that checks for
window.SocialShareButton (checkInterval calling initButton()) needs a timeout
safeguard so it doesn't run forever; modify the polling in the function
containing checkInterval (and the analogous block for the Pages Router example)
to track elapsed time or attempts and clearInterval when a maximum wait (e.g.,
5–10s or N attempts) is reached, then clear the interval and handle the failure
(log an error/warn and optionally run a fallback or no-op init) to avoid leaks;
ensure you reference and update the existing checkInterval variable and still
call clearInterval before returning.
- Around line 54-57: Add a language identifier to the markdown code block that
lists the CDN URLs so the markdown linter stops warning; edit the code block in
.github/copilot/integrate-social-share-button.prompt.md (the block containing
the two CDN lines for social-share-button.css and social-share-button.js) and
change the opening fence to include a language tag such as "text" (e.g.,
```text) to explicitly mark the snippet language.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d493d3b9-008c-4446-8baf-1ad41326c607
📒 Files selected for processing (1)
.github/copilot/integrate-social-share-button.prompt.md
This was referenced Mar 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…uctions for various frameworks
Addressed Issues:
Fixes #(TODO:issue number)
Screenshots/Recordings:
Additional Notes:
Checklist
AI Usage Disclosure
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Summary by CodeRabbit