Skip to content

fix: make SVG illustrations clickable to navigate to their respective… #8031

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
tejaswiverma121-byte wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: make SVG illustrations clickable to navigate to their respective… #8031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dac390a
fix: make SVG illustrations clickable to navigate to their respective…
tejaswiverma121-byte Oct 5, 2026
4ae30dc
refactor(meshery): keep platform selection logic self-contained and a…
tejaswiverma121-byte Oct 7, 2026
7a5c877
fix(meshery): make SVG illustrations clickable without modifying Logo…
tejaswiverma121-byte Oct 7, 2026
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
207 changes: 141 additions & 66 deletions src/sections/Meshery/Meshery-platforms/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import MesheryLogo from "../../../assets/images/meshery/meshery-logo-complete-white-side.svg";
import { MesheryPlatformsWrapper } from "./MesheryPlatforms.style";
import { Col, Container, Row } from "../../../reusecore/Layout";
Expand All @@ -21,93 +21,104 @@ const supported_platforms = [
{
icon: Apple,
name: "Apple",
docs: "https://docs.meshery.io/installation/mesheryctl/linux-mac",
steps: (
<>
<h2>MacOS User</h2>
<h4>Install on Mac using Homebrew:</h4>
<Code codeString={dedent`brew install mesheryctl
mesheryctl system start`
}
<Code
codeString={dedent`brew install mesheryctl
mesheryctl system start`}
/>
</>
)
),
},
{
icon: Docker,
name: "Docker",
docs: "https://docs.meshery.io/installation/docker",
steps: (
<>
<h2>Docker User</h2>
<Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=docker bash -`
}
<Code
codeString={dedent`curl -L https://meshery.io/install | PLATFORM=docker bash -`}
/>
<h2 style={{ marginTop: "20px" }}>Using mesheryctl</h2>
<Code codeString={dedent`mesheryctl system context create docker --platform docker --set
mesheryctl system start`
}
<Code
codeString={dedent`mesheryctl system context create docker --platform docker --set
mesheryctl system start`}
/>
<h2 style={{ marginTop: "20px" }}>Docker Extension</h2>
<Code codeString={dedent`docker extension install meshery/docker-extension-meshery:stable-latest`
}
<Code
codeString={dedent`docker extension install meshery/docker-extension-meshery:stable-latest`}
/>
</>
)
),
},
{
icon: EKS,
name: "EKS",
docs: "https://docs.meshery.io/installation/kubernetes/eks",
steps: (
<>
<h2>AWS Elastic Kubernetes Service User</h2>
<Code codeString={dedent`mesheryctl system config eks
<Code
codeString={dedent`mesheryctl system config eks
mesheryctl system start`}
/>
</>
)
),
},
{
icon: GKE,
name: "GKE",
docs: "https://docs.meshery.io/installation/kubernetes/gke",
steps: (
<>
<h2>Google Kubernetes Engine User</h2>
<Code codeString={dedent`mesheryctl system config gke --token *PATH_TO_TOKEN*
<Code
codeString={dedent`mesheryctl system config gke --token *PATH_TO_TOKEN*
./generate_kubeconfig_gke.sh cluster-admin-sa-gke default
mesheryctl system start`}
/>
</>
)
),
},
{
icon: Helm,
name: "Helm",
docs: "https://docs.meshery.io/installation/kubernetes/helm",
steps: (
<>
<h2>Helm Chart</h2>
<p>Install on Kubernetes using Helm:</p>
<Code codeString={dedent`helm repo add meshery https://meshery.io/charts/
<Code
codeString={dedent`helm repo add meshery https://meshery.io/charts/
helm install my-meshery meshery/meshery --version 2.1.2`}
/>
<h3 style={{ marginTop: "20px" }}>Using kubectl</h3>
<Code codeString={dedent`kubectl create ns meshery
<h3 style={{ marginTop: "20px" }}>Using kubectl</h3>
<Code
codeString={dedent`kubectl create ns meshery
helm repo add meshery https://meshery.io/charts
helm install meshery meshery/meshery -n meshery`}
/>
</>
)
),
},
{
icon: HomeBrew,
name: "HomeBrew",
docs: "https://docs.meshery.io/installation/mesheryctl/linux-mac",
steps: (
<>
<h2>Brew User</h2>
<h4>Install on Mac or Linux using Homebrew:</h4>
<Code codeString={dedent`brew install mesheryctl
<Code
codeString={dedent`brew install mesheryctl
mesheryctl system start`}
/>
</>
)
),
},
// {
// icon: Kind,
Expand All @@ -125,129 +136,193 @@ const supported_platforms = [
{
icon: Kubernetes,
name: "Kubernetes",
docs: "https://docs.meshery.io/installation/kubernetes",
steps: (
<>
<h2>Kubernetes User</h2>
<Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=kubernetes bash -
mesheryctl system start`
}
<Code
codeString={dedent`curl -L https://meshery.io/install | PLATFORM=kubernetes bash -
mesheryctl system start`}
/>
</>
)
),
},
{
icon: Linux,
name: "Linux",
docs: "https://docs.meshery.io/installation/quick-start",
steps: (
<>
<h3>Install Using Kubernetes</h3>
<Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=kubernetes bash -`}/>
<Code
codeString={dedent`curl -L https://meshery.io/install | PLATFORM=kubernetes bash -`}
/>
<h3 style={{ marginTop: "20px" }}>Install Using Docker</h3>
<Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=docker bash -` }/>
<Code
codeString={dedent`curl -L https://meshery.io/install | PLATFORM=docker bash -`}
/>
</>
)
),
},
{
icon: Minikube,
name: "Minikube",
docs: "https://docs.meshery.io/installation/kubernetes/minikube",
steps: (
<>
<h2>Minikube User</h2>
<Code codeString={dedent`mesheryctl system config minikube -t ~/Downloads/auth.json`
}
<Code
codeString={dedent`mesheryctl system config minikube -t ~/Downloads/auth.json`}
/>
</>
)
),
},
{
icon: AKS,
name: "AKS",
docs: "https://docs.meshery.io/installation/kubernetes/aks",
steps: (
<>
<h2>Azure Kubernetes Service User</h2>
<p>Install mesheryctl and configure Meshery to communicate with AKS.</p>
<Code codeString={dedent`mesheryctl system config aks
mesheryctl system start`
}
<Code
codeString={dedent`mesheryctl system config aks
mesheryctl system start`}
/>
</>
)
),
},
{
icon: WSL2,
name: "WSL2",
docs: "https://docs.meshery.io/installation/mesheryctl/windows",
steps: (
<>
<h2>Windows User</h2>
<p>
Download and unzip mesheryctl from the <a href="https://github.com/layer5io/meshery/releases/">Meshery releases page</a>. Add mesheryctl to your PATH for ease of use. Then, execute:
Download and unzip mesheryctl from the{" "}
<a href="https://github.com/layer5io/meshery/releases/">
Meshery releases page
</a>
. Add mesheryctl to your PATH for ease of use. Then, execute:
</p>
<Code codeString={dedent`mesheryctl system start`}/>
<Code codeString={dedent`mesheryctl system start`} />
</>
)
}
),
},
];

