Skip to content

[FEATURE]: Integrate SocialShareButton component for social sharing on Overview Page #85

Description

@amankv1234

Feature and its Use Cases

🚀 Feature Request: Enhanced Multi-Platform Share Modal

fixed #85

Is your feature request related to a problem? Please describe.

Currently, clicking the Share button immediately copies the page URL to the clipboard. This requires users to manually open a social platform, create a post, and paste the link themselves, resulting in unnecessary friction when sharing organizations from OrgExplorer.

Describe the solution you'd like

1. Multi-Platform Share Modal

Instead of instantly copying the link, clicking the Share button should open an interactive modal displaying multiple sharing options:

  • WhatsApp
  • X (Twitter)
  • LinkedIn
  • Telegram
  • Reddit
  • Pinterest
  • Email
  • Discord

Additionally, include a dedicated Copy Link section with a styled input field and copy button.

Use Case

A user exploring an organization wants to invite other developers by sharing its repositories on LinkedIn or Twitter. They can simply click Share and choose a platform without manually copying and pasting the URL.


2. Dynamic Social Share Metadata

Automatically generate platform-specific share content using organization metadata such as:

  • Organization name
  • Tagline
  • Description
  • Page URL

Example generated message:

🚀 Check out [Org Name] on OrgExplorer! An active open-source community with thriving repositories. Join the contributors and explore the projects! #OpenSource #GitHub #OrgExplorer

This reduces the need for users to manually compose promotional text.


3. Non-Intrusive Clipboard Fallback

Provide a clean copy section inside the modal for unsupported or insecure browser environments.

Features:

  • Styled URL input field
  • "Copy" button
  • Visual feedback ("Copied!")
  • Graceful error handling
  • No runtime clipboard failures

Use Case

Users on mobile browsers or private windows can still easily copy the URL and paste it elsewhere.


4. Dark Theme & Responsive Layout

Ensure the share modal follows OrgExplorer's existing dark-mode design and remains accessible across devices.

Requirements:

  • Dark-themed UI consistent with the application
  • Responsive desktop and mobile layout
  • Bottom-sheet experience on smaller screens
  • Touch-friendly buttons
  • Accessible spacing and typography

Use Case

Mobile users should be able to comfortably share organizations with one hand while maintaining a visually consistent experience.

Describe alternatives you've considered

Keeping the current copy-to-clipboard behavior works, but it requires additional manual steps and provides a less polished sharing experience.

Additional context

This feature would improve discoverability of organizations and repositories while providing a modern and user-friendly sharing experience across multiple platforms.

Additional Context

🎥 Walkthrough Video

Here is a screen recording demonstrating the planned user flow and integration context:

🖼️ Screenshot / Mockup

The integration will replace the current simplified "Share" button on the Overview Page shown below:

Image

🔗 References

AOSSIE-Org/SocialShareButton#151

Code of Conduct

  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions