docs: move framework-specific guides from README to /docs#40
docs: move framework-specific guides from README to /docs#40ssid18 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughRestructures documentation: README reduced to a minimal Quick Start and pointers; a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (1)
docs/vue-angular.md (1)
17-21: Consider adding a client-only note for SSR-capable setups.Optional but helpful: mention that initialization should run in client lifecycle hooks only when used in SSR variants (e.g., Nuxt/Angular Universal).
Based on learnings: SSR compatibility is important for the SocialShareButton library since it's designed for public library usage across multiple frameworks including SSR environments.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/vue-angular.md` around lines 17 - 21, The example initializes window.SocialShareButton directly, which will break in SSR; update the docs to note that initialization of SocialShareButton (window.SocialShareButton) should only run on the client (e.g., inside client lifecycle hooks or after checking for window/document) and show that the container '#share-button' must exist at that time; add a short client-only note referencing SocialShareButton and the container to guide Nuxt/Angular Universal users to perform initialization in mounted/created client hooks or guarded by a typeof window !== 'undefined' check.
🤖 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/installation-cdn.md`:
- Line 3: Change the heading "### Via CDN (Recommended)" to an H2 by replacing
the triple-hash with a double-hash so the heading becomes "## Via CDN
(Recommended)"; this fixes the MD001 markdownlint error and maintains proper
heading hierarchy in the document.
In `@docs/installation-npm.md`:
- Line 3: The heading "Using npm Package" is currently an H3 and must be
downgraded to H2 to preserve proper hierarchy under the page H1; update the
heading marker for the "Using npm Package" line from "### Using npm Package" to
"## Using npm Package" so it becomes an H2 and fixes MD001.
In `@docs/nextjs-app-router.md`:
- Line 3: Change the third-level headings that skip from the top-level `#` to
second-level `##` so markdownlint doesn't flag a skipped heading level;
specifically update headings like "Step 1: Add CDN to `app/layout.tsx`" (and the
similar heading at the other occurrence "Step X: ..." around the document) from
`###` to `##`, ensuring all "Step" headings use `##` consistently throughout the
file.
In `@docs/nextjs-pages-router.md`:
- Around line 3-27: Change the heading levels for the "Step 1: Add CDN to
`pages/_document.tsx`" and "Step 2: In your component:" headings from H3 (###)
to H2 (##) so they are H2 under the page H1 and satisfy MD001; update the two
heading lines in the document (the lines starting with "Step 1: Add CDN to
`pages/_document.tsx`" and "Step 2: In your component:") accordingly.
In `@docs/react.md`:
- Around line 3-15: The document's headings "Step 1: Add CDN to
`public/index.html`" and "Step 2: In your component:" are H3 below an H1 which
triggers markdownlint MD001; change those headings from H3 to H2 so the
hierarchy is H1 -> H2 and maintain consistent section nesting (update the
markdown heading markers for the two "Step 1..." and "Step 2..." headings).
In `@docs/spa-dynamic-url.md`:
- Around line 12-18: The example's useEffect depends on an undefined pathname;
define and document how to obtain pathname for target frameworks and update the
snippet accordingly: e.g., for Next.js App Router import and call usePathname()
to set const pathname = usePathname(); or for React Router import useLocation()
and set const pathname = useLocation().pathname; ensure the example shows the
required imports and the pathname constant so the useEffect (and its dependency
array) referencing pathname and the shareButton.current.updateOptions({ url:
window.location.href }) call are immediately runnable and framework-appropriate.
In `@docs/troubleshooting.md`:
- Around line 38-46: The doc uses vague "see above" references under the
"Solution: Use interval polling (see Next.js example above)" and "Solution: Use
`updateOptions()` method (see Advanced Usage above)" lines, which are broken
after the docs split; update these two solutions in the "URL not updating on
navigation" and the earlier interval polling note to include explicit, absolute
links or relative anchors to the specific Next.js example and the Advanced Usage
section (or their new filenames/anchors) instead of "see above", and verify the
link targets match the current docs structure and headings (`Next.js example`,
`Advanced Usage`, `updateOptions()`).
In `@docs/vanilla-js.md`:
- Around line 3-15: Change the "### Step 1: Add CDN to `index.html`" and "###
Step 2: Initialize in component" headings to H2 (use "##") so they are H2 levels
under the H1 page title; update those heading markers in the docs/vanilla-js.md
content to ensure no jump from H1 to H3.
- Around line 10-20: The example has a container ID mismatch: the HTML creates
<div id="app"></div> but the SocialShareButton is initialized with container:
'#share-button', causing the widget not to render; fix by making the IDs
consistent—either change the div id to "share-button" or update the new
window.SocialShareButton({ container: '#app' }) call so the selector matches the
element (refer to the div id and the SocialShareButton initializer to locate the
lines to change).
In `@docs/vue-angular.md`:
- Line 3: Change the heading levels so the document does not skip levels:
replace the "### Step 1: Add CDN to `index.html`" heading with "## Step 1: Add
CDN to `index.html`" and likewise update any other occurrences of "###" headings
in this file (for example the later step heading that currently uses "###") to
"##" so the hierarchy increments properly from the document title.
---
Nitpick comments:
In `@docs/vue-angular.md`:
- Around line 17-21: The example initializes window.SocialShareButton directly,
which will break in SSR; update the docs to note that initialization of
SocialShareButton (window.SocialShareButton) should only run on the client
(e.g., inside client lifecycle hooks or after checking for window/document) and
show that the container '#share-button' must exist at that time; add a short
client-only note referencing SocialShareButton and the container to guide
Nuxt/Angular Universal users to perform initialization in mounted/created client
hooks or guarded by a typeof window !== 'undefined' check.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
README.mddocs/callbacks.mddocs/customization.mddocs/index.mddocs/installation-cdn.mddocs/installation-npm.mddocs/nextjs-app-router.mddocs/nextjs-pages-router.mddocs/react.mddocs/spa-dynamic-url.mddocs/troubleshooting.mddocs/vanilla-js.mddocs/vue-angular.md
| useEffect(() => { | ||
| if (shareButton.current) { | ||
| shareButton.current.updateOptions({ | ||
| url: window.location.href | ||
| }); | ||
| } | ||
| }, [pathname]); // Update on route change |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n docs/spa-dynamic-url.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 580
🏁 Script executed:
find . -name "README*" -o -name "INSTALL*" | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 83
🏁 Script executed:
ls -la docs/ 2>/dev/null | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 970
🏁 Script executed:
rg "usePathname|useRouter|pathname" docs/ -A 2 -B 2Repository: AOSSIE-Org/SocialShareButton
Length of output: 227
🏁 Script executed:
cat -n docs/react.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 999
🏁 Script executed:
cat -n docs/nextjs-app-router.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 1389
🏁 Script executed:
head -50 README.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 2120
🏁 Script executed:
cat -n docs/nextjs-pages-router.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 1296
The snippet references undefined pathname variable.
The code at line 18 depends on pathname in the dependency array, but it is never defined or imported. This makes the example non-functional when copied directly.
Since this appears to be a framework-agnostic SPA example, clarify how to obtain pathname for common frameworks. For Next.js (App Router), this would require import { usePathname } from 'next/navigation'; and const pathname = usePathname();. For React Router, it would use the useLocation hook. Show at least one complete, runnable example or note the framework prerequisites.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/spa-dynamic-url.md` around lines 12 - 18, The example's useEffect
depends on an undefined pathname; define and document how to obtain pathname for
target frameworks and update the snippet accordingly: e.g., for Next.js App
Router import and call usePathname() to set const pathname = usePathname(); or
for React Router import useLocation() and set const pathname =
useLocation().pathname; ensure the example shows the required imports and the
pathname constant so the useEffect (and its dependency array) referencing
pathname and the shareButton.current.updateOptions({ url: window.location.href
}) call are immediately runnable and framework-appropriate.
docs/troubleshooting.md
Outdated
| **Solution:** Use interval polling (see Next.js example above) | ||
|
|
||
| --- | ||
|
|
||
| ## URL not updating on navigation | ||
|
|
||
| **Cause:** Component initialized once, doesn't track routes | ||
|
|
||
| **Solution:** Use `updateOptions()` method (see Advanced Usage above) |
There was a problem hiding this comment.
Replace “see above” references with explicit links.
Lines 38 and 46 reference sections that are not in this file, which makes troubleshooting navigation ambiguous after the docs split.
Suggested adjustment
-**Solution:** Use interval polling (see Next.js example above)
+**Solution:** Use interval polling (see [Next.js Pages Router guide](./nextjs-pages-router.md))
...
-**Solution:** Use `updateOptions()` method (see Advanced Usage above)
+**Solution:** Use `updateOptions()` method (see [SPA dynamic URL guide](./spa-dynamic-url.md))🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/troubleshooting.md` around lines 38 - 46, The doc uses vague "see above"
references under the "Solution: Use interval polling (see Next.js example
above)" and "Solution: Use `updateOptions()` method (see Advanced Usage above)"
lines, which are broken after the docs split; update these two solutions in the
"URL not updating on navigation" and the earlier interval polling note to
include explicit, absolute links or relative anchors to the specific Next.js
example and the Advanced Usage section (or their new filenames/anchors) instead
of "see above", and verify the link targets match the current docs structure and
headings (`Next.js example`, `Advanced Usage`, `updateOptions()`).
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/vue-angular.md`:
- Line 10: The HTML example shows <div id="app"></div> but the initialization
snippet uses container: '#share-button', causing a selector mismatch; update the
example so the DOM contains an element with id="share-button" (or change the
initialization to use '#app') so the selector used by the initialization
(container: '#share-button') matches the HTML DOM element and the copy-pasted
example works (also make the same change for the other occurrence noted around
the later example).
- Around line 17-20: Update the example initialization to be SSR-safe by moving
direct window.SocialShareButton calls into client-only lifecycle hooks: for
Vue/Nuxt show wrapping the creation inside onMounted() or use a <ClientOnly>
wrapper so it runs only on the client, and for Angular move the call into
ngAfterViewInit() guarded by isPlatformBrowser(this.platformId) (inject
PLATFORM_ID) so the new window.SocialShareButton({ container: '#share-button' })
invocation never runs on the server.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/installation-cdn.mddocs/installation-npm.mddocs/nextjs-app-router.mddocs/nextjs-pages-router.mddocs/react.mddocs/spa-dynamic-url.mddocs/troubleshooting.mddocs/vanilla-js.mddocs/vue-angular.md
✅ Files skipped from review due to trivial changes (2)
- docs/vanilla-js.md
- docs/installation-npm.md
🚧 Files skipped from review as they are similar to previous changes (6)
- docs/nextjs-app-router.md
- docs/troubleshooting.md
- docs/spa-dynamic-url.md
- docs/nextjs-pages-router.md
- docs/react.md
- docs/installation-cdn.md
| ```javascript | ||
| new window.SocialShareButton({ | ||
| container: '#share-button' | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, explore the repository structure
git ls-files | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 452
🏁 Script executed:
# Look for the specific documentation file mentioned in the review
cat docs/vue-angular.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 559
🏁 Script executed:
# Check the main library entry point to understand if SSR is explicitly supported
head -50 src/social-share-button.jsRepository: AOSSIE-Org/SocialShareButton
Length of output: 1660
🏁 Script executed:
# Search for any existing SSR-related guidance in documentation
find . -type f \( -name "*.md" -o -name "*.txt" \) | xargs grep -l "SSR\|ssr\|server-side\|universal" 2>/dev/null | head -10Repository: AOSSIE-Org/SocialShareButton
Length of output: 54
🏁 Script executed:
# Check README for any claims about framework support or SSR
cat README.md 2>/dev/null | head -100Repository: AOSSIE-Org/SocialShareButton
Length of output: 3343
🏁 Script executed:
cat docs/nextjs-app-router.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 1044
🏁 Script executed:
cat docs/nextjs-pages-router.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 979
🏁 Script executed:
# Also check if there are any other docs mentioning SSR or client-side initialization
grep -r "onMounted\|mounted\|isPlatformBrowser\|useEffect\|afterViewInit\|client" docs/ 2>/dev/nullRepository: AOSSIE-Org/SocialShareButton
Length of output: 496
🌐 Web query:
Vue 3 Nuxt SSR client-only initialization onMounted safe window access
💡 Result:
In Nuxt 3 (Vue 3) with SSR, don’t touch window/document (or localStorage) at the top-level of setup()—that code runs during server rendering too. Instead, use one of these SSR-safe patterns:
1) Guard with import.meta.client (or process.client) + run in onMounted
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const width = ref<number | null>(null)
onMounted(() => {
// runs only in the browser after hydration
width.value = window.innerWidth
})
// optional extra safety for code that might run outside hooks
if (import.meta.client) {
// safe to reference window here, but still prefer onMounted for DOM-dependent work
}
</script>This prevents “window is not defined” and avoids SSR/client mismatches by reading browser-only values after mount. [1]
2) Wrap browser-only components with <ClientOnly>
Use this when a whole component depends on browser APIs or is not SSR-compatible:
<template>
<ClientOnly fallback-tag="span" fallback="Loading...">
<BrowserOnlyWidget />
</ClientOnly>
</template><ClientOnly> renders its slot only on the client. [2]
3) Make the component itself client-only (.client.vue)
If a component should never be server-rendered, name it like:
components/Comments.client.vue
Nuxt will only render it after mount; if you need DOM access inside onMounted, Nuxt notes you may need await nextTick() there. [3]
4) Put initialization into a client-only plugin (.client.ts)
Best for “initialize once” libraries (analytics, editors, SDKs):
plugins/my-lib.client.ts(or.client.js)
Nuxt loads .client plugins only in the browser. [4]
Sources
[1] https://masteringnuxt.com/blog/fixing-hydration-errors-in-nuxt-a-practical-guide%3Ffriend%3DMOKKAPPS
[2] https://nuxt.com/docs/3.x/api/components/client-only
[3] https://nuxt.com/docs/3.x/guide/directory-structure/components
[4] https://nuxt.com/docs/3.x/api/configuration/nuxt-config
🌐 Web query:
Angular Universal SSR isPlatformBrowser afterViewInit window access pattern
💡 Result:
Recommended SSR-safe pattern for window access (Angular Universal)
1) Guard and delay DOM usage until you’re in the browser
Use PLATFORM_ID + isPlatformBrowser() to ensure the code runs only in the browser. (v18.angular.dev)
import { AfterViewInit, Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
`@Component`({ /* ... */ })
export class MyCmp implements AfterViewInit {
constructor(`@Inject`(PLATFORM_ID) private platformId: object) {}
ngAfterViewInit() {
if (!isPlatformBrowser(this.platformId)) return;
// Safe: only runs in the browser
const y = window.scrollY;
window.scrollTo({ top: 0 });
}
}2) Prefer DI over direct globals: inject a WINDOW token (returns undefined on server)
This avoids touching the window global at all during SSR and makes code easier to test. (infinum.com)
import { InjectionToken, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
export const WINDOW = new InjectionToken<Window | undefined>('WINDOW', {
providedIn: 'root',
factory: () => inject(DOCUMENT).defaultView ?? undefined,
});
// usage
const win = inject(WINDOW);
if (win) win.scrollTo(0, 0);3) If the crash happens even with guards, it’s usually a 3rd‑party import-time window access
isPlatformBrowser() won’t help if a library references window while the module is being loaded (top-level code). In that case, you must lazy-load / dynamic import the library only in the browser. (github.com)
if (isPlatformBrowser(this.platformId)) {
const lib = await import('some-browser-only-lib');
lib.init();
}Citations:
- 1: https://v18.angular.dev/api/common/isPlatformBrowser/?utm_source=openai
- 2: https://infinum.com/handbook/frontend/angular/server-side-rendering-ssr/platform-specific-globals-and-providers?utm_source=openai
- 3: "Window is not defined" even when isPlatformBrowser used. angular/universal#1675
Add SSR-safe initialization guidance for Vue and Angular ecosystems.
Direct window.SocialShareButton access breaks in Nuxt and Angular Universal unless guarded to run only on the client. Update the examples:
- Vue 3/Nuxt: Wrap initialization in
onMounted()hook, or use<ClientOnly>wrapper - Angular: Use
isPlatformBrowser()guard inngAfterViewInit()lifecycle hook
Example for Vue 3:
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
new window.SocialShareButton({
container: '#share-button'
})
})
</script>Example for Angular:
import { AfterViewInit, Component, Inject, PLATFORM_ID } from '@angular/core'
import { isPlatformBrowser } from '@angular/common'
`@Component`({ /* ... */ })
export class ShareComponent implements AfterViewInit {
constructor(`@Inject`(PLATFORM_ID) private platformId: object) {}
ngAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
new window.SocialShareButton({
container: '#share-button'
})
}
}
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/vue-angular.md` around lines 17 - 20, Update the example initialization
to be SSR-safe by moving direct window.SocialShareButton calls into client-only
lifecycle hooks: for Vue/Nuxt show wrapping the creation inside onMounted() or
use a <ClientOnly> wrapper so it runs only on the client, and for Angular move
the call into ngAfterViewInit() guarded by isPlatformBrowser(this.platformId)
(inject PLATFORM_ID) so the new window.SocialShareButton({ container:
'#share-button' }) invocation never runs on the server.
There was a problem hiding this comment.
This example is moved verbatim from the original README as part of a documentation-only restructuring.
Adding SSR-safe patterns would introduce new content and is outside the scope of this PR, which intentionally avoids modifying documentation text to keep the change minimal and fast to merge.
I’d be happy to open a follow-up issue for SSR-safe examples for Vue/Nuxt and Angular Universal.
There was a problem hiding this comment.
@ssid18, that makes perfect sense! Keeping this PR focused on the structural reorganization without content changes is a smart approach for faster review and merge.
A follow-up issue for SSR-safe examples would be great—it's an important enhancement given the retrieved learning about SSR compatibility being important for this library. If you'd like, I can create that issue for you with the specific Vue/Nuxt and Angular Universal examples outlined in my review comment. Just let me know! 👍
🧠 Learnings used
Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 1
File: src/social-share-button.js:10-11
Timestamp: 2025-12-21T12:11:23.512Z
Learning: SSR compatibility is important for the SocialShareButton library (src/social-share-button.js) since it's designed for public library usage across multiple frameworks including SSR environments.
README.md
Outdated
| --- | ||
|
|
||
| ## Demo | ||
| ## Full Documentation |
There was a problem hiding this comment.
add here links for each .md in readme like you have done in index.md
Additionally, we can enhance README with a more marketing-oriented. You have made great contributions, but we also need to promote our project effectively.
That’s why I opened this issue, to ensure the user onboarding process is smooth and easy to understand in simple terms.
try to view by user’s perspective and modify it if needed.
|
also @ssid18 could you suggest some features for our button project as it seems little bit underrated one. prefer to manually visit sites for content rather than querying to llms. |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
README.md (1)
112-129: Consider adding emojis to subsection headers for visual consistency.The Features section uses emojis for each bullet point (🌐, 🎯, ⚛️, etc.), creating a visually engaging list. The Documentation & Getting Started section header uses 📚 and the Demo section uses 🎬, but the subsection headers (Installation Guides, Framework Guides, Customize & Configure, Help & Support) lack emojis. Adding emojis to these headers would improve visual consistency and scannability.
✨ Suggested enhancement for visual consistency
-### Installation Guides +### 📦 Installation Guides - [CDN Setup](./docs/installation-cdn.md) - Fastest way to get started - [npm Package](./docs/installation-npm.md) - For build-based workflows -### Framework Guides +### ⚙️ Framework Guides - [Vanilla JavaScript](./docs/vanilla-js.md) – Zero-build, script-tag usage - [React](./docs/react.md) – Create React App & React projects - [Next.js (App Router)](./docs/nextjs-app-router.md) – Recommended for new Next.js apps - [Next.js (Pages Router)](./docs/nextjs-pages-router.md) – Legacy Next.js support - [Vue / Angular / Vite](./docs/vue-angular.md) – Framework-agnostic setup -### Customize & Configure +### 🎨 Customize & Configure - [Configuration Options](./docs/customization.md) - Colors, styles, button variants, and messaging - [Callbacks](./docs/callbacks.md) - Track share events in your app - [Dynamic URLs (SPA)](./docs/spa-dynamic-url.md) - Update share URL on route changes -### Help & Support +### 🆘 Help & Support - [Troubleshooting](./docs/troubleshooting.md) - Common issues and solutions - [View all docs](./docs/index.md) - Complete documentation index🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 112 - 129, Add matching emojis to the subsection headers in README.md to match the existing visual style: update the "Installation Guides" header (e.g., add 📦 or 🛠️), "Framework Guides" header (e.g., ⚛️ or 🧩), "Customize & Configure" header (e.g., ⚙️ or 🎛️), and "Help & Support" header (e.g., 🆘 or 💬) so they visually align with the Features/Documentation/Demo headers; modify the markdown header lines for Installation Guides, Framework Guides, Customize & Configure, and Help & Support to include the chosen emoji and ensure spacing/encoding is preserved.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@README.md`:
- Around line 112-129: Add matching emojis to the subsection headers in
README.md to match the existing visual style: update the "Installation Guides"
header (e.g., add 📦 or 🛠️), "Framework Guides" header (e.g., ⚛️ or 🧩),
"Customize & Configure" header (e.g., ⚙️ or 🎛️), and "Help & Support" header
(e.g., 🆘 or 💬) so they visually align with the Features/Documentation/Demo
headers; modify the markdown header lines for Installation Guides, Framework
Guides, Customize & Configure, and Help & Support to include the chosen emoji
and ensure spacing/encoding is preserved.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
README.mddocs/vue-angular.md
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/vue-angular.md
|
@kpj2006 thanks for the review! |
kpj2006
left a comment
kpj2006
left a comment
There was a problem hiding this comment.
check these suggestion, after that is done then you should start working on marketing style design of readme in which we try to grab user attention on readme and little SEO.
remind me to open a issue regarding this
| ## Quick Start Guide | ||
|
|
||
| > 🚫 **IMPORTANT:** Do NOT create new files like `ShareButton.jsx` or `ShareButton.tsx`! | ||
| > ✅ Add code directly to your **existing** component (Header, Navbar, etc.) |
There was a problem hiding this comment.
include this in readme as our feature like " directly import in any of your's file by import, no need to add extra file" in marketing way
| <summary><b>Button not appearing</b></summary> | ||
|
|
||
| **Cause:** Script loads after component renders | ||
| ## 📚 Documentation & Getting Started |
There was a problem hiding this comment.
remove line of Document and getting started and also remove this installation guides as it repeats
| ); | ||
| } | ||
| ``` | ||
| ### Via npm |
There was a problem hiding this comment.
replace section of npm and cdn with:
Option 1 — Quick CDN Setup (Recommended)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css">
<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'
});
</script>
That’s it. Done.
Option 2 — Install with npm
npm install social-share-button-aossie
Then initialize it in your project.
| </details> | ||
| ### Help & Support | ||
| - [Troubleshooting](./docs/troubleshooting.md) - Common issues and solutions | ||
| - [View all docs](./docs/index.md) - Complete documentation index |
There was a problem hiding this comment.
replace View all docs with whole documentation index
| --- | ||
|
|
||
| ## Examples | ||
| ## 🎬 Demo |
There was a problem hiding this comment.
fit this after npm and cdn placeholder. so user first visit here.
2 participants
Addressed Issues:
Fixes #32
Screenshots/Recordings:
Not applicable (documentation-only changes)
Additional Notes:
This PR is a documentation-only refactor.
All content was copied verbatim from the original README and reorganized into a
/docsdirectory for better clarity and maintainability.No functionality, logic, or wording was modified.
Checklist
AI Usage Disclosure
I have used the following AI models and tools:
Summary by CodeRabbit