Skip to content

Commit 2699e93

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
authored
Merge branch 'master' into fix/events-image-alignment-v2
2 parents dfd57bb + 916f75e commit 2699e93

File tree

8 files changed

+62
-91
lines changed

8 files changed

+62
-91
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@mui/icons-material": "^7.3.5",
4949
"@mui/material": "^7.3.4",
5050
"@react-icons/all-files": "^4.1.0",
51-
"@sistent/sistent": "^0.18.7",
51+
"@sistent/sistent": "^0.18.8",
5252
"@svgr/webpack": "^8.0.1",
5353
"axios": "^1.13.2",
5454
"babel-plugin-styled-components": "^2.1.4",

‎src/collections/members/bhumika-garg/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ bio: |
1010
Hi, I’m Bhumika Garg, passionate about open-source and cloud-native technologies. My journey with Meshery and the Layer5 community has strengthened my interest in Kubernetes and platform engineering.
1111
Since joining the community, I’ve been contributing to UI improvements and design system enhancements, collaborating with developers worldwide to build better cloud-native experiences. I enjoy creating intuitive and scalable interfaces that simplify complex workflows for developers.
1212
Through open-source collaboration, I continue to learn, grow, and contribute toward building impactful, community-driven solutions.
13+
badges:
14+
- community
1315
status: Active
1416
published: true
1517
---

‎src/collections/members/kavitha-karunakaran/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ layer5: 553a1e19-c2c3-4047-a461-68e98fe93fba
99
location: Bengaluru, Karnataka, India
1010
bio: "Software engineer with 15+ years of experience designing resilient, high-scale backend and infrastructure systems."
1111
status: Active
12+
badges:
13+
- community
1214
published: true
1315
---
1416

‎src/collections/members/yash-mahakal/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ location: Pune , India
1010
bio: "I’m a Computer Engineering student passionate about DevOps and cloud-native technologies, with a strong focus on containerization and infrastructure automation. I enjoy building scalable, production-ready systems using Docker, Kubernetes, Terraform, and AWS. My interests include distributed systems, CI/CD, and designing reliable cloud architectures. As a community speaker, I enjoy sharing insights and learning alongside the ecosystem. My journey with Meshery has been incredibly rewarding, giving me meaningful opportunities to contribute to open source, collaborate globally, and grow both technically and professionally."
1111
status: Active
1212
badges:
13-
- meshery
13+
- community
1414
published: true
1515
---

‎src/sections/Kanvas/index.js‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react";
2+
import { StaticImage } from "gatsby-plugin-image";
23
import KanvasWrapper from "./kanvas.style";
34
import { Container } from "../../reusecore/Layout";
45
import Features from "../../components/Features-carousel";
56
import KanvasModes from "./kanvas-modes";
67
import Catalog from "./kanvas-catalog";
78
import Platform from "./kanvas-platform";
89
import KanvasBanner from "./kanvas_banner";
9-
import designerImage from "../../assets/images/kanvas/KanvasDesigner.webp";
10-
import visualizerImage from "../../assets/images/kanvas/KanvasVisualizer.webp";
1110
import DesignerFeatures from "./FeaturesSection/Design/DesignerFeatures";
1211
import CollaboratorFeatures from "./FeaturesSection/Collaborate/CollaboratorFeatures";
1312
import VisualizerFeatures from "./FeaturesSection/Visualize/VisualizerFeatures";
@@ -28,9 +27,6 @@ import { ReactComponent as Collab2 } from "./FeaturesSection/Collaborate/images/
2827
import { ReactComponent as Collab3 } from "./FeaturesSection/Collaborate/images/collab3-colorMode.svg";
2928
import { ReactComponent as Collab4 } from "./FeaturesSection/Collaborate/images/collab4-colorMode.svg";
3029

