fix(resources): render SVG thumbnails in cards

src/components/Card/index.js

@@ -13,22 +13,29 @@ const Card = ({
   fetchpriority = "auto",
 }) => {
   const { isDark } = useStyledDarkMode();
+  const primaryThumbnail = frontmatter.thumbnail || frontmatter.thumbnail_svg;
+  const secondaryThumbnail =
+    frontmatter.darkthumbnail || frontmatter.darkthumbnail_svg;
+  const thumbnail =
+    isDark &&
+    secondaryThumbnail &&
+    secondaryThumbnail.publicURL !== primaryThumbnail?.publicURL
+      ? secondaryThumbnail
+      : primaryThumbnail || secondaryThumbnail;
+
   return (
     <CardWrapper fixed={!!frontmatter.abstract}>
       <div className="post-block">
         <div className="post-thumb-block">
-          <Image
-            {...(isDark &&
-            frontmatter.darkthumbnail &&
-            frontmatter.darkthumbnail.publicURL !==
-              frontmatter.thumbnail.publicURL
-              ? frontmatter.darkthumbnail
-              : frontmatter.thumbnail)}
-            imgStyle={{ objectFit: "cover" }}
-            loading={loading}
-            fetchpriority={fetchpriority}
-            alt={frontmatter.title}
-          />
+          {thumbnail && (
+            <Image
+              {...thumbnail}
+              imgStyle={{ objectFit: "cover" }}
+              loading={loading}
+              fetchpriority={fetchpriority}
+              alt={frontmatter.title}
+            />
+          )}
         </div>
         <div className="post-content-block">
           <h2 className="post-title">{frontmatter.title}</h2>
@@ -97,4 +104,4 @@ const Card = ({
   );
 };
 
-export default Card;
+export default Card;

src/sections/Resources/Resources-grid/DataWrapper.js

@@ -6,42 +6,55 @@ import LitePlaceholder from "../../../templates/lite-placeholder";
 
 const DataWrapper = (WrappedComponent) => {
   return (props) => {
-    const data = useStaticQuery(
-      graphql`query allResourcesAndAllResources {
-  allMdx(
-    sort: {frontmatter: {date: DESC}}
-    filter: {fields: {collection: {in: ["blog", "resources", "news", "events"]}}, frontmatter: {published: {eq: true}, resource: {eq: true}}}
-  ) {
-    nodes {
-      id
-      frontmatter {
-        title
-        type
-        technology
-        product
-        mesh
-        thumbnail {
-          childImageSharp {
-            gatsbyImageData(width: 480, layout: CONSTRAINED)
+    const data = useStaticQuery(graphql`
+      query allResourcesAndAllResources {
+        allMdx(
+          sort: { frontmatter: { date: DESC } }
+          filter: {
+            fields: {
+              collection: { in: ["blog", "resources", "news", "events"] }
+            }
+            frontmatter: { published: { eq: true }, resource: { eq: true } }
           }
-          extension
-          publicURL
-        }
-        darkthumbnail {
-          childImageSharp {
-            gatsbyImageData(width: 480, layout: CONSTRAINED)
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              type
+              technology
+              product
+              mesh
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(width: 480, layout: CONSTRAINED)
+                }
+                extension
+                publicURL
+              }
+              thumbnail_svg {
+                extension
+                publicURL
+              }
+              darkthumbnail {
+                childImageSharp {
+                  gatsbyImageData(width: 480, layout: CONSTRAINED)
+                }
+                extension
+                publicURL
+              }
+              darkthumbnail_svg {
+                extension
+                publicURL
+              }
+            }
+            fields {
+              slug
+            }
           }
-          extension
-          publicURL
         }
       }
-      fields {
-        slug
-      }
-    }
-  }
-}`
-    );
+    `);
 
     if (data.allMdx.nodes.length === 0) {
       return (