feat: add Hugo and Jekyll integration guides and demo sections#151
Open
amankv1234 wants to merge 27 commits into
Open
feat: add Hugo and Jekyll integration guides and demo sections#151amankv1234 wants to merge 27 commits into
amankv1234 wants to merge 27 commits into
Conversation
- Added try-catch blocks to createButton and _getContainer to handle invalid CSS selectors. - Improved fallbackCopy error visibility by logging to _debugWarn. - Fixed HTML syntax error in index.html (removed stray closing div). - Removed duplicate CTA section in index.html for cleaner code. - Ran project-wide formatting and linting. Closes AOSSIE-Org#132
- Implemented defensive try-catch blocks for container selector resolution. - Refactored createButton() to deduplicate logic via _getContainer() helper. - Enhanced fallbackCopy() to log clipboard errors using the _debugWarn helper. - Fixed a SyntaxError in index.html and removed a redundant CTA section. - Ran project-wide formatting and linting for full code consistency. Closes AOSSIE-Org#132
- Implemented defensive try-catch blocks for container selector resolution. - Added DOM Element type safety check in _getContainer() to prevent crashes. - Refactored createButton() to deduplicate logic via _getContainer() helper. - Enhanced fallbackCopy() to log clipboard errors using the _debugWarn helper. - Fixed a SyntaxError in index.html and removed a redundant CTA section. - Ran project-wide formatting and linting for full code consistency. Closes AOSSIE-Org#132
- Added a new 'WordPress Integration' section to index.html with step-by-step instructions. - Included PHP code snippets for enqueuing assets in unctions.php via standard WordPress hooks (wp_enqueue_scripts, wp_footer). - Implemented copy-to-clipboard functionality for the new code blocks. - Updated README.md to list WordPress as a formally supported platform. Fixes AOSSIE-Org#52, Fixes AOSSIE-Org#112
- Replaced raw => characters with the HTML-escaped => equivalent in the Qwik component code block within index.html. - Resolves potential HTML linting/validation errors caused by raw greater-than signs inside <code> tags.
- Replaced incorrect npm CDN URLs with the correct jsDelivr + GitHub CDN pointing to AOSSIE-Org/SocialShareButton@v1.0.4 in both index.html and README.md. - Updated wp_footer add_action priority from default (10) to 21 so enqueued footer scripts are printed before initialization runs. - Added a note in README clarifying the package is not published to npm.
- Removed his._debugWarn logging inside the allbackCopy method's catch block within src/social-share-button.js. - The failed copy action is now completely silent internally (since old browsers gracefully failing to copy isn't an unexpected app error), but still visually updates the UI button text to
github-actions
Bot
added
planned
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds Nuxt.js wrapper component with SSR-safe lifecycle and props-based configuration, updates WordPress/Nuxt.js/Hugo/Jekyll integration documentation with copy-paste examples, refactors core container resolution with error handling, improves clipboard copy behavior in demo site to collect multiple code blocks, includes complete static demo pages for three frameworks, and normalizes formatting across source files. ChangesFramework Integration Implementation and Documentation
Sequence Diagram(s)sequenceDiagram
autonumber
participant NuxtApp as Nuxt App Instance
participant Browser as Browser (window, DOM)
participant CDN as CDN (SocialShareButton script)
participant VanillaLib as window.SocialShareButton
NuxtApp->>Browser: onMounted (client-side only, SSR guarded)
NuxtApp->>Browser: start polling for VanillaLib
Browser->>CDN: script loaded (if not cached)
CDN-->>Browser: window.SocialShareButton available
NuxtApp->>VanillaLib: new SocialShareButton({ container, url, title, options })
VanillaLib-->>Browser: render button DOM in container
NuxtApp->>Browser: props change (url, title, platforms, etc)
NuxtApp->>VanillaLib: updateOptions({ ...changed props })
VanillaLib-->>Browser: update button state
NuxtApp->>Browser: onBeforeUnmount
NuxtApp->>VanillaLib: destroy()
VanillaLib-->>Browser: cleanup DOM, remove listeners
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ 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 |
github-actions
Bot
added
size/XL
Contributor
Author
![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: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
index.html (2)
520-542:⚠️ Potential issue | 🟡 MinorCTA section is stranded in the middle of the integration docs.
cta-sectionnow appears between Preact (ends L478) and the newly added Qwik/Nuxt/Next/Vue/Angular/Hugo-Jekyll sections (L542-721). The "Ready to Get Started?" call-to-action should be the last content block before the footer; users currently scroll past it and then see more integration docs, hurting the UX.Move the
cta-sectionblock to just before</div>at line 722 (after the Hugo/Jekyll section).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 520 - 542, The CTA block with class "cta-section" (the "Ready to Get Started?" call-to-action) is placed mid-doc between Preact and the Qwik/Nuxt/Next/Vue/Angular/Hugo-Jekyll integration sections; move the entire <div class="cta-section">...</div> block so it appears just before the closing wrapper/div that ends the integrations (i.e., after the Hugo/Jekyll section and immediately before the final </div>/footer), ensuring you preserve its child anchor elements and attributes (class="cta-button" and class="cta-button discord-btn") and keep target/rel attributes intact.
888-944:⚠️ Potential issue | 🟡 MinorClipboard handler: minor hardening.
navigator.clipboardis undefined on non-secure contexts (HTTP /file://); the.writeText()call will throwTypeErrorsynchronously before.then/.catchengages, leaving the button stuck on "Copy" with no feedback. Guard withif (!navigator.clipboard) { … fallback / status }.- On error you call
setTimeoutto reset tooriginalTextwhilebutton.textContentis alreadyoriginalText(line 928), making the delayed reset a no-op but still clearing the status span — acceptable, just note for clarity.- navigator.clipboard - .writeText(text) + if (!navigator.clipboard?.writeText) { + if (statusSpan?.classList.contains("copy-status")) { + statusSpan.textContent = "Clipboard API unavailable"; + } + return; + } + navigator.clipboard + .writeText(text)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 888 - 944, The clipboard handler must guard against navigator.clipboard being undefined; before calling navigator.clipboard.writeText(...) in the click listener for copyButtons, check if navigator.clipboard exists and handle the fallback by setting the statusSpan (and button.textContent) to a clear failure message and scheduling/clearing button.copyResetTimer as you do on catch, so the UI never becomes stuck if writeText would throw synchronously; keep the existing success and catch flows but move the initial presence check for navigator.clipboard to the top of the listener and reuse the same reset logic (button.copyResetTimer) when the API is missing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@index.html`:
- Around line 547-568: The copy button is concatenating multiple <code> elements
because the copy handler uses codeBlockContainer.querySelectorAll("code") and
joins them; fix by splitting the two snippets into separate .code-block
containers (each containing its own .copy-btn, .copy-status and a single <code>
node) so the existing copy button behavior remains consistent with other
sections; alternatively (if you prefer to keep one container) change the copy
logic that references codeBlockContainer.querySelectorAll("code") to only use
the first code element (e.g., querySelector("code")) — update the DOM structure
around the two snippets or the copy handler accordingly, referencing the
.code-block, .copy-btn, .copy-status elements and the
codeBlockContainer.querySelectorAll("code") usage.
In `@README.md`:
- Around line 625-640: The template-inserted description string in the
SocialShareButton init (the description property in the SocialShareButton
constructor) can break JS when page.description contains quotes, backslashes, or
newlines; change the Liquid/Jekyll insertion to emit a safe JSON string (use the
Liquid json/jsonify filter) and the Hugo insertion to use Hugo's jsonify (or
jsEscape) so the generated JS is valid JSON/JS string literal; update the same
pattern wherever SocialShareButton is initialized (the snippet that constructs
new SocialShareButton in README and in index.html).
In `@src/social-share-button-nuxt.vue`:
- Around line 1-86: Add a short header comment at the top of
src/social-share-button-nuxt.vue indicating this is a copy-paste wrapper
distributed manually (not yet on CDN) — mirror the pattern used in
social-share-button-react.jsx; place the comment above the <template> tag so
contributors see acquisition instructions immediately and mention that consumers
should copy this file into their project or use the released CDN/npm artifact
once the next release tag is cut.
- Around line 36-64: The component currently only tries to initialize inside
onMounted and silently does nothing if window.SocialShareButton isn't loaded;
add a polling fallback like in social-share-button-preact.jsx: inside onMounted
start a setInterval(100ms) that checks for window.SocialShareButton and a retry
counter (e.g., max retries), instantiate shareButton with the same options
(container, url, title, description, hashtags, via, platforms, theme,
buttonText, customClass, onShare, onCopy, buttonStyle, modalPosition,
buttonColor, buttonHoverColor, showButton, analytics, onAnalytics,
analyticsPlugins, componentId, debug) when found, then clearInterval; also save
the interval id and clear it in onBeforeUnmount (and also destroy/cleanup
shareButton if present) so the polling is bounded and cleaned up.
- Around line 74-85: Replace the direct watch(props, ...) with an explicit
getter watch(() => ({ ...props }), ...) to avoid receiving the same reactive
proxy for old/new values; inside the watcher keep the currentUrl/currentTitle
resolution and call shareButton.updateOptions({...}) as before. Also update the
updateOptions implementation (function name: updateOptions) or add
documentation: either make updateOptions trigger a full re-render when
non-reactive-affecting fields change (theme, buttonText, buttonStyle, platforms)
or clearly document that only url, buttonColor, and buttonHoverColor currently
take effect on update and other fields require re-creation of the shareButton
instance. Ensure references to shareButton and updateOptions are updated
accordingly.
In `@src/social-share-button.js`:
- Around line 694-699: The validation in _getContainer() uses "instanceof
Element" which can throw if the Element global is undefined; change the guard to
first check typeof Element !== "undefined" before using instanceof (e.g., only
evaluate container instanceof Element when Element exists), and keep the
existing fallback check container.nodeType === 1 so the function safely returns
null and warns when container is not a DOM element.
---
Outside diff comments:
In `@index.html`:
- Around line 520-542: The CTA block with class "cta-section" (the "Ready to Get
Started?" call-to-action) is placed mid-doc between Preact and the
Qwik/Nuxt/Next/Vue/Angular/Hugo-Jekyll integration sections; move the entire
<div class="cta-section">...</div> block so it appears just before the closing
wrapper/div that ends the integrations (i.e., after the Hugo/Jekyll section and
immediately before the final </div>/footer), ensuring you preserve its child
anchor elements and attributes (class="cta-button" and class="cta-button
discord-btn") and keep target/rel attributes intact.
- Around line 888-944: The clipboard handler must guard against
navigator.clipboard being undefined; before calling
navigator.clipboard.writeText(...) in the click listener for copyButtons, check
if navigator.clipboard exists and handle the fallback by setting the statusSpan
(and button.textContent) to a clear failure message and scheduling/clearing
button.copyResetTimer as you do on catch, so the UI never becomes stuck if
writeText would throw synchronously; keep the existing success and catch flows
but move the initial presence check for navigator.clipboard to the top of the
listener and reuse the same reset logic (button.copyResetTimer) when the API is
missing.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 320df6ce-a9e0-4e41-928e-6021f30ff86c
📒 Files selected for processing (13)
CONTRIBUTING.mdREADME.mddocs/Roadmap.mdeslint.config.jsindex.htmllanding-page/README.mdlanding-page/src/app/globals.csssrc/social-share-analytics.jssrc/social-share-button-nuxt.vuesrc/social-share-button-preact.jsxsrc/social-share-button-react.jsxsrc/social-share-button.csssrc/social-share-button.js
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with 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.
Inline comments:
In `@hugo-demo/index.html`:
- Around line 8-11: Replace the forked feature-branch CDN references with the
canonical release tag so the demo won't break after the contributor branch is
removed: change the link href that currently points to
"amankv1234/SocialShareButton@feature/hugo-jekyll-demo-cdn-guide/.../social-share-button.css"
to use "AOSSIE-Org/SocialShareButton@v1.0.3/.../social-share-button.css", and
likewise update the script src that loads the JS from the same fork to
"AOSSIE-Org/SocialShareButton@v1.0.3/.../social-share-button.js" so both the CSS
link and the JS script tags reference the stable v1.0.3 package instead of the
contributor fork.
In `@hugo-demo/layouts/_default/baseof.html`:
- Around line 8-11: The CDN URL in the <link> tag
(href="https://cdn.jsdelivr.net/gh/amankv1234/SocialShareButton@feature/hugo-jekyll-demo-cdn-guide/...")
is pointing to a fork/branch; update all occurrences in
layouts/_default/baseof.html (the <link> stylesheet reference and the other URL
around the social share button include) to the canonical release URL by
replacing "amankv1234/SocialShareButton@feature/hugo-jekyll-demo-cdn-guide" with
"AOSSIE-Org/SocialShareButton@v1.0.3" so both hrefs (the stylesheet at the top
and the other reference near lines 55–59) use the AOSSIE-Org v1.0.3 CDN path.
In `@index.html`:
- Around line 919-952: The code calls navigator.clipboard.writeText without
guarding for navigator.clipboard being undefined; update the copy handler (same
logic as copyLink in src/social-share-button.js) to first check if navigator &&
navigator.clipboard, and if not immediately set button.textContent and
statusSpan to the failure text and start the copyResetTimer to restore
originalText; otherwise call
navigator.clipboard.writeText(text).then(...).catch(...) as before—this prevents
a synchronous TypeError on non-HTTPS or older browsers and ensures the button
always resets.
In `@jekyll-demo/index.html`:
- Around line 8-11: Update the CDN URLs that point to the forked branch: find
occurrences of the string
"amankv1234/SocialShareButton@feature/hugo-jekyll-demo-cdn-guide" in
jekyll-demo/index.html (used in the link href for social-share-button.css and
the script src for social-share-button.js) and replace them with
"AOSSIE-Org/SocialShareButton@v1.0.3", ensuring the CSS uses
social-share-button.css and the JS uses social-share-button.js (i.e., change the
href to
https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css
and the script src to
https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js
for both occurrences).
In `@wordpress-demo-project/index.html`:
- Around line 8-11: Replace the fork/branch CDN URLs that reference
amankv1234/SocialShareButton@feature/... with the official release CDN links:
update the href for social-share-button.css and the script src for
social-share-button.js to use
https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css
and
https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js
respectively; locate the link element that loads social-share-button.css and the
script element that loads social-share-button.js and swap their href/src values
to the new AOSSIE-Org v1.0.3 URLs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 7a035477-726d-43d7-889c-da4074b8947a
📒 Files selected for processing (8)
README.mdhugo-demo/index.htmlhugo-demo/layouts/_default/baseof.htmlindex.htmljekyll-demo/index.htmlsrc/social-share-button-nuxt.vuesrc/social-share-button.jswordpress-demo-project/index.html
Contributor
Author
🎥 Integration Demo VideoI have recorded a comprehensive demo showcasing the seamless integration of SocialShareButton with Hugo, Jekyll, and WordPress. Video Link: https://drive.google.com/file/d/1b3OF0z5Hw7txLqPdSkMsAlLAGbClWjeg/view?usp=sharing What's covered in the video:
CDN used for demo:
|
Contributor
Author
|
Hello @kpj2006, I have completed the Hugo, Jekyll, and WordPress integrations as requested in PR #151. Updates:
Please review the changes and the demo video. Let me know if there is anything else I should do or if any further improvements are needed. Thank you! |
|
Please resolve the merge conflicts before review. Your PR will only be reviewed by a maintainer after all conflicts have been resolved. 📺 Watch this video to understand why conflicts occur and how to resolve them: |
Contributor
Author
|
Hi @kpj2006 , I have resolved all the conflicts in my PR. Could you please review and merge it when you get a chance? I’m eager to continue contributing to the project and work on further tasks. Thank you! |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
index.html (1)
919-952:⚠️ Potential issue | 🟠 Major | ⚡ Quick winGuard Clipboard API before calling
writeTextto avoid sync runtime failure.
navigator.clipboard.writeText(...)is invoked without checking API availability. In unsupported/insecure contexts this throws before.catch(...), so copy UI may not recover.Suggested minimal fix
- navigator.clipboard - .writeText(text) + if (!navigator.clipboard || !navigator.clipboard.writeText) { + button.textContent = originalText; + if (statusSpan && statusSpan.classList.contains("copy-status")) { + statusSpan.textContent = "Failed to copy to clipboard"; + } + button.copyResetTimer = setTimeout(() => { + button.textContent = originalText; + if (statusSpan && statusSpan.classList.contains("copy-status")) { + statusSpan.textContent = ""; + } + }, 2000); + return; + } + + navigator.clipboard + .writeText(text) .then(() => {🤖 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 `@index.html` around lines 919 - 952, The code calls navigator.clipboard.writeText() without first verifying that the clipboard API is available, which can cause a synchronous runtime error in unsupported or insecure contexts before the promise chain is established, preventing the catch handler from executing. Add a guard check before invoking navigator.clipboard.writeText() to verify that navigator.clipboard and the writeText method exist. If the clipboard API is unavailable, handle the failure by setting button.textContent to originalText, updating the statusSpan if present to show "Failed to copy to clipboard", and setting the copyResetTimer to reset the UI after 2000ms, similar to the existing catch handler logic.
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/social-share-button-preact.jsx`:
- Line 18: The platforms array in the Preact component is missing "pinterest"
compared to the vanilla library defaults and React wrapper implementation. Add
"pinterest" to the platforms array in the Preact social share button component
to include all eight platforms and maintain consistency across the vanilla,
React, and Preact wrapper implementations. This ensures users of the Preact
wrapper have the same platform options available as the other wrapper versions.
- Around line 139-142: The inline comment explaining the purpose of
JSON.stringify() on the hashtags and platforms variables needs to be clearer
about the underlying intent. Replace the current comment that says "prevent
unnecessary re-runs when parent components pass fresh array literals on every
render" with a more explicit explanation that JSON.stringify() is being used as
a shallow-equality workaround to stabilize dependency references and prevent
unnecessary effect re-runs. This should make it immediately clear to readers
that the stringification is a pattern to work around JavaScript object/array
reference equality issues in dependency arrays.
In `@src/social-share-button.js`:
- Around line 418-421: The `copyLink()` method call in the Discord platform
handling path assumes `this.modal` exists, but it may be null if
`share("discord")` is called before initialization or after component
destruction. Guard the `copyLink()` invocation by checking if `this.modal`
exists before calling it, or implement the clipboard copy logic directly using
`this.options.url` without modal dependency to keep the Discord share path
non-fatal like other platforms.
---
Duplicate comments:
In `@index.html`:
- Around line 919-952: The code calls navigator.clipboard.writeText() without
first verifying that the clipboard API is available, which can cause a
synchronous runtime error in unsupported or insecure contexts before the promise
chain is established, preventing the catch handler from executing. Add a guard
check before invoking navigator.clipboard.writeText() to verify that
navigator.clipboard and the writeText method exist. If the clipboard API is
unavailable, handle the failure by setting button.textContent to originalText,
updating the statusSpan if present to show "Failed to copy to clipboard", and
setting the copyResetTimer to reset the UI after 2000ms, similar to the existing
catch handler logic.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 530552de-6e9b-41c2-b061-fc7df424796e
📒 Files selected for processing (5)
README.mdindex.htmlsrc/social-share-button-preact.jsxsrc/social-share-button-react.jsxsrc/social-share-button.js
Contributor
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 3
♻️ Duplicate comments (1)
index.html (1)
919-952:⚠️ Potential issue | 🟠 Major | ⚡ Quick winGuard Clipboard API before calling
writeTextto avoid sync runtime failure.
navigator.clipboard.writeText(...)is invoked without checking API availability. In unsupported/insecure contexts this throws before.catch(...), so copy UI may not recover.Suggested minimal fix
- navigator.clipboard - .writeText(text) + if (!navigator.clipboard || !navigator.clipboard.writeText) { + button.textContent = originalText; + if (statusSpan && statusSpan.classList.contains("copy-status")) { + statusSpan.textContent = "Failed to copy to clipboard"; + } + button.copyResetTimer = setTimeout(() => { + button.textContent = originalText; + if (statusSpan && statusSpan.classList.contains("copy-status")) { + statusSpan.textContent = ""; + } + }, 2000); + return; + } + + navigator.clipboard + .writeText(text) .then(() => {🤖 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 `@index.html` around lines 919 - 952, The code calls navigator.clipboard.writeText() without first verifying that the clipboard API is available, which can cause a synchronous runtime error in unsupported or insecure contexts before the promise chain is established, preventing the catch handler from executing. Add a guard check before invoking navigator.clipboard.writeText() to verify that navigator.clipboard and the writeText method exist. If the clipboard API is unavailable, handle the failure by setting button.textContent to originalText, updating the statusSpan if present to show "Failed to copy to clipboard", and setting the copyResetTimer to reset the UI after 2000ms, similar to the existing catch handler logic.
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/social-share-button-preact.jsx`:
- Line 18: The platforms array in the Preact component is missing "pinterest"
compared to the vanilla library defaults and React wrapper implementation. Add
"pinterest" to the platforms array in the Preact social share button component
to include all eight platforms and maintain consistency across the vanilla,
React, and Preact wrapper implementations. This ensures users of the Preact
wrapper have the same platform options available as the other wrapper versions.
- Around line 139-142: The inline comment explaining the purpose of
JSON.stringify() on the hashtags and platforms variables needs to be clearer
about the underlying intent. Replace the current comment that says "prevent
unnecessary re-runs when parent components pass fresh array literals on every
render" with a more explicit explanation that JSON.stringify() is being used as
a shallow-equality workaround to stabilize dependency references and prevent
unnecessary effect re-runs. This should make it immediately clear to readers
that the stringification is a pattern to work around JavaScript object/array
reference equality issues in dependency arrays.
In `@src/social-share-button.js`:
- Around line 418-421: The `copyLink()` method call in the Discord platform
handling path assumes `this.modal` exists, but it may be null if
`share("discord")` is called before initialization or after component
destruction. Guard the `copyLink()` invocation by checking if `this.modal`
exists before calling it, or implement the clipboard copy logic directly using
`this.options.url` without modal dependency to keep the Discord share path
non-fatal like other platforms.
---
Duplicate comments:
In `@index.html`:
- Around line 919-952: The code calls navigator.clipboard.writeText() without
first verifying that the clipboard API is available, which can cause a
synchronous runtime error in unsupported or insecure contexts before the promise
chain is established, preventing the catch handler from executing. Add a guard
check before invoking navigator.clipboard.writeText() to verify that
navigator.clipboard and the writeText method exist. If the clipboard API is
unavailable, handle the failure by setting button.textContent to originalText,
updating the statusSpan if present to show "Failed to copy to clipboard", and
setting the copyResetTimer to reset the UI after 2000ms, similar to the existing
catch handler logic.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 530552de-6e9b-41c2-b061-fc7df424796e
📒 Files selected for processing (5)
README.mdindex.htmlsrc/social-share-button-preact.jsxsrc/social-share-button-react.jsxsrc/social-share-button.js
🛑 Comments failed to post (3)
src/social-share-button-preact.jsx (2)
18-18:
⚠️ Potential issue | 🟡 Minor | ⚡ Quick winPlatform array diverges from vanilla library defaults and React wrapper.
Line 18 specifies
["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "discord"], which omits"pinterest". The vanilla library defaults (src/social-share-button.js:19-28) include"pinterest", and the React wrapper (src/social-share-button-react.jsx:16) includes all eight platforms. This inconsistency could lead to unexpected behavior differences between the two wrapper implementations.Verify whether this omission is intentional; if not, add
"pinterest"to maintain parity with the vanilla library and React version.Proposed fix to add "pinterest" to match vanilla library defaults
- platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "discord"], + platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "pinterest", "discord"],🤖 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 `@src/social-share-button-preact.jsx` at line 18, The platforms array in the Preact component is missing "pinterest" compared to the vanilla library defaults and React wrapper implementation. Add "pinterest" to the platforms array in the Preact social share button component to include all eight platforms and maintain consistency across the vanilla, React, and Preact wrapper implementations. This ensures users of the Preact wrapper have the same platform options available as the other wrapper versions.
139-142: 🧹 Nitpick | 🔵 Trivial | 💤 Low value
Comment improvement: clarify the intent of array dependency stringification.
The inline comment at lines 139–140 could be more precise. Currently it says "prevent unnecessary re-runs when parent components pass fresh array literals on every render." Consider making it even clearer that
JSON.stringify()is used as a shallow-equality workaround to stabilize dependency references.Optional clarification for the comment
- // Stringify array dependencies to prevent unnecessary re-runs when - // parent components pass fresh array literals on every render. + // Stringify array/object dependencies to prevent unnecessary re-runs + // due to fresh reference identity from parent components every render.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.// Stringify array/object dependencies to prevent unnecessary re-runs // due to fresh reference identity from parent components every render. const hashtagsDep = JSON.stringify(hashtags); const platformsDep = JSON.stringify(platforms);🤖 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 `@src/social-share-button-preact.jsx` around lines 139 - 142, The inline comment explaining the purpose of JSON.stringify() on the hashtags and platforms variables needs to be clearer about the underlying intent. Replace the current comment that says "prevent unnecessary re-runs when parent components pass fresh array literals on every render" with a more explicit explanation that JSON.stringify() is being used as a shallow-equality workaround to stabilize dependency references and prevent unnecessary effect re-runs. This should make it immediately clear to readers that the stringification is a pattern to work around JavaScript object/array reference equality issues in dependency arrays.Source: Coding guidelines
src/social-share-button.js (1)
418-421:
⚠️ Potential issue | 🟠 Major | ⚡ Quick winGuard
copyLink()usage in Discord share path to avoid null-modal crashes.On Line 419,
this.copyLink()assumesthis.modalexists. If consumers callshare("discord")programmatically before init/after destroy, this can throw viathis.modal.querySelector(...). Keep Discord share non-fatal like other platforms by gating clipboard UI logic behind modal existence (or copying directly fromthis.options.urlwithout modal dependency).Proposed fix
if (platform === "discord") { - this.copyLink(); + if (this.modal) { + this.copyLink(); + } else if (navigator.clipboard?.writeText) { + navigator.clipboard.writeText(this.options.url).catch(() => {}); + } window.open(shareUrl, "_blank", "noopener,noreferrer"); } else if (platform === "email") {🤖 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 `@src/social-share-button.js` around lines 418 - 421, The `copyLink()` method call in the Discord platform handling path assumes `this.modal` exists, but it may be null if `share("discord")` is called before initialization or after component destruction. Guard the `copyLink()` invocation by checking if `this.modal` exists before calling it, or implement the clipboard copy logic directly using `this.options.url` without modal dependency to keep the Discord share path non-fatal like other platforms.
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
index.html (1)
933-965:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winCritical:
.writeText(text)call is missing — synchronousTypeErroron every copy button click.Line 933 calls
.then()directly on thenavigator.clipboardobject instead of on the promise returned bywriteText(text). This will throwTypeError: navigator.clipboard.then is not a functionsynchronously, breaking all copy functionality and contradicting the PR's claim of zero console errors.🔧 Proposed fix
- navigator.clipboard + navigator.clipboard.writeText(text) .then(() => {🤖 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 `@index.html` around lines 933 - 965, The navigator.clipboard object is being used directly with `.then()` instead of calling the writeText method first. To fix this, insert `.writeText(text)` immediately after `navigator.clipboard` so that the promise chain is called on the result of the writeText method rather than on the navigator.clipboard object itself. This will ensure the copy-to-clipboard operation is properly executed before the success or failure handlers are triggered.
🤖 Prompt for all review comments with 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.
Outside diff comments:
In `@index.html`:
- Around line 933-965: The navigator.clipboard object is being used directly
with `.then()` instead of calling the writeText method first. To fix this,
insert `.writeText(text)` immediately after `navigator.clipboard` so that the
promise chain is called on the result of the writeText method rather than on the
navigator.clipboard object itself. This will ensure the copy-to-clipboard
operation is properly executed before the success or failure handlers are
triggered.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 72d8279d-a84f-4526-8931-790050564a36
📒 Files selected for processing (1)
index.html
|
Please resolve the merge conflicts before review. Your PR will only be reviewed by a maintainer after all conflicts have been resolved. 📺 Watch this video to understand why conflicts occur and how to resolve them: |
kpj2006
requested changes
Jun 22, 2026
kpj2006
left a comment
kpj2006
left a comment
Member
There was a problem hiding this comment.
no need to push jekyll-demo and wordpress-demo-project folder.
Contributor
Author
@kpj2006 , I removed jekyll-demo and wordpress-demo-project folder as you mention |
2 tasks
|
Please resolve the merge conflicts before review. Your PR will only be reviewed by a maintainer after all conflicts have been resolved. 📺 Watch this video to understand why conflicts occur and how to resolve them: |
github-actions
Bot
removed
PR has merge conflicts
configuration
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
2 participants
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.
Description
Fixes #51
Adds first-class support for Hugo and Jekyll Static Site Generators (SSGs). This implementation provides a seamless "drop-in" CDN approach, which is the preferred integration pattern for static environments.
Changes
index.htmlwith functional snippets for both frameworks and copy-to-clipboard support.deferscripts andDOMContentLoadedlisteners to ensure high performance and reliability.@v1.0.3to ensure links work immediately.Verification
npm run formatSummary by CodeRabbit