Skip to content

Commit b8a8b29

Browse files
bogas04cpojer
bogas04
authored and
cpojer
committed
Adds new video page (#5497)
* Add videos page * Remove object-curly-spacing * Update video list * Update siteConfig.js
1 parent f2ef92d commit b8a8b29

5 files changed

Lines changed: 162 additions & 4 deletions

File tree

‎website/i18n/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,13 @@
7575
"Works with TypeScript|no description given": "Works with TypeScript",
7676
"Watch Talks about Jest|no description given": "Watch Talks about Jest",
7777
"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.",
78+
"Watch more videos|no description given": "Watch more videos",
7879
"Who's using Jest?|no description given": "Who's using Jest?",
7980
"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.",
8081
"More Jest Users|no description given": "More Jest Users",
82+
"Talks & Videos|no description given": "Talks & Videos",
83+
"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.",
84+
"Add your favorite talk|no description given": "Add your favorite talk",
8185
"Help Translate|recruit community translators for your project": "Help Translate",
8286
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
8387
"Translate this Doc|recruitment message asking to translate the docs": "Translate"

‎website/pages/en/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,8 +350,21 @@ class Index extends React.Component {
350350
</div>
351351
</div>
352352
</div>
353+
354+
<div
355+
className="productShowcaseSection paddingTop"
356+
style={{textAlign: 'center'}}
357+
>
358+
<a
359+
className="button"
360+
href={siteConfig.baseUrl + this.props.language + '/videos.html'}
361+
>
362+
<translate>Watch more videos</translate>
363+
</a>
364+
</div>
353365
</Container>
354366

367+
355368
<div className="productShowcaseSection paddingBottom">
356369
<h2>
357370
<translate>Who's using Jest?</translate>

‎website/pages/en/users.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@ class Users extends React.Component {
2525
</div>
2626
<div className="logos">{showcase}</div>
2727
<p>Are you using this project?</p>
28-
<a
29-
href="https://github.com/facebook/jest/edit/master/website/siteConfig.js"
30-
className="button"
31-
>
28+
<a href={siteConfig.siteConfigUrl} className="button">
3229
Add your company
3330
</a>
3431
</div>

‎website/pages/en/videos.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const React = require('react');
2+
3+
const {Container, MarkdownBlock} = require('../../core/CompLibrary.js');
4+
const {translate} = require('../../server/translate.js');
5+
const siteConfig = require(process.cwd() + '/siteConfig.js');
6+
7+
class Video extends React.PureComponent {
8+
render() {
9+
const {url, type} = this.props;
10+
11+
switch (type) {
12+
case siteConfig.videoTypes.YOUTUBE: {
13+
return (
14+
<iframe
15+
width="560"
16+
height="315"
17+
src={url}
18+
frameBorder="0"
19+
allowFullScreen
20+
/>
21+
);
22+
}
23+
case siteConfig.videoTypes.IFRAME: {
24+
return (
25+
<iframe src={url} />
26+
);
27+
}
28+
default: {
29+
return (
30+
<iframe src={url} />
31+
);
32+
}
33+
}
34+
}
35+
}
36+
37+
class Videos extends React.Component {
38+
render() {
39+
const showcase = siteConfig.videos.map(({title, description, type, url}, index) => {
40+
const textMarkup = (
41+
<div className="blockContent">
42+
<h2>
43+
{title}
44+
</h2>
45+
<div>
46+
<MarkdownBlock>
47+
{description}
48+
</MarkdownBlock>
49+
</div>
50+
</div>
51+
);
52+
const videoMarkup = (
53+
<div className="video">
54+
<Video url={url} type={type} />
55+
</div>
56+
);
57+
58+
return (
59+
<Container key={url} padding={['bottom', 'top']}>
60+
<a className="hash-link" href={`#${title}`} />
61+
{
62+
index % 2 === 0
63+
? (
64+
<div className="blockElement imageAlignSide threeByGridBlock">
65+
{videoMarkup}
66+
{textMarkup}
67+
</div>
68+
)
69+
: (
70+
<div className="blockElement imageAlignSide threeByGridBlock">
71+
{textMarkup}
72+
{videoMarkup}
73+
</div>
74+
)
75+
}
76+
</Container>
77+
);
78+
});
79+
80+
return (
81+
<div className="mainContainer">
82+
<Container padding={['bottom', 'top']}>
83+
<div className="showcaseSection">
84+
<div className="prose">
85+
<h1>
86+
<translate>
87+
Talks & Videos
88+
</translate>
89+
</h1>
90+
<p>
91+
<translate>
92+
We understand that reading through docs can be boring sometimes.
93+
Here is a community curated list of talks & videos around Jest.
94+
</translate>
95+
</p>
96+
</div>
97+
</div>
98+
{showcase}
99+
<div style={{textAlign: 'center'}}>
100+
<a href={siteConfig.siteConfigUrl} className="button">
101+
<translate>
102+
Add your favorite talk
103+
</translate>
104+
</a>
105+
</div>
106+
</Container>
107+
</div>
108+
);
109+
}
110+
}
111+
112+
module.exports = Videos;
113+

‎website/siteConfig.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,34 @@
77
* LICENSE file in the root directory of this source tree.
88
*/
99

10+
/* List of talks & videos */
11+
12+
const videoTypes = {
13+
YOUTUBE: 'youtube',
14+
IFRAME: 'iframe',
15+
};
16+
17+
const videos = [
18+
{
19+
title: 'Rogelio Guzman - Jest Snapshots and Beyond - React Conf 2017',
20+
type: videoTypes.YOUTUBE,
21+
url: 'https://www.youtube.com/embed/HAuXJVI_bUs',
22+
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.',
23+
},
24+
{
25+
title: 'Snapshot testing - Anna Doubkova, React London 2017',
26+
type: videoTypes.YOUTUBE,
27+
url: 'https://www.youtube.com/embed/sCbGfi40IWk',
28+
description: 'In this talk, [Anna Doubkova](https://twitter.com/lithinn) explains Snapshot Testing in brief while also highlighting testing pitfalls.',
29+
},
30+
{
31+
title: 'Test React applications using Enzyme & Jest',
32+
type: videoTypes.YOUTUBE,
33+
url: 'https://www.youtube.com/embed/8Ww2QBVIw0I',
34+
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.',
35+
}
36+
];
37+
1038
/* List of projects/orgs using your project for the users page */
1139
const users = [
1240
{
@@ -257,6 +285,8 @@ const siteConfig = {
257285
projectName: 'jest',
258286
repo: 'facebook/jest',
259287
users,
288+
videos,
289+
videoTypes,
260290
editUrl: repoUrl + '/edit/master/docs/',
261291
headerLinks: [
262292
{doc: 'getting-started', label: 'Docs'},
@@ -284,6 +314,7 @@ const siteConfig = {
284314
},
285315
scripts: ['https://buttons.github.io/buttons.js'],
286316
repoUrl,
317+
siteConfigUrl: 'https://github.com/facebook/jest/edit/master/website/siteConfig.js',
287318
};
288319

289320
module.exports = siteConfig;

0 commit comments

Comments
 (0)
⚡