Templates!

[hiimbex]

This PR is for adding the design additions to feature the 'use case'/'template'/'blueprints'/'quickstarts' we've added to the create-probot-app script in probot/create-probot-app#36 which is live in v3 of the script!

Here's where things are at right now:

Regular zoom:

Zoomed out for context:

I made 3 just to see how they filled the space.

These edits have been made to the home page after the 'featured apps' section and before the 'Build' section. I've also begun working on giving there 'Quick starts' a more permanent home in the docs: in docs/quickstarts. Eventually those code changes will need to happen here in probot/probot, but since the work is mostly html/css, I've been working on it in conjunction with this PR and sharing screenshots + (VERY) WIP code here:

Regular zoom:

Zoomed out for context:

Code for there docs pages in gist. (You'll probably have to click raw to see the html in not weird un-styled markdown rendering)

To Do:

• Clean up landing page - would love some feedback on what should change there!
• Clean up /docs/quickstarts.md code snippet section to better match https://user-images.githubusercontent.com/6744014/47388341-c2827b80-d6c6-11e8-8831-be274510b59c.png
  • Find better styling for code snippets?
  • Add glitch section
  • Make copy to clipboard actually work (low priority)
    • store javascript somewhere useful
    • Make it on click of the text - not a button (in following mockup)
• Get better/cleaner images for demo-ing the things - not sure how to take pretty screenshots of this stuff?
• Get feedback!!

[bkeepers]

This is looking good so far. It looks like there's still some work to do here, but let me know if there's anything specifically that you want feedback on.

These edits have been made to the home page after the 'featured apps' section and before the 'Build' section.

I would be in favor of merging the quick starts into the 'Build' section, since that's what it's for. We could make that section more concise if it feels like too much.

[bkeepers]

You should be able to do these with Primer:

p1 will give you a little padding, p6 will give you a lot of padding.

[ohjoycelau]

Let's keep the code snippet styling consistent with our existing patterns:

• Typography
• Reference code block or really anywhere around Primer
• Also, recalled some of our existing pattern with copy paste:

And attaching this Glitch resource if it helps!

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

[abhijeetps]

Still looks relevant.

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

[gr2m]

I agree that we should finish this PR, help welcome

[Jme7]

I like this a lot. I don't know how this works though... But the concept seems nice

[Jme7]

Is anyone working on this anymore? This seems like a good feature.

[gr2m]

Nobody is working on it, would you like to help finish it up?

[Jme7]

I can if I can figure out how this works (I'm not used to stuff like this, but I try)

[Jme7]

Ok, I think I can work on this, but I need to know what is stopping this from being merged (other than feedback-alex)

[gr2m]

don't worry about alex-feedback.

Can you build the page locally and see if it all looks good to you?

There is a comment by Brandon that I don't think was addressed yet: #266 (comment) I think he says we should use a class from primer.css instead of setting padding in px explicitly

[Jme7]

I don't know how to build a page locally, and I don't know anything about classes from primer.css, as I thought you could only have classes in html then do stuff to them in css.

CONCLUSION: I have no idea how to help on any of that

[AaronDewes]

@hiimbex I've tried to improve this at #396. This version references docs/quickstart.md. Do you still have that file somewhere? Or was that just a WIP link and the file didn't exist?