Center title and links in README.md

matchai commented 6 years ago

This is intended to improve accessibility of documentation and better UI. But, this comes at cost of including HTML directly inside markdown due to limitations of markdown syntax and affects readability of README.

Description

Title, tagline and badges centered
Quick link to website, install instructions, features, options and API. Centered and separated with vertical bar (|)
Moved preview to top, So user don't have to scroll the lengthy features list to see how beautiful the prompt looks
Link to contributors pages
Link to preview setup just below preview (It have been asked so.. many times)

Motivation and Context

Mirrors https://github.com/denysdovhan/spaceship-prompt/pull/505

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Screenshots (if appropriate):

Before

After

How Has This Been Tested?

[ ] I have tested using MacOS
[ ] I have tested using Linux

Checklist:

[x] I have checked that no other PR duplicates mine
[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[ ] I have updated the tests accordingly.

Snuggle commented 6 years ago

This looks beautiful, but perhaps it would be better to somehow merge the current banner into the title? Maybe remove the background and move things around a little. (Awesome banner, by the way! I think it should still be kept somewhere prominent on the page.)

Have a look at Electron's GitHub page for inspiration? https://github.com/electron/electron

matchai commented 6 years ago

@Snuggle Thank you for the kind words regarding the banner! 😄 I, too, was thinking that the banner needed a little reworking.

I playing around with it and seeing if there's any way we could better integrate it. I think replacing the existing one for the top left version would be better. Thoughts?

Snuggle commented 6 years ago

Yeah, I agree the top left one looks the nicest by far, with the top right one in second place - not quite a fan of the split bottom two.

Is there an SVG available of the top-left or...? It looks awesome!

matchai commented 6 years ago

Oh whoops! I was meaning to say the top right! 😅 Because it has thinner dimensions, the title would look less removed from the banner.

I'm making them all in Figma as vectors, so they're available as svgs: https://www.figma.com/file/OHv3PPmBNfFuBhVYt7w7qS8h/Banner

matchai commented 6 years ago

Thoughts on using this?

Snuggle commented 6 years ago

Yeah! I like it! :slightly_smiling_face:

I think I prefer the emojis on the right, though. It looks a bit weird otherwise.

matchai / spacefish