feat: Better handling of text followed by code snippets by creating s…

…ections at each code snippet point

src/components/SideBySide.js

@@ -1,18 +1,31 @@
-import React from 'react';
+import React, { Children, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-
 import styles from './SideBySide.module.scss';
+import splitUsing from '../utils/splitUsing';
+import splitWhen from '../utils/splitWhen';
+
+const isMdxType = (child, type) => child?.props?.mdxType === type;
 
-const SideBySide = ({ className, children, type, dir }) => {
-  const childObjects = React.Children.toArray(children);
-  const side = childObjects.find((child) => child?.props?.mdxType === type);
-  const rest = childObjects.filter((child) => child !== side);
+const SideBySide = ({ className, children, type }) => {
+  const childObjects = Children.toArray(children);
+  const rendersRightColumn = childObjects.some((child) =>
+    isMdxType(child, type)
+  );
+  const sections = splitUsing(childObjects, (child) =>
+    isMdxType(child, type)
+  ).map((section) => splitWhen(section, (child) => isMdxType(child, type)));
 
   return (
-    <div className={cx(className, styles.container, styles[dir])}>
-      <div>{rest}</div>
-      {side && <div>{side}</div>}
+    <div className={cx(className, styles.container)}>
+      {sections.map(([left, right], idx) => (
+        <Fragment key={idx}>
+          <div className={cx({ [styles.spanColumns]: !rendersRightColumn })}>
+            {left}
+          </div>
+          {rendersRightColumn && <div>{right}</div>}
+        </Fragment>
+      ))}
     </div>
   );
 };
@@ -21,11 +34,6 @@ SideBySide.propTypes = {
   children: PropTypes.node.isRequired,
   type: PropTypes.string.isRequired,
   className: PropTypes.string,
-  dir: PropTypes.oneOf(['right', 'left']),
-};
-
-SideBySide.defaultProps = {
-  dir: 'right',
 };
 
 export default SideBySide;

src/components/SideBySide.module.scss

@@ -1,32 +1,14 @@
 .container {
-  display: flex;
-
-  > div {
-    flex: 1;
-  }
-
-  &.right {
-    flex-direction: row;
-
-    > div:nth-child(2) {
-      margin-left: 1rem;
-    }
-  }
-
-  &.left {
-    flex-direction: row-reverse;
-
-    > div:nth-child(2) {
-      margin-right: 1rem;
-    }
-  }
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-gap: 1rem;
 
   @media (max-width: 760px) {
-    display: block;
-
-    &.left > div:nth-child(2),
-    &.right > div:nth-child(2) {
-      margin: 0;
-    }
+    grid-template-columns: 100%;
+    grid-gap: 0;
   }
 }
+
+.spanColumns {
+  grid-column: span 2;
+}