From 169bf13dfc6bb419862f6378df1845c95b2a2b53 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 12 Jun 2020 10:20:57 -0700
Subject: [PATCH 1/3] feat: adds the (optional) ability to have other content
 in intro

---
 src/components/Intro.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Intro.js b/src/components/Intro.js
index cfb7a9571..e943a4265 100644
--- a/src/components/Intro.js
+++ b/src/components/Intro.js
@@ -4,14 +4,20 @@ import PropTypes from 'prop-types';
 
 import styles from './Intro.module.scss';
 
-const Intro = ({ children }) => (
-  <SideBySide type="Video" className={styles.container}>
+const Intro = ({ children, type }) => (
+  <SideBySide type={type} className={styles.container}>
     {children}
   </SideBySide>
 );
 
 Intro.propTypes = {
   children: PropTypes.node.isRequired,
+  // Only video or code is supported at the moment
+  type: PropTypes.oneOf('Video', 'pre'),
+};
+
+Intro.defaultProps = {
+  type: 'Video',
 };
 
 export default Intro;

From 8f6183cca5a57953006e0b3a544c59811417cd2b Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 12 Jun 2020 10:25:11 -0700
Subject: [PATCH 2/3] chore: ensuring only specific video platforms are used

---
 src/components/Video.js | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/Video.js b/src/components/Video.js
index 128d83281..2f123525a 100644
--- a/src/components/Video.js
+++ b/src/components/Video.js
@@ -3,27 +3,26 @@ import PropTypes from 'prop-types';
 
 import styles from './Video.module.scss';
 
-const Video = ({ id, type, title }) => {
-  const src = {
-    youtube: `//www.youtube.com/embed/${id}?modestbranding=1`,
-    wistia: `//fast.wistia.net/embed/iframe/${id}`,
-  };
-  return (
-    <div className={styles.video}>
-      <iframe
-        src={src[type]}
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        title={title}
-        frameBorder="0"
-        allowFullScreen
-      />
-    </div>
-  );
+const videoPlatforms = {
+  youtube: (id) => `//www.youtube.com/embed/${id}?modestbranding=1`,
+  wistia: (id) => `//fast.wistia.net/embed/iframe/${id}`,
 };
 
+const Video = ({ id, type, title }) => (
+  <div className={styles.video}>
+    <iframe
+      src={videoPlatforms[type](id)}
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      title={title}
+      frameBorder="0"
+      allowFullScreen
+    />
+  </div>
+);
+
 Video.propTypes = {
   id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.keys(videoPlatforms)).isRequired,
   title: PropTypes.string,
 };
 

From 515a2cd2cf36382a328b62bce2599a6fcde6f3a8 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 12 Jun 2020 13:25:37 -0700
Subject: [PATCH 3/3] chore: allowing for multiple components to be side
 aligned

---
 src/components/Intro.js      | 10 ++++++++--
 src/components/SideBySide.js | 14 ++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Intro.js b/src/components/Intro.js
index e943a4265..16cfe5cae 100644
--- a/src/components/Intro.js
+++ b/src/components/Intro.js
@@ -10,10 +10,16 @@ const Intro = ({ children, type }) => (
   </SideBySide>
 );
 
+// Only video or code is supported at the moment
+const SUPPORTED_TYPES = PropTypes.oneOf(['Video', 'pre']);
+
 Intro.propTypes = {
   children: PropTypes.node.isRequired,
-  // Only video or code is supported at the moment
-  type: PropTypes.oneOf('Video', 'pre'),
+  // either a single supported type, or an array of supported types
+  type: PropTypes.oneOfType([
+    SUPPORTED_TYPES,
+    PropTypes.arrayOf(SUPPORTED_TYPES),
+  ]),
 };
 
 Intro.defaultProps = {
diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index 662b31c68..69aa5f9bf 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -7,13 +7,16 @@ import splitWhen from '../utils/splitWhen';
 import { isMdxType } from '../utils/mdx';
 
 const SideBySide = ({ className, children, type }) => {
+  const types = Array.isArray(type) ? type : [type];
   const childObjects = Children.toArray(children);
   const rendersRightColumn = childObjects.some((child) =>
-    isMdxType(child, type)
+    types.some((type) => isMdxType(child, type))
   );
   const sections = splitUsing(childObjects, (child) =>
-    isMdxType(child, type)
-  ).map((section) => splitWhen(section, (child) => isMdxType(child, type)));
+    types.some((type) => isMdxType(child, type))
+  ).map((section) =>
+    splitWhen(section, (child) => types.some((type) => isMdxType(child, type)))
+  );
 
   return (
     <div className={cx(className, styles.container)}>
@@ -31,7 +34,10 @@ const SideBySide = ({ className, children, type }) => {
 
 SideBySide.propTypes = {
   children: PropTypes.node.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]).isRequired,
   className: PropTypes.string,
 };