Skip to content

feat: enhance Why Kmesh section with icons and improved UI styling #292

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
shubhtrek wants to merge 3 commits into
base: main
Choose a base branch
from
+455 −627
Open

feat: enhance Why Kmesh section with icons and improved UI styling #292

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
202da9d
feat: enhance Why Kmesh section with icons and improved UI styling
kmesh-bot Mar 2, 2026
46767bf
fix: add lucide-react dependency using yarn
shubhtrek May 5, 2026
b264820
fix: resolve lucide-react dependency and use HTTPS for plugin-image-zoom
shubhtrek May 16, 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
10 changes: 7 additions & 3 deletions docs/kmeshctl/kmeshctl_dump.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,21 @@ kmeshctl dump [flags]
### Examples

```bash
# Kernel Native mode:
# Kernel Native mode (table output):
kmeshctl dump <kmesh-daemon-pod> kernel-native

# Dual Engine mode:
# Dual Engine mode (table output):
kmeshctl dump <kmesh-daemon-pod> dual-engine

# Output as raw JSON:
kmeshctl dump <kmesh-daemon-pod> kernel-native -o json
```

### Options

```bash
-h, --help help for dump
-h, --help help for dump
-o, --output string Output format: table or json (default "table")
```

### SEE ALSO
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"clsx": "^2.0.0",
"docusaurus-lunr-search": "^3.6.0",
"docusaurus-plugin-sass": "^0.2.6",
"plugin-image-zoom": "flexanalytics/plugin-image-zoom",
"lucide-react": "^1.16.0",
"plugin-image-zoom": "https://github.com/flexanalytics/plugin-image-zoom.git",
"prism-react-renderer": "^2.3.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
Expand Down
34 changes: 29 additions & 5 deletions src/components/Why/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import React from "react";
import {
Plug,
Rocket,
ArrowDown,
ShieldCheck,
Activity,
Globe
} from "lucide-react";
Comment on lines +2 to +9
import SectionContainer from "../sectionContainer";
import Translate from "@docusaurus/Translate";
import "./index.scss";

const reasons = [
{
title: <Translate>Smooth compatibility</Translate>,
icon: Plug,
content: (
<>
<Translate>Application-transparent Traffic Management.</Translate>
Expand All @@ -18,6 +27,7 @@ const reasons = [
},
{
title: <Translate>High performance</Translate>,
icon: Rocket,
content: (
<>
<Translate>Forwarding latency 60%↓</Translate>
Expand All @@ -28,6 +38,7 @@ const reasons = [
},
{
title: <Translate>Low overhead</Translate>,
icon: ArrowDown,
content: (
<>
<Translate>ServiceMesh data plane overhead 70%↓</Translate>
Expand All @@ -36,6 +47,7 @@ const reasons = [
},
{
title: <Translate>Security Isolation</Translate>,
icon: ShieldCheck,
content: (
<>
<Translate>eBPF Secure Traffic Orchestration</Translate>
Expand All @@ -46,6 +58,7 @@ const reasons = [
},
{
title: <Translate>Full Stack Visualization*</Translate>,
icon: Activity,
content: (
<>
<Translate>E2E observation*</Translate>
Expand All @@ -58,6 +71,7 @@ const reasons = [
},
{
title: <Translate>Open Ecosystem</Translate>,
icon: Globe,
content: <Translate>Support for XDS Protocol Standards</Translate>,
},
];
Expand All @@ -69,12 +83,22 @@ export default function Why() {
<Translate>Why Kmesh</Translate>
</h1>
<div className="reasonBoxContainer">
{reasons.map((item, index) => (
<div key={index} className="reasonBox">
<p className="reasonTitle">{item.title}</p>
<div className="reasonContent">{item.content}</div>
{reasons.map((item, index) => {
const Icon = item.icon;

return(
<div key={index} className="reasonBox">

{/* ICON */}
<div className="reasonIcon">
<Icon />
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The Icon component should be checked for existence before rendering to prevent potential runtime errors if a reason is added without an icon. Additionally, since these icons are decorative, they should be hidden from screen readers using aria-hidden="true".

Suggested change
<Icon />
{Icon && <Icon aria-hidden="true" />}

</div>

<p className="reasonTitle">{item.title}</p>
<div className="reasonContent">{item.content}</div>
</div>
))}
);
})}
</div>
</SectionContainer>
);
Expand Down
84 changes: 68 additions & 16 deletions src/components/Why/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,91 @@
}

.reasonBoxContainer {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 3rem;
gap: 32px;
max-width: 1100px;
width: 100%;
}

.reasonBox {
flex-basis: 33.333%;
padding: 0 15px;
margin-bottom: 2rem;
text-align: center;
padding: 28px 20px;
border-radius: 12px;

border: 1px solid rgba(0, 0, 0, 0.05);
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The border color is currently hardcoded for light mode. To ensure visual consistency in dark mode, consider adding a theme-specific override.

Suggested change
border: 1px solid rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
[data-theme='dark'] & {
border-color: rgba(255, 255, 255, 0.1);
}


max-width: 320px;
margin: 0 auto;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reasonBox:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
Comment on lines +25 to +30
}

/* Dark mode shadow */
[data-theme='dark'] .reasonBox:hover {
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.06);
}

.reasonTitle {
font-size: 1.1rem;
margin-bottom: 10px;
font-weight: bolder;
text-align: center;
margin: 10px 0 8px;
font-size: 1.2rem;
font-weight: 600;
}

.reasonContent {
font-size: 0.9rem;
white-space: pre-wrap;
text-align: center;
font-size: 0.95rem;
line-height: 1.5;
opacity: 0.8;
}

.reasonIcon {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 14px;

width: 56px;
height: 56px;
border-radius: 50%;

background: rgba(0, 0, 0, 0.05);
transition: transform 0.25s ease, background 0.3s ease;

}

.reasonBox:hover .reasonIcon {
transform: scale(1.1);
}

.reasonIcon svg {
width: 36px;
height: 36px;
color: #1a1a1a;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Hardcoded color values should be avoided. Using currentColor or a theme-defined CSS variable ensures the icon color adapts correctly to the surrounding text color and theme changes.

Suggested change
color: #1a1a1a;
color: currentColor;

}

/* Dark mode support */
[data-theme='dark'] .reasonIcon {
background: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .reasonIcon svg {
color: #ffffff;
}

// Responsive styles
@media screen and (max-width: 768px) {
.reasonBox {
flex-basis: 50%;
.reasonBoxContainer {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 480px) {
.reasonBox {
flex-basis: 100%;
.reasonBoxContainer {
grid-template-columns: 1fr;
}
}
Loading