Merge pull request #19038 from newrelic/clark/86-lightbox

fix: Update MDX handler to no longer use Lightbox

Author: clarkmcadoo

gatsby-config.js

@@ -131,7 +131,7 @@ module.exports = {
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 850,
-              linkImagesToOriginal: false,
+              linkImagesToOriginal: true,
               backgroundColor: 'transparent',
               disableBgImageOnAlpha: true,
             },

package.json

@@ -10,7 +10,7 @@
     "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "2.0.0-next.8",
     "@mdx-js/react": "2.0.0-next.8",
-    "@newrelic/gatsby-theme-newrelic": "9.10.3",
+    "@newrelic/gatsby-theme-newrelic": "9.10.4",
     "@splitsoftware/splitio-react": "^1.2.4",
     "ansi-colors": "^4.1.3",
     "cockatiel": "^3.0.0-beta.0",
@@ -237,4 +237,4 @@
   "bugs": {
     "url": "https://github.com/newrelic/docs-website/issues"
   }
-}
+}

src/components/MDXContainer.js

@@ -1,7 +1,6 @@
 import {
   ExternalLink,
   Link,
-  Lightbox,
   MDXLink,
   MDX,
   MarkdownContainer,
@@ -53,30 +52,43 @@ const defaultComponents = {
         }
       />
     ) : (
-      <Lightbox>
-        <img
-          width={props.width ? props.width : 'auto'}
-          src={props.src}
-          // this prevents images from stretching if the width is set to a percent value
-          className={cx(props.className, props.width && 'unbound')}
-          alt={props.alt ? props.alt : 'Docs site'}
-          title={props.title}
-          style={
-            props.style
-              ? {
-                  ...props.style,
-                  borderRadius: '0.25rem',
-                  maxWidth: '100%',
-                  margin: '0 0.25rem',
-                }
-              : {
-                  borderRadius: '0.25rem',
-                  maxWidth: '100%',
-                  margin: '0 0.25rem',
-                }
-          }
-        />
-      </Lightbox>
+      <span
+        style={{
+          position: 'relative',
+          display: 'block',
+          textAlign: 'center',
+          margin: '1em 0',
+        }}
+      >
+        <a
+          href={props.src}
+          target="_blank"
+          rel="noreferrer"
+          style={{ display: 'inline-block' }}
+        >
+          <img
+            width={props.width ? props.width : 'auto'}
+            src={props.src}
+            alt={props.alt ? props.alt : 'Docs site'}
+            title={props.title}
+            style={
+              props.style
+                ? {
+                    ...props.style,
+                    borderRadius: '0.25rem',
+                    maxWidth: '100%',
+                    margin: '0 0.25rem',
+                  }
+                : {
+                    borderRadius: '0.25rem',
+                    maxWidth: '100%',
+                    margin: '0 0.25rem',
+                  }
+            }
+            loading="lazy"
+          />
+        </a>
+      </span>
     ),
   DocTile: (props) => (
     <DocTile

yarn.lock

@@ -3616,10 +3616,10 @@
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-react "^7.14.3"
 
-"@newrelic/[email protected].3":
-  version "9.10.3"
-  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-9.10.3.tgz#bfd66da5dd0e2ff7b0a2a2bf20875bf81de5009a"
-  integrity sha512-2XeVjjIb9HOJCLWB2ujaXjr1H2BuAelPBtcebrI2cgehQpJUrdrA6yPXZvzxVWpLSfXIF6bO61sRnmD/Ldw9fg==
+"@newrelic/[email protected].4":
+  version "9.10.4"
+  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-9.10.4.tgz#98862253d31465c0a51806288f7da98415d35c57"
+  integrity sha512-/WVfjez7/C/0H1tb4r8IQluqiGT6kFOpLUV9DaN51PxJopM9pclpQdCwmEZ8LF0+wX8ed4TX+ZrnsoDq5F1GYg==
   dependencies:
     "@segment/analytics-next" "1.63.0"
     "@wry/equality" "^0.4.0"