probot.github.io icon indicating copy to clipboard operation
probot.github.io copied to clipboard

Templates!

Open hiimbex opened this issue 7 years ago • 13 comments

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 https://github.com/probot/create-probot-app/pull/36 which is live in v3 of the script!

Here's where things are at right now:

Regular zoom: screen shot 2018-10-31 at 12 08 27 am

Zoomed out for context: screen shot 2018-10-31 at 11 09 37 pm

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: screen shot 2018-10-31 at 11 06 18 pm

Zoomed out for context: screen shot 2018-10-31 at 11 06 49 pm

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!!

hiimbex avatar Nov 01 '18 03:11 hiimbex

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:

screen shot 2018-11-08 at 9 48 08 am

And attaching this Glitch resource if it helps!

ooyce avatar Nov 08 '18 17:11 ooyce

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

stale[bot] avatar Jun 08 '19 10:06 stale[bot]

Still looks relevant.

abhijeetps avatar Jun 08 '19 17:06 abhijeetps

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

stale[bot] avatar Sep 06 '19 18:09 stale[bot]

I agree that we should finish this PR, help welcome

gr2m avatar Sep 07 '19 04:09 gr2m

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

Jme7 avatar Jul 31 '20 14:07 Jme7

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

gr2m avatar Jul 31 '20 16:07 gr2m

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

Jme7 avatar Jul 31 '20 19:07 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)

Jme7 avatar Jul 31 '20 19:07 Jme7

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: https://github.com/probot/probot.github.io/pull/266#discussion_r230430655 I think he says we should use a class from primer.css instead of setting padding in px explicitly

gr2m avatar Jul 31 '20 19:07 gr2m

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

Jme7 avatar Jul 31 '20 19:07 Jme7

Be honest was right is right what's wrong is wrong !!!!💯 tipsAreWelcome *infilecoin f1j4oqo6bf5ru6fnpf2qqmyj3ecejtz7jjelgntva

dustpan28646 avatar Mar 28 '21 08:03 dustpan28646

@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?

AaronDewes avatar Feb 24 '22 11:02 AaronDewes