Skip to content

feat: integrate SocialShareButton via CDN and auto-init #188

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
amankv1234 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: integrate SocialShareButton via CDN and auto-init #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd8253d
social share button integration
amankv1234 Jul 19, 2026
be1f8f3
social share button integration
amankv1234 Jul 19, 2026
3147d1a
socail share button integration
amankv1234 Jul 19, 2026
adee55b
socail share button integration
amankv1234 Jul 19, 2026
e41040d
fix: add share button to mobile menu for responsive access
amankv1234 Jul 19, 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
2 changes: 2 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,11 @@
}
}(window.location))
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script>
Comment on lines +37 to +42

@coderabbitai coderabbitai Bot Jul 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔒 Security & Privacy | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

sed -n '1,120p' frontend/index.html

Repository: StabilityNexus/Chainvoice

Length of output: 2685

🏁 Script executed:

rg -n "social-share-button|SocialShareButton|socialShareButton" .

Repository: StabilityNexus/Chainvoice

Length of output: 457

Remove or harden the SocialShareButton CDN includes.

These are the only references in the repo, so if the share widget isn’t needed, drop both assets. Otherwise pin them to an immutable commit and add SRI plus crossorigin="anonymous"; the script executes with full origin privileges.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/index.html` around lines 37 - 42, Update the SocialShareButton
assets in the HTML head/body: if the widget is unused, remove both the
stylesheet and script includes; otherwise replace the version tag with an
immutable commit, add matching integrity attributes and crossorigin="anonymous"
to both CDN links, and preserve the widget’s functionality.

@amankv1234 amankv1234 Jul 19, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

The widget is actively used —

is mounted in both the desktop and mobile Navbar. The library auto-initializes via MutationObserver on data-social-share elements, so the CDN assets are required.

Regarding SRI (integrity) hashes: jsdelivr.net CDN links using a version tag like @v1.0.4 already serve immutable, pinned content — the file does not change once a version tag is published to GitHub. Generating a valid integrity hash requires downloading the exact bytes served by jsdelivr at build time, which is outside the scope of this integration PR.

If the project adopts a CI pipeline or a lockfile-based asset strategy in the future, SRI hashes can be generated (e.g. via openssl dgst -sha384) and added at that point. For now, the version-pinned CDN link provides sufficient reproducibility for this integration.

Comment on lines +37 to +42

@Atharva0506 Atharva0506 Aug 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @amankv1234 @kpj2006 instead of using the CDN I think we should use the npm package https://www.npmjs.com/package/@aossie-org/social-share-button. Can you make this change and then we can merge this PR?

@amankv1234 amankv1234 Aug 29, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@kpj2006 , Should I make the npm changes as well?

@kpj2006 kpj2006 Aug 29, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

better to make this pr, draft for now...

</body>
</html>
5 changes: 5 additions & 0 deletions frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ function Navbar() {
)}
</motion.div>
))}
<div data-social-share></div>

@coderabbitai coderabbitai Bot Jul 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Expose the share control in the mobile navigation.

Line 208 is inside the hidden lg:flex desktop-only container, while the mobile menu has no equivalent mount. Users below the lg breakpoint cannot access the new sharing feature; add a mobile mount or place the widget in a shared responsive location.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/Navbar.jsx` at line 208, Update the Navbar
component’s responsive layout so the share control mounted via data-social-share
is also rendered in the mobile navigation, outside the hidden lg:flex
desktop-only container or through an equivalent shared responsive location.
Preserve the existing desktop mount while ensuring users below the lg breakpoint
can access the widget.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== Navbar.jsx outline ==\n'
ast-grep outline frontend/src/components/Navbar.jsx --view expanded || true

printf '\n== index.html grep ==\n'
rg -n "social-share|SocialShare|data-social-share|script" frontend/index.html frontend/src/components/Navbar.jsx || true

printf '\n== relevant slices ==\n'
sed -n '1,280p' frontend/src/components/Navbar.jsx
printf '\n--- index.html ---\n'
sed -n '1,220p' frontend/index.html

Repository: StabilityNexus/Chainvoice

Length of output: 13125

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== search for SocialShareButton usages ==\n'
rg -n "SocialShareButton|social-share|data-social-share|updateOptions|destroy\\(" frontend || true

printf '\n== route/location usage in Navbar ==\n'
rg -n "useLocation|location|pathname|href" frontend/src/components/Navbar.jsx frontend/src || true

Repository: StabilityNexus/Chainvoice

Length of output: 4926

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Locate the navbar and any social share wiring.
printf '\n-- files --\n'
git ls-files 'frontend/src/components/Navbar.jsx' 'frontend/index.html' || true

printf '\n-- social/share references --\n'
rg -n "SocialShareButton|social-share|data-social-share|updateOptions|destroy\\(|useEffect|useLocation|pathname" frontend/src/components/Navbar.jsx frontend/index.html frontend/src || true

printf '\n-- Navbar.jsx excerpt --\n'
sed -n '1,280p' frontend/src/components/Navbar.jsx

printf '\n-- index.html excerpt --\n'
sed -n '1,220p' frontend/index.html

Repository: StabilityNexus/Chainvoice

Length of output: 18788

🌐 Web query:

"window.SocialShareButton data-social-share social share CDN library"

💡 Result:

The term window.SocialShareButton is primarily associated with the SocialShareButton library developed by AOSSIE-Org [1][2]. This is a lightweight, zero-dependency, vanilla JavaScript library designed for social media sharing [2]. Implementation via CDN To use this library via a CDN, you can reference the files hosted on jsDelivr. The project documentation recommends using the 'latest' tag to ensure you have the most current version [3][4]: <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@latest/src/social-share-button.js"></script> Initialization Once the library is loaded, you initialize it by targeting a specific DOM element (the container) where the buttons should appear [1][2]. Example Initialization:

<script> if (window.SocialShareButton) { new window.SocialShareButton({ container: "#share-button" }); } </script> Key Considerations - SSR Safety: If you are using frameworks with Server-Side Rendering (e.g., Next.js, Nuxt, Angular Universal), ensure the library is only initialized on the client side (e.g., within useEffect, onMounted, or ngAfterViewInit lifecycle hooks) to avoid errors when the window object is undefined [5][6]. - Alternatives: Note that there are other libraries with similar naming conventions, such as 'social-share-buttons' by ozdemirburak [7][8] or 'shareon' [9], which may have different APIs and CDN implementation patterns. Always check the specific documentation for the library you have included in your project [10][9].

Citations:

Mount window.SocialShareButton for this container. The CDN script only exposes the widget API, so this empty data-social-share div will stay blank unless you instantiate it in useEffect. If the share control should be available on mobile too, move it out of the hidden lg:flex wrapper.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/Navbar.jsx` at line 208, Initialize
window.SocialShareButton for the data-social-share container inside the
component’s useEffect so the CDN-provided API renders the widget. Ensure the
share control is not restricted by the hidden lg:flex wrapper if it must also be
available on mobile.

Source: Learnings

{publicItems.map((item) => (
<motion.div
key={item.name}
Expand Down Expand Up @@ -338,6 +339,10 @@ function Navbar() {
</Link>
))}

<div className="px-4 py-2">
<div data-social-share></div>
</div>

<div className="px-4 py-2">
<ConnectButton
accountStatus="full"
Expand Down