diff --git a/docs/Architecture.md b/docs/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/docs/Architecture.md
+++ b/docs/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 00cf5cc76d72..8d57541950c8 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -69,6 +69,9 @@ module.exports = {
path.resolve('src/components/v1/legacyCSS.css'),
path.resolve('static/css/custom.css'),
path.resolve('static/css/jest.css'),
+ require.resolve(
+ 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+ ),
],
},
gtag: {
diff --git a/website/package.json b/website/package.json
index 0021728e996f..6a4bab45207b 100644
--- a/website/package.json
+++ b/website/package.json
@@ -39,6 +39,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-github-btn": "^1.2.0",
+ "react-lite-youtube-embed": "^2.2.1-a",
"react-markdown": "^8.0.0"
},
"devDependencies": {
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 0ab8788f28fb..ac555ee4b141 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -11,6 +11,7 @@ import Head from '@docusaurus/Head';
import Link from '@docusaurus/Link';
import backers from '@site/backers.json';
import Translate from '@docusaurus/Translate';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
import {setupLandingAnimation} from '@site/src/pages/animations/_landingAnimation';
@@ -512,14 +513,7 @@ class Index extends React.Component {
-
+
@@ -550,14 +544,7 @@ class Index extends React.Component {
-
+
diff --git a/website/src/pages/videos.js b/website/src/pages/videos.js
deleted file mode 100644
index 72d0dd9a8ecf..000000000000
--- a/website/src/pages/videos.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import Layout from '@theme/Layout';
-
-import Translate from '@docusaurus/Translate';
-
-// TODO legacy Docusaurus v1 components
-import Container from '@site/src/components/v1/Container';
-import MarkdownBlock from '@site/src/components/v1/MarkdownBlock';
-
-import VideosJSON from '@site/videos.json';
-import styles from './videos.module.css';
-
-const VideoTypes = {
- YOUTUBE: 'youtube',
- IFRAME: 'iframe',
-};
-
-class Video extends React.PureComponent {
- render() {
- const {url, type} = this.props;
- switch (type) {
- case VideoTypes.YOUTUBE: {
- return (
-
- );
- }
- case VideoTypes.IFRAME: {
- return ;
- }
- default: {
- return ;
- }
- }
- }
-}
-
-class Videos extends React.Component {
- render() {
- const showcase = VideosJSON.videos.map(
- ({title, description, type, url}, index) => {
- const textMarkup = (
-
- );
- }
-}
-
-export default function VideosPage(props) {
- return (
-
-
-
- );
-}
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index eb50deecf550..0b9e8f75d2cd 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -43,7 +43,7 @@ div.bottom-margin {
.blockContent div.video {
width: 100%;
- height: 280px;
+ height: 350px;
margin-top: 20px;
padding-right: 80px;
}
diff --git a/website/versioned_docs/version-25.x/Architecture.md b/website/versioned_docs/version-25.x/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-25.x/Architecture.md
+++ b/website/versioned_docs/version-25.x/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-26.x/Architecture.md b/website/versioned_docs/version-26.x/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-26.x/Architecture.md
+++ b/website/versioned_docs/version-26.x/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.0/Architecture.md b/website/versioned_docs/version-27.0/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.0/Architecture.md
+++ b/website/versioned_docs/version-27.0/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.1/Architecture.md b/website/versioned_docs/version-27.1/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.1/Architecture.md
+++ b/website/versioned_docs/version-27.1/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.2/Architecture.md b/website/versioned_docs/version-27.2/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.2/Architecture.md
+++ b/website/versioned_docs/version-27.2/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.4/Architecture.md b/website/versioned_docs/version-27.4/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.4/Architecture.md
+++ b/website/versioned_docs/version-27.4/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.5/Architecture.md b/website/versioned_docs/version-27.5/Architecture.md
index 300abd75d9f0..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.5/Architecture.md
+++ b/website/versioned_docs/version-27.5/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
title: Architecture
---
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
-
+
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
-
+
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/yarn.lock b/yarn.lock
index a26e933d6633..7e1c7a58f9a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13804,6 +13804,7 @@ __metadata:
react: ^17.0.1
react-dom: ^17.0.1
react-github-btn: ^1.2.0
+ react-lite-youtube-embed: ^2.2.1-a
react-markdown: ^8.0.0
languageName: unknown
linkType: soft
@@ -18557,6 +18558,16 @@ __metadata:
languageName: node
linkType: hard
+"react-lite-youtube-embed@npm:^2.2.1-a":
+ version: 2.2.1
+ resolution: "react-lite-youtube-embed@npm:2.2.1"
+ peerDependencies:
+ react: ">=16.0.8"
+ react-dom: ">=16.0.8"
+ checksum: f3be7bcaa6ec5ca5a7e35a941a7e6d555ac465486807240992ef3389d29631bcc7f85e37a3199ee1dd7ce47ac21440987f113694dcb73ad9be0b3d1e02cfabf9
+ languageName: node
+ linkType: hard
+
"react-loadable-ssr-addon-v5-slorber@npm:^1.0.1":
version: 1.0.1
resolution: "react-loadable-ssr-addon-v5-slorber@npm:1.0.1"