-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
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.
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
RFC: New Index page for the Jest website #7265
Comments
omg, this is soooo good! I absolutely love it!! |
What do you think about an embedded code sandbox somewhere in here? Maybe with a tab for a node app and a tab for a react app? Should in theory work nicely due to https://hackernoon.com/codesandbox-containers-5864a8f26715, right? |
I love the idea of having a runtime environment to run tests! It might be worth having that added after this, as I feel like the repl.it and codesandbox embeds have tricky interfaces ( you can see examples for codesandbox and repl.it ) when trying to do a quick embed. Something more like a "Jest cookbook" showcasing a bunch of "how do I mock a class from this import" kinda questions with repls (and the ability to explain to folks how to use it makes sense |
🥇 |
Looks great! Some feedback:
|
Love this, and would be happy to help implement this! My only feedback is the titles on the features (blazing fast, etc) and the sponsor section, I don't think those have a high enough contrast ratio to be accessible. Maybe look at using a darker red over top, or darkening up the red background? |
I'll have a branch out soon! Ill do preview deployments using surge or netlify |
Awesome! We have netlify set up, so just opening up a PR should be enough 🙂 |
The yellow here is a hue shift from the green and red, I'd rather not break that design patterns. That said, I like that yellow (and use it in my terminal), it's got a good sandy colour 👍
Padding I'm pretty fine with, but I agree on the line heights for body text, I'm happy to tweak those in CSS towards the end though - thanks!
I agree on this, dang, I was trying to lower their visual precedence so the above the fold content had a nice visual hierarchy (and you weren't dragged down too quickly). Will see if I can figure another way to do it. |
Hey folks, to get this moving forwards - we've decided to put a $599 bounty on this issue from our OpenCollective account. If you're interested in doing some Open Source good-will and get paid for it, we're looking to have this index look and feel good on both desktop + mobile and I'll help you get it over any final design hurdles. To get the bounty you would need to submit an expense via OpenCollective, here's their FAQ |
@orta Is there a time constraint? I could do it, but not full time. |
Nope, no time constraint 👍 |
@orta Ok, I will do it |
@orta any opposition to using a styled component library, eg Emotion? Would still leverage existing class names where applicable, but use styled components for some of the new pieces |
I don't really have an opinion on implementation details, as long as it's easy for others to contribute and not hard to maintain that's fine with me 👍 |
The site went through another design review last night, with an updated color scheme - I've updated the images in the main comment above for the desktop + mobile, and included a bunch of assets so you don't have to dive into the sketch docs |
It's amazing that people are making so much progress on this. thank you. Here is my (highly subjective) feedback on the design:
|
I've updated the designs + assets again with all the feedback (except the logo SVG, that can be hot-fixed in #7567 ) |
Thank you! I like this a lot more. Here are some more ideas (that can be iterated on in the real PR):
|
One more minor request:
|
@cpojer Does this look good to you? |
I think the version font can be a bit smaller still. |
@cpojer Recduced the version font by a factor of |
Hi @open-source-explorer - it's pretty unlikely at this point, as we're at the final parts of getting #7566 merged, but yeah, had you found this a bit earlier that would have been it 👍 |
Done 🎉 |
* Removed underline and adjusted the position a bit 🚧 jestjs#7265 * reduce version font jestjs#7265
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Note: This issue has a bounty on our Open Collective - see #7265 (comment)
and this WIP PR: #7566
It is just for the single index page on https://jestjs.io, which is powered by Docusaurus and if you want to see what an example PR would look like see prettier/prettier#3718
OK, a primer before we get to pretty pictures - I'm looking for someone to implement this, but it's pretty well spec'd out. Only a few more cases of lorem ipsum, and I want to re-create all screenshots after ( #7241 ) . Nothing that should block implementation.
My aims with the redesign:
Alright, step one, a new Jest logo. I think the foot is cool, and I think it should stick around (I re-use it in the designs) but I also like the simplicity of this idea:
What if we take the runtime symbols Jest uses to indicate how things are going?
Then re-use that symbology:
Pow.
I know, it's a tad underwhelming but It fits, really well. It can work in the terminal during the jest launching scene, it connects to all of the existing messaging people see every day, is simple and recognizable. I think both are useful.
Alright, the site, like with the prettier redesign prettier/prettier#3669 is aimed is to fit naturally in the docusaurus framework. I aimed to extend the Jest as joker metaphor by using cards + deck metaphor.
Highlights:
Mobile Version
Link
Mostly the same, without the splits. I feel like the slanted titles work much better here ( less space, so they stand out more) and tie the identity together.
Headline
The top of the site should animate, the cards flip from the front to the back. They all start off as "RUNS" (e.g. the back) then progressively flip to either "PASS" or "FAIL" - like a good flaky test suite. Maybe clicking on a red could spin to the back ("RUNS"), then flip back to a PASS after a second.
Here's what all the cards look like:
Bonus points - I'd love to see the "RUNS" animating in a circle (to indicate activity)
Grid
I used a 960 grid width, 12 sections, and only used the inner 10 for desktop:
Cards
Assets
I can definitely create a bunch of assets if whoever is working on this isn't used to working with Sketch files directly 👍
The text was updated successfully, but these errors were encountered: