Skip to content

feat: Add Auto System Theme detection and Floating Share Bar. #152

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
sejalkutriyar wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Add Auto System Theme detection and Floating Share Bar. #152

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
4c38882
feat: Add Auto System Theme detection and Floating Share Bar
sejalkutriyar Mar 31, 2026
c4fd339
fix: address CodeRabbit review comments on PR #140
sejalkutriyar Apr 23, 2026
0221a97
fix: address CodeRabbit feedback regarding roadmap, floating init, th…
sejalkutriyar Apr 23, 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
214 changes: 112 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
258 changes: 138 additions & 120 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,33 @@ <h3>Messaging</h3>
</div>
</div>

<!-- Advanced Features -->
<div class="demo-section">
<h2>🔥 Advanced Features</h2>
<p>Enhance user experience with context-aware themes and sticky positioning.</p>
<div class="demo-grid">
<div class="demo-item">
<h3>System Auto Theme</h3>
<p>Automatically adapts modal to OS Light/Dark preference.</p>
<div id="demo-auto-theme"></div>
</div>
<div class="demo-item">
<h3>Floating Share Bar</h3>
<p>Pins the share button to the screen corner.</p>
<p style="font-size: 11px; opacity: 0.8; margin-top: 5px">
Check the bottom right of your screen!
</p>
Comment on lines +410 to +414
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Misleading hint — floating button won't actually appear.

Due to the missing container in the floating demo initialization (see comment on lines 718-727), the "Check the bottom right of your screen!" instruction will confuse users. This will be resolved automatically once the floating demo is fixed.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 410 - 414, The "Check the bottom right of your
screen!" hint under the "Floating Share Bar" heading is misleading because the
floating demo is missing its required container during initialization (the
floating demo initialization references a missing container). Remove or replace
that specific hint paragraph (the <p> whose inline style contains "font-size:
11px; opacity: 0.8; margin-top: 5px" and the text "Check the bottom right of
your screen!") with a neutral note such as "Floating demo disabled until
configuration is completed" or hide it until the floating demo's container is
correctly provided in the floating demo initialization code.

</div>
</div>
<div class="code-block" style="margin-top: 20px">
<code
>new SocialShareButton({ url: 'https://your-website.com', theme: 'auto', // OS dark or
light mode detection! displayMode: 'floating', // Sticky! floatingPosition:
'bottom-right' });</code
>
</div>
</div>

<!-- Quick Start -->
<div class="demo-section">
<h2>🚀 Quick Start</h2>
Expand Down Expand Up @@ -474,6 +501,71 @@ <h2>⚛️ Preact Integration</h2>
</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@latest/src/social-share-button.css"&gt;
&lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@latest/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$(() =&gt; ( &lt;SocialShareButton
url="https://your-website.com" theme="light" buttonText="Share Now"
buttonStyle="primary" /&gt; ));</code
>
</div>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.

<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>
Expand All @@ -497,104 +589,6 @@ <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
</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>

<footer>
<p>Made with ❤️ by the AOSSIE community</p>
<p style="margin-top: 10px; opacity: 0.7">
Expand Down Expand Up @@ -693,6 +687,27 @@ <h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
buttonText: "Share",
});

// Advanced - Auto Theme
new SocialShareButton({
container: "#demo-auto-theme",
url: demoUrl,
title: demoTitle,
buttonStyle: "primary",
buttonText: "Share (Auto Theme)",
theme: "auto",
});

// Advanced - Floating Bar
new SocialShareButton({
url: demoUrl,
title: demoTitle,
buttonStyle: "primary",
buttonText: "Floating Share",
displayMode: "floating",
floatingPosition: "bottom-right",
theme: "auto",
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.

// Custom Colors - Red
new SocialShareButton({
container: "#demo-red",
Expand Down Expand Up @@ -774,37 +789,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
Loading
Loading