feat: add Hugo and Jekyll integration guides and demo sections#151
Open
amankv1234 wants to merge 22 commits into
Open
feat: add Hugo and Jekyll integration guides and demo sections#151amankv1234 wants to merge 22 commits into
amankv1234 wants to merge 22 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
WalkthroughAdds framework integration docs (Nuxt, WordPress, Hugo, Jekyll), new Nuxt wrapper component, safer container resolution in core JS, revised clipboard copy behavior in the demo site, multiple demo pages, and widespread formatting/whitespace normalization across docs and source files. ChangesFramework integration + implementation
Sequence Diagram(s)sequenceDiagram
autonumber
participant NuxtComp as Nuxt Component
participant Browser as Browser (window, DOM)
participant VanillaLib as window.SocialShareButton
NuxtComp->>Browser: onMounted (client-only)
NuxtComp->>Browser: start polling for VanillaLib availability
Browser-->>NuxtComp: VanillaLib loaded (script from CDN)
NuxtComp->>VanillaLib: new SocialShareButton({container, options})
VanillaLib-->>Browser: creates DOM button inside container
NuxtComp->>VanillaLib: updateOptions(...) (on prop changes)
NuxtComp->>VanillaLib: destroy() (onBeforeUnmount)
VanillaLib-->>Browser: cleanup DOM and 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)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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
Author
|
@kpj2006 , |
|
Hello 👋 This PR has had no activity for more than 2 weeks. If you are still working on it, please push an update or leave a comment. Ping a maintainer if you believe it is ready for review or merge! This PR will be automatically closed in 7 days if there is no further activity. |
Member
|
@amankv1234 thanks for your patience, |
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! |
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
New Features
Bug Fixes
Documentation