Skip to content

perf(images): replace Kanvas img tags with StaticImage #7619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Manishnemade12 wants to merge 1 commit into
base: master
Choose a base branch
from
+52 −85
Open

perf(images): replace Kanvas img tags with StaticImage #7619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 25 additions & 33 deletions src/sections/Kanvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React from "react";
import { StaticImage } from "gatsby-plugin-image";
import KanvasWrapper from "./kanvas.style";
import { Container } from "../../reusecore/Layout";
import Features from "../../components/Features-carousel";
import KanvasModes from "./kanvas-modes";
import Catalog from "./kanvas-catalog";
import Platform from "./kanvas-platform";
import KanvasBanner from "./kanvas_banner";
import designerImage from "../../assets/images/kanvas/KanvasDesigner.webp";
import visualizerImage from "../../assets/images/kanvas/KanvasVisualizer.webp";
import DesignerFeatures from "./FeaturesSection/Design/DesignerFeatures";
import CollaboratorFeatures from "./FeaturesSection/Collaborate/CollaboratorFeatures";
import VisualizerFeatures from "./FeaturesSection/Visualize/VisualizerFeatures";
Expand All @@ -28,9 +27,6 @@ import { ReactComponent as Collab2 } from "./FeaturesSection/Collaborate/images/
import { ReactComponent as Collab3 } from "./FeaturesSection/Collaborate/images/collab3-colorMode.svg";
import { ReactComponent as Collab4 } from "./FeaturesSection/Collaborate/images/collab4-colorMode.svg";

