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

Adds new video page #5497

Merged
merged 4 commits into from
Feb 9, 2018
Merged

Adds new video page #5497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5a32d2f
Add videos page
bogas04 Feb 8, 2018
9357f00
Remove object-curly-spacing
bogas04 Feb 9, 2018
ef78200
Update video list
bogas04 Feb 9, 2018
697d755
Update siteConfig.js
cpojer Feb 9, 2018
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
4 changes: 4 additions & 0 deletions website/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,13 @@
"Works with TypeScript|no description given": "Works with TypeScript",
"Watch Talks about Jest|no description given": "Watch Talks about Jest",
"The Jest core team and contributors regularly speak about Jest and Delightful JavaScript Testing. Check out our talks about [Building High-Quality JavaScript Tools](https://www.youtube.com/watch?v=PvabBs_utr8) at JSConf.eu 2017 or our talk about [Jest as a Platform](https://www.youtube.com/watch?v=NtjyeojAOBs) at ReactiveConf 2017.|no description given": "The Jest core team and contributors regularly speak about Jest and Delightful JavaScript Testing. Check out our talks about [Building High-Quality JavaScript Tools](https://www.youtube.com/watch?v=PvabBs_utr8) at JSConf.eu 2017 or our talk about [Jest as a Platform](https://www.youtube.com/watch?v=NtjyeojAOBs) at ReactiveConf 2017.",
"Watch more videos|no description given": "Watch more videos",
"Who's using Jest?|no description given": "Who's using Jest?",
"Jest is used by teams of all sizes to test web applications, node.js services, mobile apps, and APIs.|no description given": "Jest is used by teams of all sizes to test web applications, node.js services, mobile apps, and APIs.",
"More Jest Users|no description given": "More Jest Users",
"Talks & Videos|no description given": "Talks & Videos",
"We understand that reading through docs can be boring sometimes. Here is a community curated list of talks & videos around Jest.|no description given": "We understand that reading through docs can be boring sometimes. Here is a community curated list of talks & videos around Jest.",
"Add your favorite talk|no description given": "Add your favorite talk",
"Help Translate|recruit community translators for your project": "Help Translate",
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
"Translate this Doc|recruitment message asking to translate the docs": "Translate"
Expand Down
13 changes: 13 additions & 0 deletions website/pages/en/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,8 +350,21 @@ class Index extends React.Component {
</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>
Expand Down
5 changes: 1 addition & 4 deletions website/pages/en/users.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,7 @@ class Users extends React.Component {
</div>
<div className="logos">{showcase}</div>
<p>Are you using this project?</p>
<a
href="https://github.com/facebook/jest/edit/master/website/siteConfig.js"
className="button"
>
<a href={siteConfig.siteConfigUrl} className="button">
Add your company
</a>
</div>
Expand Down
113 changes: 113 additions & 0 deletions website/pages/en/videos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
const React = require('react');

const {Container, MarkdownBlock} = require('../../core/CompLibrary.js');
const {translate} = require('../../server/translate.js');
const siteConfig = require(process.cwd() + '/siteConfig.js');

class Video extends React.PureComponent {
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} />
);
}
}
}
}

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>
);
});

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;

31 changes: 31 additions & 0 deletions website/siteConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,34 @@
* LICENSE file in the root directory of this source tree.
*/

/* List of talks & videos */

const videoTypes = {
YOUTUBE: 'youtube',
IFRAME: 'iframe',
};

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.',
},
{
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.',
},
{
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.',
}
];

/* List of projects/orgs using your project for the users page */
const users = [
{
Expand Down Expand Up @@ -257,6 +285,8 @@ const siteConfig = {
projectName: 'jest',
repo: 'facebook/jest',
users,
videos,
videoTypes,
editUrl: repoUrl + '/edit/master/docs/',
headerLinks: [
{doc: 'getting-started', label: 'Docs'},
Expand Down Expand Up @@ -284,6 +314,7 @@ const siteConfig = {
},
scripts: ['https://buttons.github.io/buttons.js'],
repoUrl,
siteConfigUrl: 'https://github.com/facebook/jest/edit/master/website/siteConfig.js',
};

module.exports = siteConfig;