+
+[Salt Lake City, UT] [KubeCon + CloudNativeCon] - November 14th, 2024 – Meshery project, announces Kanvas, a new collaboration platform that is like Google Workspace, but designed for engineering teams.
+
+
+Kanvas is a multi-modal collaboration suite built atop one of the Cloud Native Computing Foundation’s highest velocity open source projects: Meshery. Kanvas’s two modes, Designer and Operator, offer declarative and imperative DevOps workflows, respectively. Both modes provide a visual interface for creating and managing complex cloud native infrastructure, expediting collaborative problem-solving, brainstorming and innovation, engineer onboarding, and auto-documented infrastructure. Importantly, Kanvas helps teams avoid finger-pointing and the blame-game by allowing them to be on the same page - literally.
+
+
+As an extensible, self-service engineering platform with hundreds of technology integrations, supporting multi-cloud and Kubernetes native infrastructure, Meshery is the ideal management platform upon which to build Kanvas’ novel collaboration experience. Meshery has thousands of pre-built components supporting Kubernetes and Cloud services and with over 2,000 contributors, Meshery is the 9th fastest growing CNCF (out of 200+ projects).
+
+
+
+
+Like Figma for engineers, Kanvas users can access Kanvas from any computer with an internet connection and a web browser.
+
+
+#### Feature Highlights:
+
+ Infrastructure as Design : Intuitive drag-and-drop interface for designing and visualizing cloud native infrastructure and general architecture diagrams. Supports Kubernetes and multi-cloud services.Self-Service DevOps : Empowers engineers to create, share, and manage their own environments on demand.Greenfields and Brownfield Infrastructure : Import existing cloud environments to visualize current infrastructure or create a new design from scratch.GitOps Integration : Pull request integration for infrastructure design reviews.Model-Driven characterization of both semantic and non-semantic infrastructure as design components.Policy-driven intelligent inference of infrastructure components and their relationships.Real-Time Collaboration : Work with others on your designs in real-time, making it easier to collaborate and share ideas, while all changes are saved automatically. Design Patterns : A catalog full of ready-made blueprints for common infrastructure and application architectures.Kanvas Spaces : provide a collaborative environment similar to Google Shared Drive, but specifically tailored for cloud-native infrastructure management.Design Reviews : Collaboratively review and provide feedback on designs and prototypes.
+
+
+
VIDEO
+
Birth of Kanvas from Meshery
+
+ Teams and engineering managers for brainstorming, diagramming, wireframing, and interviewing.
+ Platform engineers for underpinning self-service and developer empowerment.
+ Site reliability engineers for curating a catalog of design patterns as a center of excellence.
+ Operators for managing and visualizing infrastructure components.
+ Solution architects designing infrastructure across multiple cloud providers from a single canvas.
+ Developer advocates and educators for facilitating real-time exploration and asynchronous study of any cloud native technology.
+ Developers and product engineers for ease of understanding and design of their application infrastructure.
+ System integrators and consultants for a service provider-grade organization hierarchy, multi-tenant, white-labelable, highly extensible delivery platform.
+
+
+Kanvas Designer is available now in beta as a service or self-hosted solution. Kanvas Operator will be available early next year. Try dragging and dropping your Kubernetes manifest into https://kanvas.new today.
+
+
+
+#### Resources
+
+
+##### About Layer5, Inc.
+
+Our open source and commercial products empower organizations to embrace the power of cloud native with confidence. Layer5's mission is to simplify the adoption and operation of cloud native infrastructure, enabling organizations to innovate faster and engineers to do so collaboratively.
+Layer5’s award-winning open source community has over 10,000 members. For more information, visit
+
+##### About Kanvas
+
+Kanvas is a web-based collaboration tool that allows you to create, review, and operate highly-detailed architecture diagrams of your cloud and cloud infrastructure using a drag-and-drop interface. Kanvas is popular with site reliability engineers, platform engineers, architects, operators, and developers as an enabler of productive, collaborative infrastructure management. Try Kanvas at https://kanvas.new .
+
+
+
\ No newline at end of file
diff --git a/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-color.svg b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-color.svg
new file mode 100644
index 0000000000000..80226d79285bf
--- /dev/null
+++ b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-color.svg
@@ -0,0 +1,20 @@
+
+Cloud Native patterns help you get the most out of any cloud native. Each pattern can be used as a template and is customizable.
diff --git a/src/sections/Counters/index.js b/src/sections/Counters/index.js
index 996065b41063d..7f90f142f3e0d 100644
--- a/src/sections/Counters/index.js
+++ b/src/sections/Counters/index.js
@@ -5,7 +5,7 @@ import Counter from "../../reusecore/Counter";
import CounterSectionWrapper from "./counterSection.style";
-export const URL = "https://meshery.layer5.io/api/performance/results/total";
+export const URL = "https://cloud.layer5.io/api/performance/results/total";
const Counters = () => {
const [performanceCount, setPerformanceCount] = useState(0);
diff --git a/src/sections/FeatureHero/index.js b/src/sections/FeatureHero/index.js
index 9272e37b96d1b..c1081b43df929 100644
--- a/src/sections/FeatureHero/index.js
+++ b/src/sections/FeatureHero/index.js
@@ -36,7 +36,7 @@ const FeatureHero = (props) => {
diff --git a/src/sections/GCP-Diagram/diagram.js b/src/sections/GCP-Diagram/diagram.js
index e84703e10a105..35ab063a05594 100644
--- a/src/sections/GCP-Diagram/diagram.js
+++ b/src/sections/GCP-Diagram/diagram.js
@@ -176,7 +176,7 @@ const Gcp = () => {
Extensive GCP Icon Library
+ Extensive GCP component library
Utilize a vast and continually expanding collection of GCP icons designed for both diagramming and orchestration scenarios. Craft globally comprehensible diagrams that are not only authentic but also aligned with the latest industry standards.
diff --git a/src/sections/GCP-Diagram/index.js b/src/sections/GCP-Diagram/index.js
index fcf310317ea5d..d80ee016860b0 100644
--- a/src/sections/GCP-Diagram/index.js
+++ b/src/sections/GCP-Diagram/index.js
@@ -11,7 +11,7 @@ const GcpDiagramPage = () => {
const { isDark } = useStyledDarkMode();
let data = {
heading: "GCP Orchestration and Diagramming Software",
- sub_heading: "Orchestrate and design Google Cloud Platform architecture diagrams easily with predefined templates and symbols designed for professionals.",
+ sub_heading: "Orchestrate and design Google Cloud Platform architecture diagrams easily with predefined templates designed for professionals.",
image: isDark ? GCPDiagramDark : GCPDiagramDark
};
return (
diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
index 808523911eeea..dc5b61b7e0093 100644
--- a/src/sections/General/Navigation/index.js
+++ b/src/sections/General/Navigation/index.js
@@ -9,7 +9,7 @@ import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
import axios from "axios";
// import smp_dark_text from "../../../assets/images/service-mesh-performance/stacked/smp-dark-text.svg";
// import smp_light_text from "../../../assets/images/service-mesh-performance/stacked/smp-light-text.svg";
-import kanvas_dark from "../../../assets/images/kanvas/icon-only/kanvas-icon-white.svg";
+import kanvas_color from "../../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
import meshery from "../../../assets/images/meshery/icon-only/meshery-logo-light.svg";
import Data from "./utility/menu-items.js";
import ScrollspyMenu from "./utility/ScrollspyMenu.js";
@@ -133,23 +133,23 @@ const Navigation = () => {
{
frontmatter: {
thumbnail: {
- img: meshery,
+ img: kanvas_color,
},
- title: "Meshery, the Cloud Native Manager",
+ title: "Kanvas, collaborative infrastructure management",
},
fields: {
- slug: "/cloud-native-management/meshery",
+ slug: "/cloud-native-management/kanvas",
},
},
{
frontmatter: {
thumbnail: {
- img: kanvas_dark,
+ img: meshery,
},
- title: "Kanvas, collaborative infrastructure management",
+ title: "Meshery, the Cloud Native Manager",
},
fields: {
- slug: "/cloud-native-management/kanvas",
+ slug: "/cloud-native-management/meshery",
},
},
],
@@ -183,7 +183,7 @@ const Navigation = () => {
}
useEffect(() => {
const CLOUD_USER_API =
- "https://meshery.layer5.io/api/identity/users/profile";
+ "https://cloud.layer5.io/api/identity/users/profile";
const fetchData = async () => {
try {
const token = getCookieValue("provider_token");
@@ -347,7 +347,7 @@ const Navigation = () => {
$secondary
className="banner-btn two"
title="Get Started"
- $url="https://meshery.layer5.io/login"
+ $url="https://cloud.layer5.io/login"
$external={true}
/>
@@ -396,7 +396,7 @@ const Navigation = () => {
rel="noreferrer"
target="_blank"
className="drop-item"
- href={`https://meshery.layer5.io/user/${userData.id}`}
+ href={`https://cloud.layer5.io/user/${userData.id}`}
>
-
+
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
index 95a2602ff268a..73c7bc8549cc9 100644
--- a/src/sections/Home/FeaturesContainer/index.js
+++ b/src/sections/Home/FeaturesContainer/index.js
@@ -41,7 +41,7 @@ const FeaturesContainer = () => {
redirectLink: "",
desc: (
- Incorporate AWS and {" "} GCP components into Meshery designs for
+ Incorporate AWS and {" "} GCP components into Kanvas designs for
comprehensive and {" "} intuitive system mapping, documentation, and {" "}
orchestration.
diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index 87a6c545d36c9..c2aff158ba189 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -3,6 +3,7 @@ import styled from "styled-components";
import { useInView } from "react-intersection-observer";
import Button from "../../../reusecore/Button";
import argocd from "../../../collections/integrations/argo-cd/icons/color/argo-cd-color.svg";
+import certmanager from "../../../collections/integrations/cert-manager/icons/color/cert-manager-color.svg";
import cilium from "../../../collections/integrations/cilium/icons/color/cilium-color.svg";
import prometheus from "../../../collections/integrations/prometheus/icons/color/prometheus-color.svg";
import kubernetes from "../../../collections/integrations/kubernetes/icons/color/kubernetes-color.svg";
@@ -11,19 +12,25 @@ import linkerd from "../../../collections/integrations/linkerd/icons/color/linke
import istio from "../../../collections/integrations/istio-base/icons/color/istio-base-color.svg";
import jaeger from "../../../collections/integrations/jaeger/icons/color/jaeger-color.svg";
import envoy from "../../../collections/integrations/envoy/icons/color/envoy-color.svg";
-import kong from "../../../collections/integrations/kong/icons/color/kong-color.svg";
-import grafana from "../../../collections/integrations/grafana-agent-operator/icons/color/grafana-agent-operator-color.svg";
-import docker from "../../../collections/integrations/docker/icons/color/docker-color.svg";
-import opentelemetry from "../../../collections/integrations/opentelemetry-operator/icons/color/opentelemetry-operator-color.svg";
-import kiali from "../../../collections/integrations/kiali-operator/icons/color/kiali-operator-color.svg";
-import knative from "../../../collections/integrations/knative/icons/color/knative-color.svg";
-import dapr from "../../../collections/integrations/dapr/icons/color/dapr-color.svg";
-import fabedge from "../../../collections/integrations/fabedge/icons/color/fabedge-color.svg";
-import amdgpu from "../../../collections/integrations/amd-gpu/icons/color/amd-gpu-color.svg";
-import karmada from "../../../collections/integrations/karmada/icons/color/karmada-color.svg";
-import kubeflow from "../../../collections/integrations/kubeflow/icons/color/kubeflow-color.svg";
-import terraform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
import fluentd from "../../../collections/integrations/fluentd/icons/color/fluentd-color.svg";
+import cloudevents from "../../../collections/integrations/cloudevents/icons/color/cloudevents-color.svg";
+import containerd from "../../../collections/integrations/containerd/icons/color/containerd-color.svg";
+import coredns from "../../../collections/integrations/coredns/icons/color/coredns-color.svg";
+import crio from "../../../collections/integrations/cri-o/icons/color/cri-o-color.svg";
+import etcd from "../../../collections/integrations/etcd-cluster-operator/icons/color/etcd-cluster-operator-color.svg";
+import falco from "../../../collections/integrations/falco/icons/color/falco-color.svg";
+import flux from "../../../collections/integrations/flux/icons/color/flux-color.svg";
+import harbor from "../../../collections/integrations/harbor-operator/icons/color/harbor-operator-color.svg";
+import helm from "../../../collections/integrations/helm-controller/icons/color/helm-controller-color.svg";
+import kubeedge from "../../../collections/integrations/kubegems-edge/icons/color/kubegems-edge-color.svg";
+import opa from "../../../collections/integrations/open-policy-agent-(opa)/icons/color/open-policy-agent-(opa)-color.svg";
+import rook from "../../../collections/integrations/rook/icons/color/rook-color.svg";
+import spiffe from "../../../collections/integrations/spiffe/icons/color/spiffe-color.svg";
+import spire from "../../../collections/integrations/spire/icons/color/spire-color.svg";
+import tuf from "../../../collections/integrations/tuf/icons/color/tuf-color.svg";
+import tikvoperator from "../../../collections/integrations/tikv-operator/icons/color/tikv-operator-color.svg";
+import vitess from "../../../collections/integrations/vitess/icons/color/vitess-color.svg";
+
const ViewsSectionWrapper = styled.div`
@@ -57,7 +64,10 @@ const ViewsSectionWrapper = styled.div`
@media only screen and (max-width: 767px) {
text-align: center;
flex-direction: column-reverse;
+ height: 600px;
+ padding: 0 2%;
}
+
}
.hero-text {
display: flex;
@@ -69,7 +79,13 @@ const ViewsSectionWrapper = styled.div`
max-width: 100%;
justify-content: center;
text-align: center;
+ margin-top: 4rem;
+ }
+ @media only screen and (min-width: 768px) and (max-width: 1100px) {
+ padding-left: 1rem;
}
+
+
}
.hero-image {
@@ -239,31 +255,37 @@ const KanvasVisualizerViews = () => {
const [imageRef] = useInView({ threshold: 0.3 });
const leftColumnItems = [
- { img: prometheus, name: "Prometheus" },
- { img: argocd, name: "Argo CD" },
+ { img: argocd, name: "Argo" },
+ { img: certmanager, name: "Cert Manager" },
{ img: cilium, name: "Cilium" },
- { img: istio, name: "Istio" },
- { img: grafana, name: "Grafana" },
- { img: knative, name: "Knative" },
- { img: docker, name: "Docker" },
+ { img: cloudevents, name: "CloudEvents" },
+ { img: containerd, name: "containerd" },
+ { img: coredns, name: "CoreDNS" },
+ { img: crio, name: "cri-o" },
{ img: envoy, name: "Envoy" },
- { img: karmada, name: "Karmada" },
- { img: amdgpu, name: "AMD GPU" },
- { img: fluentd, name: "Fluentd" }
+ { img: etcd, name: "etcd" },
+ { img: falco, name: "Falco" },
+ { img: fluentd, name: "Fluentd" },
+ { img: flux, name: "Flux" },
+ { img: harbor, name: "Harbor" },
+ { img: helm, name: "Helm" }
];
const rightColumnItems = [
+ { img: istio, name: "Istio" },
+ { img: jaeger, name: "Jaeger" },
+ { img: keda, name: "KEDA" },
+ { img: kubeedge, name: "KubeEdge" },
{ img: kubernetes, name: "Kubernetes" },
- { img: keda, name: "Keda" },
{ img: linkerd, name: "Linkerd" },
- { img: jaeger, name: "Jaeger" },
- { img: kong, name: "Kong" },
- { img: opentelemetry, name: "Opentelemetry" },
- { img: dapr, name: "Dapr" },
- { img: kiali, name: "Kiali" },
- { img: fabedge, name: "FabEdge" },
- { img: kubeflow, name: "Kubeflow" },
- { img: terraform, name: "Terraform" }
+ { img: opa, name: "Open Policy Agent" },
+ { img: prometheus, name: "Prometheus" },
+ { img: rook, name: "Rook" },
+ { img: spiffe, name: "SPIFFE" },
+ { img: spire, name: "SPIRE" },
+ { img: tuf, name: "TUF" },
+ { img: tikvoperator, name: "TiKV" },
+ { img: vitess, name: "Vitess" }
];
const renderColumn = (items, direction) => (
@@ -301,6 +323,7 @@ const KanvasVisualizerViews = () => {
+
Manage your Cloud Native mess
diff --git a/src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js b/src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js
index 9fb6483251f40..1186dbc3d09ee 100644
--- a/src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js
+++ b/src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js
@@ -30,9 +30,9 @@ export default function VisualizerFeatures({ features }) {
-
+
-
Visualize
+
Operate
Learn more
@@ -40,7 +40,7 @@ export default function VisualizerFeatures({ features }) {
-
+
diff --git a/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js b/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
index bdbb6d5ba9381..89fe4d68cd519 100644
--- a/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
+++ b/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
@@ -194,7 +194,7 @@ const KanvasCollaborateBanner = () => {
Collaborate with the team.
- Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.
+ Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.
diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/KanvasMobileSwiper.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/KanvasMobileSwiper.js
index f507a1b1ed504..20947a3195830 100644
--- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/KanvasMobileSwiper.js
+++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/KanvasMobileSwiper.js
@@ -60,7 +60,7 @@ export const KanvasMobileSwiper = () => {
Multi user real time collaboration
- Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one
+ Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one
place.
Multi-user real-time collaboration
- Designer and Visualizer live side-by-side, so all design work, from
+ Designer and Operator live side-by-side, so all design work, from
ideation to operation, can be found in one place.
diff --git a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
index 2d9f0db74702c..4547ee7276225 100644
--- a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
+++ b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
@@ -91,9 +91,9 @@ const KanvasisualizeBanner = () => {
*/}
-
Visualize your infrastructure
+ Operate your infrastructure
See your designs in action. Operate with best practices.
-
{/*
@@ -103,4 +103,4 @@ const KanvasisualizeBanner = () => {
);
};
-export default KanvasisualizeBanner;
\ No newline at end of file
+export default KanvasisualizeBanner;
diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index 7db6233a1e494..23de0cc64ec0f 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -61,13 +61,13 @@ const Kanvas = (props) => {
),
},
{
- title: "Visualizer Mode",
+ title: "Operator Mode",
description:
- "Visualizer 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 Visualizer.",
+ "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: (
),
@@ -144,7 +144,7 @@ const Kanvas = (props) => {
[
{
title: "Bring those ideas to life",
- description: "Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.",
+ description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
imgContent: (
<>
diff --git a/src/sections/Kanvas/kanvas-cta/index.js b/src/sections/Kanvas/kanvas-cta/index.js
index d71129808f899..9c889aa516398 100644
--- a/src/sections/Kanvas/kanvas-cta/index.js
+++ b/src/sections/Kanvas/kanvas-cta/index.js
@@ -3,7 +3,6 @@ import styled from "styled-components";
import { Container } from "../../../reusecore/Layout";
import Locator from "./locator.svg";
-import MesherySurface from "./meshery-surface.svg";
import Button from "../../../reusecore/Button";
const KanvasCTAWrapper = styled.div`
@@ -17,10 +16,6 @@ const KanvasCTAWrapper = styled.div`
margin: 2rem auto;
align-items: center;
- .surface {
- width: 60%;
- min-width: 160px;
- }
.rotate{
animation: coin-rotate 4s ease-in-out infinite alternate;
/* animation-fill-mode: both; */
@@ -59,9 +54,7 @@ const KanvasCTAWrapper = styled.div`
@media screen and (max-width:767px) {
display: block;
- .surface {
- width: 30%;
- }
+
.rotate {
margin: 0 auto 0.25rem;
height: 12rem;
@@ -97,7 +90,6 @@ const KanvasCTA = () => {
-
Kanvas is here!
diff --git a/src/sections/Kanvas/kanvas-cta/locator.svg b/src/sections/Kanvas/kanvas-cta/locator.svg
index b45cef0f2cafd..29c4be1f481b1 100644
--- a/src/sections/Kanvas/kanvas-cta/locator.svg
+++ b/src/sections/Kanvas/kanvas-cta/locator.svg
@@ -1 +1,26 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/sections/Kanvas/kanvas-icon.svg b/src/sections/Kanvas/kanvas-icon.svg
index c51b6d9bb9cfa..80226d79285bf 100644
--- a/src/sections/Kanvas/kanvas-icon.svg
+++ b/src/sections/Kanvas/kanvas-icon.svg
@@ -1 +1,20 @@
-
\ No newline at end of file
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/sections/Kanvas/kanvas-modes.js b/src/sections/Kanvas/kanvas-modes.js
index 782289fde6526..832855b66bb6f 100644
--- a/src/sections/Kanvas/kanvas-modes.js
+++ b/src/sections/Kanvas/kanvas-modes.js
@@ -270,11 +270,11 @@ const KanvasModes = () => {
Apply patterns and manage many Kubernetes clusters
-
setVizEnlarged(!vizEnlarged)} className={vizEnlarged ? "big" : "small"} />
+
setVizEnlarged(!vizEnlarged)} className={vizEnlarged ? "big" : "small"} />
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.
diff --git a/src/sections/Landscape/smi.js b/src/sections/Landscape/smi.js
index 4cbd74187cf06..ee097268120d7 100644
--- a/src/sections/Landscape/smi.js
+++ b/src/sections/Landscape/smi.js
@@ -37,7 +37,7 @@ function SMI_Compatibility() {
const [smiData, setSmiData] = useState(0);
useEffect(() => {
- fetch("https://meshery.layer5.io/api/smi/results/public")
+ fetch("https://cloud.layer5.io/api/smi/results/public")
.then(response => response.json())
// Group by SMI-spec version
.then(results => {
diff --git a/src/sections/Meshery/Features-Col/index.js b/src/sections/Meshery/Features-Col/index.js
index eeec9fb67718f..850ea68f4d76e 100644
--- a/src/sections/Meshery/Features-Col/index.js
+++ b/src/sections/Meshery/Features-Col/index.js
@@ -60,7 +60,7 @@ function getFeatureBlock(feature, index, performanceCount) {
const Features = () => {
const [performanceCount, setPerformanceCount] = useState(0);
- const performanceCountEndpoint = "https://meshery.layer5.io/api/performance/results/total";
+ const performanceCountEndpoint = "https://cloud.layer5.io/api/performance/results/total";
useEffect(() => {
fetch(performanceCountEndpoint)
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
index 27a1f1ad114ad..2ddb301c232db 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
@@ -13,7 +13,7 @@ const CatalogGrid = ({ frontmatter }) => {
const { isDark } = useStyledDarkMode();
useEffect(() => {
- const CLOUD_FETCH_DESIGN = `https://meshery.layer5.io/api/catalog/content/pattern?technology=${
+ const CLOUD_FETCH_DESIGN = `https://cloud.layer5.io/api/catalog/content/pattern?technology=${
technology[technology.length - 1]
}&page=0&pagesize=${designSize}&search=&order=&metrics=true`;
const fetchData = async () => {
@@ -52,7 +52,7 @@ const CatalogGrid = ({ frontmatter }) => {
return (
{
) : isGcpItem ? (
+
+
+
+
\ No newline at end of file
diff --git a/src/sections/Products/images/layer5-products-overview-dark.svg b/src/sections/Products/images/layer5-products-overview-dark.svg
index d00fb50c066a6..147b9ad88a0d0 100644
--- a/src/sections/Products/images/layer5-products-overview-dark.svg
+++ b/src/sections/Products/images/layer5-products-overview-dark.svg
@@ -1 +1,95 @@
-
+
+
+
+
+
diff --git a/src/sections/Products/images/layer5-products-overview.svg b/src/sections/Products/images/layer5-products-overview.svg
index 67cb2939d6cb1..9d215be6d39a4 100644
--- a/src/sections/Products/images/layer5-products-overview.svg
+++ b/src/sections/Products/images/layer5-products-overview.svg
@@ -1,801 +1,94 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/sections/Products/index.js b/src/sections/Products/index.js
index 656fa5b706bfd..40caa00cad8a1 100644
--- a/src/sections/Products/index.js
+++ b/src/sections/Products/index.js
@@ -24,7 +24,7 @@ const options = [
monthlyprice: 0,
yearlyprice: 0,
byline: "Open Source features, plus:",
- button: ["Join for Free", "https://meshery.layer5.io"],
+ button: ["Join for Free", "https://cloud.layer5.io"],
summary: [
{
id: 0,
@@ -212,7 +212,7 @@ const index = () => {
flexibility, elevating operations to new efficiencies.{" "}
-
diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js
new file mode 100644
index 0000000000000..e2ef20c0ed790
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/box/code.js
@@ -0,0 +1,208 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { CodeBlock } from "../button/code-block";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+ `
+
+ This is a Box component with custom background and padding.
+
+ `,
+ `
+
+ This Box is responsive, changing style based on screen size.
+
+ `,
+ `
+
+ This Box is responsive, changing style based on screen size.
+
+ `,
+ `
+ Hover over this Box to see the interactive effect.
+ `,
+];
+
+export const BoxCode = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Box
+
+
+ navigate("/projects/sistent/components/box")}
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/box/guidance")
+ }
+ title="Guidance"
+ />
+ navigate("/projects/sistent/components/box/code")}
+ title="Code"
+ />
+
+
+
+ The Box component is a flexible and foundational
+ container in Sistent, designed to structure and style content. It
+ provides quick access to the theme and CSS utilities, allowing for
+ easy customization and responsive design. Using the sx prop,
+ developers can apply CSS styles directly with theme-aware
+ properties, making Box ideal for layouts, spacing, and other UI
+ adjustments. It can render as any HTML element using the component
+ prop, offering high versatility in both structure and styling.
+
+
+ Basic Box Example
+
+
+ A simple Box component can be used to contain and structure other
+ elements. Here, the Box serves as a basic container without any
+ styling applied.
+
+
+
+
+
+ This is a basic Box component.
+
+
+
+
+
+
+ Styled Box Example
+
+
+ You can add custom styles to a Box component by applying{" "}
+ sx
+ properties. In this example, the Box has a background color,
+ padding, and a defined height.
+
+
+
+
+
+
+ This is a Box component with custom background and padding.
+
+
+
+
+
+
+
+ Responsive Box Example
+
+
+ The Box component also supports responsive styling using the{" "}
+ sx prop. In this example, the Box adjusts its padding
+ and background color based on screen size.
+
+
+
+
+
+
+ This Box is responsive, changing style based on screen size.
+
+
+
+
+
+
+
+ Interactive Box Example
+
+
+ Here’s an example where the Box component includes hover effects to
+ create a more interactive experience. This is useful for buttons,
+ cards, and other clickable elements.
+
+
+
+
+
+
+ Hover over this Box to see the interactive effect.
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/sections/Projects/Sistent/components/box/guidance.js b/src/sections/Projects/Sistent/components/box/guidance.js
new file mode 100644
index 0000000000000..9edf1052df650
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/box/guidance.js
@@ -0,0 +1,179 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Row } from "../../../../../reusecore/Layout";
+import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+export const BoxGuidance = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Box
+
+
+ The Box component is a flexible, theme-aware container that adapts
+ seamlessly across various layouts. It provides a convenient way to
+ apply styles, positioning, and responsive adjustments to content,
+ making it ideal for any layout needs.
+
+
+ navigate("/projects/sistent/components/box")}
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/box/guidance")
+ }
+ title="Guidance"
+ />
+ navigate("/projects/sistent/components/box/code")}
+ title="Code"
+ />
+
+
+
+
+ The Box component is a highly versatile tool that can be used for
+ layout management, spacing, styling, and more. With full support for
+ responsive design, Box is an essential part of any well-structured
+ application, allowing developers to customize and style elements
+ while keeping the theme consistent.
+
+
+
+ Function
+
+
+
The Box component serves several functions:
+
+
Responsive Styling
+
+ The sx prop makes it easy to apply responsive styles
+ directly within the component, allowing for adaptive design that
+ looks great across all screen sizes.
+
+
+
+
+
+ This is a responsive Box component.
+
+
+
+
+
+
Flexible Layout Control
+
+ Box can serve as a container for organizing other elements, whether
+ it's aligning text, images, or interactive components. The
+ flexibility of the Box component allows it to adapt to a wide range
+ of layout needs, from card-style containers to more complex nested
+ structures.
+
+
+
Customizable Appearance
+
+ The Box component’s customization options allow you to adjust
+ colors, borders, shadows, and more through the sx prop,
+ ensuring that components blend well with your app's overall theme.
+
+
+
+
+
+ Customized Box with shadow and color.
+
+
+
+
+
+
+ Use Cases
+
+
+
Nested Layouts
+
+ Use Box to create nested layouts by embedding one Box within
+ another, each with distinct styling. This setup enables the creation
+ of structured and multi-layered designs.
+
+
+
+
+
+ Nested Box layout example.
+
+
+
+
+
+
Utility for Spacing and Margin
+
+ Leveraging Box for margin and padding adjustments offers
+ fine-grained control over spacing between components, making it
+ useful in complex layouts where alignment and spacing are crucial.
+
+
+
Event Handling and State Management
+
+ Box can also be used as an interactive element, handling events and
+ managing state. This makes it ideal for use cases that require
+ dynamic behavior or user interaction.
+
+
+
Responsive Design
+
+ The Box component seamlessly integrates with Sistent’s responsive
+ design principles, providing a cohesive experience across various
+ screen sizes by leveraging breakpoints in the sx prop.
+
+
+
+ );
+};
diff --git a/src/sections/Projects/Sistent/components/box/index.js b/src/sections/Projects/Sistent/components/box/index.js
new file mode 100644
index 0000000000000..bb02738c61228
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/box/index.js
@@ -0,0 +1,133 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Box } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentBox = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Box
+
+
+ The Box component is a versatile, theme-aware container
+ in Sistent, ideal for styling and layout customization. It supports
+ the sx prop for easy, responsive styling and can render as any HTML
+ element.
+
+
+ navigate("/projects/sistent/components/box")}
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/box/guidance")
+ }
+ title="Guidance"
+ />
+ navigate("/projects/sistent/components/box/code")}
+ title="Code"
+ />
+
+
+
+ The Box component is a flexible and foundational
+ container in Sistent, designed to structure and style content. It
+ provides quick access to the theme and CSS utilities, allowing for
+ easy customization and responsive design. Using the sx prop,
+ developers can apply CSS styles directly with theme-aware
+ properties, making Box ideal for layouts, spacing, and other UI
+ adjustments. It can render as any HTML element using the component
+ prop, offering high versatility in both structure and styling.
+
+
+ Usage
+
+
+ The Box component differs from other containers available in Sistent
+ in that its usage is intended to be multipurpose and open-ended,
+ just like a `div`. Components like Container, Stack and
+ Paper, by contrast, feature usage-specific props that make them
+ ideal for certain use cases: Container for main layout orientation,
+ Stack for one-dimensional layouts, and Paper for elevated surfaces.
+
+
Box component
+
+ The Box component renders as a `div` by default, but
+ you can swap in any other valid HTML tag or React component using
+ the component prop. The demo below replaces the `div`
+ with a `section` element:
+
+
+
+
+ This Box renders as an HTML section element.
+
+
+
+
+
+ Customization
+
+
+ The Box component can be styled flexibly with Sistent
+ sxprop and custom themes. The sx prop allows quick
+ application of CSS styles that are theme-aware, enabling responsive
+ and consistent design.
+
+
+
Using the sx Prop
+
+ The sx prop supports a wide range of style properties, including
+ colors, spacing, and responsive adjustments. It directly accesses
+ theme values, allowing you to apply theme-based styles to a Box with
+ minimal code.
+
+
+
+
+
+
+
+ );
+};
+
+export default SistentBox;
diff --git a/src/sections/Projects/Sistent/components/button-group/code.js b/src/sections/Projects/Sistent/components/button-group/code.js
new file mode 100644
index 0000000000000..4b414a557d93f
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/button-group/code.js
@@ -0,0 +1,393 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+ SistentThemeProvider,
+ Button,
+ ButtonGroup,
+ Box,
+} from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { CodeBlock } from "../button/code-block";
+
+const buttons = [
+
One ,
+
Two ,
+
Three ,
+];
+
+const codes = [
+ `
+
+ One
+ Two
+ Three
+
+ `,
+ `
+
+ One
+ Two
+ Three
+
+
+ One
+ Two
+ Three
+
+
+ One
+ Two
+ Three
+
+ `,
+ `
+
+ One
+ Two
+ Three
+
+
+ One
+ Two
+ Three
+
+
+ One
+ Two
+ Three
+
+ `,
+ `
+
+ One
+ Two
+ Three
+
+ `,
+ `
+
+ One
+ Two
+ Three
+
+
+ One
+ Two
+ Three
+
+
+ One
+ Two
+ Three
+
+ `,
+ `
+
+ One
+ Two
+ Three
+
+ `,
+];
+
+const ButtonGroupCode = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Button Group
+
+
+ The ButtonGroup component can be used to group related buttons
+ together. It is a container for multiple buttons that can be used to
+ group buttons together and apply styles to them. This component is
+ useful when you have a group of buttons that need to be styled in a
+ similar way.
+
+
+
+ navigate("/projects/sistent/components/button-group")
+ }
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/button-group/guidance")
+ }
+ title="Guidance"
+ />
+
+ navigate("/projects/sistent/components/button-group/code")
+ }
+ title="Code"
+ />
+
+
+
+ The ButtonGroup component can be used to group related buttons
+ together. It is a container for multiple buttons that can be used to
+ group buttons together and apply styles to them. This component is
+ useful when you have a group of buttons that need to be styled in a
+ similar way.
+
+
+ Basic Usage
+
+
+ The buttons can be grouped by wrapping them with the ButtonGroup
+ component. They need to be immediate children.
+
+
+
+
+
+ {buttons}
+
+
+
+
+
+
+ Button Variant
+
+
+ The ButtonGroup component supports three variants: Filled, Outlined,
+ and Text.
+
+
+
+
+ *": {
+ m: 1,
+ },
+ }}
+ >
+
+ {buttons}
+
+
+ {buttons}
+
+
+ {buttons}
+
+
+
+
+
+
+
+ Vertical Group
+
+
+ The ButtonGroup component can be used to create a vertical group of
+ buttons by setting the vertical prop to true.
+
+
+
+
+ *": {
+ m: 1,
+ },
+ }}
+ >
+
+ {buttons}
+
+
+ {buttons}
+
+
+ {buttons}
+
+
+
+
+
+
+
+ Disable elevation
+
+
+ The ButtonGroup component can be used to create a group of buttons
+ with no elevation by setting the disableElevation prop to true.
+
+
+
+
+
+ {buttons}
+
+
+
+
+
+
+ Sizes
+
+
+ For now, two different sizes of buttons exist: 56px height and 48px
+ height.
+
+
+
+
+ *": {
+ m: 1,
+ },
+ }}
+ >
+
+ {buttons}
+
+
+ {buttons}
+
+
+ {buttons}
+
+
+
+
+
+
+
+ Full Width
+
+
+ The ButtonGroup component can be used to create a group of buttons
+ that take up the full width of the container by setting the
+ fullWidth prop to true.
+
+
+
+
+
+ {buttons}
+
+
+
+
+
+
+
+ );
+};
+
+export default ButtonGroupCode;
diff --git a/src/sections/Projects/Sistent/components/button-group/guidance.js b/src/sections/Projects/Sistent/components/button-group/guidance.js
new file mode 100644
index 0000000000000..bd9ae5122313d
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/button-group/guidance.js
@@ -0,0 +1,134 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+
+const ButtonGroupGuidance = () => {
+ const location = useLocation();
+
+ return (
+
+
+
+ Button Group
+
+
+ The ButtonGroup component can be used to group related buttons
+ together. It is a container for multiple buttons that can be used to
+ group buttons together and apply styles to them. This component is
+ useful when you have a group of buttons that need to be styled in a
+ similar way.
+
+
+
+ navigate("/projects/sistent/components/button-group")
+ }
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/button-group/guidance")
+ }
+ title="Guidance"
+ />
+
+ navigate("/projects/sistent/components/button-group/code")
+ }
+ title="Code"
+ />
+
+
+
+ The ButtonGroup component can be used to group related buttons
+ together. It is a container for multiple buttons that can be used to
+ group buttons together and apply styles to them. This component is
+ useful when you have a group of buttons that need to be styled in a
+ similar way.
+
+
+ Labeling
+
+
+ The ButtonGroup component should be labeled with a heading that
+ describes the group of buttons. This heading should be descriptive
+ and should clearly indicate the purpose of the group of buttons.
+
+
+ Placement
+
+
+ The ButtonGroup component should be placed in a location that is
+ easily accessible to users. It should be placed in a prominent
+ location on the page where users can easily find it. The buttons
+ within the ButtonGroup should be large enough to be easily
+ clickable, and there should be enough space between the buttons to
+ prevent accidental clicks. Additionally, the ButtonGroup should be
+ accessible via keyboard navigation, and screen readers should be
+ able to read the labels of the buttons within the group.
+
+
+ Behavior
+
+
+ The ButtonGroup component should behave in a consistent and
+ predictable manner. When a user clicks on a button within the group,
+ the button should respond visually to indicate that it has been
+ clicked. The ButtonGroup should also provide visual feedback when a
+ user hovers over a button, to indicate that the button is clickable.
+ Additionally, the ButtonGroup should be accessible via keyboard
+ navigation, and screen readers should be able to read the labels of
+ the buttons within the group.
+
+
+ Styling
+
+
+ The ButtonGroup component should be styled in a way that is
+ consistent with the rest of the application. The buttons within the
+ group should be styled in a way that is visually distinct from other
+ buttons on the page, to indicate that they are part of a group. The
+ ButtonGroup should also be styled in a way that is accessible to
+ users with color blindness or low vision. The buttons within the
+ group should have a visible focus state, and the focus should be set
+ to the first button in the group by default.
+
+
+ Accessibility
+
+
+ The ButtonGroup component should be accessible to all users,
+ including those with disabilities. The component should be keyboard
+ navigable, and screen readers should be able to read the labels of
+ the buttons within the group. The buttons within the ButtonGroup
+ should have a visible focus state, and the focus should be set to
+ the first button in the group by default. The ButtonGroup should
+ also be styled in a way that is accessible to users with color
+ blindness or low vision.
+
+
+
+ );
+};
+
+export default ButtonGroupGuidance;
diff --git a/src/sections/Projects/Sistent/components/button-group/index.js b/src/sections/Projects/Sistent/components/button-group/index.js
new file mode 100644
index 0000000000000..3748ff273d087
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/button-group/index.js
@@ -0,0 +1,258 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+ SistentThemeProvider,
+ ButtonGroup,
+ Button,
+ Box,
+} from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const buttons = [
+
One ,
+
Two ,
+
Three ,
+];
+
+const SistentButtonGroup = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Button Group
+
+
+ The ButtonGroup component can be used to group related buttons
+ together. It is a container for multiple buttons that can be used to
+ group buttons together and apply styles to them. This component is
+ useful when you have a group of buttons that need to be styled in a
+ similar way.
+
+
+
+ navigate("/projects/sistent/components/button-group")
+ }
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/button-group/guidance")
+ }
+ title="Guidance"
+ />
+
+ navigate("/projects/sistent/components/button-group/code")
+ }
+ title="Code"
+ />
+
+
+
+ The ButtonGroup component is a container for multiple buttons that
+ can be used to group buttons together and apply styles to them. This
+ component is useful when you have a group of buttons that need to be
+ styled in a similar way. The ButtonGroup component can be used to
+ group related buttons together.
+
+
+ Basic Usage
+
+
+ The buttons can be grouped by wrapping them with the ButtonGroup
+ component. They need to be immediate children.
+
+
+
+
+ {buttons}
+
+
+
+
+ Button variants
+
+
+ The ButtonGroup component supports the following variants: contained
+ (default), outlined, and text.
+
+
+
+ *": {
+ m: 1,
+ },
+ }}
+ >
+
+ {buttons}
+
+
+ {buttons}
+
+
+ {buttons}
+
+
+
+
+
+ Vertical Group
+
+
+ The ButtonGroup component can be used to create a vertical group of
+ buttons by setting the vertical prop to true.
+
+
+
+ *": {
+ m: 1,
+ },
+ }}
+ >
+
+ {buttons}
+
+
+ {buttons}
+
+
+ {buttons}
+
+
+
+
+
+ Disabled elevation
+
+
+ You can remove the elevation with the disableElevation{" "}
+ prop.
+
+
+
+
+ {buttons}
+
+
+
+
+ Sizes
+
+
+ The ButtonGroup component supports the following sizes: small,
+ medium (default), and large.
+
+
+
+ *": {
+ m: 1,
+ },
+ }}
+ >
+
+ {buttons}
+
+
+ {buttons}
+
+
+ {buttons}
+
+
+
+
+
+ Full width
+
+
+ You can make the ButtonGroup full width with the{" "}
+ fullWidth prop.
+
+
+
+
+ {buttons}
+
+
+
+
+
+ );
+};
+
+export default SistentButtonGroup;
diff --git a/src/sections/Projects/Sistent/components/container/code.js b/src/sections/Projects/Sistent/components/container/code.js
new file mode 100644
index 0000000000000..dc55461dd067d
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/container/code.js
@@ -0,0 +1,219 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Container, Box } from "@layer5/sistent";
+import { CodeBlock } from "../button/code-block";
+// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+ `
+
+
+ `,
+
+ `
+
+
+ `,
+
+ `
+
+
+
+`,
+ `
+
+
+
+
+
+ This is a nested container example.
+
+
+
+
+
+`,
+];
+
+export const ContainerCode = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Container
+
+
+
+ navigate("/projects/sistent/components/container")}
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/container/guidance")
+ }
+ title="Guidance"
+ />
+
+ navigate("/projects/sistent/components/container/code")
+ }
+ title="Code"
+ />
+
+
+
+ The Container component is an essential building block for creating
+ layouts. Its ability to center content, provide fluid and fixed
+ widths, and adapt responsively to different screen sizes makes it an
+ invaluable tool for developers. By using the Container effectively,
+ you can ensure that your application maintains a clean and organized
+ appearance while enhancing the user experience.
+
+
+ Fluid Container Example
+
+
+ By default, the Container is fluid, meaning it adjusts its width
+ based on the viewport size. You can control its maximum width by
+ utilizing the maxWidth prop.
+
+
+
+
maxWidth Prop Values
+
+ The maxWidth prop accepts several predefined values, each
+ corresponding to specific breakpoints. Here are the available
+ options:
+
+
+
+ "xs" : This sets the maximum width to the
+ extra-small breakpoint (0px to 600px). The container will not
+ exceed this width, providing a compact layout suitable for
+ mobile devices.
+
+
+ "sm" : The small breakpoint (600px to 960px)
+ ensures that the container expands up to a width of 600px,
+ making it a good choice for tablets and smaller desktops.
+
+
+ "md" : This option sets the maximum width to the
+ medium breakpoint (960px to 1280px). It is useful for standard
+ desktop views while still accommodating smaller devices.
+
+
+ "lg" : The large breakpoint (1280px to 1920px)
+ allows the container to grow larger, up to 1280px, ideal for
+ wide-screen displays and detailed layouts.
+
+
+ "xl" : This sets the maximum width to the
+ extra-large breakpoint (1920px and above). It's particularly
+ beneficial for high-resolution screens where more content can be
+ displayed without feeling cramped.
+
+
+ false : If set to false, the container will have
+ no maximum width constraint, allowing it to stretch the full
+ width of its parent element.
+
+
+
+
+
+
+ Another Example with maxWith = "md"
+
+
+
+
+ Fixed Container Example
+
+
+ If you prefer a fixed width, you can use the fixed prop. This aligns
+ the container's max-width with the minimum width of the current
+ breakpoint, ensuring that your layout remains consistent across
+ different screen sizes
+
+
+
+ Nested Container Example
+
+ A small section on nesting containers, emphasizing best practices.
+
+
+
+
+
+ );
+};
diff --git a/src/sections/Projects/Sistent/components/container/guidance.js b/src/sections/Projects/Sistent/components/container/guidance.js
new file mode 100644
index 0000000000000..6578572a29f9a
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/container/guidance.js
@@ -0,0 +1,164 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Row } from "../../../../../reusecore/Layout";
+import { SistentThemeProvider, Container, Box } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+export const ContainerGuidancePage = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Container
+
+
+ Containers are fundamental layout elements, used to center and
+ structure content horizontally. They can be fluid or fixed, helping
+ maintain alignment across different screen sizes and improving
+ readability.
+
+
+ navigate("/projects/sistent/components/container")}
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/container/guidance")
+ }
+ title="Guidance"
+ />
+
+ navigate("/projects/sistent/components/container/code")
+ }
+ title="Code"
+ />
+
+
+
+ The Container component is an essential building block for creating
+ layouts. Its ability to center content, provide fluid and fixed
+ widths, and adapt responsively to different screen sizes makes it an
+ invaluable tool for developers. By using the Container effectively,
+ you can ensure that your application maintains a clean and organized
+ appearance while enhancing the user experience
+
+
+
+ Function
+
+
+
The Container serves various functions:
+
+
Fluid Container
+
+ A fluid container adapts to the width of its parent element and can
+ have a maximum width set by the maxWidth prop. This is
+ useful for creating responsive layouts that adjust based on screen
+ size.
+
+
+
+
+
+
+ This is a fluid container that adjusts its width based on
+ the screen size.
+
+
+
+
+
+
+
Fixed Container
+
+ A fixed container uses predefined maximum widths based on
+ breakpoints, providing a consistent layout across different screen
+ sizes. This helps maintain a structured design that is visually
+ appealing.
+
+
+
+
+
+
+ This is a fixed container with a max width defined by the
+ current breakpoint
+
+
+
+
+
+
+
Nested Containers
+
+ While nesting containers is possible, it is generally recommended to
+ avoid it unless necessary. Proper use of containers can enhance
+ layout structure without complicating the design.
+
+
+
+
+
+
+
+ This is a nested container example.
+
+
+
+
+
+
+
+
+ Labeling
+
+
+ Container labeling is essential for understanding the layout
+ structure. Use clear and descriptive headings to indicate the
+ purpose of each container.
+
+
+
Use Cases
+
+ Different use cases for containers include wrapping content
+ sections, creating responsive grids, and maintaining consistent
+ padding and margins across various components.
+
+
+
Responsive Design
+
+ Leveraging the container's fluid and fixed properties contributes to
+ a responsive design that provides a seamless user experience across
+ devices of all sizes.
+
+
+
+ );
+};
diff --git a/src/sections/Projects/Sistent/components/container/index.js b/src/sections/Projects/Sistent/components/container/index.js
new file mode 100644
index 0000000000000..03c53dfa0ded1
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/container/index.js
@@ -0,0 +1,126 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Container, Box } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentContainer = () => {
+ const location = useLocation();
+ const { isDark } = useStyledDarkMode();
+
+ return (
+
+
+
+ Container
+
+
+ Containers are fundamental layout elements, used to center and
+ structure content horizontally. They can be fluid or fixed, helping
+ maintain alignment across different screen sizes and improving
+ readability.
+
+
+ navigate("/projects/sistent/components/container")}
+ title="Overview"
+ />
+
+ navigate("/projects/sistent/components/container/guidance")
+ }
+ title="Guidance"
+ />
+
+ navigate("/projects/sistent/components/container/code")
+ }
+ title="Code"
+ />
+
+
+
+ The Container component is an essential building block for creating
+ layouts. Its ability to center content, provide fluid and fixed
+ widths, and adapt responsively to different screen sizes makes it an
+ invaluable tool for developers. By using the Container effectively,
+ you can ensure that your application maintains a clean and organized
+ appearance while enhancing the user experience.
+
+
+ Types of Container
+
+
+ Sistent has two main types of containers that cater to different
+ layout requirements: Fluid Containers and Fixed Containers. Each
+ type serves specific use cases in building responsive web
+ applications.
+
+
1. Fluid Container
+
+ A Fluid Container automatically adjusts its width to fill the
+ available space based on the viewport size. It allows for a
+ responsive layout that adapts to different screen sizes.
+
+
Usage
+
+ Ideal for layouts where you want the content to take full advantage
+ of the available width. The fluid nature of the container ensures
+ that it scales seamlessly across devices, from mobile to desktop.
+
+
+
+
+
+
+
+
+
2. Fixed Container
+
+ A Fixed Container has a predefined width that matches the minimum
+ width of the current breakpoint. This allows for a consistent and
+ controlled layout across different screen sizes.
+
+
Usage
+
+ Suitable for designs that require specific width constraints,
+ ensuring that your content does not stretch too wide on larger
+ screens. This is particularly useful for fixed-width layouts where
+ the visual structure is maintained.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SistentContainer;
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index ca05b2d297927..2c5e401325b81 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -58,7 +58,27 @@ const componentsData = [
"Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
url: "/projects/sistent/components/link",
},
-
+ {
+ id: 8,
+ name: "Container",
+ description:
+ "Containers align and center content, providing responsive layout options for different screen sizes.",
+ url: "/projects/sistent/components/container",
+ },
+ {
+ id: 9,
+ name: "ButtonGroup",
+ description:
+ "ButtonGroup is a component that groups multiple buttons together.",
+ url: "/projects/sistent/components/button-group",
+ },
+ {
+ id: 10,
+ name: "Box",
+ description:
+ "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
+ url: "/projects/sistent/components/box",
+ },
];
const SistentComponents = () => {
@@ -121,7 +141,6 @@ const SistentComponents = () => {
))}
-
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 7deb603dcd3c3..57ef8e728ca46 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -645,6 +645,7 @@ const SistentWrapper = styled.div`
.product_cards .card {
width: 400px;
+ height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -652,6 +653,7 @@ const SistentWrapper = styled.div`
background-color: ${(props) => props.theme.grey212121ToGreyF0F0F0};
padding: 2rem;
}
+
.logo {
max-height: 3rem;
}
@@ -675,14 +677,20 @@ const SistentWrapper = styled.div`
color: ${props => props.theme.text};
}
- .card .text {
- padding-top: 1rem;
- padding-bottom: 2rem;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- color: ${(props) => props.theme.whiteToBlack};
- }
+.card .text {
+ padding-top: 1rem;
+ padding-bottom: 2rem;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ color: ${(props) => props.theme.whiteToBlack};
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-height: calc(1.5rem * 4);
+}
.card {
box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};
diff --git a/src/sections/app.style.js b/src/sections/app.style.js
index c09e589735535..dbff856e861e4 100644
--- a/src/sections/app.style.js
+++ b/src/sections/app.style.js
@@ -174,6 +174,25 @@ section{
position: relative;
}
+ // styling for the searchbox
+ .search-box {
+ input {
+ background-color: ${props => props.theme.shadowDarkColor}!important;
+ color: ${props => props.theme.text};
+ transition: all 450ms ease 0s;
+
+ &:focus {
+ border-color: #fff !important;
+ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
+ }
+ }
+
+ // for the Search Icon
+ svg {
+ color: ${(props) => props.theme.searchIconColor};
+ }
+ }
+
/* Modal styling needs to be applied to the global CSS */
.Modal {
diff --git a/src/sections/gitops/PerformanceManagementPage.js b/src/sections/gitops/PerformanceManagementPage.js
index a4d03c38cbca1..37b2a336dcda8 100644
--- a/src/sections/gitops/PerformanceManagementPage.js
+++ b/src/sections/gitops/PerformanceManagementPage.js
@@ -25,7 +25,7 @@ const PerformanceManagementPage = () => {
Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification
-
+
Verify your workload designs and Kubernetes cluster configurations prior to accepting and merging pull requests.
-
Connect Kanvas to your GitHub repo and see changes pull request-to-pull request
Get snapshots of your infrastructure directly in your PRs
-
diff --git a/src/templates/news-single.js b/src/templates/news-single.js
index ed520e6efb6a2..2a18df86558f8 100644
--- a/src/templates/news-single.js
+++ b/src/templates/news-single.js
@@ -24,6 +24,13 @@ export const query = graphql`
extension
publicURL
}
+ darkthumbnail {
+ childImageSharp {
+ gatsbyImageData(width: 500, layout: CONSTRAINED)
+ }
+ extension
+ publicURL
+ }
}
fields {
slug
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index f4f8e83b9af99..aff46ff5d86f9 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -38,6 +38,9 @@ const lighttheme = {
headingColor: "#111111",
+ // searchbox Icon Color
+ searchIconColor: "#333333",
+
// light slate gray (medium gray)
textColor: "#000000",
shadowColor: "rgba(0, 0, 0, 0.05)",
@@ -267,6 +270,9 @@ export const darktheme = {
headingColor: "#000000",
+ // searchbox icon color
+ searchIconColor: "#FFFFFF",
+
// light slate gray (medium gray)
textColor: "#000000",
shadowColor: "rgba(255, 255, 255, 0.05)",
diff --git a/static/brand/stick-figures.zip b/static/brand/five-mascot-kit.zip
similarity index 100%
rename from static/brand/stick-figures.zip
rename to static/brand/five-mascot-kit.zip
diff --git a/static/brand/kanvas-brand-kit.zip b/static/brand/kanvas-brand-kit.zip
index ed73c07f6d03b..27804c7d6aa97 100644
Binary files a/static/brand/kanvas-brand-kit.zip and b/static/brand/kanvas-brand-kit.zip differ
diff --git a/static/mail/2023/feature-friday.html b/static/mail/2023/feature-friday.html
index 13feb8255f2c1..f2c11b30836b9 100644
--- a/static/mail/2023/feature-friday.html
+++ b/static/mail/2023/feature-friday.html
@@ -493,7 +493,7 @@
Import your WASM Envoy filters into Meshery using the UI or CLI
Publish and clone your WASM Envoy filters in the Meshery Catalog
- Download WASM binaries from Layer5 Cloud
+ Download WASM binaries from Layer5 Cloud
Design and deploy Istio and Envoy dataplanes in Kanvas
Contribute to any of the 7 open source wasm-filters
{
redirectInBrowser: true,
isPermanent: true,
});
+ createRedirect({
+ fromPath: "/cloud-native-management/kanvas/visualize",
+ toPath: "/cloud-native-management/kanvas/operate",
+ redirectInBrowser: true,
+ isPermanent: true,
+ });
+ createRedirect({
+ fromPath: "/kanvas/visualize",
+ toPath: "/cloud-native-management/kanvas/operate",
+ redirectInBrowser: true,
+ isPermanent: true,
+ });
+ createRedirect({
+ fromPath: "/kanvas/operate",
+ toPath: "/cloud-native-management/kanvas/operate",
+ redirectInBrowser: true,
+ isPermanent: true,
+ });
createRedirect({
fromPath: "/resources/cloud-native/hpes-adoption-of-meshery-and-meshmap",
toPath: "/resources/case-study/hpes-adoption-of-meshery-and-meshmap",
diff --git a/package-lock.json b/package-lock.json
index c8255dedc1d03..36db5793f9316 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
"@fullcalendar/interaction": "^6.0.1",
"@fullcalendar/react": "^6.1.8",
"@layer5/meshery-design-embed": "^0.4.0",
- "@layer5/sistent": "^0.14.60",
+ "@layer5/sistent": "^0.14.109",
"@loadable/component": "^5.16.4",
"@mdx-js/mdx": "1.6.22",
"@mdx-js/react": "1.6.22",
@@ -3518,11 +3518,13 @@
}
},
"node_modules/@layer5/sistent": {
- "version": "0.14.93",
- "resolved": "https://registry.npmjs.org/@layer5/sistent/-/sistent-0.14.93.tgz",
- "integrity": "sha512-+J1IkTERVm8A/nJufAmbkA8WnChlyAR+9gM+8l03jXx/lKMmht2gPC2RuM+DHbb1vr9a+xqKiye6IG+GHjcPeg==",
+ "version": "0.14.109",
+ "resolved": "https://registry.npmjs.org/@layer5/sistent/-/sistent-0.14.109.tgz",
+ "integrity": "sha512-aLQhyA2Z/sZ4D87LWv5m3voJdQ5Fpw4WDb4oyNKfhOo8TaE/jp6irj0HvOq4UZFSVXN5gihkft1QOaLQ1xiitw==",
"dependencies": {
- "lodash": "^4.17.21"
+ "js-yaml": "^4.1.0",
+ "lodash": "^4.17.21",
+ "react-share": "^5.1.0"
},
"peerDependencies": {
"@emotion/react": "^11.11.3",
@@ -3534,7 +3536,7 @@
"mui-datatables": "*",
"react": ">=17",
"react-dom": ">=17",
- "xstate": "^5.13.0"
+ "xstate": "^5.18.2"
},
"peerDependenciesMeta": {
"@emotion/react": {
@@ -3560,6 +3562,18 @@
}
}
},
+ "node_modules/@layer5/sistent/node_modules/react-share": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz",
+ "integrity": "sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==",
+ "dependencies": {
+ "classnames": "^2.3.2",
+ "jsonp": "^0.2.1"
+ },
+ "peerDependencies": {
+ "react": "^17 || ^18"
+ }
+ },
"node_modules/@lezer/common": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
@@ -6168,20 +6182,14 @@
"resolved": "https://registry.npmjs.org/@types/yoga-layout/-/yoga-layout-1.9.2.tgz",
"integrity": "sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw=="
},
- "node_modules/@typescript-eslint/eslint-plugin": {
+ "node_modules/@typescript-eslint/type-utils": {
"version": "5.62.0",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
- "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
+ "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
"dependencies": {
- "@eslint-community/regexpp": "^4.4.0",
- "@typescript-eslint/scope-manager": "5.62.0",
- "@typescript-eslint/type-utils": "5.62.0",
+ "@typescript-eslint/typescript-estree": "5.62.0",
"@typescript-eslint/utils": "5.62.0",
"debug": "^4.3.4",
- "graphemer": "^1.4.0",
- "ignore": "^5.2.0",
- "natural-compare-lite": "^1.4.0",
- "semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
@@ -6192,8 +6200,7 @@
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
- "@typescript-eslint/parser": "^5.0.0",
- "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+ "eslint": "*"
},
"peerDependenciesMeta": {
"typescript": {
@@ -6201,26 +6208,30 @@
}
}
},
- "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
- "version": "7.6.3",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
- "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
- "bin": {
- "semver": "bin/semver.js"
- },
+ "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
+ "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
"engines": {
- "node": ">=10"
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
}
},
- "node_modules/@typescript-eslint/parser": {
+ "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
"version": "5.62.0",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
- "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
+ "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
"dependencies": {
- "@typescript-eslint/scope-manager": "5.62.0",
"@typescript-eslint/types": "5.62.0",
- "@typescript-eslint/typescript-estree": "5.62.0",
- "debug": "^4.3.4"
+ "@typescript-eslint/visitor-keys": "5.62.0",
+ "debug": "^4.3.4",
+ "globby": "^11.1.0",
+ "is-glob": "^4.0.3",
+ "semver": "^7.3.7",
+ "tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -6229,22 +6240,19 @@
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
- "peerDependencies": {
- "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
- },
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
- "node_modules/@typescript-eslint/scope-manager": {
+ "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
"version": "5.62.0",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
- "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
+ "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
"dependencies": {
"@typescript-eslint/types": "5.62.0",
- "@typescript-eslint/visitor-keys": "5.62.0"
+ "eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -6254,15 +6262,41 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
- "node_modules/@typescript-eslint/type-utils": {
+ "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
+ "version": "3.4.3",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/eslint"
+ }
+ },
+ "node_modules/@typescript-eslint/type-utils/node_modules/semver": {
+ "version": "7.6.3",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+ "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/@typescript-eslint/utils": {
"version": "5.62.0",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
- "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
+ "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
"dependencies": {
+ "@eslint-community/eslint-utils": "^4.2.0",
+ "@types/json-schema": "^7.0.9",
+ "@types/semver": "^7.3.12",
+ "@typescript-eslint/scope-manager": "5.62.0",
+ "@typescript-eslint/types": "5.62.0",
"@typescript-eslint/typescript-estree": "5.62.0",
- "@typescript-eslint/utils": "5.62.0",
- "debug": "^4.3.4",
- "tsutils": "^3.21.0"
+ "eslint-scope": "^5.1.1",
+ "semver": "^7.3.7"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -6272,15 +6306,26 @@
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
- "eslint": "*"
+ "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+ }
+ },
+ "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
+ "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+ "dependencies": {
+ "@typescript-eslint/types": "5.62.0",
+ "@typescript-eslint/visitor-keys": "5.62.0"
},
- "peerDependenciesMeta": {
- "typescript": {
- "optional": true
- }
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
}
},
- "node_modules/@typescript-eslint/types": {
+ "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
"integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
@@ -6292,7 +6337,7 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
- "node_modules/@typescript-eslint/typescript-estree": {
+ "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
"integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
@@ -6318,54 +6363,7 @@
}
}
},
- "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
- "version": "7.6.3",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
- "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
- "bin": {
- "semver": "bin/semver.js"
- },
- "engines": {
- "node": ">=10"
- }
- },
- "node_modules/@typescript-eslint/utils": {
- "version": "5.62.0",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
- "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
- "dependencies": {
- "@eslint-community/eslint-utils": "^4.2.0",
- "@types/json-schema": "^7.0.9",
- "@types/semver": "^7.3.12",
- "@typescript-eslint/scope-manager": "5.62.0",
- "@typescript-eslint/types": "5.62.0",
- "@typescript-eslint/typescript-estree": "5.62.0",
- "eslint-scope": "^5.1.1",
- "semver": "^7.3.7"
- },
- "engines": {
- "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/typescript-eslint"
- },
- "peerDependencies": {
- "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
- }
- },
- "node_modules/@typescript-eslint/utils/node_modules/semver": {
- "version": "7.6.3",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
- "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
- "bin": {
- "semver": "bin/semver.js"
- },
- "engines": {
- "node": ">=10"
- }
- },
- "node_modules/@typescript-eslint/visitor-keys": {
+ "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
"integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
@@ -6381,7 +6379,7 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
- "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+ "node_modules/@typescript-eslint/utils/node_modules/eslint-visitor-keys": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
@@ -6392,6 +6390,17 @@
"url": "https://opencollective.com/eslint"
}
},
+ "node_modules/@typescript-eslint/utils/node_modules/semver": {
+ "version": "7.6.3",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+ "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -7618,6 +7627,14 @@
"regenerator-runtime": "^0.11.0"
}
},
+ "node_modules/babel-runtime/node_modules/core-js": {
+ "version": "2.6.12",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+ "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+ "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+ "dev": true,
+ "hasInstallScript": true
+ },
"node_modules/babel-runtime/node_modules/regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -9175,12 +9192,14 @@
}
},
"node_modules/core-js": {
- "version": "2.6.12",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
- "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
- "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
- "dev": true,
- "hasInstallScript": true
+ "version": "3.39.0",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+ "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+ "hasInstallScript": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/core-js"
+ }
},
"node_modules/core-js-compat": {
"version": "3.38.1",
@@ -14011,16 +14030,6 @@
"upper-case": "^1.1.1"
}
},
- "node_modules/gatsby-plugin-mdx/node_modules/core-js": {
- "version": "3.38.1",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
- "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
- "hasInstallScript": true,
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/core-js"
- }
- },
"node_modules/gatsby-plugin-mdx/node_modules/dot-case": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz",
@@ -14968,6 +14977,154 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"deprecated": "Use @eslint/object-schema instead"
},
+ "node_modules/gatsby/node_modules/@typescript-eslint/eslint-plugin": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
+ "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+ "dependencies": {
+ "@eslint-community/regexpp": "^4.4.0",
+ "@typescript-eslint/scope-manager": "5.62.0",
+ "@typescript-eslint/type-utils": "5.62.0",
+ "@typescript-eslint/utils": "5.62.0",
+ "debug": "^4.3.4",
+ "graphemer": "^1.4.0",
+ "ignore": "^5.2.0",
+ "natural-compare-lite": "^1.4.0",
+ "semver": "^7.3.7",
+ "tsutils": "^3.21.0"
+ },
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ },
+ "peerDependencies": {
+ "@typescript-eslint/parser": "^5.0.0",
+ "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+ "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+ "engines": {
+ "node": ">= 4"
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/parser": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
+ "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
+ "dependencies": {
+ "@typescript-eslint/scope-manager": "5.62.0",
+ "@typescript-eslint/types": "5.62.0",
+ "@typescript-eslint/typescript-estree": "5.62.0",
+ "debug": "^4.3.4"
+ },
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ },
+ "peerDependencies": {
+ "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/scope-manager": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
+ "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+ "dependencies": {
+ "@typescript-eslint/types": "5.62.0",
+ "@typescript-eslint/visitor-keys": "5.62.0"
+ },
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/types": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
+ "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/typescript-estree": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
+ "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
+ "dependencies": {
+ "@typescript-eslint/types": "5.62.0",
+ "@typescript-eslint/visitor-keys": "5.62.0",
+ "debug": "^4.3.4",
+ "globby": "^11.1.0",
+ "is-glob": "^4.0.3",
+ "semver": "^7.3.7",
+ "tsutils": "^3.21.0"
+ },
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/visitor-keys": {
+ "version": "5.62.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
+ "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
+ "dependencies": {
+ "@typescript-eslint/types": "5.62.0",
+ "eslint-visitor-keys": "^3.3.0"
+ },
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ }
+ },
+ "node_modules/gatsby/node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+ "version": "3.4.3",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/eslint"
+ }
+ },
"node_modules/gatsby/node_modules/acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -15055,16 +15212,6 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
- "node_modules/gatsby/node_modules/core-js": {
- "version": "3.38.1",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
- "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
- "hasInstallScript": true,
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/core-js"
- }
- },
"node_modules/gatsby/node_modules/eslint": {
"version": "7.32.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
diff --git a/package.json b/package.json
index c0e0de30d58cf..11fc528e5674c 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
"@fullcalendar/interaction": "^6.0.1",
"@fullcalendar/react": "^6.1.8",
"@layer5/meshery-design-embed": "^0.4.0",
- "@layer5/sistent": "^0.14.60",
+ "@layer5/sistent": "^0.14.109",
"@loadable/component": "^5.16.4",
"@mdx-js/mdx": "1.6.22",
"@mdx-js/react": "1.6.22",
diff --git a/src/assets/images/stick-figures/SVG/1.svg b/src/assets/images/five/SVG/1.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/1.svg
rename to src/assets/images/five/SVG/1.svg
diff --git a/src/assets/images/stick-figures/SVG/10.svg b/src/assets/images/five/SVG/10.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/10.svg
rename to src/assets/images/five/SVG/10.svg
diff --git a/src/assets/images/stick-figures/SVG/11.svg b/src/assets/images/five/SVG/11.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/11.svg
rename to src/assets/images/five/SVG/11.svg
diff --git a/src/assets/images/stick-figures/SVG/12.svg b/src/assets/images/five/SVG/12.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/12.svg
rename to src/assets/images/five/SVG/12.svg
diff --git a/src/assets/images/stick-figures/SVG/13.svg b/src/assets/images/five/SVG/13.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/13.svg
rename to src/assets/images/five/SVG/13.svg
diff --git a/src/assets/images/stick-figures/SVG/14.svg b/src/assets/images/five/SVG/14.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/14.svg
rename to src/assets/images/five/SVG/14.svg
diff --git a/src/assets/images/stick-figures/SVG/15.svg b/src/assets/images/five/SVG/15.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/15.svg
rename to src/assets/images/five/SVG/15.svg
diff --git a/src/assets/images/stick-figures/SVG/16.svg b/src/assets/images/five/SVG/16.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/16.svg
rename to src/assets/images/five/SVG/16.svg
diff --git a/src/assets/images/stick-figures/SVG/17.svg b/src/assets/images/five/SVG/17.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/17.svg
rename to src/assets/images/five/SVG/17.svg
diff --git a/src/assets/images/stick-figures/SVG/18.svg b/src/assets/images/five/SVG/18.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/18.svg
rename to src/assets/images/five/SVG/18.svg
diff --git a/src/assets/images/stick-figures/SVG/19.svg b/src/assets/images/five/SVG/19.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/19.svg
rename to src/assets/images/five/SVG/19.svg
diff --git a/src/assets/images/stick-figures/SVG/2.svg b/src/assets/images/five/SVG/2.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/2.svg
rename to src/assets/images/five/SVG/2.svg
diff --git a/src/assets/images/stick-figures/SVG/3.svg b/src/assets/images/five/SVG/3.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/3.svg
rename to src/assets/images/five/SVG/3.svg
diff --git a/src/assets/images/stick-figures/SVG/4.svg b/src/assets/images/five/SVG/4.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/4.svg
rename to src/assets/images/five/SVG/4.svg
diff --git a/src/assets/images/stick-figures/SVG/5.svg b/src/assets/images/five/SVG/5.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/5.svg
rename to src/assets/images/five/SVG/5.svg
diff --git a/src/assets/images/stick-figures/SVG/6.svg b/src/assets/images/five/SVG/6.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/6.svg
rename to src/assets/images/five/SVG/6.svg
diff --git a/src/assets/images/stick-figures/SVG/7.svg b/src/assets/images/five/SVG/7.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/7.svg
rename to src/assets/images/five/SVG/7.svg
diff --git a/src/assets/images/stick-figures/SVG/8.svg b/src/assets/images/five/SVG/8.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/8.svg
rename to src/assets/images/five/SVG/8.svg
diff --git a/src/assets/images/stick-figures/SVG/9.svg b/src/assets/images/five/SVG/9.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/9.svg
rename to src/assets/images/five/SVG/9.svg
diff --git a/src/assets/images/stick-figures/SVG/layer5-five-mascot-means-business.gif b/src/assets/images/five/SVG/layer5-five-mascot-means-business.gif
similarity index 100%
rename from src/assets/images/stick-figures/SVG/layer5-five-mascot-means-business.gif
rename to src/assets/images/five/SVG/layer5-five-mascot-means-business.gif
diff --git a/src/assets/images/stick-figures/SVG/layer5-five-mascot-means-business.png b/src/assets/images/five/SVG/layer5-five-mascot-means-business.png
similarity index 100%
rename from src/assets/images/stick-figures/SVG/layer5-five-mascot-means-business.png
rename to src/assets/images/five/SVG/layer5-five-mascot-means-business.png
diff --git a/src/assets/images/stick-figures/SVG/layer5-five-mascot-means-business.svg b/src/assets/images/five/SVG/layer5-five-mascot-means-business.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/layer5-five-mascot-means-business.svg
rename to src/assets/images/five/SVG/layer5-five-mascot-means-business.svg
diff --git a/src/assets/images/stick-figures/SVG/resources-sign.svg b/src/assets/images/five/SVG/resources-sign.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/resources-sign.svg
rename to src/assets/images/five/SVG/resources-sign.svg
diff --git a/src/assets/images/stick-figures/SVG/stick-figures.svg b/src/assets/images/five/SVG/stick-figures.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/stick-figures.svg
rename to src/assets/images/five/SVG/stick-figures.svg
diff --git a/src/assets/images/stick-figures/SVG/team-of-fives.svg b/src/assets/images/five/SVG/team-of-fives.svg
similarity index 100%
rename from src/assets/images/stick-figures/SVG/team-of-fives.svg
rename to src/assets/images/five/SVG/team-of-fives.svg
diff --git a/src/assets/images/stick-figures/meshery-worship.png b/src/assets/images/five/meshery-worship.png
similarity index 100%
rename from src/assets/images/stick-figures/meshery-worship.png
rename to src/assets/images/five/meshery-worship.png
diff --git a/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.png b/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.png
index f14f8054c7347..3c48767e55044 100644
Binary files a/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.png and b/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.png differ
diff --git a/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.svg b/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.svg
index b6a40624d0d2c..32b764d4f3d7d 100644
--- a/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.svg
+++ b/src/assets/images/kanvas/horizontal/kanvas-horizontal-partial-color.svg
@@ -16,22 +16,22 @@