docs: landing page redesign

[montogeek]

Summary

Implements new landing page as discussed in #7265

Test plan

Run website locally, make sure it looks as the design. Preview: https://deploy-preview-7566--jest-preview.netlify.com/

Dec 30 progress:

• 70% of the homepage implemented using new design.

ToDo:

• Cards section
• Main information (white text over gray background)
• Yellow bullet points
• Philosophy

Notes:
Docusaurus fulfills its purpose, but its CSS architecture leaves much to be desired, making really hard to make some changes, also it doesn't support custom Navigation bar, only Footer, I am expressing these concerns because you will find some ugly CSS that could be completely avoided if Docusaurus was different.

[SimenB]

So cool! It's deployed here: https://deploy-preview-7566--jest-preview.netlify.com/

Docusaurus fulfills its purpose, but its CSS architecture leaves much to be desired, making really hard to make some changes

Will be improved in the next version: https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout

Not sure if an alpha is published, or viable to use?

[SimenB]

any way of keeping these numbers updated automatically?

Might be a cool docusaurus feature (showing stats from npm and github) - we already tell docusaurs what our package is named and what repo it's hosted at, /cc @endiliey

[montogeek]

Yep, that would be really useful

[montogeek]

Do'h, I forgot to uncomment my progress :/

[montogeek]

Will be improved in the next version: https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout

That's good to know, It is there any progress or proposition about how exactly it is going to be?

[orta]

I think to one way to simplify the header CSS, is to make the custom nav CSS only affect the index page - then the rest of the pages can use the navigation bar etc. Which at least scopes the hacks to a single page.

[orta]

We have a working implementation of the cards in #7567 - so I've ticked that for you 👍

And I've asked @cpojer to try figure out the copy for the philosophy

[cpojer]

I think Jest's philosophy hasn't changed much over the years:

• Fast
• Feature-rich
• Easy to use out of the box but highly configurable
• Approachable with familiar APIs
• Extensible
• Well documented
• Fun!

How about:

Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with its approachable, familiar and feature-rich APIs that give you results quickly. Jest is extensively documented, requires little configuration and can be extended to match your requirements. Jest makes testing delightful.

?

[cpojer]

The cards are fantastic. I have some thoughts on how I think it could lead to a better first impression:

• Can we make the initial animation a bit faster? Like, let's turn one card around within ~1s of opening the page. Otherwise we make it seem like Jest is slow.
• I'd like for at least 2 cards to be green at all times. It could be 2, 3 or 4 green cards, and at most 2 red cards. It doesn't give a good impression if the cards "fail" on the first visit to the website.

[brainkim]

@cpojer
f1c8e03

Can we make the initial animation a bit faster?

Done. I reduced the time for the first animation to 2.5 seconds. Any shorter and there’s significant jank on slower clients. Specifically, Firefox has trouble with the initial animation when assets are slow to load and I imagine this could be fixed by inlining the svg logos, but doing so is difficult because I'm doing everything in a dangerouslySetInnerHTML script tag.

I'd like for at least 2 cards to be green at all times.

Done. Don’t read the code too closely 🤪

[orta]

Thanks for the reminder, fixed!

[cpojer]

• I think adding a subtle hover style for the top bar (opacity: 80% or something) and text-decoration: none for regular green links may be a good idea.
• I'd add a full-stop . at the end of the sentence "Jest is a delightful JavaScript Testing Framework with a focus on simplicity".
• Since the "JEST" logo in the top bar changed, it may be best to revert the change from my earlier recommendation of reducing font-size of the version number. I think it would look better now if the font-size was the same as the JEST text again.

Other than those minor things, I love it. Shipit!

[orta]

OK, I've shipped all of those changes too 👍

[SimenB]

(I still think it would be cool to land together with the blog post for Jest 24, feel free to ignore if you disagree, though)

[cpojer]

Thanks for making those changes but seems like the green text doesn't have a hover style still. I agree with @SimenB it would be awesome to land together; and mention it in the blog post, but if you think we should do it separately I'm ok with that too.

One thing that @gaearon brought up was not re-running the full animation on subsequent reloads. I'm wondering if we could disable the animation to only play once in an hour or once in a day; and possibly speed it up on every re-visit of the site, indicating that the "test run" gets faster each time. I think that would be a cool gimmick using localStorage. What do you think?

[cpojer]

One more on the headlines:

• Excellent Exceptions -> "Great Exceptions"? (I get the pun but feel like it's overstating it a bit)
• Mocking with ease -> "Easy Mocking"?

[orta]

Oops, missed the hover state - fixed.

not re-running the full animation on subsequent reloads

When I tested this site on folks at our Peer Labs all but one immediately re-watched the animation was by reloading the page. I think disabling it on the second time would end up making that a bit disappointing (or feel buggy).

So, I've made 2nd runs have half the base wait-time that the 1st run has 👍

[cpojer]

You are amazing. Thanks for doing this.

[SimenB]

Last 2 things, I swear

Can we increase the contrast of the placeholder and icon against the background? The screenshot looks OK since it's so zoomed in - on my screen (macbook pro 15") it's pretty hard to read

---

/blog has .blog .wrapper { max-width: 1100px; } which makes it more narrow than all other pages. Just removing that looks OK to me (the blog text will wrap due to the toc added on the right side, but it already moves to the left when opening it, so it changes now as well).
It looks pretty dumb that the header changes width, at least

normal:

blog:

EDIT: I lied, one more

Does it make sense to add a small border to the header?

Current:

My suggestion (just border-bottom: 1px solid lightgrey;, can probably reuse some color from somewhere else)

[cpojer]

shipit

[montogeek]

Thanks!

[orta]

@montogeek - you can now claim the bounty mentioned in #7265 (comment) <3 thanks!

[montogeek]

@orta Thanks to you and the team!

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.