31-
import Avatar1 from "./FeaturesSection/Collaborate/images/avatar1.webp";
32-
import Avatar2 from "./FeaturesSection/Collaborate/images/avatar2.webp";
33-
import Avatar3 from "./FeaturesSection/Collaborate/images/avatar3.webp";
3430
import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp";
3531
import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg";
3632
import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg";
@@ -56,12 +52,10 @@ const Kanvas = (props) => {
5652
description:
5753
"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.",
5854
content: (
59-
<img
60-
src={designerImage}
55+
<StaticImage
56+
src="../../assets/images/kanvas/KanvasDesigner.webp"
6157
alt="Designer Mode"
6258
className="designer-img modes-image"
63-
width="100%"
64-
height="auto"
6559
style={{ aspectRatio: "16/9" }}
6660
/>
6761
),
@@ -71,12 +65,10 @@ const Kanvas = (props) => {
7165
description:
7266
"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.",
7367
content: (
74-
<img
75-
src={visualizerImage}
68+
<StaticImage
69+
src="../../assets/images/kanvas/KanvasVisualizer.webp"
7670
alt="Operator Mode"
7771
className="modes-image"
78-
width="100%"
79-
height="auto"
8072
style={{ aspectRatio: "16/9" }}
8173
/>
8274
),
@@ -165,13 +157,13 @@ const Kanvas = (props) => {
165157
description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
166158
imgContent: (
167159
<>
168-
<img
160+
<StaticImage
169161
id="avatar-1"
170-
src={Avatar1}
162+
src="./FeaturesSection/Collaborate/images/avatar1.webp"
171163
alt=""
172-
width="48"
173-
height="48"
174-
style={{ objectFit: "cover" }}
164+
width={48}
165+
height={48}
166+
imgStyle={{ objectFit: "cover" }}
175167
/>
176168
<Collab1 id="collaborate-image1" alt="collaborate-image1" />
177169
</>
@@ -187,13 +179,13 @@ const Kanvas = (props) => {
187179
description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
188180
imgContent: (
189181
<>
190-
<img
182+
<StaticImage
191183
id="avatar-2"
192-
src={Avatar2}
184+
src="./FeaturesSection/Collaborate/images/avatar2.webp"
193185
alt="avatar-2"
194-
width="48"
195-
height="48"
196-
style={{ objectFit: "cover" }}
186+
width={48}
187+
height={48}
188+
imgStyle={{ objectFit: "cover" }}
197189
/>
198190
<Collab2 id="collaborate-image2" alt="collaborate-image2" />
199191
</>
@@ -204,13 +196,13 @@ const Kanvas = (props) => {
204196
description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
205197
imgContent: (
206198
<>
207-
<img
199+
<StaticImage
208200
id="avatar-3"
209-
src={Avatar3}
201+
src="./FeaturesSection/Collaborate/images/avatar3.webp"
210202
alt="avatar-3"
211-
width="48"
212-
height="48"
213-
style={{ objectFit: "cover" }}
203+
width={48}
204+
height={48}
205+
imgStyle={{ objectFit: "cover" }}
214206
/>
215207
<Collab3 id="collaborate-image3" alt="collaborate-image3" />
216208
</>
@@ -225,13 +217,13 @@ const Kanvas = (props) => {
225217
description: "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.",
226218
imgContent: (
227219
<>
228-
<img
220+
<StaticImage
229221
id="avatar-3"
230-
src={Avatar3}
222+
src="./FeaturesSection/Collaborate/images/avatar3.webp"
231223
alt="avatar-3"
232-
width="48"
233-
height="48"
234-
style={{ objectFit: "cover" }}
224+
width={48}
225+
height={48}
226+
imgStyle={{ objectFit: "cover" }}
235227
/>
236228
<Collab4 id="collaborate-image4" alt="collaborate-image4" />
237229
</>

‎src/sections/Kanvas/kanvas-catalog.js‎

Lines changed: 23 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
3-
import Mutual_tls from "../../assets/images/kanvas/catalog-card-images/mutual-tls.svg";
4-
import Retries from "../../assets/images/kanvas/catalog-card-images/retries.svg";
5-
import Traces from "../../assets/images/kanvas/catalog-card-images/traces.svg";
6-
import Denial from "../../assets/images/kanvas/catalog-card-images/denial.svg";
7-
import Correlate_event from "../../assets/images/kanvas/catalog-card-images/correlate-event.svg";
8-
import Only_wagent from "../../assets/images/kanvas/catalog-card-images/only-wagent.svg";
9-
import Node_agent from "../../assets/images/kanvas/catalog-card-images/node-agent.svg";
10-
import Single_tenant from "../../assets/images/kanvas/catalog-card-images/single-tenant.svg";
11-
import Pre_provison from "../../assets/images/kanvas/catalog-card-images/pre-provision.svg";
12-
import Circuit_breaker from "../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg";
13-
import Retry_deadline from "../../assets/images/kanvas/catalog-card-images/retry-deadline.svg";
14-
import Singleton from "../../assets/images/kanvas/catalog-card-images/singleton.svg";
15-
import Jwt_transformer from "../../assets/images/kanvas/catalog-card-images/jwt.svg";
16-
import Multicluster from "../../assets/images/kanvas/catalog-card-images/multicluster.svg";
17-
import Http_metrics from "../../assets/images/kanvas/catalog-card-images/http.svg";
18-
19-
import Design from "../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
20-
21-
22-
23-
import Patterns from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg";
24-
25-
import Models from "../../assets/images/meshery/meshery-logo.svg";
26-
27-
import Opa from "../../assets/images/kanvas/opa.svg";
3+
import { StaticImage } from "gatsby-plugin-image";
284
import { Container } from "../../reusecore/Layout";
295

306
const CatalogWrapper = styled.div`
@@ -121,7 +97,7 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
12197
grid-template-columns: repeat(2, 1fr);
12298
grid-gap: 1em;
12399
padding: 0.5em;
124-
img{
100+
.gatsby-image-wrapper{
125101
max-width:5.6rem;
126102
display:block;
127103
margin: 0 auto;
@@ -232,7 +208,7 @@ h3.containerCaption {
232208
}
233209
234210
#carousel{
235-
img{
211+
.gatsby-image-wrapper{
236212
transition: all .5s ease;
237213
}
238214
}
@@ -344,7 +320,7 @@ h3.containerCaption {
344320
@media screen and (max-width: 680px) {
345321
346322
.svg-cont{
347-
img {
323+
.gatsby-image-wrapper {
348324
width: 4rem;
349325
}
350326
p{
@@ -448,20 +424,20 @@ const Catalog = () => {
448424
{/* Right Section */}
449425
<section className="services svg-cont">
450426
<div>
451-
<img alt="Kanvas dashboard showing service retries in Kubernetes visualization" src={Patterns} />
427+
<StaticImage alt="Kanvas dashboard showing service retries in Kubernetes visualization" src="../../assets/images/service-mesh-patterns/service-mesh-pattern.svg" placeholder="none" />
452428
<p>Cloud Native Patterns</p>
453429
</div>
454430
<div>
455431

456-
<img src={Design} alt="Design logo" />
432+
<StaticImage src="../../assets/images/kanvas/icon-only/kanvas-icon-color.svg" alt="Design logo" placeholder="none" />
457433
<p>Design</p>
458434
</div>
459435
<div>
460-
<img src={Models} alt="Models logo" />
436+
<StaticImage src="../../assets/images/meshery/meshery-logo.svg" alt="Models logo" placeholder="none" />
461437
<p>Models</p>
462438
</div>
463439
<div>
464-
<img alt="OPA policies management illustration in Kanvas service mesh" src={Opa} />
440+
<StaticImage alt="OPA policies management illustration in Kanvas service mesh" src="../../assets/images/kanvas/opa.svg" placeholder="none" />
465441
<p>OPA Policies</p>
466442
</div>
467443
</section>
@@ -473,49 +449,49 @@ const Catalog = () => {
473449
<div className="container">
474450
<div id="carousel">
475451
<div className="slide one">
476-
<img src={Mutual_tls} alt="Kanvas Mutual TLS security feature for Kubernetes workloads" />
452+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/mutual-tls.svg" alt="Kanvas Mutual TLS security feature for Kubernetes workloads" placeholder="none" />
477453
</div>
478454
<div className="slide two">
479-
<img src={Retries} alt="Kanvas dashboard showing service retries in Kubernetes visualization" />
455+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/retries.svg" alt="Kanvas dashboard showing service retries in Kubernetes visualization" placeholder="none" />
480456
</div>
481457
<div className="slide three">
482-
<img src={Traces} alt="Kanvas tracing visualization for distributed Kubernetes services" />
458+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/traces.svg" alt="Kanvas tracing visualization for distributed Kubernetes services" placeholder="none" />
483459
</div>
484460
<div className="slide four">
485-
<img src={Denial} alt="Access denial control feature in Kanvas service mesh" />
461+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/denial.svg" alt="Access denial control feature in Kanvas service mesh" placeholder="none" />
486462
</div>
487463
<div className="slide five">
488-
<img src={Correlate_event} alt="Event correlation view in Kanvas dashboard" />
464+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/correlate-event.svg" alt="Event correlation view in Kanvas dashboard" placeholder="none" />
489465
</div>
490466
<div className="slide six">
491-
<img src={Only_wagent} alt="Kanvas only agent monitoring feature for clusters" />
467+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/only-wagent.svg" alt="Kanvas only agent monitoring feature for clusters" placeholder="none" />
492468
</div>
493469
<div className="slide seven">
494-
<img src={Node_agent} alt="Kanvas node agent metrics visualization for Kubernetes" />
470+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/node-agent.svg" alt="Kanvas node agent metrics visualization for Kubernetes" placeholder="none" />
495471
</div>
496472
<div className="slide eight">
497-
<img src={Single_tenant} alt="Single tenant Kubernetes deployment dashboard in Kanvas" />
473+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/single-tenant.svg" alt="Single tenant Kubernetes deployment dashboard in Kanvas" placeholder="none" />
498474
</div>
499475
<div className="slide nine">
500-
<img src={Pre_provison} alt="Kanvas pre-provisioning configuration for Kubernetes clusters" />
476+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/pre-provision.svg" alt="Kanvas pre-provisioning configuration for Kubernetes clusters" placeholder="none" />
501477
</div>
502478
<div className="slide ten">
503-
<img src={Circuit_breaker} alt="Circuit breaker monitoring in Kanvas service mesh"/>
479+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg" alt="Circuit breaker monitoring in Kanvas service mesh" placeholder="none" />
504480
</div>
505481
<div className="slide eleven">
506-
<img src={Retry_deadline} alt="Retry deadline feature in Kanvas observability dashboard" />
482+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/retry-deadline.svg" alt="Retry deadline feature in Kanvas observability dashboard" placeholder="none" />
507483
</div>
508484
<div className="slide twelve">
509-
<img src={Singleton} alt="Singleton service pattern visualization in Kanvas" />
485+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/singleton.svg" alt="Singleton service pattern visualization in Kanvas" placeholder="none" />
510486
</div>
511487
<div className="slide thirteen">
512-
<img src={Jwt_transformer} alt="JWT transformer process view in Kanvas Kubernetes dashboard" />
488+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/jwt.svg" alt="JWT transformer process view in Kanvas Kubernetes dashboard" placeholder="none" />
513489
</div>
514490
<div className="slide fourteen">
515-
<img src={Multicluster} alt="Multi-cluster management view in Kanvas" />
491+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/multicluster.svg" alt="Multi-cluster management view in Kanvas" placeholder="none" />
516492
</div>
517493
<div className="slide fifteen">
518-
<img src={Http_metrics} alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" />
494+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/http.svg" alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" placeholder="none" />
519495
</div>
520496
</div>
521497
</div>

0 commit comments

Comments
 (0)