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

docs: landing page redesign #7566

Merged
merged 52 commits into from
Jan 25, 2019
Merged

docs: landing page redesign #7566

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
86f5b82
style: Homepage section
montogeek Dec 30, 2018
d3b6881
style: Features section
montogeek Dec 30, 2018
5257642
style: Docs and talks section
montogeek Dec 30, 2018
d2b3857
style: OpenCollective section
montogeek Dec 30, 2018
c294607
style: Navigation bar
montogeek Dec 30, 2018
332d0d4
style: Homepage section
montogeek Dec 30, 2018
fd144f6
style: Features section
montogeek Dec 30, 2018
aa0c162
style: Docs and talks section
montogeek Dec 30, 2018
98cec33
style: OpenCollective section
montogeek Dec 30, 2018
bf397fd
style: Navigation bar
montogeek Dec 30, 2018
5b82673
chore: Uncomment features section
montogeek Dec 30, 2018
4e08ff2
ALL HAIL HYPNOTOAD
brainkim Dec 30, 2018
f4cf4d2
fix lint failures
brainkim Dec 30, 2018
2aec4f7
cross-browser fixes
brainkim Dec 31, 2018
9ad6962
Update the colors on the cards to match the new palette
orta Jan 1, 2019
de65b44
Don't move the cards so high when you hover, mainly so that there's a…
orta Jan 1, 2019
0f7edf1
fix card asymmetry (sorry had to fix it or it would literally kill me)
brainkim Jan 2, 2019
c767dd0
[website] Handle merging in the two website PRs
orta Jan 2, 2019
18e0164
reduce initial card load time, max 2 failures, make circles undulate …
brainkim Jan 3, 2019
36a2ad1
Merge branch 'new_landing_page' of github.com:montogeek/jest into new…
montogeek Jan 6, 2019
3242f25
style: Update sections title styles
montogeek Jan 6, 2019
5d58bea
style: Style card links buttons
montogeek Jan 6, 2019
38a1c82
style: Add styles to logo
montogeek Jan 6, 2019
ff25628
style: Features section
montogeek Jan 6, 2019
f0e4c3d
script: Move landing JS to its own file
montogeek Jan 6, 2019
e10eb74
style: Added Philosophy section
montogeek Jan 10, 2019
794b014
style: Added intro section
montogeek Jan 10, 2019
c06a400
Merge branch 'master' into new_landing_page
montogeek Jan 12, 2019
48fc350
lint: Fix landing.js lint issues
montogeek Jan 12, 2019
967225d
style: Fix several look and feel issues
montogeek Jan 12, 2019
fa985a1
lint: Fix copyright headers
montogeek Jan 12, 2019
fdf8fb7
chore: Removed file
montogeek Jan 12, 2019
ab18279
style: Align GitHub button and company logos
montogeek Jan 12, 2019
a406577
chore: Removed debug class
montogeek Jan 12, 2019
4198069
Some design tweaks
orta Jan 13, 2019
c592ccc
WIP on new screenshots
orta Jan 13, 2019
3d74524
Updates images and tweak css
orta Jan 13, 2019
8e75669
More work on the Jest index re-design
orta Jan 19, 2019
9baf756
More fixes for the website, this one changes the default colors to green
orta Jan 20, 2019
2e8d1df
Makes VSCode automatically format on save, and more tweaks to the nav
orta Jan 20, 2019
3bdc317
Merge branch 'master' into new_landing_page
orta Jan 20, 2019
8ed00a7
Fix the URL for the landing page
orta Jan 21, 2019
09cb7b0
Merge branch 'new_landing_page' of github.com:montogeek/jest into new…
orta Jan 21, 2019
6d04b15
More website fixes
orta Jan 21, 2019
ef47b2d
Adds custom syntax highlighting
orta Jan 21, 2019
973db98
Some intro copy changes, and gives a hover state to links around the …
orta Jan 21, 2019
43f6c9e
Adds the FB copyright header to the CSS
orta Jan 21, 2019
7f7947e
Adds support for halving the base animation timeout on the second run…
orta Jan 21, 2019
6e823d2
Update the different types image
orta Jan 22, 2019
be30037
Merge branch 'master' into new_landing_page
SimenB Jan 25, 2019
9a068b1
link style
SimenB Jan 25, 2019
db1e95b
moar tweaks
SimenB Jan 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 107 additions & 136 deletions website/pages/en/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ Button.defaultProps = {
class Contributors extends React.Component {
render() {
return (
<div>
<h2>
<div className="opencollective">
<h3 className="rotate-left">
<translate>Sponsors</translate>
</h2>
</h3>
<p>
<translate>
Sponsors are those who contribute $100 or more per month to Jest
Expand Down Expand Up @@ -73,17 +73,9 @@ class Contributors extends React.Component {
</a>
))}
</div>
<div className="support">
<a
className="support-button"
href="https://opencollective.com/jest#support"
>
<translate>Become a sponsor</translate>
</a>
</div>
<h2>
<h3 className="rotate-left">
<translate>Backers</translate>
</h2>
</h3>
<p>
<translate>
Backers are those who contribute $2 or more per month to Jest
Expand Down Expand Up @@ -113,14 +105,6 @@ class Contributors extends React.Component {
}
</a>
))}
<div>
<a
className="support-button"
href="https://opencollective.com/jest#support"
>
<translate>Become a backer</translate>
</a>
</div>
</div>
</div>
);
Expand Down Expand Up @@ -209,7 +193,7 @@ class Index extends React.Component {
<div>
<HomeSplash language={this.props.language} config={siteConfig} />
<div className="mainContainer">
<Container padding={['bottom', 'top']} background="light">
{/* <Container padding={['bottom', 'top']} background="light">
<GridBlock
align="center"
contents={[
Expand Down Expand Up @@ -270,139 +254,110 @@ class Index extends React.Component {
</translate>
</MarkdownBlock>
</div>
</Container>
<Container padding={['bottom', 'top']} background="light">
</Container> */}
{/* <Container padding={['bottom', 'top']} className="section-container">
<GridBlock
className="rotate-right"
contents={[
{
content: (
<translate>
Jest parallelizes test runs across workers to maximize
performance. Console messages are buffered and printed
together with test results. Sandboxed test files and
automatic global state resets for every test so no two
tests conflict with each other.
By ensuring your tests have unique global state, Jest can
reliably run tests in parallel. To make things quick, Jest
runs previously failed tests first and re-organizes runs
based on how long test files take.
</translate>
),
image: '/img/content/feature-fast.png',
imageAlign: 'right',
title: <translate>Fast and sandboxed</translate>,
imageAlign: 'left',
title: <translate>Fast and safe</translate>,
},
]}
/>
</Container>
<Container padding={['bottom', 'top']}>
<Container
padding={['bottom', 'top']}
background="light"
className="section-container"
>
<GridBlock
className="rotate-left"
contents={[
{
content: (
<translate>
Easily create code coverage reports using
Generate code coverage by adding the flag
[`--coverage`](https://jestjs.io/docs/en/cli.html#coverage).
No additional setup or libraries needed! Jest can collect
code coverage information from entire projects, including
untested files.
No additional setup needed. Jest can collect code coverage
information from entire projects, including untested
files.
</translate>
),
image: '/img/content/feature-coverage.png',
imageAlign: 'left',
title: <translate>Built-in code coverage reports</translate>,
imageAlign: 'right',
title: <translate>Code coverage</translate>,
},
]}
/>
</Container>
<Container padding={['bottom', 'top']} background="light">
<Container padding={['bottom', 'top']} className="section-container">
<GridBlock
className="rotate-right"
contents={[
{
content: (
<translate>
Jest is already configured when you use
[`create-react-app`](https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html)
or [`react-native
init`](http://facebook.github.io/react-native/docs/getting-started.html)
to create your React and React Native projects. Place your
tests in a `__tests__` folder, or name your test files
with a `.spec.js` or `.test.js` extension. Whatever you
prefer, Jest will find and run your tests.
Jest uses a custom resolver for imports in your tests
making it simple to mock any object outsided of your
test’s scope. You can use mocked imports with the rich
[Mock
Functions](https://jestjs.io/docs/en/mock-functions.html)
API to spy on function calls with readable test syntax.
</translate>
),
image: '/img/content/feature-config-react.png',
imageAlign: 'right',
title: <translate>Zero configuration</translate>,
imageAlign: 'left',
title: <translate>Mocking with ease</translate>,
},
]}
/>
</Container>
<Container background="dark" padding={['bottom', 'top']}>
<a className="anchor" name="use" />
<a className="hash-link" href="#use" />
<div className="blockElement imageAlignSide twoByGridBlock">
<div className="blockContent">
<h2>
<translate>Try it out!</translate>
</h2>
<div>
<MarkdownBlock>
<translate>
You can try out a real version of Jest using
[repl.it](https://repl.it/languages/jest). Consider a
function, `add()`, that adds two numbers. We can use a
basic test in `add-test.js` to verify that 1 + 2 equals 3.
Hit \"run\" to try it out!
</translate>
</MarkdownBlock>
</div>
</div>
<div className="jest-repl">
<iframe src="https://repl.it/@amasad/try-jest?lite=true" />
</div>
</div>
</Container>

<Container padding={['bottom', 'top']}>
<Container
padding={['bottom', 'top']}
background="light"
className="section-container"
>
<GridBlock
className="rotate-right"
contents={[
{
content: (
<translate>
Powerful [mocking library](/docs/en/mock-functions.html)
for functions and modules. Mock React Native components
using `jest-react-native`.
When a test has failed, Jest puts in a lot of effort to
give you as much context as possible. here’s some examples
</translate>
),
image: '/img/content/feature-mocking.png',
imageAlign: 'left',
title: <translate>Powerful mocking library</translate>,
imageAlign: 'right',
title: <translate>Excellent exceptions</translate>,
},
]}
/>
</Container>

<Container padding={['bottom', 'top']} background="light">
<Container padding={['bottom', 'top']} className="debu">
<a className="anchor" name="watch" />
<a className="hash-link" href="#watch" />
<GridBlock
className="rotate-left"
contents={[
{
content: (
<translate>
Jest works with any compile-to-JavaScript language and
integrates seamlessly with [Babel](https://babeljs.io)
which means you can write React, TypeScript and much more
without configuration
</translate>
),
image: '/img/content/feature-typescript.png',
image: true,
imageAlign: 'right',
title: <translate>Works with TypeScript</translate>,
title: <translate>Docs and talks</translate>,
},
]}
/>
</Container>

<Container padding={['bottom', 'top']}>
<a className="anchor" name="watch" />
<a className="hash-link" href="#watch" />
<div className="blockElement imageAlignSide twoByGridBlock">
<div className="blockElement imageAlignSide gridBlock threeByGridBlock">
<div className="video">
<iframe
width="560"
Expand All @@ -414,51 +369,67 @@ class Index extends React.Component {
/>
</div>
<div className="blockContent">
<h2>
<translate>Watch Talks about Jest</translate>
</h2>
<MarkdownBlock>
<translate>
The Jest core team and contributors regularly speak about
[Jest and Delightful JavaScript
Testing](https://www.youtube.com/watch?v=cAKYQpTC7MA). Check
out our talk about [Building High-Quality JavaScript
Tools](https://www.youtube.com/watch?v=PvabBs_utr8) at
jsconf.eu 2017 and our talk about [Jest as a
Platform](https://www.youtube.com/watch?v=NtjyeojAOBs) at
ReactiveConf 2017.
</translate>
</MarkdownBlock>
</div>
<div className="blockContent">
<div>
Cupiditate repellendus sit rerum est minus nam. Velit placeat
reiciendis placeat cumque. Sint et voluptatibus neque ad
dolore sunt. Esse est odio possimus nulla. Ipsam voluptate
maiores quo sed maiores excepturi. Quisquam sed sint incidunt
placeat est.
</div>
</div>
</div>
</Container> */}
<div className="container section-container imageAlignSide lightBackground twoByGridBlock">
<div className="wrapper">
<div className="gridBlock">
<div className="blockContent rotate-right">
<h2>
<translate>Open Collective</translate>
</h2>
<MarkdownBlock>
<translate>
The Jest core team and contributors regularly speak about
[Jest and Delightful JavaScript
Testing](https://www.youtube.com/watch?v=cAKYQpTC7MA).
Check out our talk about [Building High-Quality JavaScript
Tools](https://www.youtube.com/watch?v=PvabBs_utr8) at
jsconf.eu 2017 and our talk about [Jest as a
Platform](https://www.youtube.com/watch?v=NtjyeojAOBs) at
ReactiveConf 2017.
With so many users, the core team of Jest uses an [Open
Collective](https://opencollective.com/jest) for
non-Facebook contributors.
</translate>
</MarkdownBlock>
<Contributors />
</div>
<div className="blockContent rotate-left">
<h2>
<translate>Who uses Jest?</translate>
</h2>
<MarkdownBlock>
<translate>
A lot of people! With
[8.5m](https://www.npmjs.com/package/jest) downloads in
Copy link
Member

@SimenB SimenB Dec 30, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep, that would be really useful

the last 30 days, and used on over
[500,000](https://github.com/facebook/jest/network/dependents)
public repos on GitHub. Jest is used extensively at these
companies:
</translate>
</MarkdownBlock>
<div className="gridBlock logos">
{showcase}
<p>And many others</p>
</div>
</div>
</div>
</div>

<div
className="productShowcaseSection paddingTop"
style={{textAlign: 'center'}}
>
<a
className="button"
href={siteConfig.baseUrl + this.props.language + '/videos.html'}
>
<translate>Watch more videos</translate>
</a>
</div>
</Container>

<div className="productShowcaseSection paddingBottom">
<h2>
<translate>Who's using Jest?</translate>
</h2>
<p>
<translate>
Jest is used by teams of all sizes to test web applications,
node.js services, mobile apps, and APIs.
</translate>
</p>
<div className="logos">{showcase}</div>
<Contributors />
</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion website/siteConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ const users = [
image: '/img/logos/facebook.png',
infoLink: 'https://code.facebook.com',
},

{
caption: 'Twitter',
image: '/img/logos/twitter.png',
Expand Down
Loading