Skip to content

Improvement: Add defensive error handling and fix demo page structure (#132) #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amankv1234 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Improvement: Add defensive error handling and fix demo page structure (#132) #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d3e596f
refactor: improve error handling and fix demo page structure
amankv1234 Apr 2, 2026
6d7adaa
refactor: improve error handling and clean up demo page structure
amankv1234 Apr 2, 2026
ea1aa48
refactor: improve error handling and clean up demo page structure
amankv1234 Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ Push your branch:
### Code Quality Tools

We use ESLint for linting and Prettier for formatting. Please run these before submitting a PR:

- `npm run lint` — Check for code quality and style issues.
- `npm run format` — Automatically format your code to project standards.
- `npm run format:check` — Verify that files are correctly formatted.
Expand Down
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
[![npm version](https://img.shields.io/npm/v/social-share-button-aossie.svg)](https://www.npmjs.com/package/social-share-button-aossie)
[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE)


---

## Features
Expand Down
213 changes: 111 additions & 102 deletions docs/Roadmap.md
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import globals from "globals";

/**
* ESLint Configuration
*
*
* Defines project-wide code quality and style standards.
* Supports Vanilla JS, React (JSX), and Preact environments.
*/
Expand All @@ -22,23 +22,23 @@ export default [
jsx: true, // Enable JSX support for React/Preact components
},
},
globals: {
...globals.browser, // Standard browser globals (window, document, etc.)
...globals.es2021, // Modern ES2021 features
module: "readonly", // Allow CommonJS usage
exports: "readonly",
},
globals: {
...globals.browser, // Standard browser globals (window, document, etc.)
...globals.es2021, // Modern ES2021 features
module: "readonly", // Allow CommonJS usage
exports: "readonly",
},
},
rules: {
// Prevent accidental console logs in production code
"no-console": "error",

// Warn about unused variables, but ignore those prefixed with _ (common in catch blocks)
"no-unused-vars": ["warn", { caughtErrorsIgnorePattern: "^_" }],

// Enforce double quotes to maintain consistency across the codebase
quotes: ["error", "double", { avoidEscape: true }],

// Enforce semicolons for clear statement termination
semi: ["error", "always"],
},
Expand Down
232 changes: 113 additions & 119 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
margin-bottom: 10px;
font-weight: 700;
}

.brand {
display: flex;
align-items: center;
Expand Down Expand Up @@ -256,6 +257,7 @@
}
</style>
</head>

<body>
<div class="container">
<header>
Expand Down Expand Up @@ -495,105 +497,94 @@ <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
Join Discord
</a>
</div>
</div>

<!--Qwik/QwikCity Integration-->
<div class="demo-section">
<h2>⚡ Qwik / QwikCity Integration</h2>
<p>Resumability-optimized wrapper for the fastest performance.</p>

<div class="code-block">
<button class="copy-btn" type="button" aria-label="Copy code">Copy</button>
<span
class="copy-status"
aria-live="polite"
style="position: absolute; left: -9999px"
></span>
<code>
&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"&gt;
&lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"&gt;&lt;/script&gt;
</code>
<code>
import { component$ } from '@builder.io/qwik'; import { SocialShareButton } from
'./social-share-button-qwik'; export default component$(() => ( &lt;SocialShareButton
url="https://your-website.com" theme="light" buttonText="Share Now"
buttonStyle="primary" /&gt; ));</code
>
</div>
</div>

<div class="demo-section">
<h2>▲ Next.js Integration</h2>
<p>Use the component inside a Next.js page</p>

<div class="code-block">
<code
>import SocialShareButton from 'social-share-button'; export default function Home() {
return ( &lt;SocialShareButton url="https://your-website.com" title="Check this out!"
/&gt; ); }</code
>
</div>
</div>

<div class="demo-section">
<h2>🟢 Vue / Vite Integration</h2>
<p>Use inside a Vue component</p>

<div class="code-block">
<code
>&lt;template&gt; &lt;SocialShareButton url="https://your-website.com" title="Check this
out!" /&gt; &lt;/template&gt; &lt;script setup&gt; import SocialShareButton from
'social-share-button' &lt;/script&gt;</code
>
</div>
</div>

<div class="demo-section">
<h2>🅰️ Angular Integration</h2>
<p>Use inside an Angular component template</p>

<div class="code-block">
<code
>&lt;social-share-button [url]="'https://your-website.com'" [title]="'Check this out!'"
&gt; &lt;/social-share-button&gt;</code
>
</div>
</div>

<!--Qwik/QwikCity Integration-->
<div class="demo-section">
<h2>⚡ Qwik / QwikCity Integration</h2>
<p>Resumability-optimized wrapper for the fastest performance.</p>