const MesheryPlatforms = () => {
const [currentPlatform, setCurrentPlatform] = useState({});
const [installationStepsHeight,setInstallationStepsHeight] = useState(currentPlatform.name ? "200px" : 0);

const hasSelectedSamePlatform = (index) => currentPlatform.name === supported_platforms[index].name;
const hasSelectedSamePlatform = (index) =>
currentPlatform.name === supported_platforms[index].name;

const changeCurrentPlatformState = (index) => {
if (currentPlatform.name && hasSelectedSamePlatform(index))
const changeCurrentPlatform = (index) => {
if (currentPlatform.name && hasSelectedSamePlatform(index)) {
setCurrentPlatform({});
else
} else {
setCurrentPlatform(supported_platforms[index]);

};

const changeCurrentPlatform = (index) => {
if (currentPlatform.name && !hasSelectedSamePlatform(index)) {
changeCurrentPlatformState(index);
return;
}
setTimeout(() => changeCurrentPlatformState(index), 500);
setInstallationStepsHeight(currentPlatform.name ? 0 : "200px");
};

useEffect(() => {
const handleHashChange = () => {
const hash = window.location.hash.replace("#", "").toLowerCase();
if (!hash) return;

const platform = supported_platforms.find(
(p) =>
p.name.toLowerCase() === hash ||
p.name.toLowerCase().replace(/[^a-z0-9]/g, "") ===
hash.replace(/[^a-z0-9]/g, ""),
);

if (platform) {
setCurrentPlatform(platform);
const section = document.getElementById("getting-started-platforms");
if (section) {
section.scrollIntoView({ behavior: "smooth" });
}
}
};

handleHashChange();
window.addEventListener("hashchange", handleHashChange);
return () => window.removeEventListener("hashchange", handleHashChange);
}, []);

const docsUrl =
currentPlatform.docs || "https://docs.meshery.io/installation/";

const installationStepsHeight = !currentPlatform.name
? 0
: currentPlatform.name === "Docker" ||
currentPlatform.name === "Helm" ||
currentPlatform.name === "Linux"
? "30rem"
: "200px";

return (
<MesheryPlatformsWrapper>
<MesheryPlatformsWrapper id="getting-started-platforms">
<div className="content">
<Row $Hcenter className="step-1">
<p>Start managing cloud native infrastructure easily with a single command. </p>
<h2><span>Step 1:</span> Choose your platform</h2>
<p>
Start managing cloud native infrastructure easily with a single
command.{" "}
</p>
<h2>
<span>Step 1:</span> Choose your platform
</h2>
</Row>
<Row className="supported-platforms">
{supported_platforms.map((platform, index) => (
<Col $xs={6} $sm={4} $md={3} $lg={2} key={platform.name}>
<Button
className={currentPlatform.name && currentPlatform.name === supported_platforms[index].name
? "single-platform single-platform-selected " : "single-platform "}
className={
currentPlatform.name &&
currentPlatform.name === supported_platforms[index].name
? "single-platform single-platform-selected "
: "single-platform "
}
onClick={() => changeCurrentPlatform(index)}
>
<img src={platform.icon} alt={platform.name} />
</Button>
</Col>
))}
</Row>
<Container style={{ transition: "height 0.5s ease-in-out", height: (currentPlatform.name === "Docker" || currentPlatform.name === "Helm" || currentPlatform.name === "Linux" ) ? "30rem" : installationStepsHeight, overflow: "hidden" }}>
<Row className="installation-steps" >
<Container
style={{
transition: "height 0.5s ease-in-out",
height: installationStepsHeight,
overflow: "hidden",
}}
>
<Row className="installation-steps">
{currentPlatform.name && currentPlatform.steps}
</Row>
</Container>
<Row $Hcenter className="step-2">
<Col>
<h2><span>Step 2:</span> Manage your Cloud Native Infra</h2>
<p>There is no step 2. Login and manage cloud native infrastructure! For more detailed instructions, visit <a href="https://docs.meshery.io">Meshery Docs</a></p>
<img src={MesheryLogo} alt="Meshery" className="meshery-logo" />
<h2>
<span>Step 2:</span> Manage your Cloud Native Infra
</h2>
<p>
There is no step 2. Login and manage cloud native infrastructure!
For more detailed instructions, visit{" "}
<a href={docsUrl} target="_blank" rel="noopener noreferrer">
Meshery Docs
</a>
</p>
<a href={docsUrl} target="_blank" rel="noopener noreferrer">
<img src={MesheryLogo} alt="Meshery" className="meshery-logo" />
</a>
</Col>
</Row>
</div>
</MesheryPlatformsWrapper>
);

};

export default MesheryPlatforms;
Loading
Loading