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

fix lint on website #5506

Merged
merged 1 commit into from
Feb 9, 2018
Merged

fix lint on website #5506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion website/pages/en/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,6 @@ class Index extends React.Component {
</div>
</Container>


<div className="productShowcaseSection paddingBottom">
<h2>
<translate>Who's using Jest?</translate>
Expand Down
176 changes: 81 additions & 95 deletions website/pages/en/videos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,109 +5,95 @@ const {translate} = require('../../server/translate.js');
const siteConfig = require(process.cwd() + '/siteConfig.js');

class Video extends React.PureComponent {
render() {
const {url, type} = this.props;
render() {
const {url, type} = this.props;

switch (type) {
case siteConfig.videoTypes.YOUTUBE: {
return (
<iframe
width="560"
height="315"
src={url}
frameBorder="0"
allowFullScreen
/>
);
}
case siteConfig.videoTypes.IFRAME: {
return (
<iframe src={url} />
);
}
default: {
return (
<iframe src={url} />
);
}
}
switch (type) {
case siteConfig.videoTypes.YOUTUBE: {
return (
<iframe
width="560"
height="315"
src={url}
frameBorder="0"
allowFullScreen
/>
);
}
case siteConfig.videoTypes.IFRAME: {
return <iframe src={url} />;
}
default: {
return <iframe src={url} />;
}
}
}
}

class Videos extends React.Component {
render() {
const showcase = siteConfig.videos.map(({title, description, type, url}, index) => {
const textMarkup = (
<div className="blockContent">
<h2>
{title}
</h2>
<div>
<MarkdownBlock>
{description}
</MarkdownBlock>
</div>
</div>
);
const videoMarkup = (
<div className="video">
<Video url={url} type={type} />
</div>
);

return (
<Container key={url} padding={['bottom', 'top']}>
<a className="hash-link" href={`#${title}`} />
{
index % 2 === 0
? (
<div className="blockElement imageAlignSide threeByGridBlock">
{videoMarkup}
{textMarkup}
</div>
)
: (
<div className="blockElement imageAlignSide threeByGridBlock">
{textMarkup}
{videoMarkup}
</div>
)
}
</Container>
);
});
render() {
const showcase = siteConfig.videos.map(
({title, description, type, url}, index) => {
const textMarkup = (
<div className="blockContent">
<h2>{title}</h2>
<div>
<MarkdownBlock>{description}</MarkdownBlock>
</div>
</div>
);
const videoMarkup = (
<div className="video">
<Video url={url} type={type} />
</div>
);

return (
<div className="mainContainer">
<Container padding={['bottom', 'top']}>
<div className="showcaseSection">
<div className="prose">
<h1>
<translate>
Talks & Videos
</translate>
</h1>
<p>
<translate>
We understand that reading through docs can be boring sometimes.
Here is a community curated list of talks & videos around Jest.
</translate>
</p>
</div>
</div>
{showcase}
<div style={{textAlign: 'center'}}>
<a href={siteConfig.siteConfigUrl} className="button">
<translate>
Add your favorite talk
</translate>
</a>
</div>
</Container>
</div>
<Container key={url} padding={['bottom', 'top']}>
<a className="hash-link" href={`#${title}`} />
{index % 2 === 0 ? (
<div className="blockElement imageAlignSide threeByGridBlock">
{videoMarkup}
{textMarkup}
</div>
) : (
<div className="blockElement imageAlignSide threeByGridBlock">
{textMarkup}
{videoMarkup}
</div>
)}
</Container>
);
}
}
);

return (
<div className="mainContainer">
<Container padding={['bottom', 'top']}>
<div className="showcaseSection">
<div className="prose">
<h1>
<translate>Talks & Videos</translate>
</h1>
<p>
<translate>
We understand that reading through docs can be boring
sometimes. Here is a community curated list of talks & videos
around Jest.
</translate>
</p>
</div>
</div>
{showcase}
<div style={{textAlign: 'center'}}>
<a href={siteConfig.siteConfigUrl} className="button">
<translate>Add your favorite talk</translate>
</a>
</div>
</Container>
</div>
);
}
}

module.exports = Videos;

14 changes: 9 additions & 5 deletions website/siteConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,23 @@ const videos = [
title: 'Rogelio Guzman - Jest Snapshots and Beyond - React Conf 2017',
type: videoTypes.YOUTUBE,
url: 'https://www.youtube.com/embed/HAuXJVI_bUs',
description: '[Rogelio](https://twitter.com/rogeliog) shows how Jest might help you overcome the inertia to write & maintain tests with the help of a simple React Application.',
description:
'[Rogelio](https://twitter.com/rogeliog) shows how Jest might help you overcome the inertia to write & maintain tests with the help of a simple React Application.',
},
{
title: 'Snapshot testing - Anna Doubkova, React London 2017',
type: videoTypes.YOUTUBE,
url: 'https://www.youtube.com/embed/sCbGfi40IWk',
description: 'In this talk, [Anna Doubkova](https://twitter.com/lithinn) explains Snapshot Testing in brief while also highlighting testing pitfalls.',
description:
'In this talk, [Anna Doubkova](https://twitter.com/lithinn) explains Snapshot Testing in brief while also highlighting testing pitfalls.',
},
{
title: 'Test React applications using Enzyme & Jest',
type: videoTypes.YOUTUBE,
url: 'https://www.youtube.com/embed/8Ww2QBVIw0I',
description: 'This talk by [Ryan Walsh](https://twitter.com/_rtwalsh) gives an introduction to testing [React](https://facebook.github.io/react/) components using [Enzyme](http://airbnb.io/enzyme/) and Jest.',
}
description:
'This talk by [Ryan Walsh](https://twitter.com/_rtwalsh) gives an introduction to testing [React](https://facebook.github.io/react/) components using [Enzyme](http://airbnb.io/enzyme/) and Jest.',
},
];

/* List of projects/orgs using your project for the users page */
Expand Down Expand Up @@ -314,7 +317,8 @@ const siteConfig = {
},
scripts: ['https://buttons.github.io/buttons.js'],
repoUrl,
siteConfigUrl: 'https://github.com/facebook/jest/edit/master/website/siteConfig.js',
siteConfigUrl:
'https://github.com/facebook/jest/edit/master/website/siteConfig.js',
};

module.exports = siteConfig;