Fixed Image Rendering Issue and Updated Makefile

Signed-off-by: Adithya Krishna <[email protected]>
randychilau · Apr 18, 2021 · e5dbfdd · e5dbfdd
1 parent 4b6e659
commit e5dbfdd
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 17 deletions.
diff --git a/Makefile b/Makefile
@@ -1,5 +1,5 @@
 setup-libs:
-	npm install
+	npm install --legacy-peer-deps
 
 site:
 	npm start

diff --git a/...20-03-13-what-the-numbers-say-about-how-service-meshes-are-used-today/index.mdx b/...20-03-13-what-the-numbers-say-about-how-service-meshes-are-used-today/index.mdx
@@ -7,7 +7,7 @@ thumbnail: "./what-the-numbers-say-about-how-service-meshes-are-used-today.png"
 eurl: https://thenewstack.io/what-the-numbers-say-about-how-service-meshes-are-used-today/
 published: true
 redirect_from:
- - /https:/thenewstack.io/what-the-numbers-say-about-how-service-meshes-are-used-today/
+ - https://thenewstack.io/what-the-numbers-say-about-how-service-meshes-are-used-today/
 ---
 
 import { NewsWrapper } from "../News.style.js"

diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js
@@ -9,7 +9,7 @@ export const CardWrapper = styled.div`
         &:hover{
             box-shadow: 0px 2px 15px 4px rgba(0,0,0,0.2);
             .post-thumb-block{
-                .gatsby-image-wrapper{
+                .gatsby-image-wrapper, .old-gatsby-image-wrapper{
                     transform: scale3d(1.1,1.1,1);
                 }
             }
@@ -36,7 +36,7 @@ export const CardWrapper = styled.div`
         border-top-right-radius: 0.5rem;
         border-top-left-radius: 0.5rem;
 