import Avatar1 from "./FeaturesSection/Collaborate/images/avatar1.webp";
import Avatar2 from "./FeaturesSection/Collaborate/images/avatar2.webp";
import Avatar3 from "./FeaturesSection/Collaborate/images/avatar3.webp";
import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp";
import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg";
import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg";
Expand All @@ -56,12 +52,10 @@ const Kanvas = (props) => {
description:
"Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Collaborate wtih teammates using this self-service engineering platform. Using GitOps? Integrate advanced performance analysis into your pipeline.",
content: (
<img
src={designerImage}
<StaticImage
src="../../assets/images/kanvas/KanvasDesigner.webp"
alt="Designer Mode"
className="designer-img modes-image"
width="100%"
height="auto"
style={{ aspectRatio: "16/9" }}
/>
),
Expand All @@ -71,12 +65,10 @@ const Kanvas = (props) => {
description:
"Operator offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Operator.",
content: (
<img
src={visualizerImage}
<StaticImage
src="../../assets/images/kanvas/KanvasVisualizer.webp"
alt="Operator Mode"
className="modes-image"
width="100%"
height="auto"
style={{ aspectRatio: "16/9" }}
/>
),
Expand Down Expand Up @@ -165,13 +157,13 @@ const Kanvas = (props) => {
description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
imgContent: (
<>
<img
<StaticImage
id="avatar-1"
src={Avatar1}
src="./FeaturesSection/Collaborate/images/avatar1.webp"
alt=""
width="48"
height="48"
style={{ objectFit: "cover" }}
width={48}
height={48}
imgStyle={{ objectFit: "cover" }}
/>
<Collab1 id="collaborate-image1" alt="collaborate-image1" />
</>
Expand All @@ -187,13 +179,13 @@ const Kanvas = (props) => {
description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
imgContent: (
<>
<img
<StaticImage
id="avatar-2"
src={Avatar2}
src="./FeaturesSection/Collaborate/images/avatar2.webp"
alt="avatar-2"
width="48"
height="48"
style={{ objectFit: "cover" }}
width={48}
height={48}
imgStyle={{ objectFit: "cover" }}
/>
<Collab2 id="collaborate-image2" alt="collaborate-image2" />
</>
Expand All @@ -204,13 +196,13 @@ const Kanvas = (props) => {
description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
imgContent: (
<>
<img
<StaticImage
id="avatar-3"
src={Avatar3}
src="./FeaturesSection/Collaborate/images/avatar3.webp"
alt="avatar-3"
width="48"
height="48"
style={{ objectFit: "cover" }}
width={48}
height={48}
imgStyle={{ objectFit: "cover" }}
/>
<Collab3 id="collaborate-image3" alt="collaborate-image3" />
</>
Expand All @@ -225,13 +217,13 @@ const Kanvas = (props) => {
description: "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.",
imgContent: (
<>
<img
<StaticImage
id="avatar-3"
src={Avatar3}
src="./FeaturesSection/Collaborate/images/avatar3.webp"
alt="avatar-3"
width="48"
height="48"
style={{ objectFit: "cover" }}
width={48}
height={48}
imgStyle={{ objectFit: "cover" }}
/>
<Collab4 id="collaborate-image4" alt="collaborate-image4" />
</>
Expand Down
70 changes: 23 additions & 47 deletions src/sections/Kanvas/kanvas-catalog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,6 @@
import React from "react";
import styled from "styled-components";
import Mutual_tls from "../../assets/images/kanvas/catalog-card-images/mutual-tls.svg";
import Retries from "../../assets/images/kanvas/catalog-card-images/retries.svg";
import Traces from "../../assets/images/kanvas/catalog-card-images/traces.svg";
import Denial from "../../assets/images/kanvas/catalog-card-images/denial.svg";
import Correlate_event from "../../assets/images/kanvas/catalog-card-images/correlate-event.svg";
import Only_wagent from "../../assets/images/kanvas/catalog-card-images/only-wagent.svg";
import Node_agent from "../../assets/images/kanvas/catalog-card-images/node-agent.svg";
import Single_tenant from "../../assets/images/kanvas/catalog-card-images/single-tenant.svg";
import Pre_provison from "../../assets/images/kanvas/catalog-card-images/pre-provision.svg";
import Circuit_breaker from "../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg";
import Retry_deadline from "../../assets/images/kanvas/catalog-card-images/retry-deadline.svg";
import Singleton from "../../assets/images/kanvas/catalog-card-images/singleton.svg";
import Jwt_transformer from "../../assets/images/kanvas/catalog-card-images/jwt.svg";
import Multicluster from "../../assets/images/kanvas/catalog-card-images/multicluster.svg";
import Http_metrics from "../../assets/images/kanvas/catalog-card-images/http.svg";

import Design from "../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";



import Patterns from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg";

import Models from "../../assets/images/meshery/meshery-logo.svg";

import Opa from "../../assets/images/kanvas/opa.svg";
import { StaticImage } from "gatsby-plugin-image";
import { Container } from "../../reusecore/Layout";

const CatalogWrapper = styled.div`
Expand Down Expand Up @@ -121,7 +97,7 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
padding: 0.5em;
img{
.gatsby-image-wrapper{
max-width:5.6rem;
display:block;
margin: 0 auto;
Expand Down Expand Up @@ -232,7 +208,7 @@ h3.containerCaption {
}

#carousel{
img{
.gatsby-image-wrapper{
transition: all .5s ease;
}
}
Expand Down Expand Up @@ -344,7 +320,7 @@ h3.containerCaption {
@media screen and (max-width: 680px) {

.svg-cont{
img {
.gatsby-image-wrapper {
width: 4rem;
}
p{
Expand Down Expand Up @@ -448,20 +424,20 @@ const Catalog = () => {
{/* Right Section */}
<section className="services svg-cont">
<div>
<img alt="Kanvas dashboard showing service retries in Kubernetes visualization" src={Patterns} />
<StaticImage alt="Kanvas dashboard showing service retries in Kubernetes visualization" src="../../assets/images/service-mesh-patterns/service-mesh-pattern.svg" placeholder="none" />
<p>Cloud Native Patterns</p>
</div>
<div>

<img src={Design} alt="Design logo" />
<StaticImage src="../../assets/images/kanvas/icon-only/kanvas-icon-color.svg" alt="Design logo" placeholder="none" />
<p>Design</p>
</div>
<div>
<img src={Models} alt="Models logo" />
<StaticImage src="../../assets/images/meshery/meshery-logo.svg" alt="Models logo" placeholder="none" />
<p>Models</p>
</div>
<div>
<img alt="OPA policies management illustration in Kanvas service mesh" src={Opa} />
<StaticImage alt="OPA policies management illustration in Kanvas service mesh" src="../../assets/images/kanvas/opa.svg" placeholder="none" />
<p>OPA Policies</p>
</div>
</section>
Expand All @@ -473,49 +449,49 @@ const Catalog = () => {
<div className="container">
<div id="carousel">
<div className="slide one">
<img src={Mutual_tls} alt="Kanvas Mutual TLS security feature for Kubernetes workloads" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/mutual-tls.svg" alt="Kanvas Mutual TLS security feature for Kubernetes workloads" placeholder="none" />
</div>
<div className="slide two">
<img src={Retries} alt="Kanvas dashboard showing service retries in Kubernetes visualization" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/retries.svg" alt="Kanvas dashboard showing service retries in Kubernetes visualization" placeholder="none" />
</div>
<div className="slide three">
<img src={Traces} alt="Kanvas tracing visualization for distributed Kubernetes services" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/traces.svg" alt="Kanvas tracing visualization for distributed Kubernetes services" placeholder="none" />
</div>
<div className="slide four">
<img src={Denial} alt="Access denial control feature in Kanvas service mesh" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/denial.svg" alt="Access denial control feature in Kanvas service mesh" placeholder="none" />
</div>
<div className="slide five">
<img src={Correlate_event} alt="Event correlation view in Kanvas dashboard" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/correlate-event.svg" alt="Event correlation view in Kanvas dashboard" placeholder="none" />
</div>
<div className="slide six">
<img src={Only_wagent} alt="Kanvas only agent monitoring feature for clusters" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/only-wagent.svg" alt="Kanvas only agent monitoring feature for clusters" placeholder="none" />
</div>
<div className="slide seven">
<img src={Node_agent} alt="Kanvas node agent metrics visualization for Kubernetes" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/node-agent.svg" alt="Kanvas node agent metrics visualization for Kubernetes" placeholder="none" />
</div>
<div className="slide eight">
<img src={Single_tenant} alt="Single tenant Kubernetes deployment dashboard in Kanvas" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/single-tenant.svg" alt="Single tenant Kubernetes deployment dashboard in Kanvas" placeholder="none" />
</div>
<div className="slide nine">
<img src={Pre_provison} alt="Kanvas pre-provisioning configuration for Kubernetes clusters" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/pre-provision.svg" alt="Kanvas pre-provisioning configuration for Kubernetes clusters" placeholder="none" />
</div>
<div className="slide ten">
<img src={Circuit_breaker} alt="Circuit breaker monitoring in Kanvas service mesh"/>
<StaticImage src="../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg" alt="Circuit breaker monitoring in Kanvas service mesh" placeholder="none" />
</div>
<div className="slide eleven">
<img src={Retry_deadline} alt="Retry deadline feature in Kanvas observability dashboard" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/retry-deadline.svg" alt="Retry deadline feature in Kanvas observability dashboard" placeholder="none" />
</div>
<div className="slide twelve">
<img src={Singleton} alt="Singleton service pattern visualization in Kanvas" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/singleton.svg" alt="Singleton service pattern visualization in Kanvas" placeholder="none" />
</div>
<div className="slide thirteen">
<img src={Jwt_transformer} alt="JWT transformer process view in Kanvas Kubernetes dashboard" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/jwt.svg" alt="JWT transformer process view in Kanvas Kubernetes dashboard" placeholder="none" />
</div>
<div className="slide fourteen">
<img src={Multicluster} alt="Multi-cluster management view in Kanvas" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/multicluster.svg" alt="Multi-cluster management view in Kanvas" placeholder="none" />
</div>
<div className="slide fifteen">
<img src={Http_metrics} alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" />
<StaticImage src="../../assets/images/kanvas/catalog-card-images/http.svg" alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" placeholder="none" />
</div>
</div>
</div>
Expand Down
9 changes: 4 additions & 5 deletions src/sections/Kanvas/kanvas-modes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useState } from "react";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import designerImage from "../../assets/images/kanvas/KanvasDesignerN.webp";
import visualizerImage from "../../assets/images/kanvas/Kanvas-Operator.webp";

const KanvasModesWrapper = styled.div`
margin-top: 0.1rem;
Expand Down Expand Up @@ -188,7 +187,7 @@ const KanvasModesWrapper = styled.div`
font-size: 1.44rem;
font-weight: normal;
}
img{
.gatsby-image-wrapper{
width: 30rem;
height: auto;
cursor: pointer;
Expand Down Expand Up @@ -270,7 +269,7 @@ const KanvasModes = () => {
</div>
<div className="content">
<h1>Discover and model your cloud native deployments</h1>
<img src={designerImage} alt="Kanvas Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
<StaticImage src="../../assets/images/kanvas/KanvasDesignerN.webp" alt="Kanvas Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
<p>
Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components. Using GitOps? Integrate advanced performance analysis into your pipeline.
</p>
Expand All @@ -283,7 +282,7 @@ const KanvasModes = () => {
</div>
<div className="content">
<h1>Apply patterns and manage many Kubernetes clusters</h1>
<img src={visualizerImage} alt="Kanvas Operator" onClick={() => setVizEnlarged(!vizEnlarged)} className={`visualizer-img ${vizEnlarged ? "big" : "small"}`} />
<StaticImage src="../../assets/images/kanvas/Kanvas-Operator.webp" alt="Kanvas Operator" onClick={() => setVizEnlarged(!vizEnlarged)} className={`visualizer-img ${vizEnlarged ? "big" : "small"}`} />
<p>
Deploy designs, apply patterns, manage and operate your deployments in real-time. Bring all your Kubernetes clusters under a common point of management. Interactively connect to terminal sessions or initiate and search log streams from your containers.
</p>
Expand Down
Loading