From 5a32d2ff96bf8532f3fff5c1bbbbf2497912ba92 Mon Sep 17 00:00:00 2001
From: Divjot Singh <bogas04@gmail.com>
Date: Thu, 8 Feb 2018 16:17:29 +0530
Subject: [PATCH 1/4] Add videos page

---
 website/i18n/en.json       |   4 ++
 website/pages/en/index.js  |  17 +++++-
 website/pages/en/users.js  |   5 +-
 website/pages/en/videos.js | 115 +++++++++++++++++++++++++++++++++++++
 website/siteConfig.js      |  39 ++++++++++---
 5 files changed, 167 insertions(+), 13 deletions(-)
 create mode 100644 website/pages/en/videos.js

diff --git a/website/i18n/en.json b/website/i18n/en.json
index 507253f36091..554df93c7ada 100644
--- a/website/i18n/en.json
+++ b/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"
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 42f0c4ef1311..aeeb7be0e113 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -87,7 +87,7 @@ class HomeSplash extends React.Component {
                   </div>
                 </div>
               </div>
-              <div className="githubButton" style={{minHeight: '20px'}}>
+              <div className="githubButton" style={{ minHeight: '20px' }}>
                 <a
                   className="github-button"
                   href={this.props.config.repoUrl}
@@ -171,7 +171,7 @@ class Index extends React.Component {
 
           <div
             className="productShowcaseSection paddingBottom"
-            style={{textAlign: 'center'}}
+            style={{ textAlign: 'center' }}
           >
             <h2>
               <translate>Zero configuration testing platform</translate>
@@ -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>
diff --git a/website/pages/en/users.js b/website/pages/en/users.js
index fce4294a140e..58bea14fa447 100644
--- a/website/pages/en/users.js
+++ b/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>
diff --git a/website/pages/en/videos.js b/website/pages/en/videos.js
new file mode 100644
index 000000000000..f2a1e886a171
--- /dev/null
+++ b/website/pages/en/videos.js
@@ -0,0 +1,115 @@
+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((video, index) => {
+            const { title, description, type, url } = video;
+
+            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;
+
diff --git a/website/siteConfig.js b/website/siteConfig.js
index b5b4da815d34..5f392163ff50 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -7,6 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* List of talks & videos */
+
+const videoTypes = {
+  YOUTUBE: 'youtube',
+  IFRAME: 'iframe',
+};
+
+const videos = [
+  {
+    title: 'Learn how to test JavaScript with Jest',
+    description: 'In this [video](https://egghead.io/lessons/javascript-test-javascript-with-jest) by [Kent C. Dodds](https://twitter.com/kentcdodds) you will learn how to install Jest and write your first unit test.',
+    type: videoTypes.IFRAME,
+    url: 'https://fast.wistia.net/embed/iframe/78j73pyz17',
+  },
+  {
+    title: 'Test React applications using Enzyme & 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.',
+    type: videoTypes.YOUTUBE,
+    url: 'https://www.youtube.com/embed/8Ww2QBVIw0I?rel=0',
+  },
+];
+
 /* List of projects/orgs using your project for the users page */
 const users = [
   {
@@ -257,15 +279,17 @@ const siteConfig = {
   projectName: 'jest',
   repo: 'facebook/jest',
   users,
+  videos,
+  videoTypes,
   editUrl: repoUrl + '/edit/master/docs/',
   headerLinks: [
-    {doc: 'getting-started', label: 'Docs'},
-    {doc: 'api', label: 'API'},
-    {page: 'help', label: 'Help'},
-    {blog: true, label: 'Blog'},
-    {languages: true},
-    {search: true},
-    {href: repoUrl, label: 'GitHub'},
+    { doc: 'getting-started', label: 'Docs' },
+    { doc: 'api', label: 'API' },
+    { page: 'help', label: 'Help' },
+    { blog: true, label: 'Blog' },
+    { languages: true },
+    { search: true },
+    { href: repoUrl, label: 'GitHub' },
   ],
   headerIcon: 'img/jest.svg',
   footerIcon: 'img/jest-outline.svg',
@@ -284,6 +308,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;

From 9357f008d5194e54bea4b2b7b84e5bf6a4e61dee Mon Sep 17 00:00:00 2001
From: Divjot Singh <bogas04@gmail.com>
Date: Fri, 9 Feb 2018 12:57:02 +0530
Subject: [PATCH 2/4] Remove object-curly-spacing

---
 website/pages/en/index.js  |  6 +++---
 website/pages/en/videos.js | 12 +++++-------
 website/siteConfig.js      | 14 +++++++-------
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index aeeb7be0e113..63b542751736 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -87,7 +87,7 @@ class HomeSplash extends React.Component {
                   </div>
                 </div>
               </div>
-              <div className="githubButton" style={{ minHeight: '20px' }}>
+              <div className="githubButton" style={{minHeight: '20px'}}>
                 <a
                   className="github-button"
                   href={this.props.config.repoUrl}
@@ -171,7 +171,7 @@ class Index extends React.Component {
 
           <div
             className="productShowcaseSection paddingBottom"
-            style={{ textAlign: 'center' }}
+            style={{textAlign: 'center'}}
           >
             <h2>
               <translate>Zero configuration testing platform</translate>
@@ -353,7 +353,7 @@ class Index extends React.Component {
 
             <div
               className="productShowcaseSection paddingTop"
-              style={{ textAlign: 'center' }}
+              style={{textAlign: 'center'}}
             >
               <a
                 className="button"
diff --git a/website/pages/en/videos.js b/website/pages/en/videos.js
index f2a1e886a171..4ae53bef77d2 100644
--- a/website/pages/en/videos.js
+++ b/website/pages/en/videos.js
@@ -1,12 +1,12 @@
 const React = require('react');
 
-const { Container, MarkdownBlock } = require('../../core/CompLibrary.js');
-const { translate } = require('../../server/translate.js');
+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;
+        const {url, type} = this.props;
 
         switch (type) {
             case siteConfig.videoTypes.YOUTUBE: {
@@ -36,9 +36,7 @@ class Video extends React.PureComponent {
 
 class Videos extends React.Component {
     render() {
-        const showcase = siteConfig.videos.map((video, index) => {
-            const { title, description, type, url } = video;
-
+        const showcase = siteConfig.videos.map(({title, description, type, url}, index) => {
             const textMarkup = (
                 <div className="blockContent">
                     <h2>
@@ -98,7 +96,7 @@ class Videos extends React.Component {
                         </div>
                     </div>
                     {showcase}
-                    <div style={{ textAlign: 'center' }}>
+                    <div style={{textAlign: 'center'}}>
                         <a href={siteConfig.siteConfigUrl} className="button">
                             <translate>
                                 Add your favorite talk
diff --git a/website/siteConfig.js b/website/siteConfig.js
index 5f392163ff50..21a8bc42dde7 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -283,13 +283,13 @@ const siteConfig = {
   videoTypes,
   editUrl: repoUrl + '/edit/master/docs/',
   headerLinks: [
-    { doc: 'getting-started', label: 'Docs' },
-    { doc: 'api', label: 'API' },
-    { page: 'help', label: 'Help' },
-    { blog: true, label: 'Blog' },
-    { languages: true },
-    { search: true },
-    { href: repoUrl, label: 'GitHub' },
+    {doc: 'getting-started', label: 'Docs'},
+    {doc: 'api', label: 'API'},
+    {page: 'help', label: 'Help'},
+    {blog: true, label: 'Blog'},
+    {languages: true},
+    {search: true},
+    {href: repoUrl, label: 'GitHub'},
   ],
   headerIcon: 'img/jest.svg',
   footerIcon: 'img/jest-outline.svg',

From ef78200bf7167d8e21a67dd6ba1dc5ad72218d56 Mon Sep 17 00:00:00 2001
From: Divjot Singh <bogas04@gmail.com>
Date: Fri, 9 Feb 2018 15:13:43 +0530
Subject: [PATCH 3/4] Update video list

---
 website/siteConfig.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/website/siteConfig.js b/website/siteConfig.js
index 21a8bc42dde7..a3cce3d827fd 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -16,17 +16,23 @@ const videoTypes = {
 
 const videos = [
   {
-    title: 'Learn how to test JavaScript with Jest',
-    description: 'In this [video](https://egghead.io/lessons/javascript-test-javascript-with-jest) by [Kent C. Dodds](https://twitter.com/kentcdodds) you will learn how to install Jest and write your first unit test.',
-    type: videoTypes.IFRAME,
-    url: 'https://fast.wistia.net/embed/iframe/78j73pyz17',
+    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: 'Test React applications using Enzyme & 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.',
+    title: 'Snapshot testing - Anna Doubkova, React London 2017',
     type: videoTypes.YOUTUBE,
-    url: 'https://www.youtube.com/embed/8Ww2QBVIw0I?rel=0',
+    url: 'https://www.youtube.com/embed/sCbGfi40IWk',
+    description: 'In this talk, [Anna Doubkova](https://twitter.com/lithinn) explains Snapshot Testing in brief, while also touching some of the bad stuff.',
   },
+  {
+    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 */

From 697d7558ee6dbe5228eeadb68dfa40e45847fbb9 Mon Sep 17 00:00:00 2001
From: Christoph Nakazawa <cpojer@fb.com>
Date: Fri, 9 Feb 2018 09:46:15 +0000
Subject: [PATCH 4/4] Update siteConfig.js

---
 website/siteConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/siteConfig.js b/website/siteConfig.js
index a3cce3d827fd..31685f517e23 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -25,7 +25,7 @@ const videos = [
     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 touching some of the bad stuff.',
+    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',