Skip to content

Add Basic Share Button#212

Merged
vkoves merged 3 commits into
mainfrom
share-button
Aug 20, 2025
Merged

Add Basic Share Button#212
vkoves merged 3 commits into
mainfrom
share-button

Conversation

@vkoves

@vkoves vkoves commented Aug 16, 2025

Copy link
Copy Markdown
Owner

Description

Adds a basic share button, which copies the link to the current page to your clipboard on desktop, and opens a share menu on mobile (which should prompt for things like social media, email, etc).

image

A start to issue #203

Testing Instructions

Tested on mobile, and confirmed the native share menu shows up, and that if I share, it'll use our sharing text.

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

@netlify

netlify Bot commented Aug 16, 2025

Copy link
Copy Markdown

Deploy Preview for radiant-cucurucho-d09bae ready!

Name Link
🔨 Latest commit f1f7048
🔍 Latest deploy log https://app.netlify.com/projects/radiant-cucurucho-d09bae/deploys/689fcb8c71da0a00087a4c55
😎 Deploy Preview https://deploy-preview-212--radiant-cucurucho-d09bae.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

import { Component, Prop, Vue } from 'vue-property-decorator';

/**
* Reusable share button that uses the native Web Share API when available,

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

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

I started this in page, but realized we could use this component anywhere!

// using the device's native sharing mechanisms (e.g., share sheet on mobile devices)
// Supported on most modern mobile browsers and some desktop browsers
window.navigator
.share({

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

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

I hadn't heard of this API before - it doesn't do anything on desktop, but it's very cool on mobile!

@vkoves vkoves marked this pull request as ready for review August 17, 2025 01:44
@JonHunt1995 JonHunt1995 requested review from JonHunt1995 and removed request for JonHunt1995 August 19, 2025 03:49
@hunter-yeago

Copy link
Copy Markdown
Collaborator

Gave this a shot on Firefox and my Samsung Galaxy A54 5G - worked great! No notes!

@JonHunt1995 JonHunt1995 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks good so far. The Web Share API integration is nice! I will try out on mobile and desktop before approving.

@JonHunt1995 JonHunt1995 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I looked at it on mobile and desktop and it looks good to me! For Mac and Chrome it also pulls up a menu similar to mobile! Here's a screenshot
image

@vkoves vkoves merged commit dad2cfb into main Aug 20, 2025
7 checks passed
@vkoves vkoves deleted the share-button branch August 20, 2025 01:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants