Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make homepage examples more approachable #10872

Merged
merged 1 commit into from
Sep 27, 2017
Merged

Make homepage examples more approachable #10872

merged 1 commit into from
Sep 27, 2017

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Sep 27, 2017

  • Makes Code/Result split 70/30 rather than 50/50 to remove the line wrapping.
  • Switches the font from the default system monospace font to the one we used. I find it a lot more legible. The extremely thin lines are very hard to read for some people including me, and hurt accessibility.
  • Adds back the easter egg that switches the gendered name on every refresh. IMO it was cool :-)
  • Formats the examples closer to how mainstream JS community does it, to reduce even the slightest knee jerk reactions, and in some cases makes the lines shorter.

@gaearon gaearon requested review from bvaughn and flarnie September 27, 2017 13:46
@gaearon
Copy link
Collaborator Author

gaearon commented Sep 27, 2017

Hello World

Before

screen shot 2017-09-27 at 2 42 27 pm

After

screen shot 2017-09-27 at 2 40 18 pm

Timer

Before

screen shot 2017-09-27 at 2 42 33 pm

After

screen shot 2017-09-27 at 2 40 25 pm

Todo List

Before

screen shot 2017-09-27 at 2 42 37 pm

After

screen shot 2017-09-27 at 2 40 35 pm

Markdown

Before

screen shot 2017-09-27 at 2 42 42 pm

After

default

@reactjs-bot
Copy link

Deploy preview ready!

Built with commit 7adbe3a

https://deploy-preview-10872--reactjs.netlify.com

bvaughn
bvaughn approved these changes Sep 27, 2017
View reviewed changes
Copy link
Contributor

@bvaughn bvaughn left a comment

Choose a reason for hiding this comment

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

I dig it!

www/src/templates/home.js
@@ -317,26 +317,34 @@ const markdownStyles = {

// TODO Move these hard-coded examples into example files and out of the template?
// Alternately, move them into the markdown and transform them during build?
const name = Math.random() > .5 ? 'John' : 'Jane';
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

@bvaughn bvaughn merged commit 57e3b54 into facebook:gatsby Sep 27, 2017
@gaearon gaearon deleted the gatsby-homepage branch September 27, 2017 14:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bvaughn bvaughn bvaughn approved these changes

@flarnie flarnie Awaiting requested review from flarnie

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@gaearon @reactjs-bot @bvaughn @facebook-github-bot