Adds new video page

website/i18n/en.json

@@ -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"

website/pages/en/index.js

@@ -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>

website/pages/en/users.js

@@ -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>

website/pages/en/videos.js

@@ -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;
+

website/siteConfig.js

@@ -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 = [
   {
@@ -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'},
@@ -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;