-        .gatsby-image-wrapper{
+        .gatsby-image-wrapper, .old-gatsby-image-wrapper{
             height:100%;
             transition: all 0.3s ease-in;
         }

diff --git a/src/components/Profile-card/ProfileCard.style.js b/src/components/Profile-card/ProfileCard.style.js
@@ -32,7 +32,7 @@ export const ProfileCardWrapper = styled.div`
             z-index: 1;
             overflow: hidden;
 
-            .gatsby-image-wrapper {
+            .gatsby-image-wrapper, .old-gatsby-image-wrapper {
                 display: block;
                 margin: auto;
                 border-radius: 100%;

diff --git a/src/components/Workshop-Card/WorkshopsCardWrapper.style.js b/src/components/Workshop-Card/WorkshopsCardWrapper.style.js
@@ -51,7 +51,7 @@ const WorkshopCardWrapper = styled.div`
     transition: all 0.25s ease-in;
     box-shadow: 0 0 black;
 
-    .gatsby-image-wrapper {
+    .gatsby-image-wrapper,.old-gatsby-image-wrapper {
       height: 90%;
     }
   }

diff --git a/src/components/image.js b/src/components/image.js
@@ -6,7 +6,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
 const Image = ({ childImageSharp, extension, publicURL, alt, ...rest }) => {
   if (!childImageSharp && extension === "svg") {
     return (
-      <div className="gatsby-image-wrapper">
+      <div className="old-gatsby-image-wrapper">
         <img src={publicURL} alt={alt} />
       </div>
     );

diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
@@ -420,7 +420,7 @@ const NavigationWrap = styled.header`
     height: 160px;
     max-width: 100%;
     margin: 0 auto;
-    .gatsby-image-wrapper{
+    .gatsby-image-wrapper, .old-gatsby-image-wrapper{
         height:100%;
         transition: all 0.3s ease-in;
     }

diff --git a/src/sections/General/Navigation/utility/image.js b/src/sections/General/Navigation/utility/image.js
@@ -6,7 +6,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
 const Image = ({ childImageSharp, extension, publicURL, alt, ...rest }) => {
   if (!childImageSharp && extension === "svg") {
     return (
-      <div className="gatsby-image-wrapper">
+      <div className="old-gatsby-image-wrapper">
         <img src={publicURL} alt={alt} />
       </div>
     );

diff --git a/src/sections/Home/So-Special-Section/so-special-style.js b/src/sections/Home/So-Special-Section/so-special-style.js
@@ -55,7 +55,7 @@ const SoSpecialWrapper = styled.div`
         height:70%;
         width:100%;
         overflow:hidden;
-          .gatsby-image-wrapper{
+          .gatsby-image-wrapper, .old-gatsby-image-wrapper{
               height:100%;
           }
           img{

diff --git a/src/sections/Meshery/Meshery-features/index.js b/src/sections/Meshery/Meshery-features/index.js
@@ -3,6 +3,12 @@ import styled from "styled-components";
 import { Container } from "../../../reusecore/Layout";
 import Terminal from "../../../components/Terminal";
 import Features from "../../../components/Features-carousel";
+import img1 from "./feature-images/meshery-configuration-management.png";
+import img2 from "./feature-images/meshery-wasm.png";
+import img3 from "../../../assets/images/meshery-operator/meshery-operator-dark.svg";
+import img4 from "./feature-images/meshery-and-grafana.png";
+import img5 from "./feature-images/meshsync.svg";
+import img6 from "./feature-images/meshery-extensibility.svg";
 
 const MesheryFeaturesWrapper = styled.div`
     margin: auto;
@@ -36,7 +42,7 @@ const MesheryFeatures = () => {
               learnMoreLink: "/books/service-mesh-patterns",
               content: (
                 <img
-                  src={require("./feature-images/meshery-configuration-management.png")}
+                  src={img1}
                   alt="Operational Best Practices"
                 />
               ),
@@ -48,7 +54,7 @@ const MesheryFeatures = () => {
               learnMoreLink: "/projects/image-hub",
               content: (
                 <img
-                  src={require("./feature-images/meshery-wasm.png")}
+                  src={img2}
                   alt="Adaptive WebAssembly Filters for Envoy"
                 />
               ),
@@ -113,7 +119,7 @@ const MesheryFeatures = () => {
               content: (
                 <div className="feature-expose">
                   <img
-                    src={require("../../../assets/images/meshery-operator/meshery-operator-dark.svg")}
+                    src={img3}
                     alt="Kubernetes Operator for Meshery"
                   />
                   <p>Service meshes are dynamic. Changes to the service meshes and their workloads occur with great frequency. Meshery Operator helps Meshery stay in lockstep with these changes. Service mesh administrators might make updates to service mesh configuration directly with the service mesh. </p>
@@ -129,7 +135,7 @@ const MesheryFeatures = () => {
               content: (
                 <div className="feature-expose">
                   <img
-                    src={require("./feature-images/meshery-and-grafana.png")}
+                    src={img4}
                     alt="Prometheus and Grafana integration with Meshery"
                   />
                   <p>Key to the efficient operation of any service mesh is the measurement and management of it’s performance.</p>
@@ -206,7 +212,7 @@ const MesheryFeatures = () => {
               content: (
                 <div className="feature-expose">
                   <img
-                    src={require("./feature-images/meshsync.svg")}
+                    src={img5}
                     alt="Meshery, the extensible service mesh manager"
                   />
                   <p>
@@ -224,9 +230,9 @@ const MesheryFeatures = () => {
                 "Plug in different service meshes, load generators and providers.",
               content: (
                 <div className="feature-expose-full">
-                  <a href={require("./feature-images/meshery-extensibility.svg")}>
+                  <a href={img6}>
                     <img
-                      src={require("./feature-images/meshery-extensibility.svg")}
+                      src={img6}
                       alt="Meshery, the extensible service mesh manager"
                     /></a>
                   <p>