feat: add discord support

[hiranya25]

Addressed Issue

Fixes #135

Summary

Added Discord as a supported platform in SocialShareButton.

Changes

• Added Discord button with official brand color (#5865F2) and SVG icon
• Updated getPlatformsHTML() to render Discord
• Updated share() to:
  • Copy share URL to clipboard
  • Open Discord web app (https://discord.com/channels/@me)
• Updated demo/example to include Discord

Behavior

Before

• Passing "discord" in platforms array rendered nothing

After

• Discord button is rendered
• Clicking:
  • Copies URL to clipboard
  • Opens Discord web app in new tab

Testing

• Verified button renders correctly
• Verified clipboard copy works
• Verified Discord opens in new tab
• No console errors

Files Modified

• [fill actual file paths]

Screenshots

Screencast.from.2026-04-05.20-35-07.webm

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and shared this PR with maintainers
• I have read the Contributing Guidelines

Summary by CodeRabbit

• New Features
  • Discord has been added as a supported platform for social sharing, enabling users to share content directly to Discord across all integrations.

[coderabbitai]

Walkthrough

This pull request adds Discord as a supported sharing platform across the SocialShareButton component and all its framework wrappers (Preact, Qwik, React). The core implementation includes Discord metadata, platform configuration, and custom share behavior that copies the link and opens Discord.

Changes

Cohort / File(s)	Summary
Demo Configuration index.html	Added "discord" to the platforms arrays in both the social and messaging demo instances.
Framework Wrappers src/social-share-button-preact.jsx, src/social-share-button-react.jsx, src/social-share-button-qwik.tsx	Extended default platforms prop lists by appending "discord" to each component's fallback platform array. Minor whitespace and formatting adjustments applied consistently.
Core Implementation src/social-share-button.js	Added Discord to the default platforms list, included Discord metadata (brand color and SVG icon), and implemented Discord-specific share behavior: copy share URL to clipboard and open Discord app in a new tab.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: add Pinterest sharing support #97 — Adds Pinterest support using the same pattern of extending platform arrays and adding platform metadata, demonstrating consistency in feature addition approach.
• Add integration examples for Create React App, Next.js, and Vite/Vue/Angular in demo page #61 — Modifies the core src/social-share-button.js implementation for platform handling and behavior, directly related to the foundation being extended here.
• feat: Preact wrapper for SocialShareButton #91 — Introduces the Preact wrapper component whose default platforms configuration is extended in this PR.

Suggested labels

Typescript Lang

Suggested reviewers

• kpj2006

Poem

🎮 A discord of code, now a symphony—
Discord joins the fold, socially!
One link, one click, communities unite,
Share and spread the word in digital flight! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: add discord support' clearly and accurately summarizes the main change in the PR—adding Discord as a supported platform in SocialShareButton.
Linked Issues check	✅ Passed	The PR implements all coding requirements from issue #135: Discord is added to getPlatformsHTML() with official branding, share() copies URL and opens Discord, and all component variants include Discord in default platforms.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to adding Discord support; only platform additions, icon/color definitions, and share behavior implementations are included across relevant files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

index.html (1)

284-286: ⚠️ Potential issue | 🟡 Minor

Update the platform count and list to include Discord.

The feature card states "7+ Platforms" and lists platforms without Discord. With Discord added, this should be updated to reflect the current count (9 platforms) and include Discord in the platform list.

📝 Suggested fix

          <div class="feature-card">
            <div class="feature-icon">🌐</div>
-            <h3>7+ Platforms</h3>
-            <p>WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest</p>
+            <h3>9 Platforms</h3>
+            <p>WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest, Discord</p>
          </div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 284 - 286, Update the feature card header and
platform list to include Discord: change the <h3> text from "7+ Platforms" to "9
Platforms" (or "9+ Platforms" if you prefer the plus) and add "Discord" into the
<p> platform list (the element currently reading "WhatsApp, Facebook, X,
LinkedIn, Telegram, Reddit, Email, Pinterest") so the paragraph includes
"Discord" among the entries.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@index.html`:
- Around line 284-286: Update the feature card header and platform list to
include Discord: change the <h3> text from "7+ Platforms" to "9 Platforms" (or
"9+ Platforms" if you prefer the plus) and add "Discord" into the <p> platform
list (the element currently reading "WhatsApp, Facebook, X, LinkedIn, Telegram,
Reddit, Email, Pinterest") so the paragraph includes "Discord" among the
entries.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: dfee602a-3797-4a3e-8d80-f3bb96b3c9b0

📥 Commits

Reviewing files that changed from the base of the PR and between d0686c4 and 2b1df59.

📒 Files selected for processing (5)

• index.html
• src/social-share-button-preact.jsx
• src/social-share-button-qwik.tsx
• src/social-share-button-react.jsx
• src/social-share-button.js

[hiranya25]

Dear Maintainer,

I have submitted a PR addressing this issue.

The implementation includes:

• Adding Discord as a supported platform
• Rendering the Discord button with appropriate styling and icon
• Implementing share behavior (copy URL to clipboard + open Discord web)

All changes have been tested locally and align with the expected behavior described in the issue.
All required checks have been successfully passed.

Please review when convenient.

[github-actions]

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.

[hiranya25]

@kpj2006 Please review my pr and direct me if any changes are needed.

[github-actions]

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.

[kpj2006]

@Aarya-Chaudhari i told you about this issue, let me know what i have told i don't remember correctly.

[hiranya25]

@kpj2006 Please review my pr, Sir.

[kpj2006]

@hiranya25 can you check discord? i have write something about my reviewing timeline

[hiranya25]

@kpj2006 I hope you can review my pr now. Please review whenever convinient.

[kpj2006]

@CodeRabbit does this pr add discord in all required file?

ig this pr have not include content in readme.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check README for Discord mention
echo "=== README.md Discord mentions ==="
grep -in "discord" README.md || echo "NO Discord mention in README.md"

# List all wrapper/component files
echo ""
echo "=== All src files ==="
fd . src/ --type f

# Check if there's a Vue wrapper
echo ""
echo "=== Vue wrapper Discord check ==="
fd "vue" src/ --type f | xargs grep -li "discord" 2>/dev/null || echo "No Vue file or no Discord in Vue file"
fd "vue" src/ --type f | xargs grep -in "platforms" 2>/dev/null | head -30

# Check if there's an Angular wrapper
echo ""
echo "=== Angular wrapper Discord check ==="
fd "angular\|ng" src/ --type f -i | xargs grep -li "discord" 2>/dev/null || echo "No Angular file or no Discord in Angular file"

# Check Svelte
echo ""
echo "=== Svelte wrapper Discord check ==="
fd "svelte" src/ --type f | xargs grep -li "discord" 2>/dev/null || echo "No Svelte file or no Discord in Svelte file"
fd "svelte" src/ --type f | xargs grep -in "platforms" 2>/dev/null | head -30

# Check all src files for discord
echo ""
echo "=== Discord mentions across all src files ==="
rg -in "discord" src/ -l

# Check all src files for default platforms list (to find ones missing discord)
echo ""
echo "=== Default platforms lists in src files ==="
rg -in "whatsapp.*facebook|facebook.*whatsapp|platforms.*\[" src/ -A2 -B1

Length of output: 4447

---

---

@kpj2006 Here's a complete audit of what this PR covers and what's missing:

---

✅ Files updated with Discord support

File	Status
src/social-share-button.js	✅ Discord added (icon, color, share logic)
src/social-share-button-react.jsx	✅ Discord added to default platforms
src/social-share-button-qwik.tsx	✅ Discord added to default platforms
src/social-share-button-preact.jsx	✅ Discord added to default platforms
index.html (demo)	✅ Discord added to both demo instances

No Vue, Angular, or Svelte wrappers exist in src/, so those are not applicable.

---

❌ What's missing

README.md — not updated as a supported platform

The README does reference Discord (lines 7, 41–43), but only as links to the project's own community Discord server, not as a documented supported sharing platform. If the README has a section listing supported platforms (e.g., WhatsApp, Facebook, Twitter, etc.), Discord needs to be added there.

@hiranya25 — please update README.md to document Discord as a supported sharing platform, wherever other platforms like WhatsApp, Facebook, Twitter, etc. are listed or described.

---

🧠 Learnings used

Learnt from: Aarya-Chaudhari
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-24T06:25:03.924Z
Learning: In AOSSIE-Org/SocialShareButton, Discord does not provide a public web share API endpoint (unlike WhatsApp, Telegram, Twitter, etc.). The standard approach used for Discord sharing in src/social-share-button.js is: when the Discord button is clicked, open `https://discord.com/channels/me` in a new tab (so the user lands in their DMs) and simultaneously copy the share URL to the clipboard, with a "Copied!" feedback shown on the Copy button for 2 seconds. This is handled as a special case in the `share()` method.

---

Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-10T07:25:17.136Z
Learning: For the AOSSIE-Org/SocialShareButton repository, kpj2006 wants contributors to add proper inline comments to all methods in library source files (especially src/social-share-button.js). The preferred enforcement mechanism is CodeRabbit path-based review instructions (skills) in .coderabbit.yaml rather than scripts or workflows. Flag any newly added or modified function that lacks a descriptive comment during reviews.

---

Learnt from: kpj2006
Repo: AOSSIE-Org/SocialShareButton PR: 0
File: :0-0
Timestamp: 2026-03-10T07:25:17.136Z
Learning: For the AOSSIE-Org/SocialShareButton repository, kpj2006 wants contributors to add proper inline comments to all methods in library source files (especially src/social-share-button.js). The preferred enforcement mechanism is CodeRabbit path-based review instructions (skills) in .coderabbit.yaml, rather than scripts or workflows. During reviews, flag any newly added or modified function that lacks a descriptive comment explaining what it does, why it exists, and its parameters/return values.