feat: load SVGs from local cache

newrelic · Jun 29, 2022 · a0f591c · a0f591c
1 parent 803458b
commit a0f591c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 48 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -84,8 +84,9 @@ exports.onCreateNode = async ({ node, actions, createNodeId, getCache }) => {
       value: `${resolveQuickstartSlug(node.name, node.id)}`,
     });
 
-    // If a logo URL is provided, source the file and save the ID for use with sharp
-    if (node.logoUrl && path.extname(node.logoUrl) !== '.svg') {
+    // if a logoUrl is provided
+    if (node.logoUrl) {
+      // fetch the logo and create a "File" node
       const fileNode = await createRemoteFileNode({
         url: node.logoUrl,
         parentNodeId: node.id,

diff --git a/src/components/QuickstartImg.js b/src/components/QuickstartImg.js
@@ -18,49 +18,11 @@ const getNameAcronym = (name) =>
     .map((word) => word.charAt(0))
     .join('');
 
-const QuickstartImg = ({ className, logoUrl, packName, imageNode }) => {
-  const image = getImage(imageNode);
-
-  // If we have an image for sharp to optimize, use GatsbyImage
-  if (image) {
-    return (
-      <GatsbyImage
-        css={css`
-          display: block;
-          max-width: 100%;
-          max-height: 100%;
-        `}
-        className={className}
-        image={image}
-        alt={packName}
-      />
-    );
-  }
-
-  // if we don't have a sharp-capable image, but we have a URL, it's an
-  // SVG (already performant).
-  if (logoUrl) {
-    return (
-      <img
-        css={css`
-          display: block;
-          max-width: 100%;
-          max-height: 100%;
-        `}
-        src={logoUrl}
-        alt={packName}
-        onError={(e) => {
-          e.preventDefault();
-          e.target.src = DEFAULT_IMAGE;
-        }}
-        className={className}
-      />
-    );
-  }
-
-  // If no images available, create a "placeholder" using the acronym
-  // for the quickstart name.
-  const acronym = getNameAcronym(packName);
+/**
+ * Displays the Quickstart name as a acronym with a subtle background.
+ */
+const FallbackImg = ({ className, name }) => {
+  const acronym = getNameAcronym(name);
 
   return (
     <div
@@ -83,9 +45,52 @@ const QuickstartImg = ({ className, logoUrl, packName, imageNode }) => {
   );
 };
 
+const QuickstartImg = ({ className, packName, imageNode }) => {
+  if (imageNode) {
+    // If we have an image for sharp to optimize, use GatsbyImage
+    const image = getImage(imageNode);
+
+    if (image) {
+      return (
+        <GatsbyImage
+          css={css`
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+          `}
+          className={className}
+          image={image}
+          alt={packName}
+        />
+      );
+    }
+
+    // If we don't have a sharp-capable image, but we have a URL, it's an
+    // SVG (already performant) and is already built with the site.
+    const { ext, publicURL } = imageNode;
+
+    if (ext === '.svg' && publicURL) {
+      return (
+        <img
+          css={css`
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+          `}
+          src={publicURL}
+          alt={packName}
+          className={className}
+        />
+      );
+    }
+  }
+
+  // In all other cases, render the fallback.
+  return <FallbackImg className={className} name={packName} />;
+};
+
 QuickstartImg.propTypes = {
   packName: PropTypes.string.isRequired,
-  logoUrl: PropTypes.string,
   className: PropTypes.string,
   imageNode: PropTypes.object,
 };

diff --git a/src/components/QuickstartTile.js b/src/components/QuickstartTile.js
@@ -21,7 +21,6 @@ const QuickstartTile = ({
   name,
   fields,
   logo,
-  logoUrl,
   level,
   className,
   summary,
@@ -122,7 +121,6 @@ const QuickstartTile = ({
         >
           <QuickstartImg
             imageNode={logo}
-            logoUrl={logoUrl}
             packName={title || name}
             css={css`
               object-fit: scale-down;

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -767,6 +767,8 @@ export const pageQuery = graphql`
         level
         keywords
         logo {
+          ext
+          publicURL
           childImageSharp {
             gatsbyImageData(
               height: 45