feature: button to tweet a sandbox

[faceyspacey]

A highly visible tweet button that allows users to share the sandbox.

Perhaps near the view/heart/fork counts.

[CompuIves]

Very good one! Would be even cooler if it would automatically 'screenshot' the preview to add to the tweet. Not sure what kind of APIs are open for this.

[faceyspacey]

use html2canvas as i mentioned in the other Issue. ...ur gonna need to render the page sever-side with the image in some meta tags. so basically when ever someone goes to share it you want to re-generate the sandbox's unique image.

but forget that for now. put a tweet button in 5 minutes RIGHT NOW.

[Arthelon]

imo it makes more sense to replace the current "contact" button in the header with this.

[faceyspacey]

definitely now that CodeSandBox is popular. u probably dont want all these people contacting u anymore.

[CompuIves]

I like the recognition of the button though, show who's the creator. Tweet button should not be too hard to add, we could add it under the description field.

[tcosentino]

First off thanks for the project @CompuIves. Been really fun to use and want to get involved helping out. Is anything on this being worked on? I wouldn't mind taking a stab at something along these lines.

@CompuIves I am curious if you have thought much about sharing links and how they appear as well? I think this could be grouped into one solution but need to do some more research still. For example, sharing a sandbox in slack currently gives me:

It would be great to have the title of my sandbox as the description (second line) and then have the screenshot be the image that comes through. Any opinion on this functionality?

Edit: This is a good resource (Apparently this is called "unfurling" 😄)

[CompuIves]

Ah this is an interesting topic @tcosentino. I always thought you need to add the metadata to the HTML itself, but in the case of oEmbed this isn't really needed. The only thing I had to do is open a PR here: iamcal/oembed#245, since we already have the oEmbed url for Medium embed support.

Now there is a second thing I'd still like to add using a serverless architecture, which is screenshots of sandboxes. Google Chrome recently released Puppeteer, which makes it really easy to take screenshots of sandboxes in combination with the new subdomain system. It would be nice if we'd make a screenshot for every updated sandboxes using this. I want to look into this after we have a proper homepage.

[tcosentino]

Do you have anything else running serverless so far? Or have a plan for how you'd like to do it? It does look very easy with Puppeteer to generate the screenshot.

I should probably be looking at the help wanted issues instead, lol!

[CompuIves]

Yap! We're running a backup version of the packager on AWS Lambda, but I'm going to rewrite that to Google Cloud Functions. If you're interested in building the serverless application, it would be really great!

Though we need to determine when we want to take a screenshot of a sandbox, do we want it after every save? Or if updated_at > 5 min ago? Or every night? Need to find a balance here.

[tcosentino]

Yes I was thinking it would be a good way to try out the serverless stuff. You would just need to be able to pass a url (the subdomain sandbox url) and get back the image as a file? Yes I was thinking about the frequency too. If it is just being used when sharing (via a button in the UI) you could generate it on the fly. To enable it via link sharing or to use as thumbnail for search etc, I think generating it every time would be the only way to prevent tons of questions about why it isn’t up to date. Doing batches every few minutes would also be possible, but I see the common use case be saving and then sharing immediately. Do you have any plans for a something between saving and forking? Something commit-ish? You could possibly generate on an event like that too.

…

On Sep 4, 2017, 1:45 PM -0400, Ives van Hoorne ***@***.***>, wrote: Yap! We're running a backup version of the packager on AWS Lambda, but I'm going to rewrite that to Google Cloud Functions. If you're interested in building the serverless application, it would be really great! Though we need to determine when we want to take a screenshot of a sandbox, do we want it after every save? Or if updated_at > 5 min ago? Or every night? Need to find a balance here. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[tcosentino]

Hi @CompuIves I have been a little busy so it took a while, but I ran into an issue with puppeteer running in google cloud functions (or other serverless environments: puppeteer/puppeteer#726

Since it requires certain dependencies installed and you do not have control over that, it is not possible. Any thoughts on how you would like to proceed?

[CompuIves]

Hmm okay, in that case we could maybe use Zeit Now for this service. They have dockerfile support.

[SuperOl3g]

Hi there!
Firstly, thanks for cool service!
Secondly, maybe I don't understand something but why we can't insert iframe with a live example like this instead of buttons or screenhots?

[CompuIves]

Hey @SuperOl3g! Yep, we support this. You can read more about this here: https://codesandbox.io/docs/embedding 😄