deploy.now

deploy.now copied to clipboard

Would you accept a PR that shows the deploy button in the context of a faux GitHub repo? Similar to the second screenshot in this PR.

This gives people immediate context as to how the button could be used.

@max Yes definitely, that would be amazing.

I got a little carried away:

I can definitely tone it down back to the original issue. 👼

@max this looks really good!

• Inside of the new readme section can you add example markdown for the button?
• Should the main deploy button match the aesthetics of the readme deploy button? (rounded corners, etc.)

@max Man, this feels so much nicer. Hard to even look at the old one now lol. I really like the treatment of the "configure deployment" section, much more roomy for entering long keys. Also, the new styling for the "add env var" button fits much better.

I think the "readme" section is awesome because it so clearly and simply communicates the use case. 👍

My only question is do you think it would be useful to display the button's markdown code somewhere? Imo, this allows for easy copy/pasting into a repo, but open to your thoughts.

Thanks so much for working on this!

Edit: Andrew beat me to asking about the markdown example hah.

@zpnk @amccloud I agree with all of your feedback. Unfortunately this is still a Sketch mockup. I was thinking about adding a hover state. If you hover over the README you see an overlay with the Markdown code and a copy to clipboard button (now that we no longer need Flash for that stuff). How does that sound?

P.S: This is my first foray into OSS design. Designing in the open with such a structured feedback loop is a fantastic experience.

@max I think I can envision the overlay you described. Having a "copy to clipboard" button would definitely be useful. My only slight hesitation would be that it might not be immediately obvious to the user. That could potentially be remedied with a "hover for usage instructions" note or similar.

That said, I don't have a terribly strong opinion on this so I'll trust your UX instincts. (FWIW I don't feel that qualified to nitpick when I'm responsible for the current "design", haha)

Glad this project can serve as a positive first OSS design experience for you. Having a proper designer contributing certainly takes the project quality to another level. Please let us know if we can improve the contribution process or workflow.

Opening this up to whoever wants to implement the design. Should be straightforward and a great first PR!

So how will the embedding code be visible, by hovering the readme? I have a feeling that isn’t too good for usability, am I wrong?

@Haroenv 🤔 hmm, so I can think of two possible approaches here:

• Use the overlay for the embed code, but also add a note below the README preview saying something like "hover for usage instructions"

or

• Make the embedding code part of the README preview, for example in a "usage" section. The readme's contents would then be something like:

# Your Project

Your fantastic project description

[DEPLOY BUTTON]

## Usage

To add one-click deploys to your open source project, include the button to your readme:

\```
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zpnk/hello-world)
\```

If your app requires users to specify environment variables, you may include these in the deploy url:

\```
https://deploy.now.sh/?repo=https://github.com/zpnk/hello-world&env=GREETING&env=RECIPIENT
\```

What do you think is best? I'm also open to other suggestions as there's probably even better solutions haha.

I was thinking like something similar, should work