docs: add tutorial video for SocialShareButton analytics integration (#94)#116
docs: add tutorial video for SocialShareButton analytics integration (#94)#116Muneerali199 wants to merge 7 commits intoAOSSIE-Org:mainfrom
Conversation
WalkthroughDocumentation-only updates: README expanded with Rails/Django/Laravel server-side examples, numerous formatting and quote-style consistency edits, new docs pages (tutorial-video.md, quick-integration-prompt.md), and index.html updated with a server-rendered frameworks demo section and inline-code styling. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/tutorial-video.md`:
- Around line 40-66: The "Timestamped Breakdown" section contains conflicting
duration info: the timeline shows Video 1 at 4:00 and Video 2 at 3:00 while the
document and Issue `#94` require "Duration: ≤ 150 seconds" (≤2:30); update either
the timestamps under "Video 1 — Setup & Code Integration" and "Video 2 — Live
Preview on AOSSIE Website" to sum to ≤150s or change the duration/claim text to
reflect the actual combined runtime, and mirror the same fix where the duration
claim appears again (the repeated duration lines referenced). Ensure the
headings ("Timestamped Breakdown", the two Video titles) and the duration claim
text are consistent.
- Around line 85-89: The fenced console-output block showing the
SocialShareButton Analytics lines lacks a language tag and triggers MD040;
update the triple-backtick fence that wraps the lines starting with
“[SocialShareButton Analytics] { eventName: ... }” to include a language
identifier (e.g., change ``` to ```text) so the block is language-tagged and the
linter warning is resolved.
In `@index.html`:
- Line 455: Buttons with class "copy-btn" currently lack an explicit type, which
can cause them to act as form submit buttons when placed inside a form; update
each <button class="copy-btn" aria-label="Copy code"> (all five instances) to
include type="button" so they never trigger form submission, i.e., modify the
elements referenced by the "copy-btn" class in the markup (lines noted in the
review) to add the type attribute.
- Around line 459-462: Replace the broken jsDelivr npm CDN references for the
social-share-button assets with the canonical GitHub CDN paths used elsewhere in
the project: update the <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css">
and the corresponding <script
src="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js">
tags to use the GitHub CDN base
(cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/...) pointing to the
correct src/ CSS and JS files so the stylesheet and script load successfully
(apply the same replacement for all occurrences of these link/script tags in the
file).
- Around line 447-450: Create a reusable CSS class (e.g., .inline-code) that
contains the repeated inline style (background: rgba(0,0,0,0.3); padding: 2px
6px; border-radius: 4px) and replace each inline style on the <code> elements in
this file (the repeated occurrences around "<head>" and "</body>" and other
similar <code> tags) with that class; update the <head> or main stylesheet to
include the .inline-code rule so all five instances use the class instead of
inline styles for maintainability and caching.
🪄 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: ee9ac36e-d4d2-4625-9a50-f997fbe1f03f
📒 Files selected for processing (3)
README.mddocs/tutorial-video.mdindex.html
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
docs/quick-integration-prompt.md (1)
11-18:⚠️ Potential issue | 🟡 MinorLanguage-tag both fenced code blocks.
Both blocks are missing a language identifier and will trigger MD040.
✏️ Suggested fix
-``` +```text Read the full integration instructions from: https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md @@ Also enable debug: true to see analytics events in the console.@@
-+text
[SocialShareButton Analytics] { eventName: 'social_share_popup_open', ... }
[SocialShareButton Analytics] { eventName: 'social_share_click', platform: 'twitter', ... }
[SocialShareButton Analytics] { eventName: 'social_share_copy', ... }Also applies to: 38-42
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/quick-integration-prompt.md` around lines 11 - 18, Add explicit language tags to the fenced code blocks to satisfy MD040: change the opening backticks for both blocks shown in the diff to include a language identifier (e.g., use ```text) so the blocks containing the integration instructions and the analytics lines (the two triple-backtick fenced code blocks) are labeled; ensure both occurrences (the block with the integration link and the block with the analytics example lines) use the same ```text tag.docs/tutorial-video.md (1)
79-85:⚠️ Potential issue | 🟡 MinorAdd a language tag to the prompt code fence.
This fenced block is unlabeled and will trigger MD040. Use
text(ormd) for the block.✏️ Suggested fix
-``` +```text Read the full integration instructions from: https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md @@ Add the share button to the existing Navbar component.</details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against the current code and only fix it if needed.
In
@docs/tutorial-video.mdaround lines 79 - 85, The unlabeled fenced code block
containing the integration instructions ("Read the full integration instructions
from: https://github.com/AOSSIE-Org/SocialShareButton/...") should be annotated
with a language tag to satisfy MD040; edit the fenced block in
docs/tutorial-video.md to add a tag such astext (ormd) immediately after
the opening backticks so the block becomes a labeled code fence while preserving
the existing lines about the integration link and "Add the share button to the
existing Navbar component."</details> </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>Verify each finding against the current code and only fix it if needed.
Inline comments:
In@docs/tutorial-video.md:
- Around line 89-131: The headings in this doc repeat "Step 2"; update the
sequential step numbers so they read: leave the first "Step 2 — Debug mode"
as-is, rename "Step 2 — Google Analytics 4 adapter (production-ready)" to "Step
3 — Google Analytics 4 adapter (production-ready)" and rename the following
"Step 3 — Listening via DOM CustomEvent (framework-agnostic alternative)" to
"Step 4 — Listening via DOM CustomEvent (framework-agnostic alternative)";
search for those exact heading strings to locate and update them and also adjust
any in-text references that mention the old step numbers.In
@index.html:
- Around line 459-506: The HTML contains inline styles on the section
elements and the hidden (e.g.,and ); extract these into CSS classes (for
example .section-title for the bold top-margin paragraphs and .visually-hidden
or .offscreen for the copy-status) and add those rules to the shared stylesheet
(or a page-specific CSS block). Update the markup to remove the style attributes
and apply the new classes to theand elements
(keep existing class names like copy-status and copy-btn if useful), ensuring
the visual and accessibility behavior is preserved.- Line 431: Update the React example import to use the canonical package name
and include the CSS import: replace the incorrect import "import
SocialShareButton from 'social-share-button'" with the canonical package
"social-share-button-aossie" and add the accompanying CSS import as shown in the
README; locate the import statement referencing SocialShareButton in the example
and update it to import from 'social-share-button-aossie' and import the package
CSS accordingly.
Duplicate comments:
In@docs/quick-integration-prompt.md:
- Around line 11-18: Add explicit language tags to the fenced code blocks to
satisfy MD040: change the opening backticks for both blocks shown in the diff to
include a language identifier (e.g., use ```text) so the blocks containing the
integration instructions and the analytics lines (the two triple-backtick fenced
code blocks) are labeled; ensure both occurrences (the block with the
integration link and the block with the analytics example lines) use the sameIn `@docs/tutorial-video.md`: - Around line 79-85: The unlabeled fenced code block containing the integration instructions ("Read the full integration instructions from: https://github.com/AOSSIE-Org/SocialShareButton/...") should be annotated with a language tag to satisfy MD040; edit the fenced block in docs/tutorial-video.md to add a tag such as ```text (or ```md) immediately after the opening backticks so the block becomes a labeled code fence while preserving the existing lines about the integration link and "Add the share button to the existing Navbar component."🪄 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:
bc93dcb5-c9ea-4f85-b223-4fd4d8258718📒 Files selected for processing (4)
docs/client-guide.mddocs/quick-integration-prompt.mddocs/tutorial-video.mdindex.html
| ### Step 2 — Debug mode (zero-config, all events to console) | ||
|
|
||
| Add `debug: true` to the existing `SocialShareButton` init call in the host project: | ||
|
|
||
| ```js | ||
| // In AOSSIE-Org/Website's Navbar component (or your existing layout component) | ||
| shareButtonRef.current = new window.SocialShareButton({ | ||
| container: '#share-button', | ||
| debug: true, // single addition — logs every event to the browser console | ||
| }); | ||
| ``` | ||
|
|
||
| **Events you will see in the console:** | ||
|
|
||
| ```text | ||
| [SocialShareButton Analytics] { eventName: 'social_share_popup_open', platform: null, url: '...', ... } | ||
| [SocialShareButton Analytics] { eventName: 'social_share_click', platform: 'twitter', url: '...', ... } | ||
| [SocialShareButton Analytics] { eventName: 'social_share_copy', platform: null, url: '...', ... } | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ### Step 2 — Google Analytics 4 adapter (production-ready) | ||
|
|
||
| Load the analytics adapter from the CDN, then pass the adapter via `analyticsPlugins`: | ||
|
|
||
| ```html | ||
| <!-- In your layout HTML (before </body>) --> | ||
| <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-analytics.js"></script> | ||
|
|
||
| <script> | ||
| const btn = new window.SocialShareButton({ | ||
| container: '#share-button', | ||
| analyticsPlugins: [new window.SocialShareAnalytics.GoogleAnalyticsAdapter()], | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| This calls `window.gtag('event', 'social_share_click', { share_platform: 'twitter', ... })` automatically for every interaction. | ||
|
|
||
| --- | ||
|
|
||
| ### Step 3 — Listening via DOM CustomEvent (framework-agnostic alternative) |
There was a problem hiding this comment.
Fix duplicated step numbering in section headings.
Step 2 is used twice. Rename the second Step 2 to Step 3, and Step 3 to Step 4 for consistent progression.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/tutorial-video.md` around lines 89 - 131, The headings in this doc
repeat "Step 2"; update the sequential step numbers so they read: leave the
first "Step 2 — Debug mode" as-is, rename "Step 2 — Google Analytics 4 adapter
(production-ready)" to "Step 3 — Google Analytics 4 adapter (production-ready)"
and rename the following "Step 3 — Listening via DOM CustomEvent
(framework-agnostic alternative)" to "Step 4 — Listening via DOM CustomEvent
(framework-agnostic alternative)"; search for those exact heading strings to
locate and update them and also adjust any in-text references that mention the
old step numbers.
| <span class="copy-status" aria-live="polite" style="position:absolute; left:-9999px;"></span> | ||
| <code> | ||
| <code>import SocialShareButton from 'social-share-button'; | ||
| import SocialShareButton from 'social-share-button'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Local package name references ==="
rg -n "social-share-button-aossie|social-share-button" README.md docs index.html || true
echo
echo "=== Check npm registry existence for both package names ==="
for pkg in social-share-button social-share-button-aossie; do
code=$(curl -s -o /dev/null -w "%{http_code}" "https://registry.npmjs.org/${pkg}")
echo "${pkg}: HTTP ${code}"
doneRepository: AOSSIE-Org/SocialShareButton
Length of output: 4800
🏁 Script executed:
cat -n package.json | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 877
🏁 Script executed:
# Check git history or comments about package names
rg -B2 -A2 "social-share-button-aossie|social-share-button" package.json README.md | head -40Repository: AOSSIE-Org/SocialShareButton
Length of output: 1828
🏁 Script executed:
# Find any documentation that explains the package name choice or relationship
find . -name "*.md" -type f -exec grep -l "package.*name\|social-share-button" {} \; 2>/dev/null | head -10Repository: AOSSIE-Org/SocialShareButton
Length of output: 272
Fix import package name in React example to match canonical package name.
Line 431 uses import SocialShareButton from 'social-share-button', but the official package name in package.json is social-share-button-aossie. Users copying this example will import the wrong package. Update to import SocialShareButton from 'social-share-button-aossie' and add the CSS import as shown in README.md line 673.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@index.html` at line 431, Update the React example import to use the canonical
package name and include the CSS import: replace the incorrect import "import
SocialShareButton from 'social-share-button'" with the canonical package
"social-share-button-aossie" and add the accompanying CSS import as shown in the
README; locate the import statement referencing SocialShareButton in the example
and update it to import from 'social-share-button-aossie' and import the package
CSS accordingly.
| <p style="font-weight:600;margin-top:16px;">Ruby on Rails — <code class="inline-code">app/views/layouts/application.html.erb</code></p> | ||
| <div class="code-block"> | ||
| <button type="button" class="copy-btn" aria-label="Copy code">Copy</button> | ||
| <span class="copy-status" aria-live="polite" style="position:absolute;left:-9999px;"></span> | ||
| <code> | ||
| <%# In <head> %> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"> | ||
|
|
||
| <%# Before </body> %> | ||
| <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script> | ||
| <div id="share-button"></div> | ||
| <script> | ||
| new SocialShareButton({ | ||
| container: '#share-button', | ||
| url: window.location.href, | ||
| title: document.title, | ||
| theme: 'dark', | ||
| buttonText: 'Share' | ||
| }); | ||
| </script></code> | ||
| </div> | ||
|
|
||
| <p style="font-weight:600;margin-top:16px;">Django — <code class="inline-code">templates/base.html</code></p> | ||
| <div class="code-block"> | ||
| <button type="button" class="copy-btn" aria-label="Copy code">Copy</button> | ||
| <span class="copy-status" aria-live="polite" style="position:absolute;left:-9999px;"></span> | ||
| <code> | ||
| {# In <head> #} | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"> | ||
|
|
||
| {# Before </body> #} | ||
| <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script> | ||
| <div id="share-button"></div> | ||
| <script> | ||
| new SocialShareButton({ | ||
| container: '#share-button', | ||
| url: window.location.href, | ||
| title: document.title, | ||
| theme: 'dark', | ||
| buttonText: 'Share' | ||
| }); | ||
| </script></code> | ||
| </div> | ||
|
|
||
| <p style="font-weight:600;margin-top:16px;">Laravel — <code class="inline-code">resources/views/layouts/app.blade.php</code></p> | ||
| <div class="code-block"> | ||
| <button type="button" class="copy-btn" aria-label="Copy code">Copy</button> | ||
| <span class="copy-status" aria-live="polite" style="position:absolute;left:-9999px;"></span> |
There was a problem hiding this comment.
Move newly added inline styles to CSS classes.
This section introduces repeated inline presentation styles (<p ... style=...> and <span ... style=...>). Please extract them into reusable classes.
♻️ Suggested refactor
.inline-code {
background: rgba(0, 0, 0, 0.3);
padding: 2px 6px;
border-radius: 4px;
}
+
+.framework-label {
+ font-weight: 600;
+ margin-top: 16px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
...
- <p style="font-weight:600;margin-top:16px;">Ruby on Rails — <code class="inline-code">app/views/layouts/application.html.erb</code></p>
+ <p class="framework-label">Ruby on Rails — <code class="inline-code">app/views/layouts/application.html.erb</code></p>
...
- <span class="copy-status" aria-live="polite" style="position:absolute;left:-9999px;"></span>
+ <span class="copy-status sr-only" aria-live="polite"></span>
...
- <p style="font-weight:600;margin-top:16px;">Django — <code class="inline-code">templates/base.html</code></p>
+ <p class="framework-label">Django — <code class="inline-code">templates/base.html</code></p>
...
- <span class="copy-status" aria-live="polite" style="position:absolute;left:-9999px;"></span>
+ <span class="copy-status sr-only" aria-live="polite"></span>
...
- <p style="font-weight:600;margin-top:16px;">Laravel — <code class="inline-code">resources/views/layouts/app.blade.php</code></p>
+ <p class="framework-label">Laravel — <code class="inline-code">resources/views/layouts/app.blade.php</code></p>
...
- <span class="copy-status" aria-live="polite" style="position:absolute;left:-9999px;"></span>
+ <span class="copy-status sr-only" aria-live="polite"></span>As per coding guidelines **/*.html: review HTML against the Google HTML style guide and best practices recommended by Lighthouse.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@index.html` around lines 459 - 506, The HTML contains inline styles on the
section <p> elements and the hidden <span class="copy-status"> (e.g., <p
style="font-weight:600;margin-top:16px;"> and <span class="copy-status"
style="position:absolute;left:-9999px;">); extract these into CSS classes (for
example .section-title for the bold top-margin paragraphs and .visually-hidden
or .offscreen for the copy-status) and add those rules to the shared stylesheet
(or a page-specific CSS block). Update the markup to remove the style attributes
and apply the new classes to the <p> and <span class="copy-status"> elements
(keep existing class names like copy-status and copy-btn if useful), ensuring
the visual and accessibility behavior is preserved.
|
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: |
1 participant
Summary
This PR adds a tutorial video demonstrating how to integrate SocialShareButton into the AOSSIE-Org/Website (Next.js + Tailwind) using an AI-powered approach and wire up analytics event tracking.
Videos
What the Videos Cover
Video 1 — AI-Powered Integration (Using OpenCode/AI Prompt)
debug: trueto enable analytics event trackingVideo 2 — Live Preview
social_share_popup_open,social_share_click) in real-timeChanges
docs/tutorial-video.mdwith:Checklist
Related
Summary by CodeRabbit
Release Notes
New Features
Documentation