Skip to content

Added custom demo configuration for SocialShareButton #138

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

Open
sneha-techiee wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added custom demo configuration for SocialShareButton #138

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ba6916
Added custom Sneha demo and updated README
sneha-techiee Mar 31, 2026
bad3cd7
Added Sneha custom demo to index.html
sneha-techiee Mar 31, 2026
497a954
Fix review comments: improve HTML comment and refactor demo config
sneha-techiee Apr 13, 2026
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
39 changes: 39 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,11 @@ <h2>🎨 Custom Button Colors</h2>
<p>Customize button colors to match your brand palette</p>
<div class="demo-grid">
<div class="demo-item">
<h3>✨ Sneha Custom</h3>
<p>Custom demo added by Sneha</p>
<div id="demo-sneha"></div>
</div>
<div class="demo-item">
<h3>Red Theme</h3>
<p>#f44336 - Material Red</p>
<div id="demo-red"></div>
Expand Down Expand Up @@ -577,7 +582,22 @@ <h2>🅰️ Angular Integration</h2>
</div>


<!-- Sneha Custom Demo -->
<div class="demo-section">
<h2>🧪 Sneha Custom Demo</h2>
<p>This is Sneha's custom integration demo.</p>

<div class="demo-grid">
<div class="demo-item">
<h3>My Share Button</h3>
<p>Custom example added by Sneha</p>

<!-- Sneha's custom share button container -->
<div id="share-button"></div>

</div>
</div>
</div>
Comment on lines +585 to +600
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

This change does not fulfill Issue #19 acceptance criteria.

Issue #19 requires a tutorial integration in a different org frontend repo plus a README demo-link PR there. Adding this section in index.html here does not satisfy that deliverable, so “closes #19” is currently unsupported by the implementation scope.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 585 - 600, The change added a local demo section
(the div.demo-section containing the "🧪 Sneha Custom Demo" and the element with
id="share-button" in index.html) but does not satisfy Issue `#19` which requires
adding a tutorial integration in a different org frontend repo plus a README
demo-link PR; either remove the claim that this closes `#19` and delete or revert
the demo-section div (the demo-section / demo-grid / `#share-button` markup) from
this repo, or move the demo implementation to the target org frontend repository
and create a separate PR there that includes the demo files and an updated
README with the demo link so the issue can be properly closed.

Copy link
Copy Markdown
Author

@sneha-techiee sneha-techiee Apr 13, 2026

Choose a reason for hiding this comment

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

Hi @coderabbitai 👋

Thanks for pointing this out!

You're right — this PR focuses on adding a custom demo within the current repository and does not fully satisfy the requirements of Issue #19.

I'll remove the “Closes #19” reference from this PR and treat this as a separate enhancement contribution.

I will work on a proper tutorial integration in a different frontend project as required for Issue #19.

Thanks for the clarification! 😊

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 13, 2026

Choose a reason for hiding this comment

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

@sneha-techiee, thanks for the understanding and for the clear plan! 👍

To summarize the next steps:

  1. This PR — remove the Closes tutorial: submit an tutorial integrating our SocialShareButton with different tech stack repo from our org #19`` reference from the PR description so it's tracked as a standalone demo enhancement.
  2. Issue #19 — create a separate PR in the target org frontend repo with the tutorial video link added to that repo's README, as the issue specifies.

Would you like me to open a new GitHub issue to track the proper Issue #19 tutorial work as a follow-up, so it doesn't get lost? Just let me know!

🧠 Learnings used 
Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-17T17:12:57.712Z
Learning: In AOSSIE-Org/SocialShareButton, new wrapper files (e.g., src/social-share-button-preact.jsx) added in a PR are not part of any CDN release until the next version tag is cut. When reviewing PRs that add new wrapper/source files, flag any README or index.html CDN URLs that reference a version predating the new file, and check that acquisition instructions (CDN URL, npm, or download link) are provided for the new file itself.

Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-10T07:25:17.136Z
Learning: For the AOSSIE-Org/SocialShareButton repository, kpj2006 wants contributors to add proper inline comments to all methods in library source files (especially src/social-share-button.js). The preferred enforcement mechanism is CodeRabbit path-based review instructions (skills) in .coderabbit.yaml, rather than scripts or workflows. During reviews, flag any newly added or modified function that lacks a descriptive comment explaining what it does, why it exists, and its parameters/return values.

Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-10T07:25:17.136Z
Learning: For the AOSSIE-Org/SocialShareButton repository, kpj2006 wants contributors to add proper inline comments to all methods in library source files (especially src/social-share-button.js). The preferred enforcement mechanism is CodeRabbit path-based review instructions (skills) in .coderabbit.yaml rather than scripts or workflows. Flag any newly added or modified function that lacks a descriptive comment during reviews.

Copy link
Copy Markdown
Author

@sneha-techiee sneha-techiee Apr 13, 2026

Choose a reason for hiding this comment

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

Thanks for the clarification! 😊

I've removed the “Closes #19” reference from the PR description. This PR now stands as a separate demo enhancement.

I’ll work on a proper tutorial integration in a different repo for Issue #19.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 13, 2026

Choose a reason for hiding this comment

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

@sneha-techiee, sounds great — thanks for acting on this promptly! 🎉 The PR description update keeps things clean and accurately scoped. Looking forward to seeing the proper Issue #19 tutorial integration in a separate PR when you're ready!

🧠 Learnings used 
Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-17T17:12:57.712Z
Learning: In AOSSIE-Org/SocialShareButton, new wrapper files (e.g., src/social-share-button-preact.jsx) added in a PR are not part of any CDN release until the next version tag is cut. When reviewing PRs that add new wrapper/source files, flag any README or index.html CDN URLs that reference a version predating the new file, and check that acquisition instructions (CDN URL, npm, or download link) are provided for the new file itself.

Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-10T07:25:17.136Z
Learning: For the AOSSIE-Org/SocialShareButton repository, kpj2006 wants contributors to add proper inline comments to all methods in library source files (especially src/social-share-button.js). The preferred enforcement mechanism is CodeRabbit path-based review instructions (skills) in .coderabbit.yaml, rather than scripts or workflows. During reviews, flag any newly added or modified function that lacks a descriptive comment explaining what it does, why it exists, and its parameters/return values.

Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-10T07:25:17.136Z
Learning: For the AOSSIE-Org/SocialShareButton repository, kpj2006 wants contributors to add proper inline comments to all methods in library source files (especially src/social-share-button.js). The preferred enforcement mechanism is CodeRabbit path-based review instructions (skills) in .coderabbit.yaml rather than scripts or workflows. Flag any newly added or modified function that lacks a descriptive comment during reviews.

If you found this review helpful, would you consider giving us a shout-out on X?

Thank you for using CodeRabbit!

<!-- CTA Section -->
<div class="cta-section">
<h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
Expand Down Expand Up @@ -758,6 +778,25 @@ <h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
buttonHoverColor: "#db2777",
buttonText: "Share",
});
const snehaBaseConfig = {
url: demoUrl,
title: "Sneha's Project 🔥",
buttonStyle: "primary",
buttonText: "Share My Project",
};

new SocialShareButton({
...snehaBaseConfig,
container: "#share-button",
description: "Testing my custom integration 🚀",
});

// Sneha Custom Demo
new SocialShareButton({
...snehaBaseConfig,
container: "#demo-sneha",
description: "Custom demo added by Sneha 🚀",
});

// Copy to Clipboard Functionality
const copyButtons = document.querySelectorAll(".copy-btn");
Expand Down
Loading