Merge pull request #8057 from newrelic/liz/lightbox

Add image lightbox
newrelic · Jun 22, 2022 · c9e21d3 · c9e21d3
2 parents 447eadc + 0d2fff1
commit c9e21d3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "@github-docs/frontmatter": "^1.3.1",
     "@mdx-js/mdx": "^2.0.0-next.8",
     "@mdx-js/react": "^2.0.0-next.8",
-    "@newrelic/gatsby-theme-newrelic": "6.2.0",
+    "@newrelic/gatsby-theme-newrelic": "6.3.0",
     "@splitsoftware/splitio-react": "^1.2.4",
     "cockatiel": "^3.0.0-beta.0",
     "common-tags": "^1.8.0",

diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js
@@ -1,6 +1,7 @@
 import {
   ExternalLink,
   Link,
+  Lightbox,
   MDX,
   MarkdownContainer,
 } from '@newrelic/gatsby-theme-newrelic';
@@ -30,43 +31,29 @@ const defaultComponents = {
         }
       />
     ) : (
-      <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>
+      <Lightbox>
+        <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"
+        />
+      </Lightbox>
     ),
   ExternalLink: (props) => (
     <ExternalLink {...props} onClick={(e) => e.stopPropagation()} />

diff --git a/yarn.lock b/yarn.lock
@@ -3029,10 +3029,10 @@
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-react "^7.14.3"
 
-"@newrelic/gatsby-theme-newrelic@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-6.2.0.tgz#60ec2e8124027bf300e31cd9864a1ceba9b73c16"
-  integrity sha512-hyoXCz0uheWKBcAfXK84fa827DCPW2vtB1d9UxCT2wqMsCj3BDacVN0DULsaEtf+Qce6eXxLALX+qq3sHVCnKg==
+"@newrelic/gatsby-theme-newrelic@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-6.3.0.tgz#4ecdc399b0cabbeea535d91142e048fc7e7c6127"
+  integrity sha512-0ZcFq941AX/KrbgpuTYgbMmLkKCDK9UVuqYunyNTfzJCgA6XHGrqf6eYPYGjSzc/aoB4HaKI6CkzB7tHMAxTBw==
   dependencies:
     "@wry/equality" "^0.4.0"
     "@xstate/react" "^1.3.1"