<div class="code-block">
<button class="copy-btn" type="button" aria-label="Copy code">Copy</button>
<span class="copy-status" aria-live="polite" style="position:absolute; left:-9999px;"></span>
<code>
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"&gt;
&lt;script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"&gt;&lt;/script&gt;
</code>
<code>
import { component$ } from '@builder.io/qwik';
import { SocialShareButton } from './social-share-button-qwik';

export default component$(() => (
&lt;SocialShareButton
url="https://your-website.com"
theme="light"
buttonText="Share Now"
buttonStyle="primary"
/&gt;
));</code>
</div>
</div>



<div class="demo-section">
<h2>▲ Next.js Integration</h2>
<p>Use the component inside a Next.js page</p>

<div class="code-block">
<code>import SocialShareButton from 'social-share-button';

export default function Home() {
return (
&lt;SocialShareButton
url="https://your-website.com"
title="Check this out!"
/&gt;
);
}</code>
</div>
</div>

<div class="demo-section">
<h2>🟢 Vue / Vite Integration</h2>
<p>Use inside a Vue component</p>

<div class="code-block">
<code>&lt;template&gt;
&lt;SocialShareButton
url="https://your-website.com"
title="Check this out!"
/&gt;
&lt;/template&gt;

&lt;script setup&gt;
import SocialShareButton from 'social-share-button'
&lt;/script&gt;</code>
</div>
</div>

<div class="demo-section">
<h2>🅰️ Angular Integration</h2>
<p>Use inside an Angular component template</p>

<div class="code-block">
<code>&lt;social-share-button
[url]="'https://your-website.com'"
[title]="'Check this out!'"
&gt;
&lt;/social-share-button&gt;</code>
</div>
</div>



<!-- CTA Section -->
<div class="cta-section">
<h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
<a href="https://github.com/AOSSIE-Org/SocialShareButton" class="cta-button" target="_blank" rel="noopener">
View on GitHub →
</a>

<a href="https://discord.gg/prMM922G"
class="cta-button discord-btn"
target="_blank"
rel="noopener noreferrer">
Join Discord
</a>
</div>

</div>
<!-- CTA Section -->
<div class="cta-section">
<h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
<a
href="https://github.com/AOSSIE-Org/SocialShareButton"
class="cta-button"
target="_blank"
rel="noopener"
>
View on GitHub →
</a>

<a
href="https://discord.gg/prMM922G"
class="cta-button discord-btn"
target="_blank"
rel="noopener noreferrer"
>
Join Discord
</a>
</div>
</div>

<footer>
<p>Made with ❤️ by the AOSSIE community</p>
Expand Down Expand Up @@ -774,37 +765,40 @@ <h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
clearTimeout(button.copyResetTimer);
}

navigator.clipboard.writeText(text).then(() => {
if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "Code copied to clipboard";
}

button.textContent = "Copied!";

button.copyResetTimer = setTimeout(() => {
button.textContent = originalText;

navigator.clipboard
.writeText(text)
.then(() => {
if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "";
statusSpan.textContent = "Code copied to clipboard";
}
}, 2000);
}).catch((error) => {
console.error("Failed to copy to clipboard", error);

button.textContent = originalText;
button.textContent = "Copied!";

button.copyResetTimer = setTimeout(() => {
button.textContent = originalText;

if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "Failed to copy to clipboard";
}
if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "";
}
}, 2000);
})
.catch((error) => {
console.error("Failed to copy to clipboard", error);

button.copyResetTimer = setTimeout(() => {
button.textContent = originalText;

if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "";
statusSpan.textContent = "Failed to copy to clipboard";
}
}, 2000);
});

button.copyResetTimer = setTimeout(() => {
button.textContent = originalText;

if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "";
}
}, 2000);
});
});
});
});
Expand Down
1 change: 1 addition & 0 deletions landing-page/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ cd landing-page
npm install
npm run dev
```

## Build

```bash
Expand Down
7 changes: 3 additions & 4 deletions landing-page/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
@tailwind utilities;

@layer base {
.dark, .dark:root {
.dark,
.dark:root {
--background: 0 0% 5%; /* Very dark gray/black #0d0d0d */
--foreground: 0 0% 98%;
--primary: 48 100% 50%; /* #FFCC00 */
Expand All @@ -28,8 +29,6 @@
--card-foreground: 0 0% 0%;
--border: 0 0% 0%;
}


}

@layer base {
Expand All @@ -45,7 +44,7 @@
.text-balance {
text-wrap: balance;
}

.hide-scrollbar::-webkit-scrollbar {
display: none;
}
Expand Down
2 changes: 1 addition & 1 deletion src/social-share-analytics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,4 +287,4 @@ if (typeof module !== "undefined" && module.exports) {

if (typeof window !== "undefined") {
window.SocialShareAnalytics = adapters;
}
}
Loading
Loading