From 82b8f26e4eb192a54f406b7009b15a1818142106 Mon Sep 17 00:00:00 2001 From: Tharun T Date: Sat, 20 Jul 2024 03:40:38 +0530 Subject: [PATCH] prettier: automated run Signed-off-by: Tharun T --- .desktop-lighthouserc.js | 72 +- .devcontainer/README.md | 14 +- .devcontainer/devcontainer.json | 38 +- .eslintrc.js | 119 +- .github/ISSUE_TEMPLATE/blog.md | 10 +- .github/ISSUE_TEMPLATE/bug_report.md | 7 + .github/ISSUE_TEMPLATE/chore_task.md | 5 + .../community_member_profile.md | 1 + .github/ISSUE_TEMPLATE/config.yml | 6 +- .github/ISSUE_TEMPLATE/engagement.md | 5 + .github/ISSUE_TEMPLATE/events.md | 16 +- .github/ISSUE_TEMPLATE/feature_request.md | 10 +- .github/ISSUE_TEMPLATE/framework_discourse.md | 8 + .github/ISSUE_TEMPLATE/landscape.md | 5 +- .github/ISSUE_TEMPLATE/learn_layer5.md | 3 + .github/ISSUE_TEMPLATE/news.md | 4 + .github/ISSUE_TEMPLATE/writing.md | 10 +- .github/PULL_REQUEST_TEMPLATE.md | 9 +- .../actions/comment-preview-on-pr/action.yml | 2 +- .github/config.yml | 31 +- .github/dependabot.yml | 3 +- .github/label-commenter-config.yml | 14 +- .github/labeler.yml | 162 +-- .github/workflows/build-and-deploy-site.yml | 4 +- .github/workflows/build-and-preview-site.yml | 5 +- .github/workflows/labeler.yml | 10 +- .github/workflows/lighthouseci.yml | 4 +- .github/workflows/preview-site.yml | 4 +- .github/workflows/slack.yml | 22 +- .github/workflows/tweet-issue.yml | 61 +- .lighthouserc.js | 70 +- CONTRIBUTING.md | 12 +- GOVERNANCE.md | 3 +- README.md | 11 - .../index.mdx | 4 +- .../index.mdx | 24 +- .../istio/conclusion.mdx | 12 +- .../istio/deploy-an-application.mdx | 45 +- .../istio/expose-services.mdx | 23 +- .../istio/getting-started.mdx | 12 +- .../istio/observability.mdx | 31 +- .../istio/service-security-capabilities.mdx | 102 +- .../istio/traffic-management.mdx | 102 +- ...ebassembly-and-intelligent-data-planes.mdx | 20 +- .../index.mdx | 4 +- .../introduction-to-service-meshes/index.mdx | 40 +- .../istio/circuit-breaking.mdx | 26 +- .../istio/conclusion.mdx | 12 +- .../istio/deploy-an-application.mdx | 47 +- .../istio/expose-services.mdx | 59 +- .../istio/fault-injection.mdx | 24 +- .../istio/getting-started.mdx | 13 +- .../istio/mutual-tls.mdx | 25 +- .../istio/observability.mdx | 28 +- .../istio/routing-and-canary.mdx | 40 +- .../linkerd/conclusion.mdx | 12 +- .../linkerd/dashboard.mdx | 14 +- .../linkerd/debugging.mdx | 14 +- .../linkerd/deploy-an-application.mdx | 14 +- .../linkerd/expose-services.mdx | 10 +- .../linkerd/fault-injection.mdx | 12 +- .../linkerd/getting-started.mdx | 14 +- .../linkerd/observability.mdx | 17 +- .../linkerd/traffic-splitting.mdx | 10 +- context-wrapper.js | 10 +- fonts.css | 180 +-- gatsby-browser.js | 26 +- gatsby-config.js | 287 ++--- gatsby-node.js | 562 ++++---- gatsby-ssr.js | 6 +- onRenderBody.js | 10 +- page-wrapper.js | 10 +- root-wrapper.js | 26 +- src/assets/data/faq/index.js | 494 ++++--- src/assets/data/testimonial/index.js | 100 +- src/assets/data/tutorials/index.js | 250 ++-- src/assets/discuss/css/app.css | 157 +-- src/assets/discuss/css/footer.css | 109 +- src/assets/discuss/html/footer.html | 281 ++-- src/assets/discuss/yml/app.yml | 18 +- src/assets/images/LoadingIcon.js | 8 +- src/assets/images/catalog-icon/catalog.js | 6 +- .../index.mdx | 15 +- .../index.mdx | 84 +- .../index.mdx | 25 +- .../index.mdx | 31 +- .../index.mdx | 69 +- .../index.mdx | 23 +- .../index.mdx | 24 +- .../index.mdx | 173 ++- .../index.mdx | 31 +- .../index.mdx | 79 +- .../index.mdx | 42 +- .../2020-07-03-my-meshy-journey/index.mdx | 17 +- .../index.mdx | 39 +- .../index.mdx | 28 +- .../index.mdx | 25 +- .../index.mdx | 29 +- .../index.mdx | 46 +- .../index.mdx | 22 +- .../index.mdx | 12 +- .../index.mdx | 30 +- .../index.mdx | 32 +- .../2020-09-25-announcing-meshmates/index.mdx | 241 ++-- .../index.mdx | 65 +- .../index.mdx | 49 +- .../MeetTheMaintainer.style.js | 72 +- .../index.mdx | 308 +++-- .../MeshkitMesheryAdapterLib.style.js | 62 +- .../index.mdx | 38 +- .../index.mdx | 121 +- .../MeetTheMaintainer.style.js | 2 +- .../index.mdx | 184 ++- .../index.mdx | 254 ++-- .../BufProtocol.style.js | 18 +- .../2021/2021-04-24-buf-protocols/index.mdx | 83 +- .../index.mdx | 228 ++-- .../index.mdx | 219 +++- .../index.mdx | 4 +- .../index.mdx | 24 +- .../index.mdx | 200 ++- .../index.mdx | 215 +++- .../2021-10-04-ccoss-meshery-event/index.mdx | 29 +- .../index.mdx | 290 ++--- .../index.mdx | 162 ++- .../index.mdx | 212 ++- .../index.mdx | 58 +- .../index.mdx | 98 +- .../index.mdx | 44 +- .../index.mdx | 114 +- .../index.mdx | 152 ++- .../index.mdx | 133 +- .../index.mdx | 205 ++- .../index.mdx | 153 +-- .../2022-05-27-debug-envoy-proxy/index.mdx | 146 ++- .../2022-06-01-perfbytes-podcast/index.mdx | 183 ++- .../perfbytesPodcast.js | 6 +- .../index.mdx | 283 ++-- .../index.mdx | 62 +- .../index.mdx | 86 +- .../index.mdx | 130 +- .../index.mdx | 44 +- .../index.mdx | 118 +- .../index.mdx | 45 +- .../2022/2022-10-19-kubeconna2022/index.mdx | 102 +- .../index.mdx | 46 +- .../2022-12-06-k8s-1.26-release/index.mdx | 65 +- .../index.mdx | 10 +- .../index.mdx | 30 +- .../index.mdx | 48 +- .../blog/2023/05-12-k8s-nodeports/index.mdx | 48 +- .../index.mdx | 112 +- .../MeetTheMeshMate.style.js | 2 +- .../index.mdx | 218 +++- .../index.mdx | 47 +- .../index.mdx | 196 ++- .../index.mdx | 12 +- .../08-21-layer5-badge-program/blog.style.js | 11 +- .../2023/08-21-layer5-badge-program/index.mdx | 304 +++-- .../index.mdx | 82 +- .../index.mdx | 50 +- .../hacktoberfest-2023-post.md | 25 +- .../2023/12-13-k8s-1.29-release/index.mdx | 27 +- .../Load-Generation-Load-Balancing/index.md | 52 +- .../index.mdx | 26 +- .../index.mdx | 58 +- .../index.mdx | 49 +- .../blog/2024/03-20-kubeconeu2024/index.mdx | 267 ++-- .../2024/03-27-models-designs-legos/index.mdx | 224 +++- .../docker-compose-with-meshery.mdx | 63 +- .../mythical-10x-engineer.mdx | 23 +- src/collections/blog/2024/06-13-2024/post.mdx | 6 +- .../index.mdx | 82 +- src/collections/blog/Blog.style.js | 182 +-- src/collections/blog/blog-template/index.mdx | 31 +- src/collections/careers/Career.style.js | 124 +- .../digital-marketing-internship/index.mdx | 184 +-- src/collections/careers/how-to-apply.js | 67 +- .../careers/software-engineer/index.mdx | 164 +-- .../software-engineering-internship/index.mdx | 203 +-- src/collections/careers/ui-engineer/index.mdx | 147 ++- .../ui-visual-designer-internship/index.mdx | 193 +-- .../careers/ui-visual-designer/index.mdx | 198 +-- src/collections/careers/ux-engineer/index.mdx | 196 +-- .../hacktoberfest-2023-docker-ext/index.mdx | 83 +- .../events/2023/hacktoberfest-2023/index.mdx | 78 +- .../events/2024/kubecon-hk/index.mdx | 15 +- .../events/2024/kubecon-na/index.mdx | 14 +- src/collections/events/Event.style.js | 139 +- .../events/IstioCon 2023/index.mdx | 18 +- .../events/Z_event-template/index.mdx | 11 +- src/collections/events/addo/index.mdx | 5 +- .../events/advanced-istio/index.mdx | 7 +- .../events/ccoss-meshery-workshop/index.mdx | 13 +- src/collections/events/ccoss2020/index.mdx | 4 +- src/collections/events/cnfc-day/index.mdx | 4 +- .../events/devconf-2022-measure-smp/index.mdx | 34 +- .../events/devops-and-docker-live/index.mdx | 12 +- .../index.mdx | 54 +- .../index.mdx | 35 +- ...ing-talk-in-a-dedicated-community-room.mdx | 14 +- .../lightning-talk-on-the-main-stage.mdx | 13 +- .../events/dockercon-live/index.mdx | 14 +- .../index.mdx | 21 +- .../events/hacktoberfest-2022/index.mdx | 44 +- .../index.mdx | 19 +- src/collections/events/innotech/index.mdx | 5 +- .../events/introduction-to-istio/index.mdx | 9 +- .../index.mdx | 22 +- src/collections/events/istiocon2020/index.mdx | 55 +- .../events/kcd-chennai-2023/index.mdx | 13 +- .../index.mdx | 19 +- .../events/kubecon-EU-2023/index.mdx | 14 +- .../events/kubecon-EU-2024/index.mdx | 21 +- .../events/kubecon-NA-2020/index.mdx | 4 +- .../events/kubecon-NA-2023/index.mdx | 8 +- .../events/kubecon-china-2021/index.mdx | 236 ++-- .../events/kubecon-eu-2020/index.mdx | 4 +- .../events/kubecon-eu-2021/index.mdx | 70 +- .../events/kubecon-eu-2022/index.mdx | 13 +- .../events/kubecon-na-2022/index.mdx | 46 +- .../events/kubecon2021-na-meshery/index.mdx | 15 +- .../events/kubecon2021-na-smp/index.mdx | 16 +- .../events/maitainers-circle-2023/index.mdx | 6 +- .../index.mdx | 77 +- .../events/meshery-the-multi-mesh/index.mdx | 11 +- .../index.mdx | 11 +- src/collections/events/ois2020/index.mdx | 5 +- .../events/securing-the-mesh/index.mdx | 19 +- .../service-meshes-but-at-what-cost/index.mdx | 19 +- .../events/servicemeshcon-EU-2022/index.mdx | 37 +- .../events/servicemeshcon-NA-2020/index.mdx | 4 +- .../events/servicemeshcon-NA-2021/index.mdx | 26 +- .../integrations/aad-pod-identity/index.mdx | 13 +- .../integrations/accurate/index.mdx | 12 +- .../actions-runner-controller/index.mdx | 13 +- .../admin-console-operator/index.mdx | 14 +- src/collections/integrations/akri/index.mdx | 14 +- .../integrations/aks-appgw-fe/index.mdx | 14 +- .../integrations/ambassador/index.mdx | 14 +- .../integrations/amd-gpu/index.mdx | 13 +- src/collections/integrations/antrea/index.mdx | 17 +- .../index.mdx | 18 +- .../integrations/aperture-agent/index.mdx | 1 + .../aperture-controller/index.mdx | 15 +- .../apisix-ingress-controller/index.mdx | 14 +- src/collections/integrations/apisix/index.mdx | 13 +- .../integrations/appmesh-controller/index.mdx | 12 +- .../integrations/argo-cd/index.mdx | 14 +- .../integrations/argo-workflows/index.mdx | 14 +- .../integrations/argocd-operator/index.mdx | 13 +- .../armory-spinnaker-operator/index.mdx | 13 +- .../integrations/artifact-hub/index.mdx | 36 +- src/collections/integrations/athenz/index.mdx | 35 +- .../aws-api-gateway-operator/index.mdx | 13 +- .../aws-apigatewayv2-controller/index.mdx | 1 + .../index.mdx | 14 +- .../aws-cloudfront-controller/index.mdx | 13 +- .../aws-cloudtrail-controller/index.mdx | 13 +- .../aws-cloudwatch-controller/index.mdx | 12 +- .../aws-cloudwatchlogs-controller/index.mdx | 13 +- .../aws-documentdb-controller/index.mdx | 14 +- .../aws-dynamodb-controller/index.mdx | 13 +- .../integrations/aws-ec2-controller/index.mdx | 14 +- .../integrations/aws-ecr-controller/index.mdx | 13 +- .../integrations/aws-ecs-controller/index.mdx | 14 +- .../integrations/aws-efs-controller/index.mdx | 13 +- .../integrations/aws-eks-controller/index.mdx | 15 +- .../aws-elasticache-controller/index.mdx | 13 +- .../index.mdx | 13 +- .../aws-emrcontainers-controller/index.mdx | 13 +- .../aws-eventbridge-controller/index.mdx | 13 +- .../integrations/aws-iam-controller/index.mdx | 13 +- .../aws-kinesis-controller/index.mdx | 14 +- .../integrations/aws-kms-controller/index.mdx | 13 +- .../aws-lambda-controller/index.mdx | 13 +- .../aws-load-balancer-controller/index.mdx | 1 + .../aws-memorydb-controller/index.mdx | 14 +- .../integrations/aws-mq-controller/index.mdx | 14 +- .../aws-node-termination-handler-2/index.mdx | 1 + .../index.mdx | 15 +- .../integrations/aws-rds-controller/index.mdx | 13 +- .../aws-route53-controller/index.mdx | 13 +- .../aws-route53resolver-controller/index.mdx | 14 +- .../integrations/aws-s3-controller/index.mdx | 13 +- .../aws-sagemaker-controller/index.mdx | 13 +- .../aws-secretsmanager-controller/index.mdx | 13 +- .../integrations/aws-sfn-controller/index.mdx | 13 +- .../integrations/aws-sns-controller/index.mdx | 14 +- .../aws-target-group-binding/index.mdx | 13 +- .../integrations/aws-vpc-cni/index.mdx | 1 + src/collections/integrations/aws/index.mdx | 14 +- .../integrations/awx-operator/index.mdx | 15 +- .../integrations/azureorkestra/index.mdx | 13 +- .../integrations/backstage/index.mdx | 36 +- src/collections/integrations/bfe/index.mdx | 36 +- .../integrations/brigade/index.mdx | 40 +- .../integrations/buildpacks/index.mdx | 36 +- .../integrations/camel-k/index.mdx | 21 +- .../integrations/capsule-proxy/index.mdx | 14 +- .../integrations/cass-operator/index.mdx | 14 +- .../cd-pipeline-operator/index.mdx | 13 +- src/collections/integrations/cdk8s/index.mdx | 35 +- .../integrations/cert-manager-crds/index.mdx | 35 +- .../cert-manager-csi-driver-cacerts/index.mdx | 13 +- .../integrations/cert-manager/index.mdx | 35 +- .../integrations/chaos-mesh/index.mdx | 14 +- src/collections/integrations/chaos/index.mdx | 13 +- src/collections/integrations/cilium/index.mdx | 36 +- .../integrations/clickhouse/index.mdx | 13 +- .../integrations/cloudevents/index.mdx | 36 +- .../integrations/cloudnative-pg/index.mdx | 14 +- .../cluster-api-provider-openstack/index.mdx | 35 +- .../integrations/clusterpedia/index.mdx | 35 +- .../cockroachdb-operator/index.mdx | 17 +- .../confidential-containers/index.mdx | 35 +- src/collections/integrations/consul/index.mdx | 35 +- .../integrations/containerd/index.mdx | 36 +- .../integrations/containerssh/index.mdx | 37 +- .../integrations/contour-operator/index.mdx | 14 +- .../integrations/contrail-analytics/index.mdx | 13 +- .../integrations/coredns/index.mdx | 36 +- src/collections/integrations/cortex/index.mdx | 36 +- .../couchbase-monitor-stack/index.mdx | 12 +- .../integrations/couchbase-operator/index.mdx | 14 +- src/collections/integrations/cpx/index.mdx | 37 +- src/collections/integrations/cri-o/index.mdx | 36 +- .../crossplane-provider-openstack/index.mdx | 13 +- .../integrations/crossplane/index.mdx | 36 +- src/collections/integrations/cubefs/index.mdx | 36 +- .../integrations/curiefense/index.mdx | 36 +- src/collections/integrations/dapr/index.mdx | 13 +- .../integrations/datadog-operator/index.mdx | 14 +- .../integrations/devfile/index.mdx | 36 +- .../integrations/devstream/index.mdx | 36 +- src/collections/integrations/dex/index.mdx | 36 +- .../integrations/distribution/index.mdx | 36 +- src/collections/integrations/docker/index.mdx | 39 +- .../integrations/dragonfly/index.mdx | 35 +- .../edp-argocd-operator/index.mdx | 13 +- .../edp-component-operator/index.mdx | 13 +- .../integrations/edp-install/index.mdx | 14 +- src/collections/integrations/eks/index.mdx | 35 +- .../elasticsearch-operator/index.mdx | 14 +- .../integrations/emissary-ingress/index.mdx | 36 +- src/collections/integrations/envoy/index.mdx | 36 +- .../etcd-cluster-operator/index.mdx | 14 +- .../external-secrets-operator/index.mdx | 13 +- .../integrations/fabedge/index.mdx | 36 +- src/collections/integrations/falco/index.mdx | 36 +- .../integrations/flagger/index.mdx | 14 +- .../integrations/fluent-operator/index.mdx | 13 +- .../integrations/fluentbit-operator/index.mdx | 13 +- .../integrations/fluentbit-skt/index.mdx | 13 +- .../integrations/fluentd-operator/index.mdx | 14 +- .../integrations/fluentd/index.mdx | 14 +- src/collections/integrations/flux/index.mdx | 36 +- .../integrations/flyte-sandbox/index.mdx | 14 +- src/collections/integrations/fonio/index.mdx | 36 +- .../integrations/gatekeeper/index.mdx | 17 +- src/collections/integrations/gcp/index.mdx | 14 +- .../integrations/gerrit-operator/index.mdx | 18 +- .../github-actions-runner-operator/index.mdx | 14 +- .../github-actions-runners/index.mdx | 14 +- src/collections/integrations/github/index.mdx | 40 +- .../integrations/gitlab-controller/index.mdx | 36 +- .../gitlab-runner-operator/index.mdx | 14 +- src/collections/integrations/gitlab/index.mdx | 13 +- .../grafana-agent-operator/index.mdx | 15 +- .../integrations/grafana-agent/index.mdx | 14 +- .../integrations/grafana-operator/index.mdx | 15 +- .../integrations/grafana-ui-server/index.mdx | 15 +- .../integrations/harbor-operator/index.mdx | 16 +- .../integrations/helm-controller/index.mdx | 19 +- src/collections/integrations/hexa/index.mdx | 35 +- .../integrations/hybridnet/index.mdx | 2 +- .../integrations/identity-manager/index.mdx | 13 +- .../integrations/in-toto/index.mdx | 36 +- .../inclavare-containers/index.mdx | 35 +- .../integrations/ingress-azure/index.mdx | 14 +- .../integrations/inlets-operator/index.mdx | 13 +- .../intel-device-plugins-operator/index.mdx | 13 +- .../integrations/istio-base/index.mdx | 14 +- .../integrations/istio-operator/index.mdx | 14 +- .../istio-ratelimit-operator/index.mdx | 14 +- .../integrations/jaeger-operator/index.mdx | 14 +- src/collections/integrations/jaeger/index.mdx | 36 +- .../integrations/jenkins-operator/index.mdx | 14 +- .../jira-service-desk-operator/index.mdx | 13 +- src/collections/integrations/jitsi/index.mdx | 13 +- src/collections/integrations/k3s/index.mdx | 31 +- src/collections/integrations/k8gb/index.mdx | 36 +- .../k8s-config-connector/index.mdx | 2 + .../k8svault-controller/index.mdx | 13 +- .../integrations/kanister-operator/index.mdx | 15 +- .../integrations/karmada/index.mdx | 36 +- .../integrations/karpenter/index.mdx | 14 +- src/collections/integrations/katib/index.mdx | 13 +- .../integrations/keda-http-scaler/index.mdx | 13 +- src/collections/integrations/keda/index.mdx | 13 +- .../integrations/keycloak-operator/index.mdx | 14 +- .../integrations/keylime/index.mdx | 35 +- .../integrations/kiali-operator/index.mdx | 14 +- .../integrations/knative-serving/index.mdx | 15 +- .../integrations/knative/index.mdx | 15 +- .../integrations/kommander/index.mdx | 14 +- .../integrations/kong-mesh/index.mdx | 13 +- src/collections/integrations/kong/index.mdx | 11 +- .../integrations/kube-arangodb/index.mdx | 13 +- .../kube-prometheus-stack/index.mdx | 14 +- .../integrations/kube-prometheus/index.mdx | 14 +- .../integrations/kube-rs/index.mdx | 36 +- .../integrations/kube-ui-server/index.mdx | 13 +- .../integrations/kubedb-catalog/index.mdx | 13 +- .../integrations/kubedb-crds/index.mdx | 13 +- .../kubedb-grafana-dashboards/index.mdx | 13 +- .../integrations/kubedb-metrics/index.mdx | 13 +- .../integrations/kubedb-ops-manager/index.mdx | 13 +- .../integrations/kubedb-opscenter/index.mdx | 13 +- .../integrations/kubedb-ui-server/index.mdx | 13 +- src/collections/integrations/kubedb/index.mdx | 13 +- src/collections/integrations/kubedl/index.mdx | 36 +- .../integrations/kubeflow/index.mdx | 13 +- .../kubeform-provider-aws/index.mdx | 16 +- .../integrations/kubegems-edge/index.mdx | 14 +- .../integrations/kubegems-installer/index.mdx | 14 +- .../integrations/kubegems-local/index.mdx | 14 +- .../integrations/kubegems-models/index.mdx | 14 +- .../integrations/kubegems/index.mdx | 14 +- .../integrations/kuberhealthy/index.mdx | 36 +- .../integrations/kubernetes-ingress/index.mdx | 13 +- .../kubernetes-secret-generator/index.mdx | 14 +- .../integrations/kubernetes/index.mdx | 13 +- .../integrations/kubeslice-worker/index.mdx | 14 +- .../integrations/kubesphere/index.mdx | 33 +- .../integrations/kubevault-catalog/index.mdx | 14 +- .../integrations/kubevault-crds/index.mdx | 13 +- .../integrations/kubevault-metrics/index.mdx | 13 +- .../integrations/kubevault-operator/index.mdx | 13 +- .../integrations/kubevault/index.mdx | 14 +- .../integrations/kubevela/index.mdx | 32 +- .../integrations/kubevirt/index.mdx | 36 +- src/collections/integrations/kuma/index.mdx | 13 +- src/collections/integrations/kured/index.mdx | 35 +- .../integrations/kusk-gateway/index.mdx | 13 +- .../integrations/kyverno-monitor/index.mdx | 14 +- .../integrations/kyverno-operator/index.mdx | 14 +- .../integrations/kyverno/index.mdx | 14 +- .../integrations/linkerd/index.mdx | 36 +- src/collections/integrations/linux/index.mdx | 37 +- .../integrations/litmus-core/index.mdx | 14 +- .../loki-simple-scalable/index.mdx | 14 +- src/collections/integrations/loki/index.mdx | 14 +- .../integrations/longhorn/index.mdx | 36 +- .../mattermost-operator/index.mdx | 18 +- .../integrations/meshery-core/index.mdx | 14 +- .../integrations/metallb/index.mdx | 36 +- .../integrations/metrics-server/index.mdx | 27 +- .../integrations/mimir-distributed/index.mdx | 16 +- .../integrations/minio-operator/index.mdx | 17 +- .../integrations/mpi-operator/index.mdx | 14 +- .../integrations/mysql-operator/index.mdx | 15 +- .../integrations/nats-operator/index.mdx | 14 +- .../integrations/newrelic-operator/index.mdx | 14 +- .../integrations/nginx-ingress/index.mdx | 13 +- .../integrations/nginx-service-mesh/index.mdx | 13 +- src/collections/integrations/nginx/index.mdx | 31 +- .../nirmata-aws-adapter/index.mdx | 14 +- .../nirmata-venafi-adapter/index.mdx | 13 +- .../integrations/nocalhost/index.mdx | 36 +- src/collections/integrations/notary/index.mdx | 36 +- .../integrations/ondat-operator/index.mdx | 13 +- .../open-cluster-management/index.mdx | 36 +- .../open-policy-agent-(opa)/index.mdx | 36 +- .../integrations/open-service-mesh/index.mdx | 13 +- .../integrations/openebs/index.mdx | 13 +- .../integrations/openelb/index.mdx | 14 +- .../integrations/openfeature/index.mdx | 34 +- .../integrations/opengitops/index.mdx | 36 +- .../integrations/openkruise/index.mdx | 36 +- .../integrations/openmetrics/index.mdx | 36 +- .../opentelemetry-operator/index.mdx | 14 +- .../integrations/operator-framework/index.mdx | 35 +- src/collections/integrations/oras/index.mdx | 35 +- src/collections/integrations/parsec/index.mdx | 36 +- src/collections/integrations/pg-db/index.mdx | 14 +- .../integrations/pg-operator/index.mdx | 12 +- src/collections/integrations/pgo/index.mdx | 17 +- .../integrations/piraeus-datastore/index.mdx | 13 +- src/collections/integrations/pixie/index.mdx | 36 +- src/collections/integrations/porter/index.mdx | 14 +- .../postgres-controller/index.mdx | 14 +- .../integrations/postgres-operator/index.mdx | 14 +- .../postgres-with-operator/index.mdx | 14 +- .../integrations/posthog/index.mdx | 14 +- .../integrations/pravega/index.mdx | 36 +- .../prometheus-operator-crds/index.mdx | 36 +- .../integrations/prometheus/index.mdx | 36 +- src/collections/integrations/ps-db/index.mdx | 14 +- .../integrations/ps-operator/index.mdx | 13 +- .../integrations/psmdb-db/index.mdx | 36 +- .../integrations/psmdb-operator/index.mdx | 13 +- .../integrations/pulsar-operator/index.mdx | 16 +- .../pulsar-resources-operator/index.mdx | 16 +- .../rabbitmq-cluster-operator/index.mdx | 14 +- .../integrations/rabbitmq-operator/index.mdx | 14 +- .../integrations/redis-operator/index.mdx | 14 +- src/collections/integrations/rook/index.mdx | 36 +- .../integrations/saferwall/index.mdx | 13 +- .../integrations/scheduler-plugins/index.mdx | 13 +- .../integrations/schemahero/index.mdx | 34 +- .../security-role-perm-operator-svc/index.mdx | 13 +- .../serverless-workflow/index.mdx | 36 +- .../integrations/sidekick/index.mdx | 14 +- .../integrations/skooner/index.mdx | 36 +- .../integrations/slack-operator/index.mdx | 14 +- .../integrations/solr-operator/index.mdx | 14 +- src/collections/integrations/spiffe/index.mdx | 44 +- src/collections/integrations/spire/index.mdx | 19 +- .../integrations/stackgres-operator/index.mdx | 15 +- .../strimzi-kafka-operator/index.mdx | 36 +- .../strimzi-registry-operator/index.mdx | 14 +- .../integrations/submariner/index.mdx | 35 +- .../integrations/supabase/index.mdx | 13 +- .../integrations/superedge/index.mdx | 36 +- .../integrations/telepresence/index.mdx | 36 +- src/collections/integrations/teller/index.mdx | 36 +- .../integrations/terraform/index.mdx | 12 +- .../integrations/thanos-operator/index.mdx | 12 +- src/collections/integrations/thanos/index.mdx | 34 +- .../integrations/tikv-operator/index.mdx | 35 +- .../integrations/tinkerbell/index.mdx | 36 +- src/collections/integrations/tremor/index.mdx | 36 +- .../integrations/trickster/index.mdx | 14 +- src/collections/integrations/tuf/index.mdx | 36 +- .../integrations/vald-helm-operator/index.mdx | 14 +- src/collections/integrations/vald/index.mdx | 14 +- .../vault-config-operator/index.mdx | 14 +- .../integrations/vault-operator/index.mdx | 14 +- .../integrations/vault-secrets/index.mdx | 14 +- .../integrations/vela-workflow/index.mdx | 14 +- .../velero-s3-deployment/index.mdx | 13 +- .../victoria-metrics-k8s-stack/index.mdx | 13 +- .../integrations/vineyard/index.mdx | 36 +- .../integrations/virtual-kubelet/index.mdx | 36 +- src/collections/integrations/vitess/index.mdx | 36 +- .../integrations/volcano/index.mdx | 36 +- .../integrations/wasmcloud/index.mdx | 35 +- .../integrations/wasmedgeruntime/index.mdx | 36 +- .../integrations/whereabouts/index.mdx | 33 +- .../integrations/windows/index.mdx | 35 +- .../integrations/wordpress-operator/index.mdx | 14 +- src/collections/landscape/clients.js | 52 +- src/collections/landscape/gateways.js | 38 +- src/collections/landscape/load-balancer.js | 40 +- src/collections/landscape/meshes.js | 833 ++++++------ src/collections/landscape/non-functional.js | 1072 ++++++++-------- src/collections/landscape/proxies.js | 70 +- src/collections/landscape/smi.js | 346 +++-- src/collections/landscape/tools-data.js | 185 +-- .../members/Aboobaker-Siddiq-R/index.mdx | 6 +- .../members/Cyrine-Gamoudi/index.mdx | 4 +- .../members/Mohammed-zaki/index.mdx | 2 +- .../members/Mohith-Gadireddy/index.mdx | 4 +- .../members/Rudraksh Tyagi/index.mdx | 8 +- .../members/Suruchi-Kumari/index.mdx | 6 +- .../_member-profile-template/index.mdx | 6 +- src/collections/members/aabid-sofi/index.mdx | 4 +- .../members/aadhitya-amarendiran/index.mdx | 6 +- .../members/aaditya-narayan-subedy/index.mdx | 11 +- .../members/abdullah-rafi/index.mdx | 6 +- .../members/abhijeet-gaurav/index.mdx | 2 +- .../members/abhishek-kumar/index.mdx | 13 +- .../members/abiola-farounbi/index.mdx | 7 +- .../members/abishek-kumar/index.mdx | 12 +- .../members/adheip-singh/index.mdx | 4 +- src/collections/members/adina-rav/index.mdx | 7 +- src/collections/members/aditi-ahuja/index.mdx | 10 +- .../members/aditya-chatterjee/index.mdx | 7 +- src/collections/members/aisuko-li/index.mdx | 4 +- .../members/akshay-sharma/index.mdx | 4 +- .../members/alexis-abakasanga/index.mdx | 9 +- .../members/alonso-lopez/index.mdx | 4 +- .../members/alvin okafor/index.mdx | 4 +- .../members/ambareen-azam/index.mdx | 2 +- .../members/anand-kumar-singh/index.mdx | 7 +- src/collections/members/aneesh-nema/index.mdx | 4 +- .../members/anirudh-jain/index.mdx | 22 +- .../members/anita-ihuman/index.mdx | 9 +- src/collections/members/anton-weiss/index.mdx | 2 +- .../members/antonette-caldwell/index.mdx | 10 +- .../members/archit-sharma/index.mdx | 2 +- .../members/arunima-chaudhuri/index.mdx | 2 +- src/collections/members/ashis-singh/index.mdx | 9 +- .../members/ashish-tiwari/index.mdx | 4 +- .../members/ashparsh-pandey/index.mdx | 6 +- .../atinuke-oluwabamikemi-kayode/index.mdx | 4 +- .../members/augustine-ogiza/index.mdx | 4 +- .../members/avantika-jain/index.mdx | 2 +- .../members/avishkar-gunjal/index.mdx | 6 +- .../members/ayush-khandelwal/index.mdx | 12 +- .../members/ayush-sharma/index.mdx | 4 +- .../members/bariq-nurlis/index.mdx | 2 +- .../members/bart-kalanski/index.mdx | 2 +- src/collections/members/cesar-roman/index.mdx | 4 +- .../members/chandravijay-rai/index.mdx | 10 +- src/collections/members/chinu-anand/index.mdx | 2 +- .../members/chris-carrier/index.mdx | 2 +- .../members/dahyeon-kang/index.mdx | 2 +- .../members/daniel-kiptoon/index.mdx | 6 +- .../members/darren-dsouza/index.mdx | 8 +- src/collections/members/debjani-dey/index.mdx | 4 +- .../members/debopriya-bhattacharjee/index.mdx | 6 +- .../members/deepak-gupta/index.mdx | 2 +- .../members/deepak-reddy/index.mdx | 4 +- src/collections/members/dev-kalra/index.mdx | 6 +- .../members/dheeraj-gedam/index.mdx | 2 +- src/collections/members/dhruv-patel/index.mdx | 6 +- src/collections/members/divine-orji/index.mdx | 7 +- .../members/divyangi-raghav/index.mdx | 8 +- .../members/eeshaan-sawant/index.mdx | 2 +- .../members/ekene-leonard/index.mdx | 10 +- .../members/elizabeth-lola/index.mdx | 4 +- .../freedisch-thibaut-batale/index.mdx | 4 +- .../members/gaganpreet-kaur-kalsi/index.mdx | 2 +- .../members/gaurav-chadha/index.mdx | 16 +- .../members/gautam-arora/index.mdx | 14 +- .../members/gerald-maboshe/index.mdx | 8 +- src/collections/members/haim-helman/index.mdx | 2 +- .../members/harsh-dobariya/index.mdx | 2 +- .../members/harshit-dandriyal/index.mdx | 3 +- .../members/harshita-kanal/index.mdx | 2 +- .../members/hauwa-ismail-ahmad/index.mdx | 4 +- .../members/hersh-dhillion/index.mdx | 2 +- src/collections/members/hetvi-soni/index.mdx | 26 +- .../members/hiren-timbadiya/index.mdx | 4 +- .../members/hussaina-begum/index.mdx | 5 +- .../members/ivana-atanasova/index.mdx | 2 +- src/collections/members/jared-byers/index.mdx | 3 +- src/collections/members/jash-patel/index.mdx | 2 +- .../members/jerrid-schilling/index.mdx | 2 +- src/collections/members/jesus-lerma/index.mdx | 4 +- .../members/jome-favourite/index.mdx | 4 +- .../members/joseph-midura/index.mdx | 4 +- src/collections/members/joy-nwaiwu/index.mdx | 4 +- .../members/jubayer-abdullah-joy/index.mdx | 2 +- .../members/kamal-nayan-singh/index.mdx | 4 +- src/collections/members/kanishkar-j/index.mdx | 10 +- .../members/karan-thakur/index.mdx | 20 +- src/collections/members/lee-calcote/index.mdx | 6 +- .../members/lidor-ettinger/index.mdx | 4 +- .../members/manav-kapoor/index.mdx | 6 +- .../members/mario-arriaga/index.mdx | 4 +- .../members/martin-castre/index.mdx | 2 +- .../members/maximiliano-churichi/index.mdx | 7 +- src/collections/members/mayank-shah/index.mdx | 2 +- .../members/meghana-varanasi/index.mdx | 2 +- src/collections/members/meyazhagan/index.mdx | 2 +- .../members/muskan-bansal/index.mdx | 2 +- .../members/naureen-imran/index.mdx | 4 +- .../members/nicholas-jackson/index.mdx | 1 - .../members/nikhil-ladha/index.mdx | 15 +- .../members/nishant-miittal/index.mdx | 2 +- .../members/nuno-docarmo/index.mdx | 4 +- .../members/olushesi-toheeb/index.mdx | 7 +- .../members/oscar-hernandez/index.mdx | 2 +- .../members/partik-singh-bumrah/index.mdx | 2 +- .../members/philip-obiora/index.mdx | 4 +- .../members/piyush-singariya/index.mdx | 22 +- .../members/pranav-bhatt/index.mdx | 20 +- .../members/pranav-singh/index.mdx | 8 +- .../members/prateek-tripathy/index.mdx | 2 +- .../members/pratyay-banerjee/index.mdx | 2 +- src/collections/members/rafi-ungar/index.mdx | 2 +- .../members/raghav-aggarwal/index.mdx | 4 +- .../members/randy-chilau/index.mdx | 4 +- .../members/raul-esquivel/index.mdx | 2 +- src/collections/members/rex-joshua/index.mdx | 6 +- .../members/rhoda-michael/index.mdx | 2 +- .../members/ritik-saxena/index.mdx | 8 +- .../members/rodolfo-martinez-vega/index.mdx | 7 +- .../members/rohit-agarwal/index.mdx | 2 +- src/collections/members/ruth-ikegah/index.mdx | 9 +- .../members/sako-mammadov/index.mdx | 2 +- .../members/sandra-ashipala/index.mdx | 2 +- .../members/saurabh-thakur/index.mdx | 5 +- src/collections/members/savio-dias/index.mdx | 2 +- .../members/senali-dilumika/index.mdx | 4 +- src/collections/members/shivam-sood/index.mdx | 4 +- .../members/shivay-lamba/index.mdx | 6 +- .../members/shravani-kaware/index.mdx | 2 +- .../members/shriti-chandra/index.mdx | 6 +- .../members/shubham-tyagi/index.mdx | 2 +- .../members/soham-sonawane/index.mdx | 5 +- .../members/stephen-miller/index.mdx | 6 +- src/collections/members/subham-rai/index.mdx | 8 +- .../members/sudhanshu-dasgupta/index.mdx | 8 +- .../members/suhani-agarwal/index.mdx | 2 +- .../members/suraj-jadhav/index.mdx | 4 +- .../members/tanuj-agarwal/index.mdx | 2 +- src/collections/members/tharun-t/index.mdx | 8 +- .../members/tolulope-ola-david/index.mdx | 4 +- src/collections/members/udit-takkar/index.mdx | 6 +- .../members/usman-siddique/index.mdx | 6 +- .../members/utkarsh-srivastava/index.mdx | 6 +- .../members/uzair-shaikh/index.mdx | 2 +- .../members/victoria-nduka/index.mdx | 4 +- .../members/vihas-makwana/index.mdx | 2 +- .../members/vijay-cherukuri/index.mdx | 9 +- .../members/vinayak-sharma/index.mdx | 7 +- .../members/vineet-sharma/index.mdx | 5 +- .../members/vineeth-reddy/index.mdx | 6 +- .../members/vivek-vishal/index.mdx | 10 +- .../members/will-calcote/index.mdx | 4 +- src/collections/members/xin-huang/index.mdx | 6 +- src/collections/members/yash-pandey/index.mdx | 9 +- src/collections/members/yash-sharma/index.mdx | 2 +- .../members/yash-vardhan/index.mdx | 6 +- src/collections/members/yash/index.mdx | 2 +- .../index.mdx | 18 +- .../index.mdx | 13 +- .../index.mdx | 20 +- .../index.mdx | 24 +- .../index.mdx | 15 +- .../index.mdx | 8 +- .../index.mdx | 18 +- .../index.mdx | 16 +- .../index.mdx | 22 +- .../index.mdx | 26 +- .../index.mdx | 29 +- .../index.mdx | 22 +- .../index.mdx | 10 +- .../index.mdx | 10 +- .../index.mdx | 8 +- .../index.mdx | 149 ++- .../2021-10-13-cncf-adopts-meshery/index.mdx | 116 +- .../index.mdx | 92 +- .../index.mdx | 10 +- .../index.mdx | 8 +- .../index.mdx | 14 +- .../index.mdx | 18 +- ...ns-to-donate-istio-service-mesh-to-cncf.md | 6 +- .../index.mdx | 110 +- ...mark-the-cloud-native-value-measurement.md | 23 +- .../index.mdx | 8 +- .../index.md | 25 +- .../index.mdx | 13 +- .../index.mdx | 21 +- .../index.mdx | 22 +- src/collections/news/News.style.js | 51 +- .../0000-00-00-news-title/index.mdx | 4 +- src/collections/programs/Programs.style.js | 238 ++-- .../programs/communitybridge/index.mdx | 197 +-- src/collections/programs/gsoc-2019/index.mdx | 171 ++- src/collections/programs/gsoc-2020/index.mdx | 243 ++-- src/collections/programs/gsoc-2021/index.mdx | 141 +- src/collections/programs/gsoc-2022/index.mdx | 120 +- src/collections/programs/gsoc-2023/index.mdx | 96 +- src/collections/programs/gsoc-2024/index.mdx | 106 +- src/collections/programs/gsod-2024/index.mdx | 179 +-- src/collections/programs/gsod/index.mdx | 195 ++- .../programs/hacktoberfest-2020/index.mdx | 317 +++-- .../programs/hacktoberfest-2021/index.mdx | 317 +++-- .../programs/hacktoberfest-2022/index.mdx | 330 +++-- src/collections/programs/layer5/index.mdx | 6 +- .../programs/lfx-2021/lfx-2021.mdx | 142 +- .../programs/lfx-2022/lfx-2022.mdx | 112 +- .../programs/lfx-2023/lfx-2023.mdx | 155 ++- .../programs/lfx-2024/lfx-2024.mdx | 171 ++- src/collections/programs/mlh-2020/index.mdx | 140 +- .../programs/sca-contributhon/index.mdx | 32 +- src/collections/projects/Project.style.js | 2 +- .../index.mdx | 41 +- src/collections/projects/sample/index.mdx | 6 +- src/collections/resources/Resources.style.js | 171 ++- .../resources/articles/adoption/index.mdx | 205 ++- .../analyzing-service-mesh-performance.mdx | 566 ++++---- .../resources/articles/api-gateways/index.mdx | 104 +- .../choosing-the-perfect-proxy/index.mdx | 324 +++-- .../articles/client-libraries/index.mdx | 64 +- .../articles/consul-service-mesh/index.mdx | 264 +++- .../container-management.mdx | 215 ++-- .../articles/deploying-istio/index.mdx | 406 ++++-- .../articles/devops-adoption/index.mdx | 40 +- .../articles/gitops/what-is-gitops.mdx | 163 ++- .../learn-how-to-write-wasm-filters.mdx | 65 +- .../istio-at-a-glance/istio-at-a-glance.mdx | 323 +++-- .../istio-authorization policy/index.mdx | 54 +- .../index.mdx | 252 ++-- .../resources/articles/istio-pilot/index.mdx | 273 +++- .../articles/istio-service-mesh/index.mdx | 27 +- .../articles/istio-service-proxy/index.mdx | 188 ++- .../articles/istio-virtual-service/index.mdx | 91 +- .../archtiecture-101/k8s-architecture-101.mdx | 41 +- .../getting-started-with-kubernetes/index.mdx | 182 ++- .../management-of-kubernetes/index.mdx | 15 +- .../multi-cluster/k8s-multi-cluster.mdx | 18 +- .../index.mdx | 511 +++++--- .../articles/network-planes/index.mdx | 171 ++- .../index.mdx | 184 ++- .../service-mesh-fundamentals/index.mdx | 161 ++- .../articles/swappable-sidecars/index.mdx | 122 +- .../articles/terraform-with-meshery/index.mdx | 38 +- .../value-of-a-service-mesh/index.mdx | 248 +++- .../comparing-lua-and-webassemby.mdx | 62 +- .../webassembly/envoy-and-webassembly.mdx | 100 +- .../hpe.style.js | 70 +- .../index.mdx | 207 ++- .../resources/faq/internship-faq.mdx | 8 +- src/collections/resources/faq/layer5-faq.mdx | 16 +- src/collections/resources/faq/meshery-faq.mdx | 8 +- .../resources/faq/service-mesh-faq.mdx | 8 +- .../resources/interview/techstrong-tv.mdx | 38 +- .../introduction-to-meshery.mdx | 27 +- .../resources/resources-template/index.mdx | 8 +- ...contributing-to-meshery-and-mesheryctl.mdx | 36 +- ...g-to-meshery-API-swagger-documentation.mdx | 23 +- .../tutorials/docker-swarm/index.mdx | 516 +++++--- ...ntroduction-to-all-layer5-repositories.mdx | 12 +- ...ntroduction-to-contributing-to-meshery.mdx | 38 +- .../tutorials/introduction-to-meshey-ctl.mdx | 38 +- ...ibuting-to-layer5-and-working-with-git.mdx | 38 +- .../tutorials/tutorial-on-gatsby.mdx | 26 +- .../working-with-meshery-docs-and-jekyll.mdx | 8 +- .../service-mesh-books/Book.style.js | 87 +- .../istio-up-and-running/index.mdx | 25 +- .../service-mesh-patterns/bookColumns.js | 53 +- .../service-mesh-patterns/index.mdx | 27 +- .../service-mesh-patterns/tableData.js | 362 +++--- .../index.mdx | 63 +- .../index.mdx | 46 +- .../meshery_performance_testing/index.mdx | 7 +- .../traffic_splitting_with_meshery/index.mdx | 6 +- .../working_with_meshery_and_consul/index.mdx | 6 +- .../working_with_meshery_and_istio/index.mdx | 6 +- .../working_with_meshery_and_kuma/index.mdx | 6 +- .../index.mdx | 6 +- .../working_with_meshery_and_nsm/index.mdx | 5 +- .../index.mdx | 7 +- .../index.mdx | 5 +- .../2018_docker_con_eu/index.mdx | 8 +- .../2018_docker_con_na/index.mdx | 14 +- .../2018_kube_con_na/index.mdx | 12 +- .../2018_velocity_london/index.mdx | 12 +- .../index.mdx | 13 +- .../2019_09_27-devfest_montreal/index.mdx | 28 +- .../index.mdx | 28 +- .../2020_01_16_cloud_native_austin/index.mdx | 28 +- .../2020_05_12_open_source_101/index.mdx | 12 +- .../2020_06_20_infra-ops/index.mdx | 8 +- .../2020_07_14-oscon/index.mdx | 8 +- .../index.mdx | 17 +- .../2020_12_09-advanced-istio/index.mdx | 15 +- .../2021_02_22-istiocon/index.mdx | 58 +- .../use-cases/commenting/index.mdx | 2 +- .../gcp-diagramming/gcp-diagramming.mdx | 2 +- .../kubernetes-diagramming.mdx | 1 - .../use-cases/whiteboarding/index.mdx | 4 +- src/components/AdventuresVol/README.md | 5 +- .../AdventuresVol/adventures-vol.style.js | 183 +-- src/components/AdventuresVol/index.js | 14 +- .../AnimatedStepsList.style.js | 219 ++-- .../Stepped-animated-terminal/index.js | 4 +- .../Steps-indicator/StepsIndicator.style.js | 28 +- .../Steps-indicator/index.js | 9 +- .../Steps-list/Step/Step.style.js | 44 +- .../Steps-list/Step/index.js | 8 +- .../Steps-list/StepsList.style.js | 44 +- .../Animated-steps-list/Steps-list/index.js | 10 +- .../Animated-steps-list/hero/hero.style.js | 20 +- .../Animated-steps-list/hero/index.js | 28 +- src/components/Animated-steps-list/index.js | 27 +- .../Animated-steps-list/scroll-position.js | 6 +- .../Framed-terminal/index.js | 8 +- src/components/Animated-terminal/index.js | 4 +- src/components/BGImage/BGImage.styles.js | 17 +- src/components/BGImage/README.md | 6 +- src/components/BGImage/index.js | 7 +- .../CTA_Bottom/cta_bottom_categories.js | 58 +- .../Call-To-Actions/CTA_Bottom/index.js | 114 +- .../CTA_FullWidth/cta_fullwidth_categories.js | 20 +- .../Call-To-Actions/CTA_FullWidth/index.js | 194 +-- .../CTA_ImageOnly/cta_imageonly_categories.js | 12 +- .../Call-To-Actions/CTA_ImageOnly/index.js | 66 +- src/components/Call-To-Actions/README.md | 21 +- src/components/Card-Outline/README.md | 1 + .../Card-Outline/card-outline.style.js | 98 +- src/components/Card-Outline/index.js | 14 +- src/components/Card/Card.style.js | 284 ++-- src/components/Card/README.md | 6 +- src/components/Card/index.js | 50 +- src/components/Case-study-banner/README.md | 5 +- src/components/Case-study-banner/index.js | 234 ++-- src/components/CodeBlock/README.md | 5 +- src/components/CodeBlock/copy-to-clipboard.js | 22 +- src/components/CodeBlock/index.js | 25 +- src/components/ColorBox/ColorBox.style.js | 63 +- src/components/ColorBox/README.md | 5 +- src/components/ColorBox/index.js | 10 +- src/components/CommonForm/README.md | 5 +- src/components/CommonForm/commonForm.style.js | 123 +- src/components/CommonForm/events.js | 166 ++- src/components/CommonForm/index.js | 347 +++-- src/components/CommunityCallCard/README.md | 5 +- src/components/CommunityCallCard/index.js | 114 +- .../ConformanceTestTable.style.js | 110 +- .../ConformanceTest-Table/README.md | 7 +- src/components/ConformanceTest-Table/index.js | 107 +- src/components/Contact-Modal/README.md | 5 +- src/components/Contact-Modal/index.js | 30 +- .../ContactCard-unsubscribe/README.md | 5 +- .../ContactCard-unsubscribe/contact.style.js | 189 ++- .../ContactCard-unsubscribe/index.js | 45 +- src/components/ContactCard/README.md | 5 +- src/components/ContactCard/contact.style.js | 189 ++- src/components/ContactCard/index.js | 71 +- src/components/ContactForm/README.md | 5 +- .../ContactForm/contact-form.style.js | 2 +- src/components/ContactForm/index.js | 117 +- src/components/Corner-popup/README.md | 6 +- src/components/Corner-popup/index.js | 48 +- src/components/Corner-popup/popup.style.js | 57 +- src/components/FeatureUseCard/README.md | 5 + .../FeatureUseCard/featureUseCard.style.js | 22 +- src/components/FeatureUseCard/index.js | 27 +- .../FeaturesCarousel.style.js | 327 ++--- src/components/Features-carousel/README.md | 6 +- src/components/Features-carousel/index.js | 43 +- src/components/Features/README.md | 7 +- src/components/Features/TwoColLayout.js | 66 +- src/components/Features/index.js | 87 +- src/components/Features/style.js | 8 +- src/components/Features/two-col-layout.js | 32 +- .../HandbookCard/HandbookCard.style.js | 183 +-- src/components/HandbookCard/README.md | 5 +- src/components/HandbookCard/index.js | 16 +- src/components/Inline-quotes/index.js | 115 +- .../Landscape-Table/LandscapeTable.style.js | 118 +- src/components/Landscape-Table/index.js | 200 +-- .../bookmark-notification.style.js | 68 +- .../BookmarkNotification/index.js | 25 +- .../Learn-Components/Card-Component/index.js | 37 +- .../Card-Component/learn-card.style.js | 204 ++- .../Chapter-Card/chapter-card.style.js | 34 +- .../Learn-Components/Chapter-Card/index.js | 4 +- .../Chapters-Style/chapters.style.js | 4 +- .../Content-Card/content-card.style.js | 37 +- .../Learn-Components/Content-Card/index.js | 4 +- .../Learn-Components/LearnInfo/index.js | 49 +- .../LearnInfo/learninfo.style.js | 5 +- .../Learn-Components/Pagination/index.js | 86 +- .../Pagination/paginate.style.js | 90 +- .../Learn-Components/QuizModal/index.js | 94 +- .../QuizModal/quiz-component.js | 155 ++- .../QuizModal/quiz-component.style.js | 399 +++--- .../QuizModal/quizmodal.style.js | 74 +- .../Setup-Pre-Requisites/index.js | 40 +- .../setup-pre-req.style.js | 193 ++- .../Learn-Components/TOC-Chapters/index.js | 45 +- .../TOC-Chapters/toc.style.js | 4 +- .../TOC-Learning-Path/index.js | 45 +- .../TOC-Learning-Path/toc.style.js | 198 +-- .../what-await-section/index.js | 80 +- .../what-await-section/what-await.styles.js | 65 +- src/components/Logo-List/LogoList.style.js | 4 +- src/components/Logo-List/index.js | 4 +- .../MeetInfo-Table/MeetInfoTable.style.js | 120 +- src/components/MeetInfo-Table/index.js | 26 +- .../PlanCard/collapsible-details.js | 91 +- src/components/PlanCard/index.js | 37 +- src/components/PlanCard/planCard.style.js | 9 +- .../PopOutCardCarousel.style.js | 36 +- src/components/PopOutCardCarousel/index.js | 8 +- .../Profile-card/ProfileCard.style.js | 165 +-- src/components/Profile-card/index.js | 22 +- src/components/QuoteCard/index.js | 34 +- src/components/Related-Posts/index.js | 92 +- src/components/Related-Posts/index.test.js | 3 +- .../Related-Posts/relatedPosts.style.js | 309 +++-- .../Related-Posts/relatedPostsFactory.js | 33 +- src/components/Related-Resources/index.js | 94 +- .../Related-Resources/index.test.js | 3 +- .../relatedResources.style.js | 301 +++-- .../relatedResourcesFactory.js | 35 +- src/components/RelatedPicks/index.js | 46 +- src/components/RelatedPicks/style.js | 63 +- .../Ripple-Effect-Animation/index.js | 4 +- .../ripple-effect.style.js | 130 +- src/components/SMI-Table/SMITable.style.js | 156 +-- src/components/SMI-Table/index.js | 277 ++-- .../ScenarioCard/ScenarioCard.style.js | 217 ++-- src/components/ScenarioCard/index.js | 46 +- .../Scrolltotop-button/ScrollToTopStyles.js | 30 +- src/components/Scrolltotop-button/index.js | 20 +- .../Scrolltotop-button/useDelayedUnmount.js | 9 +- .../useWindowHasScrolled.js | 12 +- src/components/SistentNavigation/content.js | 48 +- src/components/SistentNavigation/index.js | 48 +- .../SistentNavigation/intra-page.js | 16 +- .../SistentNavigation/pagination.js | 8 +- .../SistentNavigation/pagination.style.js | 2 +- src/components/SistentNavigation/toc.style.js | 2 +- src/components/SlackLinkNotif/index.js | 42 +- src/components/SocialLinks-Color/index.js | 56 +- .../sociallinkscolor.style.js | 2 +- src/components/SocialLinks/index.js | 35 +- .../SocialLinks/socialicon.style.js | 45 +- src/components/TeaserModal/index.js | 48 +- src/components/TeaserModal/style.js | 71 +- src/components/Terminal/Terminal.style.js | 108 +- src/components/Terminal/index.js | 36 +- src/components/TopPromotionalBanner/index.js | 21 +- src/components/TopPromotionalBanner/style.js | 62 +- .../UpcomingEventCard/EventCard.style.js | 201 ++- src/components/UpcomingEventCard/index.js | 39 +- .../WorkshopsCardWrapper.style.js | 5 +- src/components/Workshop-Card/index.js | 26 +- src/components/blog-view-tooltip.js | 70 +- .../dropdownLayouts/labels.style.js | 2 +- src/components/handbook-navigation/README.md | 5 +- .../handbook-navigation/TocPagination.js | 8 +- .../TocPagination.style.js | 2 +- src/components/handbook-navigation/content.js | 36 +- src/components/handbook-navigation/index.js | 16 +- .../handbook-navigation/intra-page.js | 12 +- .../handbook-navigation/toc.style.js | 104 +- src/components/image.js | 12 +- src/components/layout.js | 19 +- src/components/mediaQuery.js | 4 +- src/components/pager.js | 22 +- src/components/seo.js | 35 +- .../service-mesh-patterns-Table/Table.js | 95 +- .../table.style.js | 114 +- src/components/specs/data-card.js | 65 +- src/components/specs/index.js | 18 +- src/components/specs/specs.style.js | 44 +- src/html.js | 38 +- src/pages/404.js | 7 +- src/pages/blog/index.js | 35 +- src/pages/careers/index.js | 18 +- src/pages/careers/internships.js | 14 +- src/pages/careers/programs.js | 22 +- src/pages/cloud-native-management/catalog.js | 18 +- .../generate-aws-architecture-diagram.js | 18 +- .../generate-gcp-architecture-diagram.js | 18 +- ...enerate-kubernetes-architecture-diagram.js | 18 +- .../meshery/getting-started.js | 27 +- .../cloud-native-management/meshery/index.js | 17 +- .../meshery/integrations.js | 18 +- .../meshery/meshery-operator.js | 19 +- .../meshery/operating-cloud-native-infra.js | 151 +-- .../meshmap/collaborate/index.js | 18 +- .../meshmap/collaborate/peer-reviews/index.js | 10 +- .../cloud-native-management/meshmap/design.js | 18 +- .../cloud-native-management/meshmap/index.js | 17 +- .../meshmap/visualize.js | 18 +- .../cloud-native-management/playground.js | 17 +- src/pages/community/Loader.style.js | 113 +- .../adventures-of-five-and-friends/index.js | 17 +- src/pages/community/calendar.js | 44 +- src/pages/community/community-managers.js | 19 +- .../community/handbook/code-of-conduct.js | 9 +- .../community/handbook/community-roles.js | 14 +- src/pages/community/handbook/community.js | 11 +- .../community/handbook/connect-with-us.js | 16 +- src/pages/community/handbook/contribution.js | 9 +- .../community/handbook/contributor-journey.js | 14 +- src/pages/community/handbook/designer.js | 16 +- src/pages/community/handbook/faq.js | 9 +- .../community/handbook/github-process.js | 14 +- src/pages/community/handbook/index.js | 16 +- src/pages/community/handbook/learn-layer5.js | 16 +- .../community/handbook/mentorship-programs.js | 16 +- src/pages/community/handbook/projects.js | 21 +- src/pages/community/handbook/recognition.js | 18 +- .../community/handbook/repository-overview.js | 16 +- .../handbook/security-vulnerabilities.js | 9 +- .../community/handbook/writing-program.js | 16 +- src/pages/community/index.js | 20 +- src/pages/community/members.js | 206 +-- src/pages/community/meshmates.js | 24 +- src/pages/community/newcomers.js | 17 +- src/pages/company/about.js | 20 +- src/pages/company/brand.js | 18 +- src/pages/company/contact.js | 22 +- src/pages/company/faq.js | 13 +- src/pages/company/legal/code-of-conduct.js | 16 +- src/pages/company/legal/privacy.js | 18 +- src/pages/company/legal/terms-of-service.js | 18 +- src/pages/company/news.js | 83 +- src/pages/deploy-service-mesh.js | 16 +- src/pages/docker-extension-meshery.js | 19 +- src/pages/embed.js | 6 +- src/pages/index.js | 59 +- src/pages/learn/index.js | 19 +- src/pages/learn/learning-paths.js | 19 +- src/pages/learn/service-mesh-books.js | 20 +- src/pages/learn/service-mesh-labs.js | 16 +- src/pages/learn/service-mesh-workshops.js | 16 +- src/pages/newcomers.js | 17 +- src/pages/partners.js | 12 +- src/pages/pricing.js | 12 +- src/pages/products/index.js | 18 +- .../projects/cloud-native-performance.js | 19 +- src/pages/projects/image-hub.js | 19 +- src/pages/projects/index.js | 60 +- src/pages/projects/nighthawk.js | 22 +- .../service-mesh-interface-conformance.js | 19 +- src/pages/projects/sistent/about.js | 4 +- .../sistent/components/button/code.js | 4 +- .../sistent/components/button/guidance.js | 4 +- .../sistent/components/button/index.js | 4 +- .../projects/sistent/components/index.js | 4 +- .../projects/sistent/components/modal/code.js | 7 +- .../sistent/components/modal/guidance.js | 7 +- .../sistent/components/modal/index.js | 7 +- .../sistent/components/text-input/code.js | 4 +- .../sistent/components/text-input/guidance.js | 4 +- .../sistent/components/text-input/index.js | 4 +- .../projects/sistent/identity/color/code.js | 4 +- .../sistent/identity/color/guidance.js | 4 +- .../projects/sistent/identity/color/index.js | 4 +- .../projects/sistent/identity/spacing/code.js | 4 +- .../sistent/identity/spacing/guidance.js | 4 +- .../sistent/identity/spacing/index.js | 4 +- .../sistent/identity/typography/code.js | 4 +- .../sistent/identity/typography/guidance.js | 4 +- .../sistent/identity/typography/index.js | 4 +- src/pages/projects/sistent/index.js | 4 +- src/pages/resources/index.js | 50 +- src/pages/service-mesh-landscape.js | 19 +- .../solutions/architecture-diagram/index.js | 24 +- .../index.js | 8 +- .../developer-defined-infrastructure/index.js | 12 +- src/pages/solutions/gitops/index.js | 18 +- .../gitops/performance-management.js | 18 +- src/pages/solutions/gitops/snapshot.js | 18 +- .../index.js | 10 +- .../orchestration-management/index.js | 12 +- src/pages/subscribe.js | 8 +- src/pages/thank-you.js | 17 +- src/pages/unsubscribe.js | 10 +- src/pages/unsubscribed.js | 8 +- src/reusecore/Accordion/accordion.style.js | 44 +- src/reusecore/Accordion/index.js | 30 +- .../Blockquote-alt-style/blockquote.style.js | 15 +- .../Blockquote/Blockquote-alt-style/index.js | 12 +- .../blockquote-image.style.js | 270 ++-- .../Blockquote/Blockquote-image/index.js | 110 +- src/reusecore/Blockquote/blockquote.style.js | 148 ++- src/reusecore/Blockquote/index.js | 27 +- src/reusecore/Button/btn.style.js | 131 +- src/reusecore/Button/index.js | 53 +- src/reusecore/Counter/index.js | 10 +- src/reusecore/Layout/Col.js | 478 ++++--- src/reusecore/Layout/Container.js | 51 +- src/reusecore/Layout/Row.js | 12 +- src/reusecore/Layout/index.js | 13 +- src/reusecore/PageHeader/index.js | 101 +- src/reusecore/PageHeader/pageHeader.style.js | 3 +- src/reusecore/Particle/index.js | 44 +- src/reusecore/Search/index.js | 12 +- src/reusecore/Search/searchbox.style.js | 31 +- src/reusecore/SectionTitle/index.js | 82 +- src/reusecore/SlickSlider/index.js | 24 +- src/reusecore/SlickSlider/slick.slider.js | 12 +- src/reusecore/VintageBox/index.js | 90 +- src/sections/404/404.style.js | 68 +- src/sections/404/index.js | 36 +- src/sections/AWS-Diagram/diagram.js | 61 +- src/sections/AWS-Diagram/header.js | 176 ++- src/sections/AWS-Diagram/index.js | 17 +- .../Adventures-Callout/discuss.style.js | 10 +- src/sections/Adventures-Callout/index.js | 22 +- src/sections/ArchitectureDiagram/index.js | 81 +- .../ArchitectureDiagram/whiteboard.style.js | 24 +- src/sections/Blog/Blog-grid/blogGrid.style.js | 6 +- src/sections/Blog/Blog-grid/index.js | 50 +- src/sections/Blog/Blog-grid/index.test.js | 3 +- src/sections/Blog/Blog-list/blogList.style.js | 178 ++- src/sections/Blog/Blog-list/index.js | 50 +- src/sections/Blog/Blog-list/index.test.js | 3 +- .../Blog/Blog-sidebar/blogSidebar.style.js | 456 +++---- src/sections/Blog/Blog-sidebar/index.js | 79 +- src/sections/Blog/Blog-sidebar/index.test.js | 3 +- src/sections/Blog/Blog-single/author.js | 32 +- src/sections/Blog/Blog-single/author.style.js | 218 ++-- .../Blog/Blog-single/blogSingle.style.js | 217 ++-- src/sections/Blog/Blog-single/index.js | 100 +- src/sections/Blog/Blog-single/index.test.js | 3 +- .../blogpost-signoff.styles.js | 26 +- src/sections/Blog/BlogPostSignOff/index.js | 68 +- src/sections/Blog/paginate.js | 115 +- .../Career-single/CareerSingle.style.js | 138 +- src/sections/Careers/Career-single/index.js | 54 +- .../InternshipPage.style.js | 31 +- .../Careers/Careers-Internship-grid/index.js | 153 ++- .../ProgramGrid.style.js | 137 +- .../Careers/Careers-Programs-grid/index.js | 105 +- .../ProgramsSingle.style.js | 135 +- .../Careers/Careers-Programs-single/index.js | 48 +- src/sections/Careers/careers.style.js | 193 ++- src/sections/Careers/index.js | 80 +- src/sections/Careers/index.test.js | 3 +- src/sections/Client/clientSection.style.js | 29 +- src/sections/Client/index.js | 18 +- src/sections/Cloud-Native-Catalog/catalog.js | 41 +- src/sections/Cloud-Native-Catalog/header.js | 15 +- src/sections/Cloud-Native-Catalog/index.js | 12 +- .../Cloud-Native-Catalog/new-catalog.js | 19 +- src/sections/Cloud-Native-Catalog/patterns.js | 46 +- .../CloudNativeDeployments/deploy.style.js | 8 +- .../CloudNativeDeployments/features.js | 48 +- src/sections/CloudNativeDeployments/index.js | 65 +- src/sections/Comments/comments.style.js | 8 +- src/sections/Comments/index.js | 57 +- .../Adventures-of-Five/adventures.style.js | 20 +- .../Community/Adventures-of-Five/faq.js | 140 +- .../Community/Adventures-of-Five/index.js | 20 +- .../Community/Calendar/calendar.style.js | 177 ++- src/sections/Community/Calendar/index.js | 122 +- .../Community/Calendar/meetLinksData.js | 130 +- .../Community/CommunityManagers/index.js | 139 +- .../Community/CommunityManagers/styles.js | 122 +- .../Community/Emeritus-grid/emeritus.style.js | 48 +- src/sections/Community/Emeritus-grid/index.js | 63 +- .../Event-single/EventSingle.style.js | 57 +- src/sections/Community/Event-single/index.js | 116 +- .../Handbook/BookComponent/BookComponent.js | 17 +- .../BookComponent/BookComponent.style.js | 167 +-- .../Community/Handbook/Handbook.style.js | 20 +- .../Community/Handbook/community-roles.js | 163 +-- src/sections/Community/Handbook/community.js | 121 +- src/sections/Community/Handbook/conduct.js | 87 +- src/sections/Community/Handbook/connect.js | 227 ++-- .../Community/Handbook/contributing.js | 266 ++-- .../Community/Handbook/contributor-journey.js | 157 +-- src/sections/Community/Handbook/designer.js | 88 +- src/sections/Community/Handbook/faq.js | 152 ++- .../Community/Handbook/github-process.js | 178 ++- src/sections/Community/Handbook/index.js | 11 +- src/sections/Community/Handbook/learn5.js | 87 +- .../Community/Handbook/mentorships.js | 230 ++-- .../Community/Handbook/programs-data.js | 78 +- src/sections/Community/Handbook/projects.js | 188 +-- .../Community/Handbook/recognition.js | 244 ++-- src/sections/Community/Handbook/repo-data.js | 740 ++++++----- src/sections/Community/Handbook/repository.js | 152 ++- .../Handbook/security-vulnerabilities.js | 215 ++-- .../Community/Handbook/writing-program.js | 259 ++-- .../Handbook/writing-program/content-form.js | 287 +++-- .../writing-program/content-form.style.js | 132 +- .../Community/Join-community/index.js | 84 +- .../Community/Member-single/executive_bio.js | 42 +- src/sections/Community/Member-single/index.js | 152 +-- .../Member-single/memberSingle.style.js | 25 +- .../Community/Members-grid/DataWrapper.js | 74 +- .../Community/Members-grid/Dropdown.js | 18 +- .../Community/Members-grid/MemberList.js | 21 +- src/sections/Community/Members-grid/index.js | 126 +- .../Members-grid/membersGrid.style.js | 118 +- src/sections/Community/Meshmates/index.js | 211 ++- .../Community/Meshmates/meshmates.style.js | 177 ++- .../NewcomersPageWrapper.style.js | 250 ++-- .../Tutorials-table/TutorialsTable.style.js | 24 +- .../Newcomers-guide/Tutorials-table/index.js | 76 +- .../Community/Newcomers-guide/index.js | 166 ++- .../Newcomers-guide/newcomers-map.js | 267 ++-- .../Community/Web-based-from/index.js | 628 +++++---- .../Community/Web-based-from/webform.style.js | 352 +++-- src/sections/Community/community.style.js | 476 +++---- src/sections/Community/index.js | 130 +- src/sections/Community/index.test.js | 2 +- src/sections/Community/slider.js | 64 +- src/sections/Company/About/about.style.js | 2 +- src/sections/Company/About/index.js | 110 +- src/sections/Company/About/index.test.js | 3 +- .../Brand/Brand-components/brand-guide.js | 36 +- .../Company/Brand/Brand-components/catalog.js | 113 +- .../Brand/Brand-components/community.js | 51 +- .../Brand/Brand-components/imagehub.js | 50 +- .../Company/Brand/Brand-components/layer5.js | 72 +- .../Brand-components/meshery-operator.js | 57 +- .../Company/Brand/Brand-components/meshery.js | 55 +- .../Company/Brand/Brand-components/meshmap.js | 60 +- .../Brand/Brand-components/meshmark.js | 80 +- .../Brand/Brand-components/meshmaster.js | 54 +- .../Brand/Brand-components/meshsync.js | 57 +- .../Brand/Brand-components/nighthawk.js | 23 +- .../Brand-components/projectSection.style.js | 24 +- .../Brand-components/servicemeshpatterns.js | 48 +- .../Company/Brand/Brand-components/smp.js | 68 +- .../Brand-components/social-backgrounds.js | 13 +- .../Brand/Brand-components/stickfigures.js | 15 +- src/sections/Company/Brand/brandPage.style.js | 440 +++---- src/sections/Company/Brand/index.js | 159 +-- src/sections/Company/Brand/index.test.js | 12 +- .../Cloud-Native/cloud-native.style.js | 211 ++- src/sections/Company/Cloud-Native/index.js | 12 +- .../Company/Contact/contactpage.style.js | 2 +- src/sections/Company/Contact/index.js | 27 +- src/sections/Company/Contact/index.test.js | 3 +- .../Company/Layer5-statement/index.js | 36 +- .../Company/Layer5-statement/index.test.js | 3 +- .../Layer5-statement/statement.style.js | 5 +- .../Company/Legal/code-of-conduct/index.js | 99 +- src/sections/Company/Legal/privacy/index.js | 165 ++- .../Company/Legal/terms-of-service/index.js | 209 ++- src/sections/Company/Legal/terms.style.js | 36 +- .../Company/News-grid/NewsGrid.style.js | 182 ++- src/sections/Company/News-grid/index.js | 81 +- src/sections/Company/News-grid/index.test.js | 1 - src/sections/Company/News-grid/press.js | 60 +- .../Company/News-single/NewsSingle.style.js | 32 +- src/sections/Company/News-single/Sidebar.js | 124 +- src/sections/Company/News-single/index.js | 96 +- .../Company/News-single/index.test.js | 1 - src/sections/Company/News/index.js | 36 +- src/sections/Company/News/index.test.js | 3 +- .../Company/News/newsSection.style.js | 223 ++-- .../Company/Stewards-of-industry/index.js | 43 +- .../Stewards-of-industry/index.test.js | 2 +- .../Stewards-of-industry/stewards.style.js | 23 +- src/sections/Company/WhoWeAre/index.js | 17 +- src/sections/Company/WhoWeAre/index.test.js | 3 +- .../Company/WhoWeAre/whoweare.style.js | 4 +- src/sections/Counters/counterSection.style.js | 46 +- src/sections/Counters/index.js | 14 +- src/sections/Counters/index.test.js | 3 +- .../DeployServiceMesh.style.js | 10 +- src/sections/DeployServiceMesh/index.js | 389 +++--- src/sections/DeployServiceMesh/index.test.js | 3 +- .../Developer-Infrastructure/deploy.style.js | 8 +- .../Developer-Infrastructure/features.js | 41 +- .../Developer-Infrastructure/index.js | 64 +- src/sections/Discuss-Callout/discuss.style.js | 4 +- src/sections/Discuss-Callout/index.js | 31 +- .../doYouNeedService.style.js | 155 ++- src/sections/DoYouNeedService/index.js | 9 +- src/sections/DoYouNeedService/index.test.js | 3 +- .../Docker-Meshery/docker-extension-CTA.js | 42 +- .../docker-extension-meshery.js | 103 +- .../Docker-Meshery/dockerMeshery.style.js | 2 +- src/sections/Docker-Meshery/index.js | 20 +- src/sections/Events/index.js | 133 +- src/sections/Events/meetups.style.js | 112 +- src/sections/FeatureHero/featureHero.style.js | 22 +- src/sections/FeatureHero/index.js | 33 +- src/sections/GCP-Diagram/diagram.js | 47 +- src/sections/GCP-Diagram/header.js | 24 +- src/sections/GCP-Diagram/index.js | 17 +- src/sections/General/Faq/faqSection.style.js | 16 +- src/sections/General/Faq/index.js | 82 +- src/sections/General/Faq/index.test.js | 3 +- src/sections/General/Footer/footer.style.js | 644 +++++----- src/sections/General/Footer/index.js | 153 +-- src/sections/General/Footer/index.test.js | 3 +- src/sections/General/Footer/language.style.js | 2 +- src/sections/General/Footer/languages.js | 70 +- src/sections/General/Navigation/index.js | 324 +++-- .../General/Navigation/navigation.style.js | 14 +- .../General/Navigation/utility/Card.js | 18 +- .../General/Navigation/utility/CloudIcon.js | 47 +- .../Navigation/utility/DefaultAvatar.js | 2 +- .../General/Navigation/utility/LogoutIcon.js | 7 +- .../General/Navigation/utility/MeshMapIcon.js | 114 +- .../Navigation/utility/ScrollspyMenu.js | 173 ++- .../General/Navigation/utility/image.js | 7 +- .../General/Navigation/utility/menu-items.js | 181 ++- src/sections/Home/Banner-1/banner1.style.js | 24 +- src/sections/Home/Banner-1/index.js | 40 +- src/sections/Home/Banner-1/index.test.js | 1 - src/sections/Home/Banner-2/banner2.style.js | 352 ++--- src/sections/Home/Banner-2/index.js | 36 +- src/sections/Home/Banner-2/index.test.js | 3 +- src/sections/Home/Banner-3/banner3.style.js | 315 +++-- src/sections/Home/Banner-3/index.js | 29 +- src/sections/Home/Banner-3/index.test.js | 3 +- src/sections/Home/Banner-4/banner4.style.js | 516 ++++---- src/sections/Home/Banner-4/index.js | 88 +- src/sections/Home/Banner-4/index.test.js | 1 - src/sections/Home/Banner/index.js | 20 +- .../Home/CloudNativeManagement/index.js | 44 +- .../Home/CloudNativeManagement/index.test.js | 3 +- .../CloudNativeManagement/statement.style.js | 340 +++-- .../engineer-section.style.js | 118 +- src/sections/Home/Engineer-enabler/index.js | 9 +- src/sections/Home/FeaturesContainer/index.js | 89 +- src/sections/Home/FeaturesContainer/style.js | 100 +- src/sections/Home/Layer5-statement/index.js | 39 +- .../Home/Layer5-statement/index.test.js | 3 +- .../Home/Layer5-statement/statement.style.js | 253 ++-- .../MeshmapDesignHighlight/highlight.style.js | 360 +++--- .../Home/MeshmapDesignHighlight/index.js | 53 +- .../Home/MeshmapDesignHighlight/index.test.js | 3 +- src/sections/Home/Partners-home/index.js | 38 +- src/sections/Home/Partners-home/index.test.js | 3 +- .../Partners-home/partnerSection.style.js | 169 ++- .../Home/Partners-home/partners-home-data.js | 143 +-- src/sections/Home/Playground-home/index.js | 33 +- .../Playground-home/projectSection.style.js | 62 +- src/sections/Home/Projects-home/index.js | 87 +- src/sections/Home/Projects-home/index.test.js | 3 +- .../Projects-home/projectSection.style.js | 353 +++-- src/sections/Home/Proud-maintainers/index.js | 41 +- .../Home/Proud-maintainers/index.test.js | 1 - .../proudMaintainers.style.js | 18 +- .../Home/Service-mesh-focussed/index.js | 93 +- .../service-mesh-focussed.style.js | 163 ++- src/sections/Home/So-Special-Section/index.js | 119 +- .../So-Special-Section/so-special-style.js | 14 +- .../service-mesh-management/AnimateSVG.js | 24 +- .../ServiceMesh.style.js | 893 +++++++++++-- .../ServiceMeshAnimation.style.js | 665 +++++----- .../Home/service-mesh-management/index.js | 46 +- src/sections/Kubernetes-Diagram/diagram.js | 90 +- src/sections/Kubernetes-Diagram/index.js | 17 +- src/sections/Landscape/LandscapeGrid.style.js | 1137 +++++++++-------- src/sections/Landscape/ServiceMeshTimeline.js | 72 +- src/sections/Landscape/categories.js | 98 +- src/sections/Landscape/functional.js | 60 +- src/sections/Landscape/index.js | 114 +- src/sections/Landscape/non-functional.js | 45 +- src/sections/Landscape/smi.js | 98 +- src/sections/Landscape/tools.js | 34 +- .../Learn-Layer5/Chapters/chapters.style.js | 93 +- src/sections/Learn-Layer5/Chapters/index.js | 137 +- .../Course-Overview/courseoverview.style.js | 11 +- .../Learn-Layer5/Course-Overview/index.js | 69 +- .../Courses-List/courseslist.style.js | 60 +- .../Learn-Layer5/Courses-List/index.js | 23 +- src/sections/Learn-Layer5/Section/index.js | 8 +- .../Learn-Layer5/Section/section.style.js | 6 +- src/sections/Learn-Layer5/index.js | 62 +- .../Learn-Layer5/learnlayer5.style.js | 84 +- .../Learn/Book-single/BookSingle.style.js | 72 +- src/sections/Learn/Book-single/index.js | 19 +- .../Learn/Books-grid/BooksGrid.style.js | 203 ++- src/sections/Learn/Books-grid/index.js | 80 +- src/sections/Learn/Books-grid/index.test.js | 2 +- .../Lab-single/LabSinglePageWrapper.style.js | 8 +- src/sections/Learn/Lab-single/index.js | 32 +- .../Learn/Learn-Service-Mesh-CTA/index.js | 22 +- .../Learn/LearnPage-Sections/books.js | 78 +- .../Learn/LearnPage-Sections/feedbackData.js | 44 +- .../Learn/LearnPage-Sections/learn.js | 341 ++--- .../Learn/LearnPage-Sections/learning-path.js | 78 +- .../Learn/LearnPage-Sections/workshops.js | 403 +++--- .../Service-Mesh-Labs/LabsWrapper.style.js | 139 +- .../Learn/Service-Mesh-Labs/courseData.js | 126 +- src/sections/Learn/Service-Mesh-Labs/index.js | 46 +- .../Workshop-grid/WorkshopsGrid.style.js | 22 +- src/sections/Learn/Workshop-grid/index.js | 165 ++- .../Learn/Workshop-grid/index.test.js | 1 - .../WorkshopSinglePageWrapper.style.js | 177 ++- src/sections/Learn/Workshop-single/index.js | 101 +- src/sections/Learn/index.js | 31 +- src/sections/Learn/learnpage.style.js | 85 +- .../Meshery/Features-Col/data/index.js | 168 ++- .../Features-Col/featuresColSection.style.js | 12 +- src/sections/Meshery/Features-Col/index.js | 47 +- .../Meshery/Features-Col/index.test.js | 3 +- .../features-section.style.js | 10 +- .../Meshery/Features-section/index.js | 64 +- .../diagram/diagram.style.js | 2 +- .../How-meshery-works/diagram/index.js | 295 ++--- .../feature/feature.style.js | 55 +- .../How-meshery-works/feature/index.js | 20 +- .../Meshery/How-meshery-works/hero/index.js | 104 +- .../How-meshery-works/howitworks.style.js | 55 +- .../Meshery/How-meshery-works/index.js | 18 +- .../How-meshery-works/specs/data-card.js | 83 +- .../Meshery/How-meshery-works/specs/index.js | 34 +- .../How-meshery-works/specs/specs.style.js | 65 +- .../Meshery/Meshery-features/index.js | 242 ++-- .../Meshery/Meshery-integrations/Card.js | 20 +- .../Honeycomb/Honeycomb.js | 17 +- .../Honeycomb/Honeycomb.style.js | 17 +- .../Individual-Integrations/CatalogGrid.js | 26 +- .../Component.style.js | 2 +- .../Individual-Integrations/ComponentsGrid.js | 16 +- .../Individual-Integrations/cta-book.js | 29 +- .../cta-performance.js | 131 +- .../Individual-Integrations/howItWork.js | 28 +- .../Individual-Integrations/index.js | 98 +- .../individual-integrations.style.js | 200 +-- .../Meshery-integrations/Integration.style.js | 45 +- .../Meshery-integrations/IntegrationsGrid.js | 108 +- .../Meshery/Meshery-integrations/index.js | 31 +- .../Meshery/Meshery-mange-mesh/index.js | 48 +- .../MesheryPlatforms.style.js | 133 +- .../Meshery/Meshery-platforms/index.js | 184 +-- src/sections/Meshery/Meshery-quotes/index.js | 22 +- .../Meshery/Meshery-terminal/index.js | 452 +++---- src/sections/Meshery/index.js | 72 +- .../Meshery/meshery-operator/index.js | 112 +- .../meshery-operator/mesheryoperator.style.js | 26 +- src/sections/Meshery/meshery.style.js | 340 +++-- .../Collaborate/CollaboratorFeatures.js | 54 +- .../Collaborate/CollaboratorFeatures.style.js | 26 +- .../CollaboratorFeatures_diagram.js | 70 +- .../Design/DesignerFeatures.js | 54 +- .../Design/DesignerFeatures.style.js | 67 +- .../Design/DesignerFeatures_diagram.js | 42 +- .../Visualize/VisualizerFeatures.js | 54 +- .../Visualize/VisualizerFeatures.style.js | 24 +- .../Visualize/VisualizerFeatures_diagram.js | 26 +- .../FeaturesSection/useGsapTimeline.js | 35 +- .../collaboration-feature-team.js | 160 +-- .../collaboration-feature-terms.js | 70 +- .../collaboration-feature-work.js | 120 +- .../Meshmap/Meshmap-collaborate/index.js | 15 +- .../Meshmap/Meshmap-collaborate/index.test.js | 3 +- .../meshmap-collaborate-banner.js | 264 ++-- .../meshmap-collaborate.style.js | 37 +- .../Meshmap-design-features/index.js | 80 +- .../MeshmapMobileSwiper.js | 60 +- .../mobile-swiper.style.js | 22 +- .../Meshmap/Meshmap-design/cytoscape-demo.js | 36 +- .../Meshmap-design/cytoscape-demo.style.js | 6 +- .../Meshmap/Meshmap-design/cytoscapeCanvas.js | 193 ++- .../Meshmap-design/images/cytoNodes.js | 10 +- src/sections/Meshmap/Meshmap-design/index.js | 23 +- .../Meshmap/Meshmap-design/index.test.js | 3 +- .../Meshmap-design/meshmap-design-banner.js | 231 ++-- .../meshmap-design-features-carousel.js | 42 +- .../Meshmap-design/meshmap-design-hero.js | 155 +-- .../meshmap-design-integrations.js | 36 +- .../Meshmap-design/meshmap-design.style.js | 37 +- .../Meshmap/Meshmap-visualize/index.js | 18 +- .../Meshmap/Meshmap-visualize/index.test.js | 3 +- .../meshmap-visualize-banner.js | 150 +-- .../meshmap-visualize-features.js | 220 +++- .../meshmap-visualize-views.js | 189 +-- .../meshmap-visualize.style.js | 37 +- src/sections/Meshmap/diagram/diagram.style.js | 167 ++- .../Meshmap/features/features.style.js | 6 +- src/sections/Meshmap/features/index.js | 25 +- src/sections/Meshmap/index.js | 322 ++--- src/sections/Meshmap/index.test.js | 3 +- src/sections/Meshmap/meshery-action.js | 151 ++- src/sections/Meshmap/meshmap-catalog.js | 478 ++++--- src/sections/Meshmap/meshmap-modes.js | 121 +- src/sections/Meshmap/meshmap-platform.js | 188 ++- src/sections/Meshmap/meshmap.style.js | 79 +- src/sections/Meshmap/meshmap_banner.js | 33 +- src/sections/Meshmap/signup-form.js | 26 +- src/sections/Meshmap/use-viewport-size.js | 14 +- src/sections/OrchestrationManagement/index.js | 67 +- .../orchestration.style.js | 6 +- src/sections/Partners/index.js | 160 +-- src/sections/Partners/partner.style.js | 991 +++++++------- src/sections/Partners/partners.js | 219 ++-- src/sections/Playground/index.js | 14 +- src/sections/Playground/playground-CTA.js | 121 +- .../Playground/playground-features.js | 170 +-- src/sections/Playground/playground-hero.js | 97 +- src/sections/Pricing/comparison.js | 204 +-- src/sections/Pricing/data.js | 664 ++++++---- src/sections/Pricing/index.js | 21 +- src/sections/Pricing/pricing.style.js | 181 ++- src/sections/Pricing/review-slider.js | 74 +- src/sections/Products/index.js | 256 ++-- src/sections/Products/products.style.js | 8 +- .../Projects/Image-Hub/imageHub.style.js | 224 ++-- src/sections/Projects/Image-Hub/index.js | 85 +- src/sections/Projects/Nighthawk/gnh.style.js | 480 +++---- src/sections/Projects/Nighthawk/index.js | 253 +++- src/sections/Projects/Project-grid/index.js | 76 +- .../Project-grid/projectGrid.style.js | 2 +- src/sections/Projects/Project-single/index.js | 16 +- .../Project-single/projectSingle.style.js | 6 +- src/sections/Projects/SMI/data.js | 237 ++-- src/sections/Projects/SMI/index.js | 83 +- src/sections/Projects/SMI/smi.style.js | 599 ++++----- src/sections/Projects/SMI/testsTable.js | 35 +- src/sections/Projects/SMP/index.js | 233 +++- src/sections/Projects/SMP/smp.style.js | 437 +++---- src/sections/Projects/Sistent/about.js | 75 +- .../Sistent/components/button/code-block.js | 2 +- .../Sistent/components/button/code.js | 91 +- .../Sistent/components/button/guidance.js | 176 +-- .../Sistent/components/button/index.js | 157 +-- .../Projects/Sistent/components/index.js | 47 +- .../Projects/Sistent/components/modal/code.js | 98 +- .../Sistent/components/modal/guidance.js | 29 +- .../Sistent/components/modal/index.js | 87 +- .../Sistent/components/text-input/code.js | 45 +- .../Sistent/components/text-input/guidance.js | 100 +- .../Sistent/components/text-input/index.js | 135 +- .../Projects/Sistent/identity/color/code.js | 117 +- .../Sistent/identity/color/guidance.js | 211 ++- .../Projects/Sistent/identity/color/index.js | 225 ++-- .../Projects/Sistent/identity/spacing/code.js | 38 +- .../Sistent/identity/spacing/guidance.js | 200 ++- .../Sistent/identity/spacing/index.js | 149 +-- .../Sistent/identity/typography/code.js | 88 +- .../Sistent/identity/typography/guidance.js | 240 ++-- .../Sistent/identity/typography/index.js | 150 +-- src/sections/Projects/Sistent/index.js | 6 +- .../Projects/Sistent/sistent-layout.js | 12 +- .../Projects/Sistent/sistent.style.js | 32 +- src/sections/Projects/index.js | 40 +- src/sections/Projects/index.test.js | 3 +- src/sections/Projects/projectSection.style.js | 255 ++-- .../Resources/Resource-single/index.js | 97 +- .../Resources/Resource-single/index.test.js | 3 +- .../Resource-single/resourceSingle.style.js | 140 +- .../Resources-error/emptyStateTemplate.js | 10 +- .../Resources/Resources-grid/DataWrapper.js | 76 +- .../Resources/Resources-grid/ResourcesList.js | 30 +- .../Resources/Resources-grid/filters.js | 358 +++--- .../Resources/Resources-grid/filters.style.js | 348 +++-- .../Resources/Resources-grid/index.js | 33 +- .../Resources/Resources-grid/options.js | 78 +- .../Resources/Resources-grid/paginate.js | 14 +- .../Resources-grid/resourceGrid.style.js | 158 ++- src/sections/SeeYou/index.js | 66 +- src/sections/SeeYou/seeYou.style.js | 12 +- .../SolutionHero/featureHero.style.js | 22 +- src/sections/SolutionHero/index.js | 28 +- src/sections/Testimonial/index.js | 22 +- src/sections/Testimonial/testimonial.style.js | 131 +- src/sections/app.style.js | 2 +- .../gitops/PerformanceManagementPage.js | 97 +- src/sections/gitops/SnapshotPage.js | 74 +- src/sections/gitops/SquarePoint.js | 17 +- src/sections/gitops/common.js | 18 +- src/sections/gitops/gitops.style.js | 366 +++--- src/sections/gitops/index.js | 121 +- src/sections/gitops/snapshot.style.js | 280 ++-- .../kubernetes-multi-cluster/features.js | 47 +- .../kubernetes-multi-cluster/index.js | 54 +- .../kubernetes-multi-cluster/kube.style.js | 8 +- src/sections/meshmap-cta/index.js | 156 ++- src/sections/subscribe/SubscribeLearnPath.js | 14 +- src/sections/subscribe/subscribe.js | 35 +- src/sections/subscribe/subscribe.style.js | 206 ++- .../subscribe/subscribeLearn.style.js | 2 +- src/sections/thank-you/thank-you.js | 6 +- src/sections/thank-you/thank-you.style.js | 184 ++- src/sections/unsubscribe/unsubscribe.js | 16 +- src/sections/unsubscribe/unsubscribe.style.js | 195 ++- src/sections/unsubscribed/unsubscribed.js | 16 +- .../unsubscribed/unsubscribed.style.js | 195 ++- src/sections/what-is-service-mesh/index.js | 22 +- .../what-is-service-mesh/index.test.js | 3 +- .../whatServiceMesh.style.js | 89 +- .../z_other/About-classic/about.style.js | 90 +- src/sections/z_other/About-classic/index.js | 26 +- .../z_other/About-classic/index.test.js | 3 +- .../z_other/About-hosting/about.style.js | 176 ++- src/sections/z_other/About-hosting/index.js | 46 +- .../z_other/About-hosting/index.test.js | 3 +- .../appScreenSection.style.js | 36 +- .../z_other/AppScreens-classic/index.js | 57 +- .../AppScreens/appScreenSection.style.js | 358 +++--- src/sections/z_other/AppScreens/index.js | 64 +- .../z_other/Banner-classic/banner.style.js | 12 +- src/sections/z_other/Banner-classic/index.js | 36 +- .../z_other/Banner-classic/index.test.js | 3 +- .../z_other/Banner-hosting/banner.style.js | 632 +++++---- src/sections/z_other/Banner-hosting/index.js | 58 +- .../z_other/Banner-hosting/index.test.js | 3 +- .../z_other/Banner-modern/banner.style.js | 291 +++-- src/sections/z_other/Banner-modern/index.js | 34 +- .../z_other/Banner-modern/index.test.js | 3 +- .../z_other/Faq-Classic/faqSection.style.js | 229 ++-- src/sections/z_other/Faq-Classic/index.js | 24 +- .../z_other/Faq-Classic/index.test.js | 3 +- .../z_other/Faq-hosting/faqSection.style.js | 6 +- src/sections/z_other/Faq-hosting/index.js | 42 +- .../z_other/Faq-hosting/index.test.js | 3 +- .../z_other/Features-classic/fetures.style.js | 103 +- .../z_other/Features-classic/index.js | 44 +- .../z_other/Features-classic/index.test.js | 3 +- .../z_other/Features-hosting/fetures.style.js | 184 +-- .../z_other/Features-hosting/index.js | 30 +- .../z_other/Features-hosting/index.test.js | 3 +- .../z_other/Features/features.style.js | 170 ++- src/sections/z_other/Features/index.js | 55 +- src/sections/z_other/Features/index.test.js | 3 +- .../z_other/Footer-classic/footer.style.js | 123 +- src/sections/z_other/Footer-classic/index.js | 40 +- .../z_other/Footer-classic/index.test.js | 3 +- .../z_other/Getapp/getAppSection.style.js | 417 +++--- src/sections/z_other/Getapp/index.js | 24 +- src/sections/z_other/Getapp/index.test.js | 3 +- src/sections/z_other/Integrations/index.js | 42 +- .../z_other/Integrations/index.test.js | 3 +- .../Integrations/integrationSection.style.js | 239 ++-- src/sections/z_other/page-classic.js | 30 +- src/setupTests.js | 6 +- src/templates/blog-category-list.js | 38 +- src/templates/blog-single.js | 92 +- src/templates/blog-tag-list.js | 97 +- src/templates/book-single.js | 57 +- src/templates/career-single.js | 50 +- src/templates/course-overview.js | 54 +- src/templates/courses-list.js | 43 +- src/templates/event-single.js | 83 +- src/templates/events.js | 309 ++--- src/templates/executive-bio.js | 84 +- src/templates/integrations.js | 33 +- src/templates/lab-single.js | 39 +- src/templates/learn-chapter.js | 108 +- src/templates/member-single.js | 76 +- src/templates/news-single.js | 8 +- src/templates/program-multiple.js | 41 +- src/templates/program-single.js | 27 +- src/templates/resource-single.js | 77 +- src/templates/workshop-single.js | 76 +- src/theme/app/StyledThemeProvider.js | 12 +- src/theme/app/ThemeManager.js | 21 +- src/theme/app/themeStyles.js | 716 ++++++----- src/theme/app/useStyledDarkMode.js | 7 +- src/theme/blog/themeStyles.js | 43 +- src/theme/classic/themeStyles.js | 27 +- src/theme/hosting/themeStyles.js | 29 +- src/theme/modern/themeStyles.js | 30 +- src/utils/getActiveServiceMesh.js | 2 +- src/utils/getCurrentPage.js | 9 +- src/utils/paginate.js | 4 +- src/utils/slugify.js | 17 +- src/utils/useHasMounted.js | 4 +- src/utils/usedataList.js | 16 +- 1726 files changed, 59237 insertions(+), 49390 deletions(-) diff --git a/.desktop-lighthouserc.js b/.desktop-lighthouserc.js index 5ddb404fa313..07c30c55be8f 100644 --- a/.desktop-lighthouserc.js +++ b/.desktop-lighthouserc.js @@ -1,39 +1,39 @@ module.exports = { - "ci": { - "collect": { - "settings": { - "preset": "desktop" - }, - "staticDistDir": "./public", - "url": [ - "http://localhost/404/index.html?desktop", - "http://localhost/?desktop", - "http://localhost/company/about/index.html?desktop", - "http://localhost/cloud-native-management/meshery/index.html?desktop", - "http://localhost/cloud-native-management/meshmap/index.html?desktop", - "http://localhost/learn/learning-paths/index.html?desktop", - "http://localhost/learn/service-mesh-books/index.html?desktop", - "http://localhost/learn/service-mesh-workshops/index.html?desktop", - "http://localhost/learn/index.html?desktop", - "http://localhost/blog/index.html?desktop", - "http://localhost/resources/index.html?desktop", - "http://localhost/careers/index.html?desktop", - "http://localhost/community/members/index.html?desktop", - "http://localhost/community/meshmates/index.html?desktop", - "http://localhost/community/events/index.html?desktop", - "http://localhost/community/newcomers/index.html?desktop", - ], + ci: { + collect: { + settings: { + preset: 'desktop' + }, + staticDistDir: './public', + url: [ + 'http://localhost/404/index.html?desktop', + 'http://localhost/?desktop', + 'http://localhost/company/about/index.html?desktop', + 'http://localhost/cloud-native-management/meshery/index.html?desktop', + 'http://localhost/cloud-native-management/meshmap/index.html?desktop', + 'http://localhost/learn/learning-paths/index.html?desktop', + 'http://localhost/learn/service-mesh-books/index.html?desktop', + 'http://localhost/learn/service-mesh-workshops/index.html?desktop', + 'http://localhost/learn/index.html?desktop', + 'http://localhost/blog/index.html?desktop', + 'http://localhost/resources/index.html?desktop', + 'http://localhost/careers/index.html?desktop', + 'http://localhost/community/members/index.html?desktop', + 'http://localhost/community/meshmates/index.html?desktop', + 'http://localhost/community/events/index.html?desktop', + 'http://localhost/community/newcomers/index.html?desktop' + ] }, - "assert": { - "assertions": { - "categories:performance": ["warn", {"minScore": .90}], - "categories:accessibility": ["warn", {"minScore": .90}], - "categories:best-practices": ["warn", {"minScore": .90}], - "categories:seo": ["warn", {"minScore": .90}], - } - }, - "upload": { - "target": "temporary-public-storage", - }, + assert: { + assertions: { + 'categories:performance': ['warn', { minScore: 0.9 }], + 'categories:accessibility': ['warn', { minScore: 0.9 }], + 'categories:best-practices': ['warn', { minScore: 0.9 }], + 'categories:seo': ['warn', { minScore: 0.9 }] } - }; \ No newline at end of file + }, + upload: { + target: 'temporary-public-storage' + } + } +}; diff --git a/.devcontainer/README.md b/.devcontainer/README.md index 0dfd0bf94ce6..d549dc735441 100644 --- a/.devcontainer/README.md +++ b/.devcontainer/README.md @@ -1,11 +1,11 @@ ## How to use vscode-dev-containers as the development environment -* Install the VScode plugins Remote-Containers -* Open current folder in container - * The detail please check the [document](https://code.visualstudio.com/docs/remote/containers#_quick-start-open-an-existing-folder-in-a-container) -* Waiting for load the code into the environment -* Make sure you already in the development container `Dev Container:Node.js` -* Open the new terminal and run the command which in Makefile - * According to the Remote-Containers extension tips open the browser to access the website +- Install the VScode plugins Remote-Containers +- Open current folder in container + - The detail please check the [document](https://code.visualstudio.com/docs/remote/containers#_quick-start-open-an-existing-folder-in-a-container) +- Waiting for load the code into the environment +- Make sure you already in the development container `Dev Container:Node.js` +- Open the new terminal and run the command which in Makefile + - According to the Remote-Containers extension tips open the browser to access the website ![](./vscode-dev-container.webp) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index f55a7d53c8e1..b61a66081bb9 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,27 +1,25 @@ { - "name": "Node.js", - "build": { - "dockerfile": "Dockerfile", - // Update 'VARIANT' to pick a Node version: 10, 12, 14, 18 - "args": { "VARIANT": "18" } - }, + "name": "Node.js", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 10, 12, 14, 18 + "args": { "VARIANT": "18" } + }, - // Set *default* container specific settings.json values on container create. - "settings": { - "terminal.integrated.shell.linux": "/bin/bash" - }, + // Set *default* container specific settings.json values on container create. + "settings": { + "terminal.integrated.shell.linux": "/bin/bash" + }, - // Add the IDs of extensions you want installed when the container is created. - "extensions": [ - "dbaeumer.vscode-eslint" - ], + // Add the IDs of extensions you want installed when the container is created. + "extensions": ["dbaeumer.vscode-eslint"], - // Use 'forwardPorts' to make a list of ports inside the container available locally. - // "forwardPorts": [], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], - // Use 'postCreateCommand' to run commands after the container is created. - // "postCreateCommand": "yarn install", + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "yarn install", - // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. - "remoteUser": "node" + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node" } diff --git a/.eslintrc.js b/.eslintrc.js index bfff5f15257f..eb14f4a0661b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,65 +1,59 @@ module.exports = { - - "env": { - "browser": true, - "es6": true, - "node": true, - "amd": true + env: { + browser: true, + es6: true, + node: true, + amd: true }, - "settings": { - "react": { - "version": "detect" + settings: { + react: { + version: 'detect' } }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended" - ], - "parser": "@babel/eslint-parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true + extends: ['eslint:recommended', 'plugin:react/recommended'], + parser: '@babel/eslint-parser', + parserOptions: { + ecmaFeatures: { + jsx: true }, - "ecmaVersion": 2018, - "sourceType": "module" + ecmaVersion: 2018, + sourceType: 'module' }, - "plugins": [ - "react" - ], - "rules": { - "array-bracket-spacing": ["error", "never"], - "comma-style": ["error"], - "arrow-spacing": [ - "error", + plugins: ['react'], + rules: { + 'array-bracket-spacing': ['error', 'never'], + 'comma-style': ['error'], + 'arrow-spacing': [ + 'error', { - "after": true, - "before": true + after: true, + before: true } ], - "block-scoped-var": "error", - "block-spacing": "error", - "brace-style": [ - "error", - "1tbs" + 'block-scoped-var': 'error', + 'block-spacing': 'error', + 'brace-style': ['error', '1tbs'], + 'jsx-quotes': ['error', 'prefer-double'], + 'keyword-spacing': 'error', + 'key-spacing': [ + 'error', + { + beforeColon: false, + afterColon: true + } ], - "jsx-quotes": ["error", "prefer-double"], - "keyword-spacing": "error", - "key-spacing": ["error", { - "beforeColon": false, - "afterColon": true, - }], - "no-unused-vars": [ - "warn", + 'no-unused-vars': [ + 'warn', { - "varsIgnorePattern": "React" + varsIgnorePattern: 'React' } ], - "no-trailing-spaces": "error", - "object-curly-spacing": ["error", "always"], - "react/display-name": 0, - "react/prop-types": 0, - "react/no-unescaped-entities": [0], - "react/jsx-no-duplicate-props": [0], + 'no-trailing-spaces': 'error', + 'object-curly-spacing': ['error', 'always'], + 'react/display-name': 0, + 'react/prop-types': 0, + 'react/no-unescaped-entities': [0], + 'react/jsx-no-duplicate-props': [0], // "indent": [ // "error", 2, { // "FunctionExpression": { "parameters": "first" }, @@ -71,28 +65,21 @@ module.exports = { // ignoredNodes: ["TemplateLiteral"] // } // ], - "linebreak-style": [ - "error", - "unix" - ], + 'linebreak-style': ['error', 'unix'], // "quotes": [ // "error", // "double" // ], - "semi": [ - "error", - "always" - ], - "strict": 0, - "valid-typeof": 0, - "space-unary-ops": [ - 1, { - "words": true, - "nonwords": false + semi: ['error', 'always'], + strict: 0, + 'valid-typeof': 0, + 'space-unary-ops': [ + 1, + { + words: true, + nonwords: false } ], - "space-infix-ops": [ - "error" - ] + 'space-infix-ops': ['error'] } }; diff --git a/.github/ISSUE_TEMPLATE/blog.md b/.github/ISSUE_TEMPLATE/blog.md index 3c8cfa86f40d..a28678f2db9f 100644 --- a/.github/ISSUE_TEMPLATE/blog.md +++ b/.github/ISSUE_TEMPLATE/blog.md @@ -5,18 +5,22 @@ title: '[Blog]' labels: 'area/blog, help wanted, framework/gatsby, language/markdown' assignees: '' --- + Contributors and community members are encouraged to post on https://layer5.io/blog. A new blog post fitting the following description is requested to be written by a community member: -**Desired Title:** -**Topic:** -**Core points to convey in the post:** +**Desired Title:** +**Topic:** +**Core points to convey in the post:** + 1. 1. 1. --- +

Contributor Resources

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - See Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs). diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index b16dfbc932ee..17338cfbb79a 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -5,23 +5,30 @@ title: '' labels: 'kind/bug' assignees: '' --- + ### Description + ### Expected Behavior + ### Screenshots + ### Environment: + - Host OS: - Browser: --- +

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - 📚 See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md). - 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9) - 🙋🏾🙋🏼 Questions: [Discussion Forum](https://discuss.layer5.io) and [Community Slack](https://slack.layer5.io). diff --git a/.github/ISSUE_TEMPLATE/chore_task.md b/.github/ISSUE_TEMPLATE/chore_task.md index 6d3098990196..61ef37255621 100644 --- a/.github/ISSUE_TEMPLATE/chore_task.md +++ b/.github/ISSUE_TEMPLATE/chore_task.md @@ -5,16 +5,21 @@ title: '' labels: 'kind/chore' assignees: '' --- + ### Current Behavior + ### Desired Situation + --- +

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - 📚 See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md). - 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9) diff --git a/.github/ISSUE_TEMPLATE/community_member_profile.md b/.github/ISSUE_TEMPLATE/community_member_profile.md index 57b9a8c1740b..68be5e5a6833 100644 --- a/.github/ISSUE_TEMPLATE/community_member_profile.md +++ b/.github/ISSUE_TEMPLATE/community_member_profile.md @@ -26,5 +26,6 @@ A detailed explanation on how to set up a community member profile can be found **Contributor Resources** The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - See Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs). Join the [Layer5 Community](https://slack.layer5.io) for access. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index be7cc37987bc..9b04011d2eef 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,5 +1,5 @@ blank_issues_enabled: false contact_links: -- name: 🙋🏾 🙋🏼‍ Question - url: https://github.com/layer5io/layer5/discussions/new - about: Submit your question using GitHub Discussions. \ No newline at end of file + - name: 🙋🏾 🙋🏼‍ Question + url: https://github.com/layer5io/layer5/discussions/new + about: Submit your question using GitHub Discussions. diff --git a/.github/ISSUE_TEMPLATE/engagement.md b/.github/ISSUE_TEMPLATE/engagement.md index 8dde002785aa..bbef14eb75b7 100644 --- a/.github/ISSUE_TEMPLATE/engagement.md +++ b/.github/ISSUE_TEMPLATE/engagement.md @@ -5,15 +5,20 @@ title: '' labels: 'kind/engagement' assignees: '' --- + **Current Behavior** + **Desired Behavior** + --- + **Contributor Resources** The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - See Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs). diff --git a/.github/ISSUE_TEMPLATE/events.md b/.github/ISSUE_TEMPLATE/events.md index 1b9129e6933e..f152d7c674f3 100644 --- a/.github/ISSUE_TEMPLATE/events.md +++ b/.github/ISSUE_TEMPLATE/events.md @@ -5,19 +5,23 @@ title: '[Event]' labels: 'area/events, help wanted, framework/gatsby, language/markdown, good first issue' assignees: '' --- + Please add the following event to layer5.io/events. **Event:** -- Event Title: -- Event Link: -- Talk Description: -- Talk Link: -- Deck: -- Video: + +- Event Title: +- Event Link: +- Talk Description: +- Talk Link: +- Deck: +- Video: --- +

Contributor Resources

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - See Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs). diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 66837dfc54cd..d05ff7188157 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -5,27 +5,35 @@ title: '' labels: 'kind/enhancement' assignees: '' --- + ### Current Behavior + ### Desired Behavior + ### Screenshots / Mockups + ### Implementation + ### Acceptance Tests + --- +

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - 📚 See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md). -- 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9) +- 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9) - 🙋🏾🙋🏼 Questions: [Discussion Forum](https://discuss.layer5.io) and [Community Slack](https://slack.layer5.io). Join the Layer5 Community by submitting your [community member form](https://layer5.io/newcomer). diff --git a/.github/ISSUE_TEMPLATE/framework_discourse.md b/.github/ISSUE_TEMPLATE/framework_discourse.md index a9ce370c94d3..1efbf5875afb 100644 --- a/.github/ISSUE_TEMPLATE/framework_discourse.md +++ b/.github/ISSUE_TEMPLATE/framework_discourse.md @@ -5,16 +5,21 @@ title: '' labels: 'framework/discourse' assignees: '' --- + ### Description + ### Expected Behavior + ### Screenshots + **Enviroment:** + - Host OS: - Browser: @@ -22,17 +27,20 @@ assignees: '' [Optional] **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error --- +

Contributor Resources and Handbook

Contributing to the [discuss.layer5.io](https://discuss.layer5.io/) site involves a unique contribution model in which contributors make changes in the discourse server running at [staging-discuss.layer5.io](https://staging-discuss.layer5.io/) first, then those changes are reviewed and propagated to the [discuss.layer5.io](https://discuss.layer5.io/). Steps to get an access to the [staging-discuss.layer5.io](https://staging-discuss.layer5.io/) + - First create an account [here](https://staging-discuss.layer5.io/). - Then ask for the admin access. - And then start contributing to the discuss forum. diff --git a/.github/ISSUE_TEMPLATE/landscape.md b/.github/ISSUE_TEMPLATE/landscape.md index f48d78b9a0d0..0f152c240a47 100644 --- a/.github/ISSUE_TEMPLATE/landscape.md +++ b/.github/ISSUE_TEMPLATE/landscape.md @@ -5,13 +5,16 @@ title: '[Landscape]' labels: 'area/landscape, help wanted, framework/gatsby, language/markdown, good first issue' assignees: '' --- + **Current State:** **Desired State:** --- + **Contributor Resources** + - [Instructions for updating the landscape](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md#updating-the-service-mesh-landscape) -The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - See Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs). diff --git a/.github/ISSUE_TEMPLATE/learn_layer5.md b/.github/ISSUE_TEMPLATE/learn_layer5.md index 5bf2a27158d3..da9b17b080f2 100644 --- a/.github/ISSUE_TEMPLATE/learn_layer5.md +++ b/.github/ISSUE_TEMPLATE/learn_layer5.md @@ -5,13 +5,16 @@ title: '[Learn]' labels: 'area/learn, help wanted, framework/gatsby, language/markdown, good first issue' assignees: '' --- + **Current State:** **Desired State:** --- + **Contributor Resources** The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - Check the Learn Layer5 site [Design Spec](https://docs.google.com/document/d/1tQ9tLbetBVKP7z76FR19vsxbAfoFHZzZYxCt7lJpAhU/edit) to know more about the site structure and development plans. - Checkout the Learn Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/?node-id=4853%3A0). diff --git a/.github/ISSUE_TEMPLATE/news.md b/.github/ISSUE_TEMPLATE/news.md index 17272cb4e513..e0d5cffa01d3 100644 --- a/.github/ISSUE_TEMPLATE/news.md +++ b/.github/ISSUE_TEMPLATE/news.md @@ -5,16 +5,20 @@ title: '[News]' labels: 'area/news, help wanted, framework/gatsby, language/markdown, good first issue' assignees: '' --- + We're in the news! Using the contributing instructions for [adding news](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md#adding-news), please add the following article to the [Layer5 Newsroom](https://layer5.io/news). **Article:** + - Title: - Link: --- +

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - 📚 See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md). - 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9) - 🙋🏾🙋🏼 Questions: [Discussion Forum](https://discuss.layer5.io) and [Community Slack](https://slack.layer5.io). diff --git a/.github/ISSUE_TEMPLATE/writing.md b/.github/ISSUE_TEMPLATE/writing.md index 438868efed5d..8085098784e8 100644 --- a/.github/ISSUE_TEMPLATE/writing.md +++ b/.github/ISSUE_TEMPLATE/writing.md @@ -5,18 +5,22 @@ title: '[Writing]' labels: 'area/writing, help wanted, language/english' assignees: '' --- + Contributors and community members are encouraged to participate in Layer5's [Writing Program](https://layer5.io/community/handbook/writing-program)). A new written piece fitting the following description is requested to be written by a community member: -**Desired Title:** -**Topic:** -**Core points to convey:** +**Desired Title:** +**Topic:** +**Core points to convey:** + 1. 1. 1. --- +

Contributor Resources

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master). + - See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md) - See Layer5 site designs in this [Figma project](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs). diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 50f3ba502965..e4312380fd08 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,20 +4,19 @@ This PR fixes # **Notes for Reviewers** - **[Signed commits](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)** + - [ ] Yes, I signed my commits. - diff --git a/.github/actions/comment-preview-on-pr/action.yml b/.github/actions/comment-preview-on-pr/action.yml index 7d5887adfde0..585f8a8e3552 100644 --- a/.github/actions/comment-preview-on-pr/action.yml +++ b/.github/actions/comment-preview-on-pr/action.yml @@ -10,4 +10,4 @@ inputs: required: true runs: using: docker - image: Dockerfile \ No newline at end of file + image: Dockerfile diff --git a/.github/config.yml b/.github/config.yml index b7cacf69daf0..2b8b784a4db3 100644 --- a/.github/config.yml +++ b/.github/config.yml @@ -1,28 +1,27 @@ +--- #------------------------------------------------------------------------------- # Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome - # Comment to be posted to on first time issues +# Comment to be posted to on first time issues newIssueWelcomeComment: > - Thanks for opening this issue. A contributor will be by to give feedback soon. In the meantime, please review the [Layer5 Contributors' Welcome Guide](https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit?usp=sharing) and sure to join the [community Slack](https://slack.layer5.io/). - # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome - # Comment to be posted to on PRs from first time contributors in your repository + Thanks for opening this issue. A contributor will be by to give feedback soon. In the meantime, please review the [Layer5 Contributors' Welcome Guide](https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit?usp=sharing) and sure to join the [community Slack](https://slack.layer5.io/). +# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome +# Comment to be posted to on PRs from first time contributors in your repository newPRWelcomeComment: > - Yay, your first pull request! :thumbsup: A contributor will be by to give feedback soon. In the meantime, please review the [Layer5 Contributors' Welcome Guide](https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit?usp=sharing) and sure to join the [community Slack](https://slack.layer5.io/). - - Be sure to double-check that you have signed your commits. Here are instructions for [making signing an implicit activity while peforming a commit](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin). + Yay, your first pull request! :thumbsup: A contributor will be by to give feedback soon. In the meantime, please review the [Layer5 Contributors' Welcome Guide](https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit?usp=sharing) and sure to join the [community Slack](https://slack.layer5.io/). + Be sure to double-check that you have signed your commits. Here are instructions for [making signing an implicit activity while peforming a commit](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin). #------------------------------------------------------------------------------- # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge # Comment to be posted to on pull requests merged by a first time user firstPRMergeComment: > -         Thank you for contributing to the Layer5 community! :tada: - \ - \ - ![Congrats!](https://raw.githubusercontent.com/layer5io/layer5/master/.github/welcome/Layer5-celebration.png) - \ - \ -         [Join the community](https://slack.layer5.io), if you haven't yet and please leave a :star: [star on the project](../stargazers). :smile: and - +         Thank you for contributing to the Layer5 community! :tada: + \ + \ + ![Congrats!](https://raw.githubusercontent.com/layer5io/layer5/master/.github/welcome/Layer5-celebration.png) + \ + \ +         [Join the community](https://slack.layer5.io), if you haven't yet and please leave a :star: [star on the project](../stargazers). :smile: and #------------------------------------------------------------------------------- # Configuration for request-info - https://github.com/behaviorbot/request-info @@ -34,7 +33,6 @@ requestInfoReplyComment: > #requestInfoUserstoExclude: # - layer5io/maintainers - #------------------------------------------------------------------------------- # Configuration for sentiment-bot - https://github.com/behaviorbot/sentiment-bot # *Required* toxicity threshold between 0 and .99 with the higher numbers being the most toxic @@ -44,4 +42,3 @@ sentimentBotToxicityThreshold: .9 # *Required* Comment to reply with sentimentBotReplyComment: > Please be sure to review the code of conduct and be respectful of other users. // @layer5io/maintainers - diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 1388d22a3039..20d5de14df74 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,8 +1,7 @@ version: 2 updates: - package-ecosystem: npm - directory: "/" + directory: '/' schedule: interval: monthly reviewers: - diff --git a/.github/label-commenter-config.yml b/.github/label-commenter-config.yml index 05757866ade6..09ab39a68027 100644 --- a/.github/label-commenter-config.yml +++ b/.github/label-commenter-config.yml @@ -22,14 +22,16 @@ labels: - name: issue/dco labeled: issue: - body: "🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. _A what?_ A commit sign-off (your email address).\n\n - To amend the commits in this PR with your signoff using the instructions provided in the DCO check. \n\n - To configure your dev environment to automatically signoff on your commits in the future, see [these instructions](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)." + body: + "🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. _A what?_ A commit sign-off (your email address).\n\n + To amend the commits in this PR with your signoff using the instructions provided in the DCO check. \n\n + To configure your dev environment to automatically signoff on your commits in the future, see [these instructions](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)." action: open pr: - body: "🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. _A what?_ A commit sign-off (your email address).\n\n - To amend the commits in this PR with your signoff using the instructions provided in the DCO check. \n\n - To configure your dev environment to automatically signoff on your commits in the future, see [these instructions](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)." + body: + "🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. _A what?_ A commit sign-off (your email address).\n\n + To amend the commits in this PR with your signoff using the instructions provided in the DCO check. \n\n + To configure your dev environment to automatically signoff on your commits in the future, see [these instructions](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)." action: open - name: component/ui labeled: diff --git a/.github/labeler.yml b/.github/labeler.yml index 080e048af5dd..93f61232140b 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -1,99 +1,99 @@ area/docs: -- changed-files: - - any-glob-to-any-file: - - "readme.md" - - "contributing.md" + - changed-files: + - any-glob-to-any-file: + - 'readme.md' + - 'contributing.md' area/ci: -- changed-files: - - any-glob-to-any-file: - - ".github/**/*" - - ".husky/**/*" + - changed-files: + - any-glob-to-any-file: + - '.github/**/*' + - '.husky/**/*' area/blog: -- changed-files: - - any-glob-to-any-file: - - "src/collections/blog/**/*" - - "src/pages/blog/**/*" - - "src/templates/blog-*.js" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/blog/**/*' + - 'src/pages/blog/**/*' + - 'src/templates/blog-*.js' area/careers: -- changed-files: - - any-glob-to-any-file: - - "src/collections/careers/**/*" - - "src/collections/programs/**/*" - - "src/templates/career-*.js" - - "src/pages/careers/*" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/careers/**/*' + - 'src/collections/programs/**/*' + - 'src/templates/career-*.js' + - 'src/pages/careers/*' area/community: -- changed-files: - - any-glob-to-any-file: - - "src/collections/members/**/*" - - "src/pages/community/**/*" - - "src/templates/member-*.js" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/members/**/*' + - 'src/pages/community/**/*' + - 'src/templates/member-*.js' area/events: -- changed-files: - - any-glob-to-any-file: - - "src/collections/events/**/*" - - "src/templates/event*.js" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/events/**/*' + - 'src/templates/event*.js' area/handbook: -- changed-files: - - any-glob-to-any-file: - - "src/components/HandbookCard/**/*" - - "src/components/Handbook-navigation/**/*" - - "src/sections/Community/Handbook/**/*" + - changed-files: + - any-glob-to-any-file: + - 'src/components/HandbookCard/**/*' + - 'src/components/Handbook-navigation/**/*' + - 'src/sections/Community/Handbook/**/*' area/landscape: -- changed-files: - - any-glob-to-any-file: - - "src/sections/Landscape/**/*" - - "src/components/Landscape-Table/**/*" - - "src/collections/landscape/**/*" + - changed-files: + - any-glob-to-any-file: + - 'src/sections/Landscape/**/*' + - 'src/components/Landscape-Table/**/*' + - 'src/collections/landscape/**/*' area/learn: -- changed-files: - - any-glob-to-any-file: - - "content-learn" - - "src/components/Learn-Components/**/*" - - "src/collections/service-mesh-books/**/*" - - "src/collections/service-mesh-learn/**/*" - - "src/collections/service-mesh-workshops/**/*" - - "src/templates/book-*.js" - - "src/templates/course-*.js" - - "src/templates/lab-*.js" - - "src/templates/learn-*.js" - - "src/templates/workshop-*.js" + - changed-files: + - any-glob-to-any-file: + - 'content-learn' + - 'src/components/Learn-Components/**/*' + - 'src/collections/service-mesh-books/**/*' + - 'src/collections/service-mesh-learn/**/*' + - 'src/collections/service-mesh-workshops/**/*' + - 'src/templates/book-*.js' + - 'src/templates/course-*.js' + - 'src/templates/lab-*.js' + - 'src/templates/learn-*.js' + - 'src/templates/workshop-*.js' area/news: -- changed-files: - - any-glob-to-any-file: - - "src/collections/news/**/*" - - "src/templates/news-*.js" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/news/**/*' + - 'src/templates/news-*.js' area/partners: -- changed-files: - - any-glob-to-any-file: - - "src/collections/partners/**/*" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/partners/**/*' area/resources: -- changed-files: - - any-glob-to-any-file: - - "src/collections/resources/**/*" - - "src/templates/resource-*.js" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/resources/**/*' + - 'src/templates/resource-*.js' area/projects: -- changed-files: - - any-glob-to-any-file: - - "src/collections/projects/**/*" - - "src/pages/projects/**/*" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/projects/**/*' + - 'src/pages/projects/**/*' area/core-styles: -- changed-files: - - any-glob-to-any-file: - - "src/sections/app.style.js" - - "src/theme/app/*" + - changed-files: + - any-glob-to-any-file: + - 'src/sections/app.style.js' + - 'src/theme/app/*' area/site-config: -- changed-files: - - any-glob-to-any-file: - - "gatsby-*.js" + - changed-files: + - any-glob-to-any-file: + - 'gatsby-*.js' area/packages: -- changed-files: - - any-glob-to-any-file: - - "package-*.js" + - changed-files: + - any-glob-to-any-file: + - 'package-*.js' project/meshery: -- changed-files: - - any-glob-to-any-file: - - "src/collections/integrations/**/*" + - changed-files: + - any-glob-to-any-file: + - 'src/collections/integrations/**/*' project/meshmap: -- changed-files: - - any-glob-to-any-file: - - "src/sections/Meshmap/**/*" + - changed-files: + - any-glob-to-any-file: + - 'src/sections/Meshmap/**/*' diff --git a/.github/workflows/build-and-deploy-site.yml b/.github/workflows/build-and-deploy-site.yml index 6f0485507ea0..f662985391a5 100644 --- a/.github/workflows/build-and-deploy-site.yml +++ b/.github/workflows/build-and-deploy-site.yml @@ -1,7 +1,7 @@ name: Build and Deploy Site on: push: - branches: [ master ] + branches: [master] jobs: build-and-deploy: @@ -12,7 +12,7 @@ jobs: with: fetch-depth: 1 - - name: Install and Build 🔧 + - name: Install and Build 🔧 run: | npm install npm run build diff --git a/.github/workflows/build-and-preview-site.yml b/.github/workflows/build-and-preview-site.yml index a1ba8eaf7f4b..2fe140fbecc0 100644 --- a/.github/workflows/build-and-preview-site.yml +++ b/.github/workflows/build-and-preview-site.yml @@ -1,10 +1,9 @@ name: Build and Preview Site on: pull_request: - branches: [ master ] + branches: [master] types: [opened, synchronize, reopened] - jobs: site-preview: runs-on: ubuntu-latest @@ -15,7 +14,7 @@ jobs: persist-credentials: false fetch-depth: 1 - - name: Install and Build 🔧 + - name: Install and Build 🔧 run: | npm install npm run noIndex diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml index 0127be633202..598b9802eaba 100644 --- a/.github/workflows/labeler.yml +++ b/.github/workflows/labeler.yml @@ -1,6 +1,6 @@ -name: "Pull Request Labeler" +name: 'Pull Request Labeler' on: -- pull_request_target + - pull_request_target jobs: triage: @@ -9,6 +9,6 @@ jobs: pull-requests: write runs-on: ubuntu-latest steps: - - uses: actions/labeler@v5 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" + - uses: actions/labeler@v5 + with: + repo-token: '${{ secrets.GITHUB_TOKEN }}' diff --git a/.github/workflows/lighthouseci.yml b/.github/workflows/lighthouseci.yml index d6ea01da0d32..dffcd046d71b 100644 --- a/.github/workflows/lighthouseci.yml +++ b/.github/workflows/lighthouseci.yml @@ -3,8 +3,8 @@ on: workflow_dispatch: pull_request: paths-ignore: - - "*.md" - - "*.github/**" + - '*.md' + - '*.github/**' jobs: lighthouseci: diff --git a/.github/workflows/preview-site.yml b/.github/workflows/preview-site.yml index ef49c315f3ff..564459814cd2 100644 --- a/.github/workflows/preview-site.yml +++ b/.github/workflows/preview-site.yml @@ -43,6 +43,4 @@ jobs: uses: ./.github/actions/comment-preview-on-pr with: token: ${{ secrets.GH_ACCESS_TOKEN }} - deploy_url: "${{ steps.netlify.outputs.deploy-url }}" - - + deploy_url: '${{ steps.netlify.outputs.deploy-url }}' diff --git a/.github/workflows/slack.yml b/.github/workflows/slack.yml index 30a4b337ca4b..e9f54b76428a 100644 --- a/.github/workflows/slack.yml +++ b/.github/workflows/slack.yml @@ -1,5 +1,5 @@ name: Slack Notify -on: +on: watch: types: [started] jobs: @@ -8,17 +8,17 @@ jobs: name: Notify Slack on star runs-on: ubuntu-latest steps: - - name: Get current star count - run: | - echo "STARS=$(curl --silent 'https://api.github.com/repos/${{github.repository}}' -H 'Accept: application/vnd.github.preview' | jq '.stargazers_count')" >> $GITHUB_ENV - - name: Notify slack - env: - SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }} - uses: pullreminders/slack-action@master - with: - args: '{\"channel\":\"CSK7N9TGX\",\"text\":\"${{ github.actor }} just starred ${{github.repository}}! (https://github.com/${{github.repository}}/stargazers) Total ⭐️: ${{env.STARS}}\"}' + - name: Get current star count + run: | + echo "STARS=$(curl --silent 'https://api.github.com/repos/${{github.repository}}' -H 'Accept: application/vnd.github.preview' | jq '.stargazers_count')" >> $GITHUB_ENV + - name: Notify slack + env: + SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }} + uses: pullreminders/slack-action@master + with: + args: '{\"channel\":\"CSK7N9TGX\",\"text\":\"${{ github.actor }} just starred ${{github.repository}}! (https://github.com/${{github.repository}}/stargazers) Total ⭐️: ${{env.STARS}}\"}' good-first-issue-notify: - if: github.event_name == 'issues' && github.event.label.name == 'good first issue' || github.event.label.name == 'first-timers-only' + if: github.event_name == 'issues' && github.event.label.name == 'good first issue' || github.event.label.name == 'first-timers-only' name: Notify Slack for new good-first-issue runs-on: ubuntu-latest steps: diff --git a/.github/workflows/tweet-issue.yml b/.github/workflows/tweet-issue.yml index 43c2fd0bfc54..fb97bfced9c3 100644 --- a/.github/workflows/tweet-issue.yml +++ b/.github/workflows/tweet-issue.yml @@ -1,45 +1,44 @@ -name: "Tweet issue/pr when labeled" +name: 'Tweet issue/pr when labeled' on: issues: types: labeled pull_request: - types: labeled + types: labeled - permissions: contents: read issues: write - + jobs: tweet: if: ${{ github.event.label.name == 'issue/tweet' }} runs-on: ubuntu-latest steps: - - name: Check if the workflow initiater is an organization member - uses: tspascoal/get-user-teams-membership@v2 - id: checkUserMember - with: - username: ${{ github.actor }} - organization: "layer5io" - team: "maintainers" - GITHUB_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }} - # - if: github.ref == 'refs/heads/master' - - name: Check if it is issue - uses: ethomson/send-tweet-action@v1 - with: - status: 'Help wanted: "${{ github.event.issue.title }}" - ${{ github.event.issue.html_url }} \#opensource' - consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY_LAYER5 }} - consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET_LAYER5 }} - access-token: ${{ secrets.TWITTER_ACCESS_TOKEN_LAYER5 }} - access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET_LAYER5 }} - - # - if: github.ref == 'refs/heads/master' - - name: Check if it is PR - uses: ethomson/send-tweet-action@v1 - with: - status: 'Help wanted: "${{ github.event.pull_request.title }}" - ${{ github.event.pull_request.html_url }} \#opensource' - consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY_LAYER5 }} - consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET_LAYER5 }} - access-token: ${{ secrets.TWITTER_ACCESS_TOKEN_LAYER5 }} - access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET_LAYER5 }} + - name: Check if the workflow initiater is an organization member + uses: tspascoal/get-user-teams-membership@v2 + id: checkUserMember + with: + username: ${{ github.actor }} + organization: 'layer5io' + team: 'maintainers' + GITHUB_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }} + # - if: github.ref == 'refs/heads/master' + - name: Check if it is issue + uses: ethomson/send-tweet-action@v1 + with: + status: 'Help wanted: "${{ github.event.issue.title }}" - ${{ github.event.issue.html_url }} \#opensource' + consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY_LAYER5 }} + consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET_LAYER5 }} + access-token: ${{ secrets.TWITTER_ACCESS_TOKEN_LAYER5 }} + access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET_LAYER5 }} + + # - if: github.ref == 'refs/heads/master' + - name: Check if it is PR + uses: ethomson/send-tweet-action@v1 + with: + status: 'Help wanted: "${{ github.event.pull_request.title }}" - ${{ github.event.pull_request.html_url }} \#opensource' + consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY_LAYER5 }} + consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET_LAYER5 }} + access-token: ${{ secrets.TWITTER_ACCESS_TOKEN_LAYER5 }} + access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET_LAYER5 }} diff --git a/.lighthouserc.js b/.lighthouserc.js index 06bc8b98b5c9..2f273db84201 100644 --- a/.lighthouserc.js +++ b/.lighthouserc.js @@ -1,37 +1,37 @@ module.exports = { - "ci": { - "collect": { - "staticDistDir": "./public", - "url" : [ - "http://localhost/404.html", - "http://localhost/404/index.html", - "http://localhost", - "http://localhost/company/about/index.html", - "http://localhost/cloud-native-management/meshery/index.html", - "http://localhost/cloud-native-management/meshmap/index.html", - "http://localhost/learn/learning-paths/index.html", - "http://localhost/learn/service-mesh-books/index.html", - "http://localhost/learn/service-mesh-workshops/index.html", - "http://localhost/learn/index.html", - "http://localhost/blog/index.html", - "http://localhost/resources/index.html", - "http://localhost/careers/index.html", - "http://localhost/community/members/index.html", - "http://localhost/community/meshmates/index.html", - "http://localhost/community/events/index.html", - "http://localhost/community/newcomers/index.html", - ], - }, - "assert": { - "assertions": { - "categories:performance": ["warn", {"minScore": .90}], - "categories:accessibility": ["warn", {"minScore": .90}], - "categories:best-practices": ["warn", {"minScore": .90}], - "categories:seo": ["warn", {"minScore": .90}], - } - }, - "upload": { - "target": "temporary-public-storage", - }, + ci: { + collect: { + staticDistDir: './public', + url: [ + 'http://localhost/404.html', + 'http://localhost/404/index.html', + 'http://localhost', + 'http://localhost/company/about/index.html', + 'http://localhost/cloud-native-management/meshery/index.html', + 'http://localhost/cloud-native-management/meshmap/index.html', + 'http://localhost/learn/learning-paths/index.html', + 'http://localhost/learn/service-mesh-books/index.html', + 'http://localhost/learn/service-mesh-workshops/index.html', + 'http://localhost/learn/index.html', + 'http://localhost/blog/index.html', + 'http://localhost/resources/index.html', + 'http://localhost/careers/index.html', + 'http://localhost/community/members/index.html', + 'http://localhost/community/meshmates/index.html', + 'http://localhost/community/events/index.html', + 'http://localhost/community/newcomers/index.html' + ] + }, + assert: { + assertions: { + 'categories:performance': ['warn', { minScore: 0.9 }], + 'categories:accessibility': ['warn', { minScore: 0.9 }], + 'categories:best-practices': ['warn', { minScore: 0.9 }], + 'categories:seo': ['warn', { minScore: 0.9 }] + } + }, + upload: { + target: 'temporary-public-storage' } - }; \ No newline at end of file + } +}; diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 96f3a58c74b3..50f2db33ce6d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -38,7 +38,6 @@ To help you get started on contributing to Layer5 projects, refer to the [Layer5 Before **creating** an Issue i.e for `features`/`bugs`/`improvements` please follow these steps: - 1. Search existing Issues before creating a new Issue (look to see if the Issue has already been created). 1. If it doesn't exist create a new Issue giving as much context as possible (please take note and select the correct Issue type, for example `bug`, `documentation` or `feature`. 1. If you wish to work on the Issue once it has been triaged, please include this in your Issue description. @@ -49,12 +48,12 @@ Before working on an existing Issue please follow these steps: 1. Comment asking for the Issue to be assigned to you. 1. To best position yourself for Issues assignment, we recommend that you: - 1. Confirm that you have read the CONTRIBUTING.md. - 1. Have a functional development environment (have built and are able to run the project). - 1. Convey your intended approach to solving the issue. - 1. Put each of these items in writing in one or more comments. + 1. Confirm that you have read the CONTRIBUTING.md. + 1. Have a functional development environment (have built and are able to run the project). + 1. Convey your intended approach to solving the issue. + 1. Put each of these items in writing in one or more comments. 1. After the Issue is assigned to you, you can start working on it. -1. In general, **only** start working on this Issue (and open a Pull Request) when it has been assigned to you. Doing so will prevent confusion, duplicate work (some of which may go unaccepted given its duplicity), incidental stepping on toes, and the headache involved for maintainers and contributors alike as Issue assignments collide and heads bump together. +1. In general, **only** start working on this Issue (and open a Pull Request) when it has been assigned to you. Doing so will prevent confusion, duplicate work (some of which may go unaccepted given its duplicity), incidental stepping on toes, and the headache involved for maintainers and contributors alike as Issue assignments collide and heads bump together. 1. Reference the Issue in your Pull Request (for example `This PR fixes #123`). so that the corresponding Issue is automatically closed upon merge of your Pull Request. > Notes: @@ -80,7 +79,6 @@ We welcome everyone to review Pull Requests. It is a great way to learn, network - Do not repeat feedback, this creates more noise than value (check the existing conversation), use GitHub reactions if you agree/disagree with a comment - Do not blindly approve Pull Requests to improve your GitHub contributors graph - ## Style Guide The Layer5 website is hosted in this repository and is built using Gatsbyjs. Before opening a Pull Request, please review the [design doc](https://docs.google.com/document/d/1rvUZy2_S1a2_14BAQIg6b9cMhUuu04kYzkOPDPaPptI/edit#) to learn more about the structure of the website. Once a Pull Request has been submitted, a preview deployment will be built and made available to you and other contributors on your PR to review. diff --git a/GOVERNANCE.md b/GOVERNANCE.md index 8b8edc734165..c134b92d855d 100644 --- a/GOVERNANCE.md +++ b/GOVERNANCE.md @@ -5,4 +5,5 @@ Any maintainer or MeshMate who is unresponsive or non-participatory (across the While much communication is asynchronous, maintainers are required to attend a minimum of one meeting a month in order facilitate high-fidelity, synchronous communication, which is necessary for the quality collaboration, conveyance of complex topics, and real-time advancement of the project. # Maintainer Teams -A core team of maintainers steward Layer5, however, Layer5 is comprised of any number of components (adapters, operators, ...) and any number of logical areas of concern (e.g. community, governance, ...). The size of Layer5's project vision and the pace of its development, requires sub-teams to supplement the core team. Each sub-team is focused on a specific area/component e.g., adapters, docs, website, UI, CLI, and so on. To ensure global coordination and a strong, coherent vision for the project as a whole, each sub-team is led by a member of the core team. \ No newline at end of file + +A core team of maintainers steward Layer5, however, Layer5 is comprised of any number of components (adapters, operators, ...) and any number of logical areas of concern (e.g. community, governance, ...). The size of Layer5's project vision and the pace of its development, requires sub-teams to supplement the core team. Each sub-team is focused on a specific area/component e.g., adapters, docs, website, UI, CLI, and so on. To ensure global coordination and a strong, coherent vision for the project as a whole, each sub-team is led by a member of the core team. diff --git a/README.md b/README.md index 8e502d142285..6bc927b731e0 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,6 @@


-

MeshMap

@@ -48,7 +47,6 @@


-

Cloud Native Patterns

Cloud Native Patterns @@ -58,7 +56,6 @@


-

Service Mesh Landscape

Service Mesh Landscape is a compre


-

Cloud Native Performance

@@ -84,7 +80,6 @@ The Cloud Native P


-

Image Hub


-

Meshery Operator

@@ -108,7 +102,6 @@ Image Hub supports Envoy-based data planes. It is compatible with and can be dep


-

Learn Layer5

@@ -121,7 +114,6 @@ alt="Learn Layer5" align="left" />


- \ No newline at end of file +--> diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/index.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/index.mdx index 6b6c163414a9..4448446efb43 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/index.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/index.mdx @@ -1,23 +1,17 @@ --- -docType: "Course" -title: "Course" -description: "A course which teaches advanced concepts of service meshes and how to use them in an application effectively." -courseTitle: "Advance Concepts of Service Meshes - Hands On" -themeColor: "#466BB0" +docType: 'Course' +title: 'Course' +description: 'A course which teaches advanced concepts of service meshes and how to use them in an application effectively.' +courseTitle: 'Advance Concepts of Service Meshes - Hands On' +themeColor: '#466BB0' order: 2 videos: 3 lectures: 8 -cardImage: "../../../src/assets/images/service-mesh-icons/istio-white.svg" +cardImage: '../../../src/assets/images/service-mesh-icons/istio-white.svg' meshesYouLearn: [ - { - imagepath: "../../../src/assets/images/service-mesh-icons/istio.svg", - name: "Istio", - }, - { - imagepath: "../../../src/assets/images/service-mesh-icons/linkerd.webp", - name: "Linkerd", - } + { imagepath: '../../../src/assets/images/service-mesh-icons/istio.svg', name: 'Istio' }, + { imagepath: '../../../src/assets/images/service-mesh-icons/linkerd.webp', name: 'Linkerd' } ] toc: [ @@ -28,7 +22,7 @@ toc: 'traffic-management', 'service-security-capabilities', 'webassembly-and-intelligent-data-planes', - 'conclusion', + 'conclusion' ] --- diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/conclusion.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/conclusion.mdx index 30a396acc55f..4fdfa50b3799 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/conclusion.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/conclusion.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Conclusion" -description: "As a self-service engineering platform, Meshery enables collaborative design and operation of cloud native infrastructure." +docType: 'Chapter' +chapterTitle: 'Conclusion' +description: 'As a self-service engineering platform, Meshery enables collaborative design and operation of cloud native infrastructure.' videos: 4 lectures: 12 order: 8 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -16,8 +16,8 @@ import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapte

Congratulations!

- You have successfully completed the course on{" "} - "Advanced concepts of service meshes - Hands on" using{" "} + You have successfully completed the course on{' '} + "Advanced concepts of service meshes - Hands on" using{' '} Istio diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/deploy-an-application.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/deploy-an-application.mdx index 94bcc81fd124..945ed91c0180 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/deploy-an-application.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/deploy-an-application.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Deploy a sample application" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Deploy a sample application' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 2 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import BookInfoOffMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-off-mesh.webp"; -import BookInfoOnMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-on-mesh.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import BookInfoOffMesh from '../../../../src/assets/images/learn-layer5/istio/bookinfo-off-mesh.webp'; +import BookInfoOnMesh from '../../../../src/assets/images/learn-layer5/istio/bookinfo-on-mesh.webp'; @@ -17,11 +17,10 @@ To play with Istio and demonstrate some of it's capabilities, you will deploy th

What is the Bookinfo Application


-This application is a polyglot composition of microservices are written in -different languages and sample BookInfo application displays information about a -book, similar to a single catalog entry of an online book store. Displayed on -the page is a description of the book, book details (ISBN, number of pages, and -so on), and a few book reviews. +This application is a polyglot composition of microservices are written in different languages and +sample BookInfo application displays information about a book, similar to a single catalog entry of +an online book store. Displayed on the page is a description of the book, book details (ISBN, number +of pages, and so on), and a few book reviews. The end-to-end architecture of the application is shown in the figure. @@ -33,9 +32,9 @@ The end-to-end architecture of the application is shown in the figure. _Figure: BookInfo deployed off the mesh_
-It’s worth noting that these services have no dependencies on Istio, but make an -interesting service mesh example, particularly because of the multitude of services, -languages and versions for the reviews service. +It’s worth noting that these services have no dependencies on Istio, but make an interesting service +mesh example, particularly because of the multitude of services, languages and versions for the +reviews service. As shown in the figure below, proxies are sidecarred to each of the application containers. @@ -47,10 +46,10 @@ As shown in the figure below, proxies are sidecarred to each of the application _Figure: BookInfo deployed on the mesh_
-Sidecars proxy can be either manually or automatically injected into the pods. Automatic -sidecar injection requires that your Kubernetes api-server supports `admissionregistration.k8s.io/v1` -or `admissionregistration.k8s.io/v1beta1` or `admissionregistration.k8s.io/v1beta2` -APIs. Verify whether your Kubernetes deployment supports these APIs by executing: +Sidecars proxy can be either manually or automatically injected into the pods. Automatic sidecar +injection requires that your Kubernetes api-server supports `admissionregistration.k8s.io/v1` or +`admissionregistration.k8s.io/v1beta1` or `admissionregistration.k8s.io/v1beta2` APIs. Verify +whether your Kubernetes deployment supports these APIs by executing: ```sh kubectl api-versions | grep admissionregistration @@ -66,8 +65,8 @@ As part of Istio deployment in [Previous chapter](./getting-started), you have d

-Istio, deployed as part of this workshop, will also deploy the sidecar injector. -Let us now verify sidecar injector deployment. +Istio, deployed as part of this workshop, will also deploy the sidecar injector. Let us now verify +sidecar injector deployment. ```sh kubectl -n istio-system get configmaps istio-sidecar-injector @@ -108,7 +107,7 @@ This will do 3 things: 1. Deploys the virtual service and gateway needed to expose the BookInfo's productpage application in the `default` namespace.

- Verify Bookinfo deployment{" "} + Verify Bookinfo deployment{' '}

1. Verify that the deployments are all in a state of AVAILABLE before continuing. @@ -170,9 +169,7 @@ Applying this yaml file included in the Istio package you collected in [Getting kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml ``` -

- Deploy Gateway and Virtual Service for BookInfo app -

+

Deploy Gateway and Virtual Service for BookInfo app

```sh kubectl apply -f samples/bookinfo/networking/bookinfo-gateway.yaml diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/expose-services.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/expose-services.mdx index a19a0e925e59..7918ab2f4168 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/expose-services.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/expose-services.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Exposing services through Istio Ingress Gateway" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Exposing services through Istio Ingress Gateway' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 3 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; The components deployed on the service mesh by default are not exposed outside the cluster. An Ingress Gateway is deployed as a Kubernetes service of type LoadBalancer (or NodePort). To make Bookinfo accessible external to the cluster, you have to create an `Istio Gateway` for the Bookinfo application and also define an `Istio VirtualService` with the routes we need. @@ -18,8 +18,7 @@ The components deployed on the service mesh by default are not exposed outside t

Inspecting the Istio Ingress Gateway


-The ingress gateway gets exposed as a normal Kubernetes service of type LoadBalancer -(or NodePort): +The ingress gateway gets exposed as a normal Kubernetes service of type LoadBalancer (or NodePort): ```sh kubectl get svc istio-ingressgateway -n istio-system -o yaml @@ -78,9 +77,7 @@ kubectl get virtualservices kubectl get virtualservices -o yaml ``` -

- Find the external port of the Istio Ingress Gateway by running: -

+

Find the external port of the Istio Ingress Gateway by running:

```sh kubectl get service istio-ingressgateway -n istio-system -o wide @@ -198,9 +195,7 @@ Browse to the website of the Bookinfo. To view the product page, you will have t Now, reload the page multiple times and notice how it round robins between v1, v2 and v3 of the reviews service. -

- Inspect the Istio proxy of the productpage pod -

+

Inspect the Istio proxy of the productpage pod

To better understand the istio proxy, let's inspect the details. Let us `exec` into the productpage pod to find the proxy details. To do so we need to first find the full pod name and then `exec` into the istio-proxy container: @@ -240,9 +235,7 @@ Run the following command to create default destination rules for the Bookinfo s kubectl apply -f samples/bookinfo/networking/destination-rule-all-mtls.yaml ``` -

- Configure the Bookinfo route with the Istio Ingress gateway -

+

Configure the Bookinfo route with the Istio Ingress gateway

We can create a virtualservice & gateway for bookinfo app in the ingress gateway by running the following: diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/getting-started.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/getting-started.mdx index 316433b787d8..8f3e357a3489 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/getting-started.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/getting-started.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Getting Started" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Getting Started' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 1 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import InstallIstio from "../../../../src/assets/images/learn-layer5/istio/install-istio.webp"; -import IstioAdapter from "../../../../src/assets/images/learn-layer5/istio/istio-adapter.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import InstallIstio from '../../../../src/assets/images/learn-layer5/istio/install-istio.webp'; +import IstioAdapter from '../../../../src/assets/images/learn-layer5/istio/istio-adapter.webp'; diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/observability.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/observability.mdx index 8127fdbdb7ad..c9aaeb2f070c 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/observability.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/observability.mdx @@ -1,17 +1,17 @@ --- -docType: "Chapter" -chapterTitle: "Observability" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Observability' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 4 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import ImageAppIcon from "../../../../src/assets/images/learn-layer5/istio/istio-addons.webp"; -import GraffanaDash from "../../../../src/assets/images/learn-layer5/istio/Grafana_Istio_Dashboard.webp"; -import Prometheus from "../../../../src/assets/images/learn-layer5/istio/Prometheus.webp"; -import Jaeger from "../../../../src/assets/images/learn-layer5/istio/jaeger copy.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import ImageAppIcon from '../../../../src/assets/images/learn-layer5/istio/istio-addons.webp'; +import GraffanaDash from '../../../../src/assets/images/learn-layer5/istio/Grafana_Istio_Dashboard.webp'; +import Prometheus from '../../../../src/assets/images/learn-layer5/istio/Prometheus.webp'; +import Jaeger from '../../../../src/assets/images/learn-layer5/istio/jaeger copy.webp'; @@ -49,18 +49,14 @@ The URL to run a load test against will be `http:// - Connect Grafana (optionally, Prometheus) to Meshery. - +

Connect Grafana (optionally, Prometheus) to Meshery.

On the Settings page: 1. Navigate to the `Metrics` tab. 1. Enter Grafana's URL:port number and submit. -

- Use Meshery to generate load and analyze performance. -

+

Use Meshery to generate load and analyze performance.

On the Performance page: @@ -105,7 +101,8 @@ kubectl apply -f https://raw.githubusercontent.com/istio/istio/release-1.7/sampl kubectl apply -f https://raw.githubusercontent.com/istio/istio/release-1.7/samples/addons/jaeger.yaml ``` -
+ +

Exposing services

Istio add-on services are deployed by default as `ClusterIP` type services. We can expose the services outside the cluster by either changing the Kubernetes service type to `NodePort` or `LoadBalancer` or by port-forwarding or by configuring Kubernetes Ingress. @@ -221,9 +218,7 @@ To find the assigned ports for Jaeger: kubectl -n istio-system get svc tracing ``` -
- Option 2: Expose services with port-forwarding -
+
Option 2: Expose services with port-forwarding
To port-forward Jaeger: diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/service-security-capabilities.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/service-security-capabilities.mdx index a96ed8405fc5..2732a94d6959 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/service-security-capabilities.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/service-security-capabilities.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Service security capabilities" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Service security capabilities' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 6 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -24,16 +24,14 @@ metadata: spec: {} ``` -

- And then begin poking holes in your service mesh "firewall". -

+

And then begin poking holes in your service mesh "firewall".

```yaml --- -apiVersion: "security.istio.io/v1beta1" -kind: "AuthorizationPolicy" +apiVersion: 'security.istio.io/v1beta1' +kind: 'AuthorizationPolicy' metadata: - name: "allow-get" + name: 'allow-get' namespace: default spec: selector: @@ -42,19 +40,17 @@ spec: rules: - to: - operation: - methods: ["GET"] + methods: ['GET'] ``` -

- Create AuthorizationPolicy for each BookInfo service. -

+

Create AuthorizationPolicy for each BookInfo service.

```yaml --- -apiVersion: "security.istio.io/v1beta1" -kind: "AuthorizationPolicy" +apiVersion: 'security.istio.io/v1beta1' +kind: 'AuthorizationPolicy' metadata: - name: "view-productpage" + name: 'view-productpage' namespace: default spec: selector: @@ -63,12 +59,12 @@ spec: rules: - to: - operation: - methods: ["GET", "POST"] # try login with just GET (fails) + methods: ['GET', 'POST'] # try login with just GET (fails) --- -apiVersion: "security.istio.io/v1beta1" -kind: "AuthorizationPolicy" +apiVersion: 'security.istio.io/v1beta1' +kind: 'AuthorizationPolicy' metadata: - name: "view-details" + name: 'view-details' namespace: default spec: selector: @@ -77,15 +73,15 @@ spec: rules: - from: - source: - principals: ["cluster.local/ns/default/sa/bookinfo-productpage"] + principals: ['cluster.local/ns/default/sa/bookinfo-productpage'] to: - operation: - methods: ["GET", "POST"] + methods: ['GET', 'POST'] --- -apiVersion: "security.istio.io/v1beta1" -kind: "AuthorizationPolicy" +apiVersion: 'security.istio.io/v1beta1' +kind: 'AuthorizationPolicy' metadata: - name: "view-reviews" + name: 'view-reviews' namespace: default spec: selector: @@ -94,15 +90,15 @@ spec: rules: - from: - source: - principals: ["cluster.local/ns/default/sa/bookinfo-productpage"] + principals: ['cluster.local/ns/default/sa/bookinfo-productpage'] to: - operation: - methods: ["GET", "POST"] + methods: ['GET', 'POST'] --- -apiVersion: "security.istio.io/v1beta1" -kind: "AuthorizationPolicy" +apiVersion: 'security.istio.io/v1beta1' +kind: 'AuthorizationPolicy' metadata: - name: "view-ratings" + name: 'view-ratings' namespace: default spec: selector: @@ -111,20 +107,20 @@ spec: rules: - from: - source: - principals: ["cluster.local/ns/default/sa/bookinfo-reviews"] + principals: ['cluster.local/ns/default/sa/bookinfo-reviews'] to: - operation: - methods: ["GET", "POST"] + methods: ['GET', 'POST'] ```

Allow per user access

```yaml --- -apiVersion: "security.istio.io/v1beta1" -kind: "AuthorizationPolicy" +apiVersion: 'security.istio.io/v1beta1' +kind: 'AuthorizationPolicy' metadata: - name: "view-reviews" + name: 'view-reviews' namespace: default spec: selector: @@ -133,18 +129,16 @@ spec: rules: - from: - source: - principals: ["cluster.local/ns/default/sa/bookinfo-productpage"] + principals: ['cluster.local/ns/default/sa/bookinfo-productpage'] to: - operation: - methods: ["GET"] + methods: ['GET'] when: - key: request.headers[end-user] - values: ["naruto"] + values: ['naruto'] ``` -

- Reset BookInfo Subsets (reset destination rules) -

+

Reset BookInfo Subsets (reset destination rules)

```yaml apiVersion: networking.istio.io/v1alpha3 @@ -209,7 +203,6 @@ spec: labels: version: v2 --- - ```

Identity Verification

@@ -234,28 +227,27 @@ spec: rules: - from: - source: - requestPrincipals: - ["testing@secure.istio.io/testing@secure.istio.io"] + requestPrincipals: ['testing@secure.istio.io/testing@secure.istio.io'] when: - key: request.auth.claims[groups] - values: ["group1"] + values: ['group1'] ```

Def

```yaml -apiVersion: "security.istio.io/v1beta1" -kind: "RequestAuthentication" +apiVersion: 'security.istio.io/v1beta1' +kind: 'RequestAuthentication' metadata: - name: "jwt" + name: 'jwt' namespace: default spec: selector: matchLabels: app: httpbin jwtRules: - - issuer: "testing@secure.istio.io" - jwksUri: "https://raw.githubusercontent.com/istio/istio/release-1.7/security/tools/jwt/samples/jwks.json" + - issuer: 'testing@secure.istio.io' + jwksUri: 'https://raw.githubusercontent.com/istio/istio/release-1.7/security/tools/jwt/samples/jwks.json' ```

Mutual TLS

@@ -265,11 +257,11 @@ Using Meshery, you can change mTLS enforcement for a namespace. To configure mTLS on more selective level, you can change and apply this configuration: ```yaml -apiVersion: "security.istio.io/v1beta1" -kind: "PeerAuthentication" +apiVersion: 'security.istio.io/v1beta1' +kind: 'PeerAuthentication' metadata: - name: "default" - namespace: "istio-system" + name: 'default' + namespace: 'istio-system' spec: # selector: # matchLabels: diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/traffic-management.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/traffic-management.mdx index 5fa3d3b9735c..ecb5839c7043 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/traffic-management.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/traffic-management.mdx @@ -1,20 +1,19 @@ --- -docType: "Chapter" -chapterTitle: "Traffic management" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Traffic management' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 5 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; Service routes and version subsets should be in place given the destination rules applied in Lab 3. If they are not present, re-apply the destination rules:
- ```yaml apiVersion: networking.istio.io/v1alpha3 kind: DestinationRule @@ -80,16 +79,11 @@ version: v2
-

- Start managing traffic routes -

- +

Start managing traffic routes

Some basics to get us started. -

- Send all requests to Productpage v1 -

+

Send all requests to Productpage v1

```yaml apiVersion: networking.istio.io/v1alpha3 @@ -104,16 +98,13 @@ spec: - destination: host: reviews subset: v1 - - ``` + _Using Meshery, apply custom configuration._ Refresh BookInfo productpage -

- Send all requests to Productpage v2 -

+

Send all requests to Productpage v2

```yaml apiVersion: networking.istio.io/v1alpha3 @@ -129,19 +120,16 @@ spec: host: reviews subset: v2 ``` + _Using Meshery, apply custom configuration._ Refresh BookInfo productpage. -

- Traffic routing based on user or user-agent type -

+

Traffic routing based on user or user-agent type

-
+
-

- Redirect requests from mobile devices -

+

Redirect requests from mobile devices

```yaml apiVersion: networking.istio.io/v1alpha3 @@ -150,7 +138,7 @@ metadata: name: bookinfo spec: hosts: - - "bookinfo.meshery.io" + - 'bookinfo.meshery.io' gateways: - sample-app-gateway http: @@ -162,7 +150,7 @@ spec: - headers: request: set: - x-response: "Success with Mobile" + x-response: 'Success with Mobile' destination: host: productpage port: @@ -171,15 +159,11 @@ spec: - destination: host: product subset: random - - ``` Set your browser to mimic a mobile device. Enable Developer tools, if need. Refresh BookInfo productpage. -

- Redirect requests based on HTTP header information -

+

Redirect requests based on HTTP header information

Example of using user information from HTTP headers to redirect requests. @@ -212,13 +196,9 @@ spec: - destination: host: reviews subset: v1 - - ``` -

- Traffic Mirroring with Istio -

+

Traffic Mirroring with Istio

You will need to generate load on BookInfo's productpage service. See Lab 4 for instructions for running a performance test. @@ -240,8 +220,8 @@ spec: host: reviews subset: v2 mirror_percent: 100 - ``` + Incrementally increase the traffic split percentage to the higher version service #. Start at 20% traffic split ```yaml @@ -262,8 +242,6 @@ spec: host: reviews subset: v3 weight: 20 - - ``` Move to 50%. Observe in Meshery. @@ -286,22 +264,17 @@ spec: host: reviews subset: v3 weight: 50 - ``` -

- Injecting Latency -

+ +

Injecting Latency

Acknowledging the fallacy that the network is always reliable, you will intentionally cause a little chaos. -

- Exploring timeouts with Reviews service -

+

Exploring timeouts with Reviews service

Note Istio Proxy's default timeout settings. ```yaml - --- apiVersion: networking.istio.io/v1alpha3 kind: VirtualService @@ -328,15 +301,11 @@ spec: - destination: host: reviews subset: v2 - ``` -

- Exploring timeouts with Ratings service -

+

Exploring timeouts with Ratings service

```yaml - --- apiVersion: networking.istio.io/v1alpha3 kind: VirtualService @@ -363,18 +332,13 @@ spec: - destination: host: ratings subset: v1 - ``` -

- Retries -

+

Retries

Overcoming the latency issue. -

- Set 5 retry attempts and a 3 second timeout -

+

Set 5 retry attempts and a 3 second timeout

```yaml apiVersion: networking.istio.io/v1alpha3 @@ -392,7 +356,6 @@ spec: retries: attempts: 5 perTryTimeout: 3s - ```
@@ -409,29 +372,20 @@ If you haven't forked or cloned this repository, please do so now: git clone https://github.com/layer5io/advanced-istio-service-mesh-workshop ``` -

- {" "} - Route all traffic to version V1 - -

+ +

Route all traffic to version V1

```sh kubectl apply -f route-v1-v2/v1.yaml ``` -

- {" "} - Route all traffic to version V2 - -

+ +

Route all traffic to version V2

```sh kubectl apply -f route-v1-v2/v2.yaml ``` -

- - Traffic routing based on user or user-agent type -

+

Traffic routing based on user or user-agent type

Redirect requests from mobile devices

diff --git a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/webassembly-and-intelligent-data-planes.mdx b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/webassembly-and-intelligent-data-planes.mdx index 2624f589540f..2c13a2f736ab 100644 --- a/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/webassembly-and-intelligent-data-planes.mdx +++ b/content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/webassembly-and-intelligent-data-planes.mdx @@ -1,16 +1,16 @@ --- -docType: "Chapter" -chapterTitle: "WebAssembly and intelligent data planes" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'WebAssembly and intelligent data planes' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 7 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; -import installimagehub from "../../../../src/assets/images/learn-layer5/istio/install-imagehub.webp"; -import deployenvoyfilter from "../../../../src/assets/images/learn-layer5/istio/deploy-envoyfilter.webp"; +import installimagehub from '../../../../src/assets/images/learn-layer5/istio/install-imagehub.webp'; +import deployenvoyfilter from '../../../../src/assets/images/learn-layer5/istio/deploy-envoyfilter.webp'; @@ -25,7 +25,6 @@ In the Istio management page: 1. Type default into the namespace field. 2. Click the (+) icon on the Manage Sample Application Lifecycle card and select Image Hub Application to install the latest version of Image Hub -
@@ -69,12 +68,12 @@ spec: filterChain: name: envoy.http_connection_manager filter: - name: "envoy.tcp_proxy" + name: 'envoy.tcp_proxy' patch: operation: INSERT_BEFORE value: # This is the full filter config including the name and config or typed_config section. - name: "envoy.filters.http.wasm" + name: 'envoy.filters.http.wasm' config: config: name: custom-filter @@ -90,8 +89,8 @@ spec: labels: app: api-v1 version: v1 - ``` + Manually patch the Image Hub Deployment. ```yaml @@ -143,6 +142,7 @@ Manually patch the Image Hub Deployment. // ' ``` + A future version of Meshery will allow you to deploy any filter from the [wasm-filters](https://github.com/layer5io/wasm-filters) repo. PR the repo to upload your custom filter and have Meshery deploy it. diff --git a/content-learn/mastering-service-meshes-for-developers/index.mdx b/content-learn/mastering-service-meshes-for-developers/index.mdx index d512ee4381bc..bae6ca87bfaf 100644 --- a/content-learn/mastering-service-meshes-for-developers/index.mdx +++ b/content-learn/mastering-service-meshes-for-developers/index.mdx @@ -7,7 +7,7 @@ cardImage: '../../src/assets/images/service-mesh-icons/service-mesh.svg' courses: 4 --- - \ No newline at end of file +--> diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/index.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/index.mdx index e3fdab8cdf30..f26f06cd1221 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/index.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/index.mdx @@ -1,35 +1,29 @@ --- -docType: "Course" -title: "Course" -description: "Learn how to setup a service mesh and deploy an application using it." +docType: 'Course' +title: 'Course' +description: 'Learn how to setup a service mesh and deploy an application using it.' videos: 4 lectures: 12 -courseTitle: "Introduction to Service Meshes - Hands On" -themeColor: "#00B39F" +courseTitle: 'Introduction to Service Meshes - Hands On' +themeColor: '#00B39F' order: 1 -cardImage: "../../../src/assets/images/service-mesh-icons/linkerd-white.svg" +cardImage: '../../../src/assets/images/service-mesh-icons/linkerd-white.svg' meshesYouLearn: [ - { - imagepath: "../../../src/assets/images/service-mesh-icons/istio.svg", - name: "Istio", - }, - { - imagepath: "../../../src/assets/images/service-mesh-icons/linkerd.svg", - name: "Linkerd", - }, + { imagepath: '../../../src/assets/images/service-mesh-icons/istio.svg', name: 'Istio' }, + { imagepath: '../../../src/assets/images/service-mesh-icons/linkerd.svg', name: 'Linkerd' } ] toc: [ - "getting-started", - "deploy-an-application", - "expose-services", - "observability", - "routing-and-canary", - "fault-injection", - "mutual-tls", - "circuit-breaking", - "conclusion", + 'getting-started', + 'deploy-an-application', + 'expose-services', + 'observability', + 'routing-and-canary', + 'fault-injection', + 'mutual-tls', + 'circuit-breaking', + 'conclusion' ] --- diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/circuit-breaking.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/circuit-breaking.mdx index f5171ea16a7d..c448caf4c19d 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/circuit-breaking.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/circuit-breaking.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Circuit Breaking" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Circuit Breaking' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 8 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import MesheryInitialLoadTest from "../../../../src/assets/images/learn-layer5/istio/meshery_initial_load_test.webp"; -import MesheryCbLoadTest from "../../../../src/assets/images/learn-layer5/istio/meshery_cb_load_test.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import MesheryInitialLoadTest from '../../../../src/assets/images/learn-layer5/istio/meshery_initial_load_test.webp'; +import MesheryCbLoadTest from '../../../../src/assets/images/learn-layer5/istio/meshery_cb_load_test.webp'; @@ -23,8 +23,8 @@ Before we can configure circuit breaking, please try to access the `product page

Configure circuit breaking


-Now that we have the needed services in place, it is time to configure circuit breaking -using a destination rule. +Now that we have the needed services in place, it is time to configure circuit breaking using a +destination rule. Using Meshery, navigate to the Istio management page: @@ -75,10 +75,10 @@ spec:

Time to trip the circuit


-In the circuit-breaker settings, we specified maxRequestsPerConnection: 1 and http1MaxPendingRequests: -1. This should mean that if we exceed more than one request per connection and more -than one pending request, we should see the istio-proxy sidecar open the circuit -for further requests/connections. +In the circuit-breaker settings, we specified maxRequestsPerConnection: 1 and +http1MaxPendingRequests: 1. This should mean that if we exceed more than one request per connection +and more than one pending request, we should see the istio-proxy sidecar open the circuit for +further requests/connections. Let us now use Meshery to make several calls to `product page` app by changing the number of concurrent connections to 5 from within Meshery's Performance page. @@ -90,7 +90,7 @@ You should only see a percentage of the requests succeed and the rest trapped by

- {" "} + {' '} Manual Steps

diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/conclusion.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/conclusion.mdx index 6af5f0cc1de4..0f1cfd909826 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/conclusion.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/conclusion.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Conclusion" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Conclusion' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 9 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -16,8 +16,8 @@ import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapte

Congratulations!

- You have successfully completed the course on{" "} - "Introduction to service meshes - Hands on" using{" "} + You have successfully completed the course on "Introduction to service meshes - Hands on"{' '} + using{' '} Istio diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/deploy-an-application.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/deploy-an-application.mdx index 037630e3a328..945ed91c0180 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/deploy-an-application.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/deploy-an-application.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Deploy a sample application" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Deploy a sample application' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 2 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import BookInfoOffMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-off-mesh.webp"; -import BookInfoOnMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-on-mesh.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import BookInfoOffMesh from '../../../../src/assets/images/learn-layer5/istio/bookinfo-off-mesh.webp'; +import BookInfoOnMesh from '../../../../src/assets/images/learn-layer5/istio/bookinfo-on-mesh.webp'; @@ -17,11 +17,10 @@ To play with Istio and demonstrate some of it's capabilities, you will deploy th

What is the Bookinfo Application


-This application is a polyglot composition of microservices are written in -different languages and sample BookInfo application displays information about a -book, similar to a single catalog entry of an online book store. Displayed on -the page is a description of the book, book details (ISBN, number of pages, and -so on), and a few book reviews. +This application is a polyglot composition of microservices are written in different languages and +sample BookInfo application displays information about a book, similar to a single catalog entry of +an online book store. Displayed on the page is a description of the book, book details (ISBN, number +of pages, and so on), and a few book reviews. The end-to-end architecture of the application is shown in the figure. @@ -33,9 +32,9 @@ The end-to-end architecture of the application is shown in the figure. _Figure: BookInfo deployed off the mesh_
-It’s worth noting that these services have no dependencies on Istio, but make an -interesting service mesh example, particularly because of the multitude of services, -languages and versions for the reviews service. +It’s worth noting that these services have no dependencies on Istio, but make an interesting service +mesh example, particularly because of the multitude of services, languages and versions for the +reviews service. As shown in the figure below, proxies are sidecarred to each of the application containers. @@ -47,10 +46,10 @@ As shown in the figure below, proxies are sidecarred to each of the application _Figure: BookInfo deployed on the mesh_
-Sidecars proxy can be either manually or automatically injected into the pods. Automatic -sidecar injection requires that your Kubernetes api-server supports `admissionregistration.k8s.io/v1` -or `admissionregistration.k8s.io/v1beta1` or `admissionregistration.k8s.io/v1beta2` -APIs. Verify whether your Kubernetes deployment supports these APIs by executing: +Sidecars proxy can be either manually or automatically injected into the pods. Automatic sidecar +injection requires that your Kubernetes api-server supports `admissionregistration.k8s.io/v1` or +`admissionregistration.k8s.io/v1beta1` or `admissionregistration.k8s.io/v1beta2` APIs. Verify +whether your Kubernetes deployment supports these APIs by executing: ```sh kubectl api-versions | grep admissionregistration @@ -66,8 +65,8 @@ As part of Istio deployment in [Previous chapter](./getting-started), you have d

-Istio, deployed as part of this workshop, will also deploy the sidecar injector. -Let us now verify sidecar injector deployment. +Istio, deployed as part of this workshop, will also deploy the sidecar injector. Let us now verify +sidecar injector deployment. ```sh kubectl -n istio-system get configmaps istio-sidecar-injector @@ -108,7 +107,7 @@ This will do 3 things: 1. Deploys the virtual service and gateway needed to expose the BookInfo's productpage application in the `default` namespace.

- Verify Bookinfo deployment{" "} + Verify Bookinfo deployment{' '}

1. Verify that the deployments are all in a state of AVAILABLE before continuing. @@ -129,7 +128,7 @@ kubectl describe pod productpage-v1-..... ```sh kubectl describe svc productpage - ``` +``` Next, you will expose the BookInfo application to be accessed external from the cluster. @@ -170,9 +169,7 @@ Applying this yaml file included in the Istio package you collected in [Getting kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml ``` -

- Deploy Gateway and Virtual Service for BookInfo app -

+

Deploy Gateway and Virtual Service for BookInfo app

```sh kubectl apply -f samples/bookinfo/networking/bookinfo-gateway.yaml diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/expose-services.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/expose-services.mdx index a6212a8efa02..9f3858a20e48 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/expose-services.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/expose-services.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Exposing services through Istio Ingress Gateway" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Exposing services through Istio Ingress Gateway' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 3 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; The components deployed on the service mesh by default are not exposed outside the cluster. An Ingress Gateway is deployed as a Kubernetes service of type LoadBalancer (or NodePort). To make Bookinfo accessible external to the cluster, you have to create an `Istio Gateway` for the Bookinfo application and also define an `Istio VirtualService` with the routes we need. @@ -18,8 +18,7 @@ The components deployed on the service mesh by default are not exposed outside t

Inspecting the Istio Ingress Gateway


-The ingress gateway gets exposed as a normal Kubernetes service of type LoadBalancer -(or NodePort): +The ingress gateway gets exposed as a normal Kubernetes service of type LoadBalancer (or NodePort): ```sh kubectl get svc istio-ingressgateway -n istio-system -o yaml @@ -78,9 +77,7 @@ kubectl get virtualservices kubectl get virtualservices -o yaml ``` -

- Find the external port of the Istio Ingress Gateway by running: -

+

Find the external port of the Istio Ingress Gateway by running:

```sh kubectl get service istio-ingressgateway -n istio-system -o wide @@ -125,26 +122,26 @@ metadata: name: bookinfo spec: gateways: - - sample-app-gateway + - sample-app-gateway hosts: - - "*" + - '*' http: - - match: - - uri: - exact: /productpage - - uri: - prefix: /static - - uri: - exact: /login - - uri: - exact: /logout - - uri: - prefix: /api/v1/products - route: - - destination: - host: productpage - port: - number: 9080 + - match: + - uri: + exact: /productpage + - uri: + prefix: /static + - uri: + exact: /login + - uri: + exact: /logout + - uri: + prefix: /api/v1/products + route: + - destination: + host: productpage + port: + number: 9080 ```

Apply default destination rules

@@ -237,9 +234,7 @@ Browse to the website of the Bookinfo. To view the product page, you will have t Now, reload the page multiple times and notice how it round robins between v1, v2 and v3 of the reviews service. -

- Inspect the Istio proxy of the productpage pod -

+

Inspect the Istio proxy of the productpage pod

To better understand the istio proxy, let's inspect the details. Let us `exec` into the productpage pod to find the proxy details. To do so we need to first find the full pod name and then `exec` into the istio-proxy container: @@ -279,9 +274,7 @@ Run the following command to create default destination rules for the Bookinfo s kubectl apply -f samples/bookinfo/networking/destination-rule-all-mtls.yaml ``` -

- Configure the Bookinfo route with the Istio Ingress gateway -

+

Configure the Bookinfo route with the Istio Ingress gateway

We can create a virtualservice & gateway for bookinfo app in the ingress gateway by running the following: diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/fault-injection.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/fault-injection.mdx index 49fa69a3e96d..e36d038dff73 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/fault-injection.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/fault-injection.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Fault Injection" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Fault Injection' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 6 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -36,9 +36,7 @@ spec: subset: v2 ``` -

- Inject a route rule to create a fault using HTTP delay -

+

Inject a route rule to create a fault using HTTP delay

To start, we will inject a 7s delay for accessing the ratings service for a user `jason`. reviews v2 service has a 10s hard-coded connection timeout for its calls to the ratings service configured globally. @@ -92,9 +90,7 @@ Sorry, product reviews are currently unavailable for this book. If you logout or login as a different user, the page should load normally without any errors. -

- Inject a route rule to create a fault using HTTP abort -

+

Inject a route rule to create a fault using HTTP abort

In this section, , we will introduce an HTTP abort to the ratings microservices for user `jason`. @@ -155,17 +151,13 @@ Follow these steps if the above steps did not work

-

- Route all traffic to version V1 of all services -

+

Route all traffic to version V1 of all services

```sh kubectl apply -f samples/bookinfo/networking/virtual-service-all-v1.yaml ``` -

- Route all traffic to version V2 of reviews for user Jason -

+

Route all traffic to version V2 of reviews for user Jason

```sh kubectl apply -f samples/bookinfo/networking/virtual-service-reviews-test-v2.yaml diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx index 2c0698a5f935..ad1d39fd38db 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Getting Started" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Getting Started' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 1 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import InstallIstio from "../../../../src/assets/images/learn-layer5/istio/install-istio1.webp"; -import IstioDeploy from "../../../../src/assets/images/learn-layer5/istio/install-istio2.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import InstallIstio from '../../../../src/assets/images/learn-layer5/istio/install-istio1.webp'; +import IstioDeploy from '../../../../src/assets/images/learn-layer5/istio/install-istio2.webp'; @@ -46,6 +46,7 @@ In the Istio management page: 3. Click the `Deploy` button on the confirmation modal. {" "} + diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/mutual-tls.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/mutual-tls.mdx index fd3e3c0c91e1..a321f753ed71 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/mutual-tls.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/mutual-tls.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Mutual TLS & Identity Verification" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Mutual TLS & Identity Verification' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 7 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -134,17 +134,14 @@ Now lets come out of the container before we go to the next section: exit ``` -

- Secure Production Identity Framework for Everyone (SPIFFE) -

+

Secure Production Identity Framework for Everyone (SPIFFE)


-Istio uses [SPIFFE](https://spiffe.io/) to assert the identify of workloads on -the cluster. SPIFFE consists of a notion of identity and a method of proving it. -A SPIFFE identity consists of an authority part and a path. The meaning of the -path in spiffe land is implementation defined. In k8s it takes the form -`/ns/$namespace/sa/$service-account` with the expected meaning. A SPIFFE -identify is embedded in a document. This document in principle can take many -forms but currently the only defined format is x509. +Istio uses [SPIFFE](https://spiffe.io/) to assert the identify of workloads on the cluster. SPIFFE +consists of a notion of identity and a method of proving it. A SPIFFE identity consists of an +authority part and a path. The meaning of the path in spiffe land is implementation defined. In k8s +it takes the form `/ns/$namespace/sa/$service-account` with the expected meaning. A SPIFFE identify +is embedded in a document. This document in principle can take many forms but currently the only +defined format is x509. To start our investigation, let us check if the certs are in place in the productpage sidecar: diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/observability.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/observability.mdx index ef5a5ceecc73..24ea3829a9cd 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/observability.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/observability.mdx @@ -1,17 +1,17 @@ --- -docType: "Chapter" -chapterTitle: "Observability" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Observability' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 4 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import ImageAppIcon from "../../../../src/assets/images/learn-layer5/istio/istio-addons.webp"; -import GraffanaDash from "../../../../src/assets/images/learn-layer5/istio/Grafana_Istio_Dashboard.webp"; -import Prometheus from "../../../../src/assets/images/learn-layer5/istio/Prometheus.webp"; -import Jaeger from "../../../../src/assets/images/learn-layer5/istio/jaeger.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import ImageAppIcon from '../../../../src/assets/images/learn-layer5/istio/istio-addons.webp'; +import GraffanaDash from '../../../../src/assets/images/learn-layer5/istio/Grafana_Istio_Dashboard.webp'; +import Prometheus from '../../../../src/assets/images/learn-layer5/istio/Prometheus.webp'; +import Jaeger from '../../../../src/assets/images/learn-layer5/istio/jaeger.webp'; @@ -49,18 +49,14 @@ The URL to run a load test against will be `http:// - Connect Grafana (optionally, Prometheus) to Meshery. - +

Connect Grafana (optionally, Prometheus) to Meshery.

On the Settings page: 1. Navigate to the `Metrics` tab. 1. Enter Grafana's URL:port number and submit. -

- Use Meshery to generate load and analyze performance. -

+

Use Meshery to generate load and analyze performance.

On the Performance page: @@ -221,9 +217,7 @@ To find the assigned ports for Jaeger: kubectl -n istio-system get svc tracing ``` -
- Option 2: Expose services with port-forwarding -
+
Option 2: Expose services with port-forwarding
To port-forward Jaeger: diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/routing-and-canary.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/routing-and-canary.mdx index 6330ca93a5fc..0d1a7bf705f0 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/routing-and-canary.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/routing-and-canary.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Request Routing and Canary Testing" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Request Routing and Canary Testing' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 5 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; In this chapter, we are going to get our hands on some of the traffic management capabilities of Istio. @@ -98,9 +98,7 @@ kubectl get destinationrules kubectl get destinationrules -o yaml ``` -

- Configure the default route for all services to V1 -

+

Configure the default route for all services to V1


As part of the bookinfo sample app, there are multiple versions of reviews service. When we load the `/productpage` in the browser multiple times we have seen the reviews service round robin between v1, v2 or v3. As the first exercise, let us first restrict traffic to just V1 of all the services. @@ -140,7 +138,6 @@ spec: host: reviews subset: v1 --- - ``` Now when we reload the `/productpage` several times, we will ONLY be viewing the data from v1 of all the services, which means we will not see any ratings (any stars). @@ -148,8 +145,8 @@ Now when we reload the `/productpage` several times, we will ONLY be viewing the

Content-based routing


-Let's replace our first rules with a new set. Enable the `ratings` service for a -user `jason` by routing `productpage` traffic to `reviews` v2: +Let's replace our first rules with a new set. Enable the `ratings` service for a user `jason` by +routing `productpage` traffic to `reviews` v2: Using Meshery, navigate to the Istio management page: @@ -188,7 +185,6 @@ spec: host: reviews subset: v1 --- - ``` Now if we login as your `jason`, you will be able to see data from `reviews` v2. While if you NOT logged in or logged in as a different user, you will see data from `reviews` v1. @@ -234,7 +230,6 @@ spec: subset: v3 weight: 50 --- - ``` Now, if we reload the `/productpage` in your browser several times, you should now see red-colored star ratings approximately 50% of the time. @@ -272,7 +267,6 @@ spec: host: reviews subset: v3 --- - ``` Now, if we reload the `/productpage` in your browser several times, you should now see red-colored star ratings 100% of the time. @@ -291,37 +285,25 @@ Run the following command to create default destination rules for the Bookinfo s kubectl apply -f samples/bookinfo/networking/destination-rule-all-mtls.yaml ``` -

- {" "} - Route all traffic to version V1 of all services -

+

Route all traffic to version V1 of all services

```sh kubectl apply -f samples/bookinfo/networking/virtual-service-all-v1.yaml ``` -

- {" "} - Route all traffic to version V2 of reviews for user Jason -

+

Route all traffic to version V2 of reviews for user Jason

```sh kubectl apply -f samples/bookinfo/networking/virtual-service-reviews-test-v2.yaml ``` -

- {" "} - Route 50% of traffic to version V3 of reviews service -

+

Route 50% of traffic to version V3 of reviews service

```sh kubectl apply -f samples/bookinfo/networking/virtual-service-reviews-50-v3.yaml ``` -

- {" "} - Route 100% of traffic to version V3 of reviews service -

+

Route 100% of traffic to version V3 of reviews service

```sh kubectl apply -f samples/bookinfo/networking/virtual-service-reviews-v3.yaml diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/conclusion.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/conclusion.mdx index f20c7d332b20..95e57cbc7e09 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/conclusion.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/conclusion.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Conclusion" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Conclusion' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 9 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -16,8 +16,8 @@ import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapte

Congratulations!

- You have successfully completed the course on{" "} - "Introduction to service meshes - Hands on" using{" "} + You have successfully completed the course on "Introduction to service meshes - Hands on"{' '} + using{' '} Linkerd diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/dashboard.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/dashboard.mdx index b678e8016966..761659e26ef6 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/dashboard.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/dashboard.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Linkerd Dashboard" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Linkerd Dashboard' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 4 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import Top from "../../../../src/assets/images/learn-layer5/linkerd/top.webp"; -import Tap from "../../../../src/assets/images/learn-layer5/linkerd/tap.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import Top from '../../../../src/assets/images/learn-layer5/linkerd/top.webp'; +import Tap from '../../../../src/assets/images/learn-layer5/linkerd/tap.webp'; @@ -93,6 +93,7 @@ This will show the “golden” metrics for each deployment: To get a real-time view of which paths are being called. {" "} + @@ -102,6 +103,7 @@ To get a real-time view of which paths are being called. Shows the stream of requests across a single pod, deployment, or even everything in the emojivoto namespace. {" "} + diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/debugging.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/debugging.mdx index 66c92495e4ef..f10a4c3655b3 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/debugging.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/debugging.mdx @@ -1,16 +1,16 @@ --- -docType: "Chapter" -chapterTitle: "Debugging (Optional)" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Debugging (Optional)' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 5 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import Octopus from "../../../../src/assets/images/learn-layer5/linkerd/octopus.webp"; -import WebTop from "../../../../src/assets/images/learn-layer5/linkerd/webtop.webp"; -import WebTap from "../../../../src/assets/images/learn-layer5/linkerd/webtap.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import Octopus from '../../../../src/assets/images/learn-layer5/linkerd/octopus.webp'; +import WebTop from '../../../../src/assets/images/learn-layer5/linkerd/webtop.webp'; +import WebTap from '../../../../src/assets/images/learn-layer5/linkerd/webtap.webp'; diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/deploy-an-application.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/deploy-an-application.mdx index 88584098cffb..d110b75b2582 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/deploy-an-application.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/deploy-an-application.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Deploy a sample application" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Deploy a sample application' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 2 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -101,7 +101,7 @@ kubectl -n emojivoto port-forward svc/web-svc 8080:80 ```

- Verify EmojiVoto deployment{" "} + Verify EmojiVoto deployment{' '}

1. Verify that the deployments are all in a state of AVAILABLE before continuing. @@ -155,9 +155,7 @@ will deploy the sample app into your cluster. kubectl apply -f https://run.linkerd.io/emojivoto.yml ``` -

- Inject Linkerd proxy into the sample application -

+

Inject Linkerd proxy into the sample application

The emojivoto application is a standalone Kubernetes application that uses a mix of gRPC and HTTP calls to allow the users to vote on their favorite emojis, which means the diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/expose-services.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/expose-services.mdx index 3518a4a02e4a..627b8ee52e59 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/expose-services.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/expose-services.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Exposing services through Linkerd Ingress" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Exposing services through Linkerd Ingress' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 3 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -51,7 +51,7 @@ minikube addons enable ingress ```

- {" "} + {' '} Setting up Ingress controller with the sample application deployed

diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/fault-injection.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/fault-injection.mdx index 6ab8241d6bf9..6b88034f5d89 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/fault-injection.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/fault-injection.mdx @@ -1,13 +1,13 @@ --- -docType: "Chapter" -chapterTitle: "Fault Injection" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Fault Injection' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 8 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; @@ -15,9 +15,7 @@ import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapte Application failure injection is a form of chaos engineering where we artificially increase the error rate of certain services in a microservice application to see what impact that has on the system as a whole. Traditionally, you would need to add some kind of failure injection library into your service code in order to do application failure injection. Thankfully, the service mesh gives us a way to inject application failures without needing to modify or rebuild our services at all. -

- Using SMI Traffic Split API to inject errors -

+

Using SMI Traffic Split API to inject errors

We can easily inject application failures by using the Traffic Split API of the Service Mesh Interface. This allows us to do failure injection in a way that is implementation agnostic and works across service meshes. diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/getting-started.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/getting-started.mdx index 4082120358c4..8cd79c0ebdcd 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/getting-started.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/getting-started.mdx @@ -1,15 +1,15 @@ --- -doctype: "Chapter" -chapterTitle: "Getting Started" -description: "Meshery, collaborative Kubernetes manager" +doctype: 'Chapter' +chapterTitle: 'Getting Started' +description: 'Meshery, collaborative Kubernetes manager' videos: 6 lectures: 8 order: 1 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import LinkerdAdapter from "../../../../src/assets/images/learn-layer5/linkerd/linkerd-adapter.webp"; -import InstallLinkerd from "../../../../src/assets/images/learn-layer5/linkerd/install-linkerd.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import LinkerdAdapter from '../../../../src/assets/images/learn-layer5/linkerd/linkerd-adapter.webp'; +import InstallLinkerd from '../../../../src/assets/images/learn-layer5/linkerd/install-linkerd.webp'; @@ -40,7 +40,7 @@ In the Linkerd management page: - {" "} + {' '}

Alternative: Manual Installation

diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/observability.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/observability.mdx index 84aa3d895df9..6761621aceb8 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/observability.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/observability.mdx @@ -1,15 +1,15 @@ --- -docType: "Chapter" -chapterTitle: "Observability" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Observability' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 6 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import Tracing from "../../../../src/assets/images/learn-layer5/linkerd/emojivoto-tracing.webp"; -import JaegerUI from "../../../../src/assets/images/learn-layer5/linkerd/linkerd-jaeger-ui.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import Tracing from '../../../../src/assets/images/learn-layer5/linkerd/emojivoto-tracing.webp'; +import JaegerUI from '../../../../src/assets/images/learn-layer5/linkerd/linkerd-jaeger-ui.webp'; @@ -111,9 +111,8 @@ The first two spans would be the spans sent from the proxy of the client compone

Jaeger and Linkerd


-In Linkerd, as told above Grafana Integration is present in the `linkerd-web` ui -through which which you can directly jump onto the dashboards of any workload -like deployment, pod, etc. +In Linkerd, as told above Grafana Integration is present in the `linkerd-web` ui through which which +you can directly jump onto the dashboards of any workload like deployment, pod, etc. Linkerd has done similar thing with Jaeger, if you have `tracing` enabled, if you navigate the Linkerd Dashboard, you should see a Jaeger icon on the right. diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/traffic-splitting.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/traffic-splitting.mdx index 6040f55e6bc7..d1445a9267af 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/traffic-splitting.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/linkerd/traffic-splitting.mdx @@ -1,14 +1,14 @@ --- -docType: "Chapter" -chapterTitle: "Traffic Splitting using SMI and Linkerd" -description: "Meshery, collaborative Kubernetes manager" +docType: 'Chapter' +chapterTitle: 'Traffic Splitting using SMI and Linkerd' +description: 'Meshery, collaborative Kubernetes manager' videos: 4 lectures: 12 order: 7 --- -import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js"; -import ControlPlane from "../../../../src/assets/images/learn-layer5/linkerd/control-plane-c.webp"; +import { ChapterStyle } from '../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js'; +import ControlPlane from '../../../../src/assets/images/learn-layer5/linkerd/control-plane-c.webp'; diff --git a/context-wrapper.js b/context-wrapper.js index ee9b4cb3d7cf..074435081687 100644 --- a/context-wrapper.js +++ b/context-wrapper.js @@ -1,7 +1,7 @@ -import React from "react"; -import { StyledThemeProvider } from "./src/theme/app/StyledThemeProvider"; -import { ThemeManagerProvider } from "./src/theme/app/ThemeManager"; -import lighttheme, { darktheme } from "./src/theme/app/themeStyles"; +import React from 'react'; +import { StyledThemeProvider } from './src/theme/app/StyledThemeProvider'; +import { ThemeManagerProvider } from './src/theme/app/ThemeManager'; +import lighttheme, { darktheme } from './src/theme/app/themeStyles'; export const ContextWrapper = ({ children }) => { return ( @@ -11,4 +11,4 @@ export const ContextWrapper = ({ children }) => { ); -}; \ No newline at end of file +}; diff --git a/fonts.css b/fonts.css index f3c829870b26..0a590bba202a 100644 --- a/fonts.css +++ b/fonts.css @@ -1,148 +1,148 @@ @font-face { - font-family: "Qanelas Soft Black"; - src: url('./static/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype'); - font-weight: normal; - font-display: swap; + font-family: 'Qanelas Soft Black'; + src: url('./static/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype'); + font-weight: normal; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Black Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype'); - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft Black Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype'); + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Heavy"; - src: url('./static/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype'); - font-weight: 900; - font-display: swap; + font-family: 'Qanelas Soft Heavy'; + src: url('./static/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype'); + font-weight: 900; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Heavy Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype'); - font-weight: 900; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft Heavy Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype'); + font-weight: 900; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft ExtraBold"; - src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype'); - font-weight: 800; - font-display: swap; + font-family: 'Qanelas Soft ExtraBold'; + src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype'); + font-weight: 800; + font-display: swap; } @font-face { - font-family: "Qanelas Soft ExtraBold Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype'); - font-weight: 800; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft ExtraBold Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype'); + font-weight: 800; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Bold"; - src: url('./static/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype'); - font-weight: bold; - font-display: swap; + font-family: 'Qanelas Soft Bold'; + src: url('./static/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype'); + font-weight: bold; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Bold Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftBoldItalic.otf') format('opentype'); - font-weight: bold; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft Bold Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftBoldItalic.otf') format('opentype'); + font-weight: bold; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft"; - src: url('./static/fonts/qanelas-soft/QanelasSoftSemiBold.otf') format('opentype'); - font-weight: 600; - font-display: swap; + font-family: 'Qanelas Soft'; + src: url('./static/fonts/qanelas-soft/QanelasSoftSemiBold.otf') format('opentype'); + font-weight: 600; + font-display: swap; } @font-face { - font-family: "Qanelas Soft SemiBold Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf') format('opentype'); - font-weight: 600; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft SemiBold Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf') format('opentype'); + font-weight: 600; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Medium"; - src: url('./static/fonts/qanelas-soft/QanelasSoftMedium.otf') format('opentype'); - font-weight: 500; - font-display: swap; + font-family: 'Qanelas Soft Medium'; + src: url('./static/fonts/qanelas-soft/QanelasSoftMedium.otf') format('opentype'); + font-weight: 500; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Medium Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftMediumItalic.otf') format('opentype'); - font-weight: 500; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft Medium Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftMediumItalic.otf') format('opentype'); + font-weight: 500; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft"; - src: url('./static/fonts/qanelas-soft/QanelasSoftRegular.otf') format('opentype'); - font-weight: 400; - font-display: swap; + font-family: 'Qanelas Soft'; + src: url('./static/fonts/qanelas-soft/QanelasSoftRegular.otf') format('opentype'); + font-weight: 400; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Regular Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftRegularItalic.otf') format('opentype'); - font-weight: 400; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft Regular Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftRegularItalic.otf') format('opentype'); + font-weight: 400; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Light"; - src: url('./static/fonts/qanelas-soft/QanelasSoftLight.otf') format('opentype'); - font-weight: 300; - font-display: swap; + font-family: 'Qanelas Soft Light'; + src: url('./static/fonts/qanelas-soft/QanelasSoftLight.otf') format('opentype'); + font-weight: 300; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Light Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftLightItalic.otf') format('opentype'); - font-weight: 300; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft Light Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftLightItalic.otf') format('opentype'); + font-weight: 300; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft UltraLight"; - src: url('./static/fonts/qanelas-soft/QanelasSoftUltraLight.otf') format('opentype'); - font-weight: 200; - font-display: swap; + font-family: 'Qanelas Soft UltraLight'; + src: url('./static/fonts/qanelas-soft/QanelasSoftUltraLight.otf') format('opentype'); + font-weight: 200; + font-display: swap; } @font-face { - font-family: "Qanelas Soft UltraLight Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf') format('opentype'); - font-weight: 200; - font-style: italic; - font-display: swap; + font-family: 'Qanelas Soft UltraLight Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf') format('opentype'); + font-weight: 200; + font-style: italic; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Thin"; - src: url('./static/fonts/qanelas-soft/QanelasSoftThin.otf') format('opentype'); - font-weight: 100; - font-display: swap; + font-family: 'Qanelas Soft Thin'; + src: url('./static/fonts/qanelas-soft/QanelasSoftThin.otf') format('opentype'); + font-weight: 100; + font-display: swap; } @font-face { - font-family: "Qanelas Soft Thin Italic"; - src: url('./static/fonts/qanelas-soft/QanelasSoftThinItalic.otf') format('opentype'); - font-weight: 100; - font-style: italic; - font-display: swap; -} \ No newline at end of file + font-family: 'Qanelas Soft Thin Italic'; + src: url('./static/fonts/qanelas-soft/QanelasSoftThinItalic.otf') format('opentype'); + font-weight: 100; + font-style: italic; + font-display: swap; +} diff --git a/gatsby-browser.js b/gatsby-browser.js index d0ebcb45e806..c89bfe0aa0f9 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,12 +1,12 @@ -import "./fonts.css"; +import './fonts.css'; -document.addEventListener("DOMContentLoaded", () => { +document.addEventListener('DOMContentLoaded', () => { /** init gtm after 3500 seconds - this could be adjusted */ setTimeout(initGTM, 3500); }); -document.addEventListener("scroll", initGTMOnEvent); -document.addEventListener("mousemove", initGTMOnEvent); -document.addEventListener("touchstart", initGTMOnEvent); +document.addEventListener('scroll', initGTMOnEvent); +document.addEventListener('mousemove', initGTMOnEvent); +document.addEventListener('touchstart', initGTMOnEvent); function initGTMOnEvent(event) { initGTM(); event.currentTarget.removeEventListener(event.type, initGTMOnEvent); // remove the event listener that got triggered @@ -16,17 +16,21 @@ function initGTM() { return false; } window.gtmDidInit = true; // flag to ensure script does not get added to DOM more than once. - const script = document.createElement("script"); - script.type = "text/javascript"; + const script = document.createElement('script'); + script.type = 'text/javascript'; script.async = true; // ensure PageViews is always tracked (on script load) script.onload = () => { window.dataLayer = window.dataLayer || []; - window.dataLayer.push({ event: "gtm.js", "gtm.start": new Date().getTime(), "gtm.uniqueEventId": 0 }); + window.dataLayer.push({ + event: 'gtm.js', + 'gtm.start': new Date().getTime(), + 'gtm.uniqueEventId': 0 + }); }; - script.src = "https://www.googletagmanager.com/gtm.js?id=GTM-PS26QB9"; + script.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-PS26QB9'; document.head.appendChild(script); } -export { wrapRootElement } from "./root-wrapper"; -export { wrapPageElement } from "./page-wrapper"; +export { wrapRootElement } from './root-wrapper'; +export { wrapPageElement } from './page-wrapper'; diff --git a/gatsby-config.js b/gatsby-config.js index 58ab065b017b..4c202d7787c6 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -2,29 +2,29 @@ module.exports = { siteMetadata: { - title: "Layer5 - Expect more from your infrastructure", + title: 'Layer5 - Expect more from your infrastructure', description: - "Expect more from your infrastructure. Cloud native, open source software for your cloud native infrastructure and applications. Allowing developers to focus on business logic, not infrastructure concerns. Empowering operators to confidently run modern infrastructure.", - author: "Layer5 Authors", - permalink: "https://layer5.io", - siteUrl: "https://layer5.io", - image: "/images/layer5-gradient.webp", - twitterUsername: "@layer5", + 'Expect more from your infrastructure. Cloud native, open source software for your cloud native infrastructure and applications. Allowing developers to focus on business logic, not infrastructure concerns. Empowering operators to confidently run modern infrastructure.', + author: 'Layer5 Authors', + permalink: 'https://layer5.io', + siteUrl: 'https://layer5.io', + image: '/images/layer5-gradient.webp', + twitterUsername: '@layer5' }, flags: { FAST_DEV: true, PARALLEL_SOURCING: true }, - trailingSlash: "never", + trailingSlash: 'never', plugins: [ { - resolve: "gatsby-plugin-webpack-bundle-analyser-v2", + resolve: 'gatsby-plugin-webpack-bundle-analyser-v2', options: { disable: true } }, { - resolve: "gatsby-plugin-sitemap", + resolve: 'gatsby-plugin-sitemap', options: { query: ` { @@ -41,47 +41,45 @@ module.exports = { } } `, - resolvePages: ({ - allSitePage: { nodes: allPages }, - }) => { - return allPages.map(page => { + resolvePages: ({ allSitePage: { nodes: allPages } }) => { + return allPages.map((page) => { return { ...page }; }); }, serialize: ({ path, matchPath }) => { let url = matchPath ? matchPath : path; - url = url.startsWith("/") ? url : `/${url}`; + url = url.startsWith('/') ? url : `/${url}`; return { url: url, - changefreq: "daily", - priority: 0.7, + changefreq: 'daily', + priority: 0.7 }; - }, - }, + } + } }, { - resolve: "gatsby-plugin-svgr", + resolve: 'gatsby-plugin-svgr', options: { svgo: true, svgoConfig: { plugins: [ - "prefixIds", + 'prefixIds', { - name: "preset-default", + name: 'preset-default', params: { overrides: { // or disable plugins inlineStyles: false, - cleanupIds: false, + cleanupIds: false } } - }, - ], - }, - }, + } + ] + } + } }, { - resolve: "gatsby-plugin-feed", + resolve: 'gatsby-plugin-feed', options: { query: ` { @@ -107,11 +105,9 @@ module.exports = { url: site.siteMetadata.siteUrl + node.fields.slug, guid: site.siteMetadata.siteUrl + node.fields.slug, enclosure: node.frontmatter.thumbnail && { - url: - site.siteMetadata.siteUrl + - node.frontmatter.thumbnail.publicURL, + url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL }, - custom_elements: [{ "content:encoded": node.html }], + custom_elements: [{ 'content:encoded': node.html }] }); }); }, @@ -142,8 +138,8 @@ module.exports = { } } `, - output: "/rss.xml", - title: "Layer5 Technical Posts", + output: '/rss.xml', + title: 'Layer5 Technical Posts' }, { serialize: ({ query: { site, allPosts } }) => { @@ -156,11 +152,9 @@ module.exports = { url: site.siteMetadata.siteUrl + node.fields.slug, guid: site.siteMetadata.siteUrl + node.fields.slug, enclosure: node.frontmatter.thumbnail && { - url: - site.siteMetadata.siteUrl + - node.frontmatter.thumbnail.publicURL, + url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL }, - custom_elements: [{ "content:encoded": node.html }], + custom_elements: [{ 'content:encoded': node.html }] }); }); }, @@ -190,8 +184,8 @@ module.exports = { } } `, - output: "/news/feed.xml", - title: "Layer5 News", + output: '/news/feed.xml', + title: 'Layer5 News' }, { serialize: ({ query: { site, allPosts } }) => { @@ -204,11 +198,9 @@ module.exports = { url: site.siteMetadata.siteUrl + node.fields.slug, guid: site.siteMetadata.siteUrl + node.fields.slug, enclosure: node.frontmatter.thumbnail && { - url: - site.siteMetadata.siteUrl + - node.frontmatter.thumbnail.publicURL, + url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL }, - custom_elements: [{ "content:encoded": node.html }], + custom_elements: [{ 'content:encoded': node.html }] }); }); }, @@ -241,8 +233,8 @@ module.exports = { } } `, - output: "/resources/feed.xml", - title: "Layer5 Resources", + output: '/resources/feed.xml', + title: 'Layer5 Resources' }, { serialize: ({ query: { site, allPosts } }) => { @@ -255,11 +247,9 @@ module.exports = { url: site.siteMetadata.siteUrl + node.fields.slug, guid: site.siteMetadata.siteUrl + node.fields.slug, enclosure: node.frontmatter.thumbnail && { - url: - site.siteMetadata.siteUrl + - node.frontmatter.thumbnail.publicURL, + url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL }, - custom_elements: [{ "content:encoded": node.html }], + custom_elements: [{ 'content:encoded': node.html }] }); }); }, @@ -290,12 +280,12 @@ module.exports = { } } `, - output: "/rss-contributors.xml", - title: "Layer5 Contributor Feed", + output: '/rss-contributors.xml', + title: 'Layer5 Contributor Feed' }, { serialize: ({ query: { site, allPosts } }) => { - return allPosts.nodes.map(node => { + return allPosts.nodes.map((node) => { return Object.assign({}, node.frontmatter, { title: node.frontmatter.title, author: node.frontmatter.author, @@ -304,9 +294,9 @@ module.exports = { url: site.siteMetadata.siteUrl + node.fields.slug, guid: site.siteMetadata.siteUrl + node.fields.slug, enclosure: node.frontmatter.thumbnail && { - url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL, + url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL }, - custom_elements: [{ "content:encoded": node.html }], + custom_elements: [{ 'content:encoded': node.html }] }); }); }, @@ -337,12 +327,12 @@ module.exports = { } } `, - output: "/blog/feed.xml", - title: "Layer5 Blog" + output: '/blog/feed.xml', + title: 'Layer5 Blog' }, { serialize: ({ query: { site, allPosts } }) => { - return allPosts.nodes.map(node => { + return allPosts.nodes.map((node) => { return Object.assign({}, node.frontmatter, { title: node.frontmatter.title, author: node.frontmatter.author, @@ -351,9 +341,9 @@ module.exports = { url: site.siteMetadata.siteUrl + node.fields.slug, guid: site.siteMetadata.siteUrl + node.fields.slug, enclosure: node.frontmatter.thumbnail && { - url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL, + url: site.siteMetadata.siteUrl + node.frontmatter.thumbnail.publicURL }, - custom_elements: [{ "content:encoded": node.html }], + custom_elements: [{ 'content:encoded': node.html }] }); }); }, @@ -384,185 +374,184 @@ module.exports = { } } `, - output: "/events/feed.xml", - title: "Layer5 Events" - }, - ], - }, + output: '/events/feed.xml', + title: 'Layer5 Events' + } + ] + } }, { - resolve: "gatsby-plugin-styled-components", + resolve: 'gatsby-plugin-styled-components', options: { - minify: false, - }, + minify: false + } }, { - resolve: "gatsby-plugin-anchor-links", + resolve: 'gatsby-plugin-anchor-links', options: { - offset: -50, - }, + offset: -50 + } }, { - resolve: "gatsby-plugin-mdx", + resolve: 'gatsby-plugin-mdx', options: { - extensions: [".mdx", ".md"], - }, + extensions: ['.mdx', '.md'] + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { - name: "images", - path: `${__dirname}/src/assets/images`, - }, + name: 'images', + path: `${__dirname}/src/assets/images` + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/blog`, - name: "blog", - }, + name: 'blog' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/news`, - name: "news", - }, + name: 'news' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/projects`, - name: "projects", - }, + name: 'projects' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/service-mesh-books`, - name: "service-mesh-books", - }, + name: 'service-mesh-books' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/programs`, - name: "programs", - }, + name: 'programs' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/careers`, - name: "careers", - }, + name: 'careers' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/members`, - name: "members", - }, + name: 'members' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/service-mesh-workshops`, - name: "service-mesh-workshops", - }, + name: 'service-mesh-workshops' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/service-mesh-labs`, - name: "service-mesh-labs", - }, + name: 'service-mesh-labs' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/resources`, - name: "resources", - }, + name: 'resources' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/events`, - name: "events", - }, + name: 'events' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/content-learn`, - name: "content-learn", - }, + name: 'content-learn' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/integrations`, - name: "integrations", - }, + name: 'integrations' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/collections/use-cases`, - name: "use-cases", - }, + name: 'use-cases' + } }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { - name: "integration-images", - path: `${__dirname}/src/sections/Meshery/Meshery-platforms/supported-icons`, - }, + name: 'integration-images', + path: `${__dirname}/src/sections/Meshery/Meshery-platforms/supported-icons` + } }, - "gatsby-plugin-image", + 'gatsby-plugin-image', { - resolve: "gatsby-plugin-sharp", + resolve: 'gatsby-plugin-sharp', options: { defaults: { - placeholder: "blurred", + placeholder: 'blurred' } } }, { - resolve: "gatsby-transformer-sharp", + resolve: 'gatsby-transformer-sharp', options: { - checkSupportedExtensions: false, // suppress warning about childImageSharp being null - }, + checkSupportedExtensions: false // suppress warning about childImageSharp being null + } }, { - resolve: "gatsby-plugin-manifest", + resolve: 'gatsby-plugin-manifest', options: { - name: "gatsby-starter-default", - short_name: "starter", - start_url: "/", - background_color: "#3c494f", - theme_color: "#00b39f", - display: "minimal-ui", - icon: "src/assets/images/favicon.webp", // This path is relative to the root of the site. - }, + name: 'gatsby-starter-default', + short_name: 'starter', + start_url: '/', + background_color: '#3c494f', + theme_color: '#00b39f', + display: 'minimal-ui', + icon: 'src/assets/images/favicon.webp' // This path is relative to the root of the site. + } }, { - resolve: "gatsby-redirect-from", + resolve: 'gatsby-redirect-from', options: { - query: "allMdx", - }, + query: 'allMdx' + } }, { - resolve: "gatsby-plugin-robots-txt", + resolve: 'gatsby-plugin-robots-txt', options: { - host: "https://layer5.io", - sitemap: "https://layer5.io/sitemap/sitemap-index.xml", - policy: [{ userAgent: "*", allow: "/" }], + host: 'https://layer5.io', + sitemap: 'https://layer5.io/sitemap/sitemap-index.xml', + policy: [{ userAgent: '*', allow: '/' }] } }, - "gatsby-plugin-meta-redirect", + 'gatsby-plugin-meta-redirect' // make sure this is always the last one - ], - + ] }; diff --git a/gatsby-node.js b/gatsby-node.js index 838d06780192..f14488e2b1b5 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -5,17 +5,16 @@ * See: https://www.gatsbyjs.org/docs/node-apis/ */ -const path = require("path"); -const slugify = require("./src/utils/slugify"); -const { paginate } = require("gatsby-awesome-pagination"); -const { createFilePath } = require("gatsby-source-filesystem"); -const config = require("./gatsby-config"); +const path = require('path'); +const slugify = require('./src/utils/slugify'); +const { paginate } = require('gatsby-awesome-pagination'); +const { createFilePath } = require('gatsby-source-filesystem'); +const config = require('./gatsby-config'); -if (process.env.CI === "true") { +if (process.env.CI === 'true') { // All process.env.CI conditionals in this file are in place for GitHub Pages, if webhost changes in the future, code may need to be modified or removed. //Replacing '/' would result in empty string which is invalid - const replacePath = (url) => - url === "/" || url.includes("/404") ? url : `${url}.html`; + const replacePath = (url) => (url === '/' || url.includes('/404') ? url : `${url}.html`); exports.onCreatePage = ({ page, actions }) => { const { createPage, deletePage, createRedirect } = actions; @@ -32,7 +31,7 @@ if (process.env.CI === "true") { fromPath: `/${page.matchPath}/`, toPath: `/${page.matchPath}`, redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); } }; @@ -42,229 +41,227 @@ exports.createPages = async ({ actions, graphql, reporter }) => { // Create client-side redirects (these only work in prod deployment) const { createRedirect } = actions; createRedirect({ - fromPath: "/books", - toPath: "/learn/service-mesh-books", + fromPath: '/books', + toPath: '/learn/service-mesh-books', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/books/the-enterprise-path-to-service-mesh-architectures", - toPath: - "/learn/service-mesh-books/the-enterprise-path-to-service-mesh-architectures", + fromPath: '/books/the-enterprise-path-to-service-mesh-architectures', + toPath: '/learn/service-mesh-books/the-enterprise-path-to-service-mesh-architectures', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: - "/books/the-enterprise-path-to-service-mesh-architectures-2nd-edition", + fromPath: '/books/the-enterprise-path-to-service-mesh-architectures-2nd-edition', toPath: - "/learn/service-mesh-books/the-enterprise-path-to-service-mesh-architectures-2nd-edition", + '/learn/service-mesh-books/the-enterprise-path-to-service-mesh-architectures-2nd-edition', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/books/istio-up-and-running", - toPath: "/learn/service-mesh-books/istio-up-and-running", + fromPath: '/books/istio-up-and-running', + toPath: '/learn/service-mesh-books/istio-up-and-running', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/workshops", - toPath: "/learn/service-mesh-workshops", + fromPath: '/workshops', + toPath: '/learn/service-mesh-workshops', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/labs", - toPath: "/learn/service-mesh-labs", + fromPath: '/labs', + toPath: '/learn/service-mesh-labs', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/meshery", - toPath: "/cloud-native-management/meshery", + fromPath: '/meshery', + toPath: '/cloud-native-management/meshery', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/service-mesh-management/meshery", - toPath: "/cloud-native-management/meshery", + fromPath: '/service-mesh-management/meshery', + toPath: '/cloud-native-management/meshery', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/service-mesh-management/meshery/operating-service-meshes", - toPath: "/cloud-native-management/meshery/operating-cloud-native-infra", + fromPath: '/service-mesh-management/meshery/operating-service-meshes', + toPath: '/cloud-native-management/meshery/operating-cloud-native-infra', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/cloud-native-management/meshery/operating-service-meshes", - toPath: "/cloud-native-management/meshery/operating-cloud-native-infra", + fromPath: '/cloud-native-management/meshery/operating-service-meshes', + toPath: '/cloud-native-management/meshery/operating-cloud-native-infra', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/service-mesh-management/meshery/getting-started", - toPath: "/cloud-native-management/meshery/getting-started", + fromPath: '/service-mesh-management/meshery/getting-started', + toPath: '/cloud-native-management/meshery/getting-started', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/landscape", - toPath: "/service-mesh-landscape", + fromPath: '/landscape', + toPath: '/service-mesh-landscape', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/events", - toPath: "/community/events", + fromPath: '/events', + toPath: '/community/events', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/programs", - toPath: "/careers/programs", + fromPath: '/programs', + toPath: '/careers/programs', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/about", - toPath: "/company/about", + fromPath: '/about', + toPath: '/company/about', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/brand", - toPath: "/company/brand", + fromPath: '/brand', + toPath: '/company/brand', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/contact", - toPath: "/company/contact", + fromPath: '/contact', + toPath: '/company/contact', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/news", - toPath: "/company/news", + fromPath: '/news', + toPath: '/company/news', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/service-meshes", - toPath: "/service-mesh-landscape", + fromPath: '/service-meshes', + toPath: '/service-mesh-landscape', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/calendar", - toPath: "/community/calendar", + fromPath: '/calendar', + toPath: '/community/calendar', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/smi", - toPath: "/projects/service-mesh-interface-conformance", + fromPath: '/smi', + toPath: '/projects/service-mesh-interface-conformance', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/projects/getnighthawk", - toPath: "/projects/nighthawk", + fromPath: '/projects/getnighthawk', + toPath: '/projects/nighthawk', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/projects/getnighthawk", - toPath: "/projects/nighthawk", + fromPath: '/projects/getnighthawk', + toPath: '/projects/nighthawk', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/projects/service-mesh-performance", - toPath: "/projects/cloud-native-performance", + fromPath: '/projects/service-mesh-performance', + toPath: '/projects/cloud-native-performance', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/blog/category/service-mesh-performance", - toPath: "/blog/category/service-mesh", + fromPath: '/blog/category/service-mesh-performance', + toPath: '/blog/category/service-mesh', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/blog/category/service-mesh-performance/", - toPath: "/blog/category/service-mesh", + fromPath: '/blog/category/service-mesh-performance/', + toPath: '/blog/category/service-mesh', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/blog/tag/smi", - toPath: "/blog/tag/service-mesh-interface", + fromPath: '/blog/tag/smi', + toPath: '/blog/tag/service-mesh-interface', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/catalog", - toPath: "/cloud-native-management/catalog", + fromPath: '/catalog', + toPath: '/cloud-native-management/catalog', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/cloud-native-management/meshery/integrations/argocd-operator", - toPath: "/cloud-native-management/meshery/integrations/argo-cd-operator", + fromPath: '/cloud-native-management/meshery/integrations/argocd-operator', + toPath: '/cloud-native-management/meshery/integrations/argo-cd-operator', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/cloud-native-management/meshery/integrations/argocd-operator/", - toPath: "/cloud-native-management/meshery/integrations/argo-cd-operator", + fromPath: '/cloud-native-management/meshery/integrations/argocd-operator/', + toPath: '/cloud-native-management/meshery/integrations/argo-cd-operator', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/blog/category/landscape", - toPath: "/blog/tag/landscape", + fromPath: '/blog/category/landscape', + toPath: '/blog/tag/landscape', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/blog/category/landscape/", - toPath: "/blog/tag/landscape", + fromPath: '/blog/category/landscape/', + toPath: '/blog/tag/landscape', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/blog/category/service-mesh-specifications", - toPath: "/blog/category/service-mesh", + fromPath: '/blog/category/service-mesh-specifications', + toPath: '/blog/category/service-mesh', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/orchestration-management", - toPath: "/solutions/orchestration-management", + fromPath: '/orchestration-management', + toPath: '/solutions/orchestration-management', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/cloud-native-management/gitops", - toPath: "/solutions/gitops", + fromPath: '/cloud-native-management/gitops', + toPath: '/solutions/gitops', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/cloud-native-management/gitops/snapshot", - toPath: "/solutions/gitops/snapshot", + fromPath: '/cloud-native-management/gitops/snapshot', + toPath: '/solutions/gitops/snapshot', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/cloud-native-management/gitops/performance-management", - toPath: "/solutions/gitops/performance-management", + fromPath: '/cloud-native-management/gitops/performance-management', + toPath: '/solutions/gitops/performance-management', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); //**** @@ -273,85 +270,81 @@ exports.createPages = async ({ actions, graphql, reporter }) => { // New Community Member (Google Form) createRedirect({ - fromPath: "/newcomer", - toPath: "/newcomers", + fromPath: '/newcomer', + toPath: '/newcomers', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/meshmap", - toPath: "/cloud-native-management/meshmap", + fromPath: '/meshmap', + toPath: '/cloud-native-management/meshmap', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/go/meshmap", - toPath: "/cloud-native-management/meshmap", + fromPath: '/go/meshmap', + toPath: '/cloud-native-management/meshmap', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); createRedirect({ - fromPath: "/resources/cloud-native/hpes-adoption-of-meshery-and-meshmap", - toPath: "/resources/case-study/hpes-adoption-of-meshery-and-meshmap", + fromPath: '/resources/cloud-native/hpes-adoption-of-meshery-and-meshmap', + toPath: '/resources/case-study/hpes-adoption-of-meshery-and-meshmap', redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); // Create Pages const { createPage } = actions; const envCreatePage = (props) => { - if (process.env.CI === "true") { + if (process.env.CI === 'true') { const { path, ...rest } = props; createRedirect({ fromPath: `/${path}/`, toPath: `/${path}`, redirectInBrowser: true, - isPermanent: true, + isPermanent: true }); return createPage({ path: `${path}.html`, matchPath: path, - ...rest, + ...rest }); } return createPage(props); }; - const blogPostTemplate = path.resolve("src/templates/blog-single.js"); - const blogCategoryListTemplate = path.resolve( - "src/templates/blog-category-list.js" - ); - const blogTagListTemplate = path.resolve("src/templates/blog-tag-list.js"); + const blogPostTemplate = path.resolve('src/templates/blog-single.js'); + const blogCategoryListTemplate = path.resolve('src/templates/blog-category-list.js'); + const blogTagListTemplate = path.resolve('src/templates/blog-tag-list.js'); - const EventsTemplate = path.resolve("src/templates/events.js"); + const EventsTemplate = path.resolve('src/templates/events.js'); - const EventTemplate = path.resolve("src/templates/event-single.js"); + const EventTemplate = path.resolve('src/templates/event-single.js'); - const NewsPostTemplate = path.resolve("src/templates/news-single.js"); + const NewsPostTemplate = path.resolve('src/templates/news-single.js'); - const BookPostTemplate = path.resolve("src/templates/book-single.js"); + const BookPostTemplate = path.resolve('src/templates/book-single.js'); - const ProgramPostTemplate = path.resolve("src/templates/program-single.js"); + const ProgramPostTemplate = path.resolve('src/templates/program-single.js'); - const MultiProgramPostTemplate = path.resolve( - "src/templates/program-multiple.js" - ); + const MultiProgramPostTemplate = path.resolve('src/templates/program-multiple.js'); - const CareerPostTemplate = path.resolve("src/templates/career-single.js"); + const CareerPostTemplate = path.resolve('src/templates/career-single.js'); - const MemberTemplate = path.resolve("src/templates/member-single.js"); + const MemberTemplate = path.resolve('src/templates/member-single.js'); - const MemberBioTemplate = path.resolve("src/templates/executive-bio.js"); + const MemberBioTemplate = path.resolve('src/templates/executive-bio.js'); - const WorkshopTemplate = path.resolve("src/templates/workshop-single.js"); + const WorkshopTemplate = path.resolve('src/templates/workshop-single.js'); - const LabTemplate = path.resolve("src/templates/lab-single.js"); + const LabTemplate = path.resolve('src/templates/lab-single.js'); - const resourcePostTemplate = path.resolve("src/templates/resource-single.js"); - const integrationTemplate = path.resolve("src/templates/integrations.js"); + const resourcePostTemplate = path.resolve('src/templates/resource-single.js'); + const integrationTemplate = path.resolve('src/templates/integrations.js'); const res = await graphql(` { @@ -368,10 +361,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } blogTags: allMdx( - filter: { - fields: { collection: { eq: "blog" } } - frontmatter: { published: { eq: true } } - } + filter: { fields: { collection: { eq: "blog" } }, frontmatter: { published: { eq: true } } } ) { group(field: frontmatter___tags) { nodes { @@ -381,10 +371,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } blogCategory: allMdx( - filter: { - fields: { collection: { eq: "blog" } } - frontmatter: { published: { eq: true } } - } + filter: { fields: { collection: { eq: "blog" } }, frontmatter: { published: { eq: true } } } ) { group(field: frontmatter___category) { nodes { @@ -409,9 +396,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } } - singleWorkshop: allMdx( - filter: { fields: { collection: { eq: "service-mesh-workshops" } } } - ) { + singleWorkshop: allMdx(filter: { fields: { collection: { eq: "service-mesh-workshops" } } }) { nodes { fields { slug @@ -419,9 +404,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } } - labs: allMdx( - filter: { fields: { collection: { eq: "service-mesh-labs" } } } - ) { + labs: allMdx(filter: { fields: { collection: { eq: "service-mesh-labs" } } }) { nodes { fields { slug @@ -429,9 +412,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } } - learncontent: allMdx( - filter: { fields: { collection: { eq: "content-learn" } } } - ) { + learncontent: allMdx(filter: { fields: { collection: { eq: "content-learn" } } }) { nodes { fields { learnpath @@ -449,41 +430,29 @@ exports.createPages = async ({ actions, graphql, reporter }) => { // handle errors if (res.errors) { - reporter.panicOnBuild("Error while running GraphQL query."); + reporter.panicOnBuild('Error while running GraphQL query.'); return; } const allNodes = res.data.allPosts.nodes; - const blogs = allNodes.filter((node) => node.fields.collection === "blog"); + const blogs = allNodes.filter((node) => node.fields.collection === 'blog'); - const resources = allNodes.filter( - (node) => node.fields.collection === "resources" - ); + const resources = allNodes.filter((node) => node.fields.collection === 'resources'); - const news = allNodes.filter((node) => node.fields.collection === "news"); + const news = allNodes.filter((node) => node.fields.collection === 'news'); - const books = allNodes.filter( - (node) => node.fields.collection === "service-mesh-books" - ); + const books = allNodes.filter((node) => node.fields.collection === 'service-mesh-books'); - const events = allNodes.filter((node) => node.fields.collection === "events"); + const events = allNodes.filter((node) => node.fields.collection === 'events'); - const programs = allNodes.filter( - (node) => node.fields.collection === "programs" - ); + const programs = allNodes.filter((node) => node.fields.collection === 'programs'); - const careers = allNodes.filter( - (node) => node.fields.collection === "careers" - ); + const careers = allNodes.filter((node) => node.fields.collection === 'careers'); - const members = allNodes.filter( - (node) => node.fields.collection === "members" - ); + const members = allNodes.filter((node) => node.fields.collection === 'members'); - const integrations = allNodes.filter( - (nodes) => nodes.fields.collection === "integrations" - ); + const integrations = allNodes.filter((nodes) => nodes.fields.collection === 'integrations'); const singleWorkshop = res.data.singleWorkshop.nodes; const labs = res.data.labs.nodes; @@ -492,8 +461,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { createPage: envCreatePage, items: events, itemsPerPage: 9, - pathPrefix: "/community/events", - component: EventsTemplate, + pathPrefix: '/community/events', + component: EventsTemplate }); blogs.forEach((blog) => { @@ -501,8 +470,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: blog.fields.slug, component: blogPostTemplate, context: { - slug: blog.fields.slug, - }, + slug: blog.fields.slug + } }); }); @@ -512,8 +481,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: `/blog/category/${slugify(category.fieldValue)}`, component: blogCategoryListTemplate, context: { - category: category.fieldValue, - }, + category: category.fieldValue + } }); }); @@ -523,8 +492,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: `/blog/tag/${slugify(tag.fieldValue)}`, component: blogTagListTemplate, context: { - tag: tag.fieldValue, - }, + tag: tag.fieldValue + } }); }); @@ -533,8 +502,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: resource.fields.slug, component: resourcePostTemplate, context: { - slug: resource.fields.slug, - }, + slug: resource.fields.slug + } }); }); @@ -543,8 +512,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: singleNews.fields.slug, component: NewsPostTemplate, context: { - slug: singleNews.fields.slug, - }, + slug: singleNews.fields.slug + } }); }); @@ -553,8 +522,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: book.fields.slug, component: BookPostTemplate, context: { - slug: book.fields.slug, - }, + slug: book.fields.slug + } }); }); @@ -563,8 +532,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: event.fields.slug, component: EventTemplate, context: { - slug: event.fields.slug, - }, + slug: event.fields.slug + } }); }); @@ -573,8 +542,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: program.fields.slug, component: ProgramPostTemplate, context: { - slug: program.fields.slug, - }, + slug: program.fields.slug + } }); }); @@ -583,8 +552,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: career.fields.slug, component: CareerPostTemplate, context: { - slug: career.fields.slug, - }, + slug: career.fields.slug + } }); }); @@ -593,8 +562,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: member.fields.slug, component: MemberTemplate, context: { - slug: member.fields.slug, - }, + slug: member.fields.slug + } }); }); @@ -604,8 +573,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: `${memberbio.fields.slug}/bio`, component: MemberBioTemplate, context: { - member: memberbio.frontmatter.name, - }, + member: memberbio.frontmatter.name + } }); }); @@ -614,8 +583,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: workshop.fields.slug, component: WorkshopTemplate, context: { - slug: workshop.fields.slug, - }, + slug: workshop.fields.slug + } }); }); @@ -624,8 +593,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: lab.fields.slug, component: LabTemplate, context: { - slug: lab.fields.slug, - }, + slug: lab.fields.slug + } }); }); @@ -635,8 +604,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { component: integrationTemplate, context: { slug: integration.fields.slug, - name: "_images/" + integration.fields.slug.split("/")[2], - }, + name: '_images/' + integration.fields.slug.split('/')[2] + } }); }); @@ -644,7 +613,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { programs.forEach((program) => { if ( programsArray.indexOf(program.frontmatter.program) >= 0 && - program.frontmatter.program === "Layer5" + program.frontmatter.program === 'Layer5' ) { return false; } else { @@ -653,8 +622,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: `/programs/${program.frontmatter.programSlug}`, component: MultiProgramPostTemplate, context: { - program: program.frontmatter.program, - }, + program: program.frontmatter.program + } }); } }); @@ -665,22 +634,22 @@ exports.createPages = async ({ actions, graphql, reporter }) => { if (node.fields) { const { pageType } = node.fields; - if (pageType === "learnpath") { + if (pageType === 'learnpath') { createCoursesListPage({ envCreatePage, node }); return; } - if (pageType === "course") { + if (pageType === 'course') { createCourseOverviewPage({ envCreatePage, node }); return; } - if (pageType === "chapter") { + if (pageType === 'chapter') { createChapterPage({ envCreatePage, node }); return; } - if (pageType === "section") { + if (pageType === 'section') { createSectionPage({ envCreatePage, node }); return; } @@ -689,21 +658,21 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }; // slug starts and ends with '/' so parts[0] and parts[-1] will be empty -const getSlugParts = (slug) => slug.split("/").filter((p) => !!p); +const getSlugParts = (slug) => slug.split('/').filter((p) => !!p); const onCreatePathNode = ({ actions, node, slug }) => { const { createNodeField } = actions; const parts = getSlugParts(slug); const [learnpath] = parts; - createNodeField({ node, name: "learnpath", value: learnpath }); - createNodeField({ node, name: "slug", value: `learn/learning-paths${slug}` }); + createNodeField({ node, name: 'learnpath', value: learnpath }); + createNodeField({ node, name: 'slug', value: `learn/learning-paths${slug}` }); createNodeField({ node, - name: "permalink", - value: `${config.siteMetadata.permalink}${slug}`, + name: 'permalink', + value: `${config.siteMetadata.permalink}${slug}` }); - createNodeField({ node, name: "pageType", value: "learnpath" }); + createNodeField({ node, name: 'pageType', value: 'learnpath' }); }; const onCreateCourseNode = ({ actions, node, slug }) => { @@ -711,15 +680,15 @@ const onCreateCourseNode = ({ actions, node, slug }) => { const parts = getSlugParts(slug); const [learnpath, course] = parts; - createNodeField({ node, name: "learnpath", value: learnpath }); - createNodeField({ node, name: "slug", value: `learn/learning-paths${slug}` }); + createNodeField({ node, name: 'learnpath', value: learnpath }); + createNodeField({ node, name: 'slug', value: `learn/learning-paths${slug}` }); createNodeField({ node, - name: "permalink", - value: `${config.siteMetadata.permalink}${slug}`, + name: 'permalink', + value: `${config.siteMetadata.permalink}${slug}` }); - createNodeField({ node, name: "course", value: course }); - createNodeField({ node, name: "pageType", value: "course" }); + createNodeField({ node, name: 'course', value: course }); + createNodeField({ node, name: 'pageType', value: 'course' }); }; const onCreateSectionNode = ({ actions, node, slug }) => { @@ -727,16 +696,16 @@ const onCreateSectionNode = ({ actions, node, slug }) => { const parts = getSlugParts(slug); const [learnpath, course, section] = parts; - createNodeField({ node, name: "learnpath", value: learnpath }); - createNodeField({ node, name: "slug", value: `learn/learning-paths${slug}` }); + createNodeField({ node, name: 'learnpath', value: learnpath }); + createNodeField({ node, name: 'slug', value: `learn/learning-paths${slug}` }); createNodeField({ node, - name: "permalink", - value: `${config.siteMetadata.permalink}${slug}`, + name: 'permalink', + value: `${config.siteMetadata.permalink}${slug}` }); - createNodeField({ node, name: "course", value: course }); - createNodeField({ node, name: "section", value: section }); - createNodeField({ node, name: "pageType", value: "section" }); + createNodeField({ node, name: 'course', value: course }); + createNodeField({ node, name: 'section', value: section }); + createNodeField({ node, name: 'pageType', value: 'section' }); }; const onCreateChapterNode = ({ actions, node, slug }) => { @@ -744,59 +713,59 @@ const onCreateChapterNode = ({ actions, node, slug }) => { const parts = getSlugParts(slug); const [learnpath, course, section, chapter] = parts; - createNodeField({ node, name: "learnpath", value: learnpath }); - createNodeField({ node, name: "slug", value: `learn/learning-paths${slug}` }); + createNodeField({ node, name: 'learnpath', value: learnpath }); + createNodeField({ node, name: 'slug', value: `learn/learning-paths${slug}` }); createNodeField({ node, - name: "permalink", - value: `${config.siteMetadata.permalink}${slug}`, + name: 'permalink', + value: `${config.siteMetadata.permalink}${slug}` }); - createNodeField({ node, name: "chapter", value: chapter }); - createNodeField({ node, name: "course", value: course }); - createNodeField({ node, name: "section", value: section }); - createNodeField({ node, name: "pageType", value: "chapter" }); + createNodeField({ node, name: 'chapter', value: chapter }); + createNodeField({ node, name: 'course', value: course }); + createNodeField({ node, name: 'section', value: section }); + createNodeField({ node, name: 'pageType', value: 'chapter' }); }; exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions; - if (node.internal.type === "Mdx") { + if (node.internal.type === 'Mdx') { const collection = getNode(node.parent).sourceInstanceName; createNodeField({ - name: "collection", + name: 'collection', node, - value: collection, + value: collection }); - if (collection !== "content-learn") { - let slug = ""; + if (collection !== 'content-learn') { + let slug = ''; if (node.frontmatter.permalink) { slug = `/${collection}/${node.frontmatter.permalink}`; } else { switch (collection) { - case "blog": + case 'blog': if (node.frontmatter.published) slug = `/${collection}/${slugify( node.frontmatter.category )}/${slugify(node.frontmatter.title)}`; break; - case "news": + case 'news': slug = `/company/${collection}/${slugify(node.frontmatter.title)}`; break; - case "service-mesh-books": - case "service-mesh-workshops": - case "service-mesh-labs": + case 'service-mesh-books': + case 'service-mesh-workshops': + case 'service-mesh-labs': slug = `/learn/${collection}/${slugify(node.frontmatter.title)}`; break; - case "resources": + case 'resources': if (node.frontmatter.published) slug = `/${collection}/${slugify( node.frontmatter.category )}/${slugify(node.frontmatter.title)}`; break; - case "members": + case 'members': if (node.frontmatter.published) slug = `/community/members/${slugify(node.frontmatter.name)}`; break; - case "events": + case 'events': if (node.frontmatter.title) slug = `/community/events/${slugify(node.frontmatter.title)}`; break; @@ -805,20 +774,20 @@ exports.onCreateNode = ({ node, actions, getNode }) => { } } createNodeField({ - name: "slug", + name: 'slug', node, - value: slug, + value: slug }); } else { const slug = createFilePath({ node, getNode, - basePath: "content-learn", - trailingSlash: false, + basePath: 'content-learn', + trailingSlash: false }); // slug starts and ends with '/' so parts[0] and parts[-1] will be empty - const parts = slug.split("/").filter((p) => !!p); + const parts = slug.split('/').filter((p) => !!p); if (parts.length === 1) { onCreatePathNode({ actions, node, slug }); @@ -848,14 +817,14 @@ const createCoursesListPage = ({ envCreatePage, node }) => { envCreatePage({ path: `${slug}`, - component: path.resolve("src/templates/courses-list.js"), + component: path.resolve('src/templates/courses-list.js'), context: { // Data passed to context is available in page queries as GraphQL variables. learnpath, slug, permalink, - pageType, - }, + pageType + } }); }; @@ -864,24 +833,23 @@ const createCourseOverviewPage = ({ envCreatePage, node }) => { envCreatePage({ path: `${slug}`, - component: path.resolve("src/templates/course-overview.js"), + component: path.resolve('src/templates/course-overview.js'), context: { learnpath, slug, course, pageType, - permalink, - }, + permalink + } }); }; const createChapterPage = ({ envCreatePage, node }) => { - const { learnpath, slug, course, section, chapter, pageType, permalink } = - node.fields; + const { learnpath, slug, course, section, chapter, pageType, permalink } = node.fields; envCreatePage({ path: `${slug}`, - component: path.resolve("src/templates/learn-chapter.js"), + component: path.resolve('src/templates/learn-chapter.js'), context: { learnpath, slug, @@ -889,8 +857,8 @@ const createChapterPage = ({ envCreatePage, node }) => { section, chapter, pageType, - permalink, - }, + permalink + } }); }; @@ -899,15 +867,15 @@ const createSectionPage = ({ envCreatePage, node }) => { envCreatePage({ path: `${slug}`, - component: path.resolve("src/sections/Learn-Layer5/Section/index.js"), + component: path.resolve('src/sections/Learn-Layer5/Section/index.js'), context: { learnpath, slug, course, section, pageType, - permalink, - }, + permalink + } }); }; @@ -915,11 +883,11 @@ exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { fallback: { - path: require.resolve("path-browserify"), - process: require.resolve("process/browser"), - url: require.resolve("url/"), - }, - }, + path: require.resolve('path-browserify'), + process: require.resolve('process/browser'), + url: require.resolve('url/') + } + } }); }; exports.createSchemaCustomization = ({ actions }) => { diff --git a/gatsby-ssr.js b/gatsby-ssr.js index a71b435ee356..e23000c50d4f 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -1,3 +1,3 @@ -export { onRenderBody } from "./onRenderBody"; -export { wrapRootElement } from "./root-wrapper"; -export { wrapPageElement } from "./page-wrapper"; +export { onRenderBody } from './onRenderBody'; +export { wrapRootElement } from './root-wrapper'; +export { wrapPageElement } from './page-wrapper'; diff --git a/onRenderBody.js b/onRenderBody.js index a4c5f225a818..2911c04ca45e 100644 --- a/onRenderBody.js +++ b/onRenderBody.js @@ -1,6 +1,6 @@ -import React from "react"; -import { DarkThemeKey, ThemeSetting } from "./src/theme/app/ThemeManager.js"; -import lighttheme, { darktheme } from "./src/theme/app/themeStyles"; +import React from 'react'; +import { DarkThemeKey, ThemeSetting } from './src/theme/app/ThemeManager.js'; +import lighttheme, { darktheme } from './src/theme/app/themeStyles'; const themes = { light: lighttheme, dark: darktheme }; @@ -43,6 +43,6 @@ const MagicScriptTag = (props) => { return - Copyright ©Layer5, Inc | All Rights Reserved -

- -
-

Privacy   Terms

+ +
+ +
+
+
+

+ + Copyright ©Layer5, Inc | All Rights Reserved +

+
+
+

+ Privacy   + Terms +

+
+ diff --git a/src/assets/discuss/yml/app.yml b/src/assets/discuss/yml/app.yml index 0cadef4fd8aa..a92950904eaf 100755 --- a/src/assets/discuss/yml/app.yml +++ b/src/assets/discuss/yml/app.yml @@ -2,18 +2,18 @@ # TODO: change SOME_SECRET in this template templates: - - "templates/web.template.yml" - - "templates/web.ratelimited.template.yml" -## Uncomment these two lines if you wish to add Lets Encrypt (https) - - "templates/web.ssl.template.yml" - - "templates/web.letsencrypt.ssl.template.yml" + - 'templates/web.template.yml' + - 'templates/web.ratelimited.template.yml' + ## Uncomment these two lines if you wish to add Lets Encrypt (https) + - 'templates/web.ssl.template.yml' + - 'templates/web.letsencrypt.ssl.template.yml' ## which TCP/IP ports should this container expose? ## If you want Discourse to share a port with another webserver like Apache or nginx, ## see https://meta.discourse.org/t/17247 for details expose: - - "80:80" # http - - "443:443" # https + - '80:80' # http + - '443:443' # https # Use 'links' key to link containers together, aka use Docker --link flag. @@ -51,7 +51,7 @@ env: DISCOURSE_SMTP_ADDRESS: smtp.gmail.com DISCOURSE_SMTP_PORT: 587 DISCOURSE_SMTP_USER_NAME: abishek.kumar@layer5.io - DISCOURSE_SMTP_PASSWORD: "***************" + DISCOURSE_SMTP_PASSWORD: '***************' #DISCOURSE_SMTP_ENABLE_START_TLS: true # (optional, default true) DISCOURSE_SMTP_DOMAIN: discuss.layer5.io DISCOURSE_NOTIFICATION_EMAIL: noreply@realnighthawk.io @@ -114,4 +114,4 @@ run: #- exec: ssh-import-id anotherusername - exec: echo "End of custom commands" - - exec: awk -F\# '{print $1;}' ~/.ssh/authorized_keys | awk 'BEGIN { print "Authorized SSH keys for this container:"; } NF>=2 {print $NF;}' \ No newline at end of file + - exec: awk -F\# '{print $1;}' ~/.ssh/authorized_keys | awk 'BEGIN { print "Authorized SSH keys for this container:"; } NF>=2 {print $NF;}' diff --git a/src/assets/images/LoadingIcon.js b/src/assets/images/LoadingIcon.js index 972bda023bc4..2cd350e9a7ae 100644 --- a/src/assets/images/LoadingIcon.js +++ b/src/assets/images/LoadingIcon.js @@ -1,12 +1,8 @@ -import React from "react"; +import React from 'react'; function Icon() { return ( - + ( -SMI Logo +SMI Logo Most began their cloud native journey with their first step being use of containers, and taking a second step, moved into container orchestration as their workloads grew. Now, waves and waves of organizations are considering service meshes as their third significant step in their cloud native journey. As they invest into service meshes as their next layer of key infrastructure, users will continue to look for the same assurances sought from other commonly accepted (standard) interfaces for container runtimes (e.g. CRI), container storage (e.g. CSI), container networking (e.g. CNI) and they will look for a commonly accepted service mesh interface. @@ -35,5 +35,4 @@ As a multi-mesh manager, Meshery, understands that each service mesh has it own SMI’s aim for consistent APIs facilitates Meshery’s same goals, allowing for users and tools to flourish. As SMI unveils today, so does Meshery’s compatibility. Try out [Meshery and SMI](https://layer5.io/meshery) today! - diff --git a/src/collections/blog/2019/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx b/src/collections/blog/2019/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx index 44e285808932..5d51e0efbad7 100644 --- a/src/collections/blog/2019/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx +++ b/src/collections/blog/2019/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx @@ -1,56 +1,58 @@ --- -title: "Getting started with Meshery, WSL2 and k3d" -subtitle: "" +title: 'Getting started with Meshery, WSL2 and k3d' +subtitle: '' date: 2019-07-09 12:00:00 +0000 author: Nuno do Carmo thumbnail: ./cnab-logo.webp darkthumbnail: ./cnab-logo.webp category: Meshery tags: - - Community - - Meshery - - mesheryctl + - Community + - Meshery + - mesheryctl published: true type: Blog technology: Docker product: Meshery resource: true redirect_from: - - /blog/2019-07-09-getting-started-with-Meshery-WSL2-k3d/ + - /blog/2019-07-09-getting-started-with-Meshery-WSL2-k3d/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import wsldockerstart from "./wsl-docker-start.webp"; -import wslgrafanalogin from "./wsl-grafana-login.webp"; -import wslgrafanaloginsuccess from "./wsl-grafana-login-success.webp"; -import wslgrafanastart from "./wsl-grafana-start.webp"; -import wslk3dstart from "./wsl-k3d-start.webp"; -import wslmesherycomplete from "./wsl-meshery-complete.webp"; -import wslmesherylogin from "./wsl-meshery-login.webp"; -import wslmesheryloginsuccess from "./wsl-meshery-login-success.webp"; -import wslmesherystart from "./wsl-meshery-start.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import wsldockerstart from './wsl-docker-start.webp'; +import wslgrafanalogin from './wsl-grafana-login.webp'; +import wslgrafanaloginsuccess from './wsl-grafana-login-success.webp'; +import wslgrafanastart from './wsl-grafana-start.webp'; +import wslk3dstart from './wsl-k3d-start.webp'; +import wslmesherycomplete from './wsl-meshery-complete.webp'; +import wslmesherylogin from './wsl-meshery-login.webp'; +import wslmesheryloginsuccess from './wsl-meshery-login-success.webp'; +import wslmesherystart from './wsl-meshery-start.webp'; During KubeCon EU 2019, I had the chance to discover two new softwares that simply amazed me: + 1. [Meshery](https://layer5.io/cloud-native-management/meshery), which is the multi-cluster Kubernetes management plane. 2. [k3d](https://github.com/rancher/k3d), which is used to create a dockerized [k3s](https://k3s.io) server. -And, what really appealed to me about both of them is that everything from the installation to the usage was just *simple!* +And, what really appealed to me about both of them is that everything from the installation to the usage was just _simple!_ And cream on the top, both softwares are used with or inside containers, making each ideal for a create/try/delete workflow.

Environment Setup

-Before we start having *real* fun with Meshery, I will quickly list the different components I used for this blog post and ensure I define what could be optional for your own setup: +Before we start having _real_ fun with Meshery, I will quickly list the different components I used for this blog post and ensure I define what could be optional for your own setup: + 1. [Meshery](https://layer5.io/cloud-native-management/meshery) 2. [Docker](https://docs.docker.com/install/) - - Docker is of course mandatory and as Meshery is based on a Compose file, which means that [docker-compose](https://docs.docker.com/compose/install/) is also mandatory. + - Docker is of course mandatory and as Meshery is based on a Compose file, which means that [docker-compose](https://docs.docker.com/compose/install/) is also mandatory. 3. [k3d](https://github.com/rancher/k3d) - - k3d or any k3s/K8s cluster that you might have already configured. + - k3d or any k3s/K8s cluster that you might have already configured. 4. [WSL2](https://devblogs.microsoft.com/commandline/wsl-2-is-now-available-in-windows-insiders/) - - For the (few) ones who know me, my "OS base" is WSL2, which means that without much/any change, it should run fine for any Linux/MacOS setup. -5. [Grafana](https://grafana.com/) *(optional)* - - Grafana is not mandatory however is strongly recommend. We will setup a dockerized instance, but feel free to plug Meshery with your existing instance. + - For the (few) ones who know me, my "OS base" is WSL2, which means that without much/any change, it should run fine for any Linux/MacOS setup. +5. [Grafana](https://grafana.com/) _(optional)_ + - Grafana is not mandatory however is strongly recommend. We will setup a dockerized instance, but feel free to plug Meshery with your existing instance.

Nothing is taken for granted

@@ -76,8 +78,9 @@ docker version ```bash curl -L https://meshery.io/install | PLATFORM=kubernetes bash - ``` + - wsl-docker-start + wsl-docker-start - Create a new k3d cluster with the WSL2 IP @@ -91,19 +94,19 @@ kubectl cluster-info ``` - wslk3dstart + wslk3dstart -
-- Start Meshery on the newly created cluster +
- Start Meshery on the newly created cluster ```bash mesheryctl system start ``` - wslmesherystart + wslmesherystart -- Once Meshery is fully started, login in your preferred browser using the WSL2 IP instead of localhost +- Once Meshery is fully started, login in your preferred browser using the WSL2 IP instead +of localhost ```bash export BROWSER=/mnt/c/Firefox/firefox.exe @@ -111,14 +114,14 @@ $BROWSER $mainIP:9081 & ``` - wslmesherylogin + wslmesherylogin - wslmesheryloginsuccess + wslmesheryloginsuccess - #### [Optional] More analytics with Grafana + As stated above, Meshery can leverage the analytics provided by Grafana. For this blog post, as everything is built from scratch. Here is the setup for a new Grafana dockerized instance. Start a new Grafana on docker instance @@ -134,32 +137,35 @@ grafana/grafana ``` - wslgrafanastart + wslgrafanastart - Access the new instance with the admin password that you set in the docker environment variable + ```bash $BROWSER $mainIP:3000 & ``` - wslgrafanalogin + wslgrafanalogin
- wslgrafanaloginsuccess + wslgrafanaloginsuccess ### An inside look + While everything should run fine, it's always good to have a look at what has been deployed. In this case, we are almost exclusively working with Docker and the "inside look" should look something like this: - wslmesherycomplete + wslmesherycomplete #### Conclusion + As [Lee Calcote](https://twitter.com/lcalcote) put it, this is a lot of buzz words: Meshery > k3s (deployed via k3d) > Docker > WSL2 > Windows 10. And he's totally right, still the "beauty" here, is that it "simply works". Since the begin of the Docker era, new tooling has appeard for simplifying complex workflows. @@ -167,7 +173,9 @@ Even Kubernetes (K8s) as a much lighter version with k3s by Rancher. And of course, Meshery which integrates and simplifies the installation and benchmarking of different Kubernetes configurations. Hope you had fun assembling all these pieces and stay tunned for the "Bonuses", more fun to come! - > > > Nunix out - + + {' '} + > > > Nunix out + diff --git a/src/collections/blog/2019/2019-10-02-hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/index.mdx b/src/collections/blog/2019/2019-10-02-hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/index.mdx index d2e1daede8b8..946424445555 100644 --- a/src/collections/blog/2019/2019-10-02-hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/index.mdx +++ b/src/collections/blog/2019/2019-10-02-hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/index.mdx @@ -1,34 +1,33 @@ --- -title: "Hacktoberfest 2019: documenting my first-ever Hacktoberfest contribution" +title: 'Hacktoberfest 2019: documenting my first-ever Hacktoberfest contribution' date: 2019-10-02 18:19:00 +0000 author: Rafi Ungar thumbnail: ./hacktoberfest.webp darkthumbnail: ./hacktoberfest.webp category: Internship Programs tags: - - Landscape - - Community + - Landscape + - Community published: true redirect_from: - - /blog/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/ - - /blog/landscape/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/ - - /blog/landscape/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution + - /blog/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/ + - /blog/landscape/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/ + - /blog/landscape/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution --- -import { BlogWrapper } from "../../Blog.style.js"; - +import { BlogWrapper } from '../../Blog.style.js'; In [my last post](https://raungar.wordpress.com/2019/09/27/planning-for-hacktoberfest-2019/), I identified three GitHub issues to kick off my participation in Hacktoberfest 2019. Today, I am happy to showcase my resolution of one of those issues, marking my first-ever Hacktoberfest contribution! -* * * +--- #### [Layer5.io](https://github.com/layer5io/layer5) Before I continue on, I want to acknowledge the project that I have contributed to. In [an article](/programs/gsod) discussing their participating in the Google Summer of Code 2019 program, [**Layer5**](https://github.com/layer5io/layer5)'s open source community is described cloud native tools for devops engineers. My project was on [service mesh](/resources/service-mesh/service-mesh-fundamentals) helpfully defines a service mesh as "a dedicated infrastructure layer" of an application that controls how different parts of that application ("services") share data with one another (i.e. 'mesh together'). -* * * +--- ### Selecting my first Hacktoberfest issue @@ -48,7 +47,6 @@ To address this issue, I came up with the idea of realigning the category list i Implementating this idea proved quite simple, requiring only [a few added CSS rules](https://github.com/layer5io/layer5/issues/191#issuecomment-537304508), which I first accomplished by tinkering with the live webpage's styling (with the help of the [Stylish](https://addons.mozilla.org/en-US/firefox/addon/stylish/) browser extension): - ```css .card .card-content li { float: right; @@ -89,7 +87,8 @@ Although I knew that my styling worked well when loaded from a browser extension #### Ruby, Gems and Jekyll? `rvm`, `bundle` and `make`? -Picking through my ~/.bash\_history file, here is the sequence of Bash shell commands that I issued (via WSL Ubuntu) in order to execute a local copy of the layer5 website (annotated for your convenience): +Picking through my ~/.bash_history file, here is the sequence of Bash shell commands that I issued (via WSL Ubuntu) in order to execute a local copy of the layer5 website (annotated for your convenience): + ```sh ## Install dependency packages ## sudo apt-get install build-essential @@ -115,6 +114,7 @@ bundle install # install dependencies listed in Gemfile make site # references Layer5's Makefile # alias for "bundle exec jekyll serve --drafts --livereload" ``` + #### Stray thoughts on documentation Reflecting back on the process, a question has stuck with me: how much should projects hold the hands of novice contributors? Setting up the means to run `make site` is not included within Layer5's [CONTRIBUTING.md file](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md). As such, for the most novice of contributors, like myself (who have never even heard of `make` before), setting up the prerequisite development environment presented a lengthy and piecemeal (albeit ultimately valuable) learning experience. @@ -137,5 +137,4 @@ I ended [my last post](https://raungar.wordpress.com/2019/09/27/planning-for-hac Stay tuned! - diff --git a/src/collections/blog/2019/2019-10-12-hacktoberfest-2019-is-heating-up/index.mdx b/src/collections/blog/2019/2019-10-12-hacktoberfest-2019-is-heating-up/index.mdx index 486778931892..afc877e859a9 100644 --- a/src/collections/blog/2019/2019-10-12-hacktoberfest-2019-is-heating-up/index.mdx +++ b/src/collections/blog/2019/2019-10-12-hacktoberfest-2019-is-heating-up/index.mdx @@ -1,30 +1,29 @@ --- -title: "Hacktoberfest 2019: Heating up!" +title: 'Hacktoberfest 2019: Heating up!' date: 2019-10-12 21:58:00 +0000 author: Rafi Ungar thumbnail: ./hacktoberfestw2.webp darkthumbnail: ./hacktoberfestw2.webp category: Internship Programs tags: - - Community - - Landscape + - Community + - Landscape published: true redirect_from: - - /blog/hacktoberfest-2019-heating-up/ + - /blog/hacktoberfest-2019-heating-up/ --- -import { BlogWrapper } from "../../Blog.style.js"; - +import { BlogWrapper } from '../../Blog.style.js'; -(ICYMI: [I've made my first-ever Hacktoberfest contribution](https://raungar.wordpress.com/2019/10/02/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/)!)_ +(ICYMI: [I've made my first-ever Hacktoberfest contribution](https://raungar.wordpress.com/2019/10/02/hacktoberfest-2019-documenting-my-first-ever-hacktoberfest-contribution/)!)\_ [Hacktoberfest 2019](https://hacktoberfest.digitalocean.com/) is now well underway, and I am happy to report that I have made my second contribution to my new favorite open source community, [**Layer5**](https://layer5.io/) ([on GitHub](https://github.com/layer5io))! _Before I continue on, I want to extend a huge thank-you to Layer5's lead developer, Lee Calcote, as well as the Layer5 community managers for welcoming me into the Layer5 Slack channel, allowing me to introduce myself in their weekly community meeting, and even giving my blog [an awesome shout out on Twitter](https://twitter.com/layer5/status/1180317604168306688?s=12)!_ -* * * +--- This week, I helped resolve the very first issue that I outlined in my [Planning for #Hacktoberfest 2019](https://raungar.wordpress.com/2019/09/27/planning-for-hacktoberfest-2019/) post: @@ -45,7 +44,7 @@ _[Jekyll](https://jekyllrb.com/) and [Liquid](https://shopify.github.io/liquid/) _...Wait, what's a "static site generator"?_ -* * * +--- After discovering what Jekyll and Liquid actually were, I determined that I would have to resort to DOM manipulation to fully accomplish my first task. However, I did succeed in accomplishing the default sorting behaviour by enhancing the Liquid tags being used by several tables. @@ -53,14 +52,13 @@ To do so, I followed coding style on the issue's previous contributor by encapsu I chose to implement the [simplest of sorting algorithms](https://github.com/layer5io/layer5/blob/master/assets/js/table-sort.js#L13) in JavaScript (which I count as study for my _Data Structures and Algorithms_ midterm): - ```js // Excerpted from https://github.com/layer5io/layer5/blob/master/assets/js/table-sort.js let bubbleSort = () => { - for (i = 0; i < rows.length-1; i++) { - for (j = 0; j < rows.length-i-1; j++) { - if (shouldSwap(text(j), text(j+1))) { - rows[j].parentNode.insertBefore(rows[j+1], rows[j]); + for (i = 0; i < rows.length - 1; i++) { + for (j = 0; j < rows.length - i - 1; j++) { + if (shouldSwap(text(j), text(j + 1))) { + rows[j].parentNode.insertBefore(rows[j + 1], rows[j]); didSort = true; } } @@ -76,7 +74,7 @@ In [my last blog post](https://raungar.wordpress.com/2019/10/02/hacktoberfest-20 Although this asset has been [frequently modified](https://github.com/layer5io/layer5/commits/master/assets/css/materialize.css), I was still hesitant to globally alter the site's styling (in case a return to Pumpkin Bread was desired in the future), so I instead opted to [add a new inline style tag](https://github.com/layer5io/layer5/pull/209/files#diff-48443fc170100677376b7ee11324494b) to override [a styling rule](https://github.com/layer5io/layer5/blob/master/assets/css/materialize.css#L5149) (on top of removing the 'orange-text' class from individual anchor elements). -* * * +--- All of the changes I've made can be viewed through [my (merged) pull request](https://github.com/layer5io/layer5/pull/209): @@ -84,9 +82,8 @@ All of the changes I've made can be viewed through [my (merged) pull request](ht Pull request [layer5io#209](https://github.com/layer5io/layer5/pull/209): resolved the remainder of issue [layerio#65](https://github.com/layer5io/layer5/issues/65) -* * * +--- I am very fortunate to be so well-supported by the open source communities I have worked with so far, both on-campus and abroad. With their support behind me, I feel equipped to start learning what I need to know to resolve the next two more-difficult issues that lie ahead of me! - diff --git a/src/collections/blog/2019/2019-11-15-introducing-comparative-spectrums-to-the-layer5-landscape/index.mdx b/src/collections/blog/2019/2019-11-15-introducing-comparative-spectrums-to-the-layer5-landscape/index.mdx index 6dfea939c071..65bcdfd43b1b 100644 --- a/src/collections/blog/2019/2019-11-15-introducing-comparative-spectrums-to-the-layer5-landscape/index.mdx +++ b/src/collections/blog/2019/2019-11-15-introducing-comparative-spectrums-to-the-layer5-landscape/index.mdx @@ -1,33 +1,33 @@ --- -title: "Introducing Comparative Spectrums to the Layer5 Landscape" -subtitle: "" +title: 'Introducing Comparative Spectrums to the Layer5 Landscape' +subtitle: '' date: 2019-11-15 05:43:00 +0000 author: Rafi Ungar thumbnail: ./landscape_green.svg darkthumbnail: ./landscape_green.svg category: Internship Programs tags: - - Community - - Landscape + - Community + - Landscape published: true type: Blog product: Service Mesh Landscape resource: true redirect_from: - - /blog/introducing-comparative-spectrums-to-the-layer5-landscape/ - - /blog/introducing-comparative-spectrums-to-the-layer5-landscape + - /blog/introducing-comparative-spectrums-to-the-layer5-landscape/ + - /blog/introducing-comparative-spectrums-to-the-layer5-landscape --- -import { BlogWrapper } from "../../Blog.style.js"; -import pr211 from "./PR-211.webp"; -import pr2112 from "./PR-211-2.webp"; -import card1 from "./card1.webp"; -import card2 from "./card2.webp"; -import arrow from "./arrow.webp"; -import gtable from "./graphical-table.webp"; -import gcomp from "./graph-compare.webp"; -import image21 from "./image.webp"; -import comment from "./comment.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import pr211 from './PR-211.webp'; +import pr2112 from './PR-211-2.webp'; +import card1 from './card1.webp'; +import card2 from './card2.webp'; +import arrow from './arrow.webp'; +import gtable from './graphical-table.webp'; +import gcomp from './graph-compare.webp'; +import image21 from './image.webp'; +import comment from './comment.webp'; @@ -35,49 +35,53 @@ During [Hacktoberfest 2019](https://raungar.wordpress.com/tag/layer5/), I worked Shortly after making these contributions, I was graciously welcomed into the Layer5 community by its lead developer [Lee Calcote](https://twitter.com/lcalcote?lang=en), who later directly approached me to assist him in furthering his vision for the Landscape page by implementing "comparative spectrums". Wishing to focus on my remaining two Hacktoberfest contributions at the time, I suggested surveying the interest of other potential contributors for this project. As such, an informative issue was opened: -PR 211 +PR 211 Issue [layer5#211](https://github.com/layer5io/layer5/issues/211): add comparative spectrums to the Landscape page A month later, I fortunately found time enough to make some major progress into this issue. -* * * +--- This issue is quite highly conceptual, much moreso than any other issue I have thus far worked on. I decided that the best way to approach this issue would be to focus on establishing a set of tools that could be used by more-knowledgeable contributors to later construct comparative spectrums—opinionated data visualizations. As such, my first step was to build a set of responsive graphical elements that resembled [those provided as examples](https://docs.google.com/presentation/d/1P6LzzG0_alAxshpdfLnix53S9WU4vjbpSCrHJQoWPqc/edit#slide=id.p6). These include: #### (1) _Sleek information cards:_ - + - - - + + + - +
Card or this Card + Card + or this + Card +
_(Source: [ONIF Container Networking Panel, slides 5 and 6](https://docs.google.com/presentation/d/1P6LzzG0_alAxshpdfLnix53S9WU4vjbpSCrHJQoWPqc/edit#slide=id.p6))_ #### (2) _Gradiented, labelable double-arrow banners:_ -Arrow +Arrow _(Source: [ONIF Container Networking Panel, slide 5](https://docs.google.com/presentation/d/1P6LzzG0_alAxshpdfLnix53S9WU4vjbpSCrHJQoWPqc/edit#slide=id.p6))_ #### (3) _Graphically-augmented tables:_ -Table +Table _(Source: [ONIF Container Networking Panel, slide 8](https://docs.google.com/presentation/d/1P6LzzG0_alAxshpdfLnix53S9WU4vjbpSCrHJQoWPqc/edit#slide=id.p12))_ #### (4) _Spectrum-like graphical comparisons:_ -Comparison +Comparison _(Source: [ONIF Container Networking Panel, slide 7](https://docs.google.com/presentation/d/1P6LzzG0_alAxshpdfLnix53S9WU4vjbpSCrHJQoWPqc/edit#slide=id.p6))_ -* * * +--- (1) Although there may exist libraries that may help construct such graphical elements, I did not want to introduce additional libraries to accomplish my work. Instead, I wanted to make good use of Layer5io's preexisting [Materialize](https://materializecss.com/) library. Fortunately, Materialize strongly supports the design of card-like structures, allowing me to more easily [implement some](https://github.com/layer5io/layer5/pull/238/files#diff-20fc098534d6aab31ad8e5c9db51bde0R10). @@ -89,29 +93,28 @@ _(Source: [ONIF Container Networking Panel, slide 7](https://docs.google.com/pre This presented a problem to solve: I required a means to 'float' elements toward a horizontal line; to 'stack' thumbnails atop one another, without overlap, if they are given the same horizontal position. After researching quite deeply into potential solutions to this problem, I ended up stumbling across some CSS property-value pairings that I had never heard of before: [`display: grid`](https://www.w3schools.com/css/css_grid.asp) and [`grid-auto-flow: row dense`](https://www.w3schools.com/cssref/pr_grid-auto-flow.asp). Miraculously, I discovered that these could actually function as [a basis for a solution](https://github.com/layer5io/layer5/pull/238/files#diff-1d5fe92e61759723c94b009b32e9e1b7R76). -* * * +--- After styling the graphical elements, I continued the website's trend of using [Liquid](https://help.shopify.com/en/themes/liquid) tags (e.g. [`for`](https://help.shopify.com/en/themes/liquid/tags/iteration-tags#for)) and [YAML lists](https://docs.ansible.com/ansible/latest/reference_appendices/YAMLSyntax.html) to help modularize my solutions, which should aid future contributors in generalizing them. -* * * +--- I opened [a pull request](https://github.com/layer5io/layer5/pull/238) to share my work as well as invite collaboration: -PR 211-2 +PR 211-2 Pull request [layer5#238](https://github.com/layer5io/layer5/pull/238): description of tooling introduced -Image +Image Pull request [layer5#238](https://github.com/layer5io/layer5/pull/238): example images of tooling introduced The pull request was quite well-recieved: -Comment +Comment [Comment](https://github.com/layer5io/layer5/pull/238#issuecomment-554181763) by Layer5 team lead on pull request [layer5#238](https://github.com/layer5io/layer5/pull/238) As I mentioned in a recent Layer5 community meeting, I am very excited to continue working with Layer5; to refine and expand upon this set of new, visionary tooling for their landscape! - diff --git a/src/collections/blog/2019/2019-12-04-layer5-landscape-spectrums-revisited/index.mdx b/src/collections/blog/2019/2019-12-04-layer5-landscape-spectrums-revisited/index.mdx index 2c7ba7447aeb..a691421c4222 100644 --- a/src/collections/blog/2019/2019-12-04-layer5-landscape-spectrums-revisited/index.mdx +++ b/src/collections/blog/2019/2019-12-04-layer5-landscape-spectrums-revisited/index.mdx @@ -1,24 +1,24 @@ --- -title: "Layer5: Landscape Spectrums Revisited" -subtitle: "" +title: 'Layer5: Landscape Spectrums Revisited' +subtitle: '' date: 2019-12-04 18:10:00 +0000 author: Rafi Ungar thumbnail: ./landscape_green.svg darkthumbnail: ./landscape_green.svg category: Internship Programs tags: - - Community - - Landscape + - Community + - Landscape published: true type: Blog product: Service Mesh Landscape resource: true redirect_from: - - /blog/layer5-landscape-spectrums-revisited/ + - /blog/layer5-landscape-spectrums-revisited/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import issueImage from "./issue.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import issueImage from './issue.webp'; @@ -26,15 +26,15 @@ Several weeks ago, I wrote [a blog post](https://raungar.wordpress.com/2019/11/1 Up until now, the contents of each blog post I have written were centered upon a freshly-opened pull request. Shortly before writing my last post, I did open [one such pull request (layer5#238)](https://github.com/layer5io/layer5/pull/238). However, since my PR remains open, and since I am still working on the same issue my PR addresses, I have opted to instead push [a new commit](https://github.com/layer5io/layer5/pull/238/commits/4d396aaa6d3ca46add71531daedc8c0e2a5d2495) to the aformentioned (but, now, renamed) PR instead of creating a whole new one. This newest commit introduces a major step towards resolving the issue at hand, and will be the subject of this blog post! -Issue +Issue The issue at hand: [layer5#211](https://github.com/layer5io/layer5/issues/211) - add comparative spectrums to the Landscape page -* * * +--- _**Note:** this blog post will frequently reference [the update and documentation comment that I made](https://github.com/layer5io/layer5/pull/238#issuecomment-561613644) to accompany my last commit to my PR. I consider this hefty comment to be an extension of this blog post, so I strongly recommend giving it a read!_ -* * * +--- My initial commit towards introducing comparative spectrum tooling did not represent a full solution. Thinking about what might constitute a full solution for the issue at hand, I came up with three criteria: @@ -52,7 +52,7 @@ The designs I am implementing are meant to be used to present opinionated inform Because the templates I design are intended to be implemented and customized by other contributors, it is _especially_ critical that those contributors have access to complete and thorough documentation detailing the intended use of each templated design. -* * * +--- ## What I delivered: @@ -68,5 +68,4 @@ The bulk of the documentation I wrote details how to deal with the modular solut I would not have considered the documentation I delivered to be complete if I did not report on the issues still present in the work I delivered. I denoted these as 'Current issues' in the documentation, and they represent work that still remains to be done. I know that I can count on the Layer5 community to assist me with small issues like these, and, once this pull request receives some forward motion, I hope to start zeroing in on its smaller issues. Fortunately, I have made plans to continue working with open source well into the new year! - diff --git a/src/collections/blog/2020/2020-03-11-deploying-linkerd-with-meshery/index.mdx b/src/collections/blog/2020/2020-03-11-deploying-linkerd-with-meshery/index.mdx index 793b9edf0b11..37bbfaa7b99c 100644 --- a/src/collections/blog/2020/2020-03-11-deploying-linkerd-with-meshery/index.mdx +++ b/src/collections/blog/2020/2020-03-11-deploying-linkerd-with-meshery/index.mdx @@ -1,24 +1,24 @@ --- -title: "Deploying Linkerd with Meshery" -subtitle: "" +title: 'Deploying Linkerd with Meshery' +subtitle: '' date: 2020-03-11 08:15:05 +0000 author: Anton Weiss thumbnail: ./Linkerd-with-Meshery.webp darkthumbnail: ./Linkerd-with-Meshery.webp category: Meshery tags: - - Linkerd - - Meshery + - Linkerd + - Meshery published: true type: Blog mesh: Linkerd product: Meshery resource: true redirect_from: - - /blog/deploying-linkerd-with-meshery/ + - /blog/deploying-linkerd-with-meshery/ --- -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; import awsappmesh from '../../../../assets/images/service-mesh-icons/aws-app-mesh.webp'; import consul from '../../../../assets/images/service-mesh-icons/consul.svg'; import istio from '../../../../assets/images/service-mesh-icons/istio.svg'; @@ -27,7 +27,7 @@ import maesh from '../../../../assets/images/service-mesh-icons/maesh.webp'; import nsm from '../../../../assets/images/service-mesh-icons/nsm.svg'; import octarine from '../../../../assets/images/service-mesh-icons/octarine.svg'; import kuma from '../../../../assets/images/service-mesh-icons/kuma.svg'; -import {Link} from "gatsby" +import { Link } from 'gatsby'; @@ -42,7 +42,8 @@ import {Link} from "gatsby" But with so many mesh options around - how do we choose, evaluate and compare them? And once we’ve chosen a solution - how do we make it accessible to all our engineers? It is to provide an answer to these questions that the Layer5 community has created Meshery, the open-source, service mesh management plane. Meshery already supports a number of leading mesh providers with adapters for additional meshes on the way. In today’s video, I’ll show how to use Meshery for rolling out and evaluating Linkerd. - Linkerd is a system that comes from the service mesh pioneers - the company called Buoyant. They were the first to realise the need for a distributed network of smart, centrally configured proxies and coin the term “service mesh” back in 2016. Today, we’ll be looking at Linkerd 2.x - the second generation of this now CNCF project. +Linkerd is a system that comes from the service mesh pioneers - the company called Buoyant. They were the first to realise the need for a distributed network of smart, centrally configured proxies and coin the term “service mesh” back in 2016. Today, we’ll be looking at Linkerd 2.x - the second generation of this now CNCF project. +
Meshery Adapters
@@ -119,7 +120,10 @@ Some things that Linkerd is known for:
  • Zero-config option (works out-of-the-box)
  • Network telemetry built-in (includes a pre-configured, optimised Prometheus instance)
  • Low-overhead control-plane
    • -
  • Operational simplicity (when compared to Istio, for example, even though Istio is getting better in this regard)
    • +
  • + Operational simplicity (when compared to Istio, for example, even though Istio is getting better + in this regard) +
    • So what is covered in the video? More or less the following: @@ -146,7 +150,7 @@ This video is also the opening shot of Layer5's [Learn to Service Mesh](https:// And let us know if there’s any specific content you want us to create. Or maybe anything you’ve created yourself and would like to share? Layer5 is all about knowledge sharing and we want to talk to you, so please [join the cloud native community](http://slack.layer5.io)! Happy meshing! -
    +
    diff --git a/src/collections/blog/2020/2020-05-21-getting-started-with-mesheryctl/index.mdx b/src/collections/blog/2020/2020-05-21-getting-started-with-mesheryctl/index.mdx index 6c28cd5e7322..3b4bad83b96e 100644 --- a/src/collections/blog/2020/2020-05-21-getting-started-with-mesheryctl/index.mdx +++ b/src/collections/blog/2020/2020-05-21-getting-started-with-mesheryctl/index.mdx @@ -1,25 +1,24 @@ --- -title: "Getting started with mesheryctl" -subtitle: "No easier way to get started with a Cloud Native" +title: 'Getting started with mesheryctl' +subtitle: 'No easier way to get started with a Cloud Native' date: 2020-05-21 08:00:05 -0530 author: Layer5 Team thumbnail: ./mesheryctl.webp darkthumbnail: ./mesheryctl.webp category: Meshery tags: - - Meshery - - mesheryctl + - Meshery + - mesheryctl published: true type: Blog product: Meshery resource: true redirect_from: - - /blog/getting-started-with-mesheryctl/ + - /blog/getting-started-with-mesheryctl/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import { Link } from "gatsby"; - +import { BlogWrapper } from '../../Blog.style.js'; +import { Link } from 'gatsby'; @@ -31,19 +30,17 @@ Meshery's vision is to make the operating of any cloud infrastructure simplified Layer5 is a community-first, Cloud Native company which has technology partnerships with various tech giants like Microsoft, CNCF, RedHat and many more to enlist. The community consists of open source leaders like maintainers of trending open-source projects, Google SoCers, Docker Captains, Cloud Native Ambassadors and many more (join in!). - ### What is mesheryctl? Meshery provides you with a clean, robust, streamlined command-line interface to manage and benchmark your infrastructure, `mesheryctl`. With `mesheryctl`, not only you can manage your adapters & containers but you can also benchmark your mesh using the command line. `mesheryctl` provides support to a number of platforms so that we never miss out users. `mesheryctl` can be installed with a single bash command by simply executing: ```bash $ curl -L https://meshery.io/install | PLATFORM=kubernetes bash - -```` +``` in your terminal. You will see Meshery getting installed & fired up on port: 9081. You will see the output as - ``` Extracting mesheryctl-v0.3.14... Archive: /Users/user/meshery.zip @@ -70,90 +67,141 @@ and you will be able to see the Meshery UI on `https://localhost:9081`. If you are wondering if bash is only way to get `mesheryctl`, then here is the list of platforms which you can get `mesheryctl` describing all the different ways to get it. - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - +
    PlatformSupported?PlatformSupported?
    Docker✔️ + Docker + ✔️
    - Docker - Docker App✔️ + {' '} + - Docker - Docker App + ✔️
    Kubernetes✔️ + Kubernetes + ✔️
    - Kubernetes - AKS✔️ + {' '} + - Kubernetes - AKS + ✔️
    - Kubernetes - Docker Desktop✔️ + {' '} + - Kubernetes - Docker Desktop + ✔️
    - Kubernetes - EKS✔️ + {' '} + - Kubernetes - EKS + ✔️
    - Kubernetes - GKE✔️ + {' '} + - Kubernetes - GKE + ✔️
    - Kubernetes - Helm✔️ + {' '} + -{' '} + + Kubernetes - Helm + + ✔️
    - Kubernetes - Minikube✔️ + {' '} + -{' '} + Kubernetes - Minikube + ✔️
    - Kubernetes - OpenShiftIn Progress - Kubernetes - OpenShiftIn Progress
    Linux✔️ + Linux + ✔️
    Mac✔️ + Mac + ✔️
    - Mac - Homebrew✔️ + {' '} + - Mac - Homebrew + ✔️
    Windows✔️ + Windows + ✔️
    - Scoop✔️ + {' '} + - Scoop + ✔️
    - WSL2✔️ + {' '} + - WSL2 + ✔️
    Raspberry PiIn ProgressRaspberry PiIn Progress
    -
    -We believe we have not missed any of the popular platforms for what it’s worth, we will be rolling out support for RaspberryPi and OpenShift soon 🎉🎉🎉. +
    +We believe we have not missed any of the popular platforms for what it’s worth, we will be rolling +out support for RaspberryPi and OpenShift soon 🎉🎉🎉. If you are thinking about the requirements you would have to run `mesheryctl`, so to your surprise, to successfully run `mesheryctl` you will only need : -
    a running Docker daemon
    + + + + + + +
    a running Docker daemon
    ### Into the MesheryCTL @@ -182,7 +230,19 @@ Use "mesheryctl [command] --help" for more information about a command. Once you do `mesheryctl system start`, Meshery will pull its adapters and latest docker images. Meshery will also detect your Kubernetes configuration and will let you know if Kubernetes is running. Meshery will run it’s web-based user interface on localhost port `9081` and will let you select your choice of Provider before you can start managing your infrastructure with this powerful utility. -
    One of the most interesting sub-commands of mesheryctl is perf.
    + + + + + + +
    + One of the most interesting sub-commands of mesheryctl is{' '} + + perf + + . +
    The `perf` subcommand enables you to being managing the performance of your cloud native deployment and your workloads running atop of them. It lets you benchmark your infrastructure without using the Meshery UI from the command line interface itself. Once you type `mesheryctl perf`, it will present you with all the powerful flags you can control with CLI, including providing it with a `--file` flag that points to any of a number of performance test profiles that you may have saved. @@ -200,7 +260,7 @@ Available Flags for Performance Command: provider[string] (required) Choice of Provider (default: "Meshery") concurrent-requests[string] (optional) Number of parallel requests to be sent (default: "1") qps[string] (required) Queries per second (default: "0") - file[string] (optional) file containing SMPS-compatible test configuration. + file[string] (optional) file containing SMPS-compatible test configuration. help Help for perf subcommand url, duration, concurrent-requests, and qps can be considered optional flags if specified through an SMPS compatible yaml file using --file @@ -224,5 +284,4 @@ Meshery is an ever-growing community with attracting contributors from across th If this makes you excited, [join the Layer5 community](http://slack.layer5.io) with just a click & someone will be there to make sure you do not get missed. -     diff --git a/src/collections/blog/2020/2020-06-01-meshery-accepted-into-cncf-landscape/index.mdx b/src/collections/blog/2020/2020-06-01-meshery-accepted-into-cncf-landscape/index.mdx index b35122a76131..110f1ece53be 100644 --- a/src/collections/blog/2020/2020-06-01-meshery-accepted-into-cncf-landscape/index.mdx +++ b/src/collections/blog/2020/2020-06-01-meshery-accepted-into-cncf-landscape/index.mdx @@ -1,25 +1,25 @@ --- -title: "Meshery lands in the CNCF Landscape" -subtitle: "This is a story about growing together as a community and building a project that matters." +title: 'Meshery lands in the CNCF Landscape' +subtitle: 'This is a story about growing together as a community and building a project that matters.' date: 2020-06-01 10:30:05 -0530 author: Anton Weiss thumbnail: ./cncf-meshery.webp darkthumbnail: ./cncf-meshery.webp category: Announcements tags: - - Meshery - - Landscape + - Meshery + - Landscape published: true type: Blog product: Meshery resource: true redirect_from: - - /blog/meshery-lands-in-the-cncf-landscape/ + - /blog/meshery-lands-in-the-cncf-landscape/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import cncf from "./cncf-landscape-stacked-color.svg" -import cncfmeshery from "./cncf-meshery-landscape.webp" +import { BlogWrapper } from '../../Blog.style.js'; +import cncf from './cncf-landscape-stacked-color.svg'; +import cncfmeshery from './cncf-meshery-landscape.webp'; @@ -43,7 +43,9 @@ In no time, I had my first commits approved and merged and started joining weekl Now - I won't be reviewing Meshery in this post. I've spoken about it in this video and some great introductory articles by community members can be found here and here. This post is more of a celebration, because last week... -
    Meshery now featured in the CNCF Landscape!
    +
    + Meshery now featured in the CNCF Landscape! +
    cncf-meshery-landscape @@ -53,7 +55,9 @@ And this is only the first step - there's already an application filed for Meshe This is also an invitation to participate - Meshery is a young, ambitious project - it requires a ton of work to make it what it aims to become. Integrating with all of the leading service mesh solutions asks for extensive expertise. In many areas Meshery's functionality is still young. But these are normal growth stages, aren't they? To put it simple - the community and the project need more hands! And these should be your hands! -

    As already mentioned - Layer5 is a very welcoming bunch!

    +

    + As already mentioned - Layer5 is a very welcoming bunch! +

    Open source contributions are a must-do for becoming a true cloud native hero. Cloud native is all about the community and one can't be a part of a community by only taking and never giving back. So if you were looking for a promising and welcoming project to join - look no further! Hop on to Layer5 Slack and we'll happily embrace you and help you get started. @@ -63,9 +67,8 @@ For example - I sometimes wish I had more time and motivation to code new Mesher ### Join the cloud native community! -* Meshery is an exciting opportunity to learn more about service meshes. -* We're already on CNCF Landscape and are headed for the sandbox. -* Now is a great time to hop on board. Are you ready? Get into the mesh pit! - +- Meshery is an exciting opportunity to learn more about service meshes. +- We're already on CNCF Landscape and are headed for the sandbox. +- Now is a great time to hop on board. Are you ready? Get into the mesh pit!     diff --git a/src/collections/blog/2020/2020-06-23-google-summer-of-code-2020-service-mesh-performance-with-envoy-nighthawk/index.mdx b/src/collections/blog/2020/2020-06-23-google-summer-of-code-2020-service-mesh-performance-with-envoy-nighthawk/index.mdx index 7762529fa91a..9c79c1771e3f 100644 --- a/src/collections/blog/2020/2020-06-23-google-summer-of-code-2020-service-mesh-performance-with-envoy-nighthawk/index.mdx +++ b/src/collections/blog/2020/2020-06-23-google-summer-of-code-2020-service-mesh-performance-with-envoy-nighthawk/index.mdx @@ -1,56 +1,95 @@ --- -title: "Google Summer of Code 2020: Service Mesh Performance with Envoy Nighthawk" -subtitle: "One of the greatest learning experiences yet." +title: 'Google Summer of Code 2020: Service Mesh Performance with Envoy Nighthawk' +subtitle: 'One of the greatest learning experiences yet.' date: 2020-06-23 10:30:05 -0530 author: Kush Trivedi thumbnail: ./gsoc-wide.webp darkthumbnail: ./gsoc-wide.webp category: Programs tags: - - GSoC - - Programs - - Performance - - Nighthawk - - Service Mesh Performance + - GSoC + - Programs + - Performance + - Nighthawk + - Service Mesh Performance published: true redirect_from: - - /blog/google-summer-of-code-2020-service-mesh-performance-with-envoy-nighthawk/ + - /blog/google-summer-of-code-2020-service-mesh-performance-with-envoy-nighthawk/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import gsocLogo from "./gsoc.webp"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import gsocLogo from './gsoc.webp'; +import { Link } from 'gatsby';

    How did it all start?

    gsoc-image

    -I was introduced to the Layer5 community by our very own Lee Calcote, and since then I have been exploring the vast world of service meshes and their performance characteristics. Before being accepted as a Google Summer of Code intern, I had been working with the Layer5 community as an active contributor, exploring various new DevOps tooling like service meshes, the sidecar concept, and performance benchmarking of services. I have had a run-in with the Kubernetes community before and initially believed Kubernetes to be the final stage of DevOps, but I was happily surprised when I found out that the end of Kubernetes merely marked the entrypoint to a whole new world of service meshes. + I was introduced to the Layer5 community by our very own Lee Calcote, and since then I have been + exploring the vast world of service meshes and their performance characteristics. Before being + accepted as a Google Summer of Code intern, I had been working with the Layer5 community as an + active contributor, exploring various new DevOps tooling like service meshes, the sidecar concept, + and performance benchmarking of services. I have had a run-in with the Kubernetes community before + and initially believed Kubernetes to be the final stage of DevOps, but I was happily surprised + when I found out that the end of Kubernetes merely marked the entrypoint to a whole new world of + service meshes.

    -And so, we reach the beginning of my GSoC 2020 internship, which began on the night of May 3rd, 2020 when I learned that I had been selected as a GSoC Participant with the Cloud Native Computing Foundation (CNCF). Admittedly, I had tried my best an year ago to get into GSoC’19 with another organisation but due to reasons only Google can tell you, I was not accepted. Everything happens for a reason though, right? -Six months ago, if you would have told me that I would be working with service meshes, gRPC, load testing, performance benchmarking alongside prominent members of the open source world of Cloud Native, I would have ignored you with the least possible amount of prudence I could muster. + And so, we reach the beginning of my GSoC 2020 internship, which began on the night of May 3rd, + 2020 when I learned that I had been selected as a GSoC Participant with the Cloud Native Computing + Foundation (CNCF). Admittedly, I had tried my best an year ago to get into GSoC’19 with another + organisation but due to reasons only Google can tell you, I was not accepted. Everything happens + for a reason though, right? Six months ago, if you would have told me that I would be working with + service meshes, gRPC, load testing, performance benchmarking alongside prominent members of the + open source world of Cloud Native, I would have ignored you with the least possible amount of + prudence I could muster.

    What is my project about?

    -My GSoC project is to Enable Distributed Load Testing for various Service Mesh Planes using Envoy Nighthawk. For those who are not familiar with Nighthawk, it is a performance benchmark tool written and maintained by the Envoy community. We are in the process of incorporating Nighthawk into Meshery - the cloud native management plane.Meshery already supports performance testing of service meshes using fortio & wrk2 and is maintained by the Layer5 community and is also a member of CNCF Landscape. Alongside this effort, we are creating a new industry standard: Service Mesh Performance Specification which is another initiative of the Layer5 community to establish a common format for describing and capturing service mesh performance. + My GSoC project is to{' '} + + Enable Distributed Load Testing for various Service Mesh Planes using Envoy Nighthawk + + . For those who are not familiar with{' '} + Nighthawk, it is a performance benchmark + tool written and maintained by the Envoy community. We are in the process of incorporating + Nighthawk into Meshery - the cloud native management plane + .Meshery already supports performance testing of service meshes using fortio & wrk2 and is + maintained by the Layer5 community and is also a member of CNCF Landscape. Alongside this effort, + we are creating a new industry standard:{' '} + Service Mesh Performance Specification which + is another initiative of the Layer5 community to establish a common format for describing and + capturing service mesh performance.

    -It has been a month since I have started my GSoC’20 tenure with the Layer5 community, and in this month, I have learned a lot from my code contributions and mentor. I began with setting up the project roadmap and discussing the potential use cases of Nighthawk with its maintainers during my community bonding period. I came to know some incredible people during the community bonding from big tech giants like Google, Facebook, Microsoft, Affirmed Networks, Red Hat and many more to list. Before incorporating Nighthawk, we had to make various enhancements in Meshery, like adding user preferences for performance settings, specifying the SMPS format for exporting and importing of load-test preferences, load-generator interface and more. + It has been a month since I have started my GSoC’20 tenure with the Layer5 community, and in this + month, I have learned a lot from my code contributions and mentor. I began with setting up the + project roadmap and discussing the potential use cases of Nighthawk with its maintainers during my + community bonding period. I came to know some incredible people during the community bonding from + big tech giants like Google, Facebook, Microsoft, Affirmed Networks, Red Hat and many more to + list. Before incorporating Nighthawk, we had to make various enhancements in Meshery, like adding + user preferences for performance settings, specifying the SMPS format for exporting and importing + of load-test preferences, load-generator interface and more.

    -I have learned a hoard of new things, like gRPC services and how they communicate using protocol buffers, load generation using fortio, writing handlers for various endpoints using golang, and some frontend architecture with Nextjs. + I have learned a hoard of new things, like gRPC services and how they communicate using protocol + buffers, load generation using fortio, writing handlers for various endpoints using golang, and + some frontend architecture with Nextjs.

    -

    About the community

    -Layer5 has one of the healthiest open source communities that I have ever worked with. In the past, I have worked with a variety of well-maintained and large scale open source communities but I have never experienced a more welcoming and nurturing environment than Layer5. At Layer5, we respect each contributor and their contributions, whether it is a new adapter or just a typo fix. If you can contribute, please do. It’s that simple! With many awesome initiatives like SMPS, Distributed Load Testing, Performance Benchmarking, Learn Layer5, and Image Hub, the exponential increase of Layer5 and its various projects is inevitable. + Layer5 has one of the healthiest open source communities that I have ever worked with. In the + past, I have worked with a variety of well-maintained and large scale open source communities but + I have never experienced a more welcoming and nurturing environment than Layer5. At Layer5, we + respect each contributor and their contributions, whether it is a new adapter or just a typo fix. + If you can contribute, please do. It’s that simple! With many awesome initiatives like SMPS, + Distributed Load Testing, Performance Benchmarking, Learn Layer5, and Image Hub, the exponential + increase of Layer5 and its various projects is inevitable.

    - _**P.S.: If these topics excite you and you want to explore the beautiful realm of service meshes, come and say "Hi" on our [Slack Channel](http://slack.layer5.io) and one of us will reach out to you!**_     diff --git a/src/collections/blog/2020/2020-06-25-SMI-conformance-testing-with-meshery/index.mdx b/src/collections/blog/2020/2020-06-25-SMI-conformance-testing-with-meshery/index.mdx index 7ce9bd56fc1a..6a655b303f35 100644 --- a/src/collections/blog/2020/2020-06-25-SMI-conformance-testing-with-meshery/index.mdx +++ b/src/collections/blog/2020/2020-06-25-SMI-conformance-testing-with-meshery/index.mdx @@ -1,28 +1,29 @@ --- -title: "Starting SMI Conformance Testing with Meshery" -subtitle: "" +title: 'Starting SMI Conformance Testing with Meshery' +subtitle: '' date: 2020-06-25 10:30:05 -0530 author: Naveen Kumar thumbnail: ./smi-conformance.svg darkthumbnail: ./smi-conformance.svg category: Programs tags: - - Community - - Programs - - "Service Mesh Interface" + - Community + - Programs + - 'Service Mesh Interface' published: true type: Blog product: Meshery resource: true redirect_from: - - /blog/community/SMI-conformance-testing-with-meshery/ - - /blog/community/blog/smi-conformance-testing-with-meshery/ - - /blog/smi-conformance-testing-with-meshery/ + - /blog/community/SMI-conformance-testing-with-meshery/ + - /blog/community/blog/smi-conformance-testing-with-meshery/ + - /blog/smi-conformance-testing-with-meshery/ --- -import { Link } from "gatsby"; -import { BlogWrapper } from "../../Blog.style.js"; -import smilogo from "./smi-logo.webp"; -import checklist from "./checklist.svg" + +import { Link } from 'gatsby'; +import { BlogWrapper } from '../../Blog.style.js'; +import smilogo from './smi-logo.webp'; +import checklist from './checklist.svg'; @@ -51,20 +52,26 @@ Sounds fun, right? Let's dig deeper into the SMI conformance project and find ou ### Meshery'ing with Conformance Tests -checklist +checklist -Meshery is _the cloud native management plane__. It supports all the popular meshes, teaches you how to manage them, assists you in applying custom or recommended configurations, tests for compatibility, performs performance tests for meshes and a lot more. The SMI conformance testing requires performance testing capabilities, load generation (Meshery is about to support distributed load generation as well), and other functionalities such that these conformance tests can be easily used in the pipelines of all the popular service meshes. mesheryctl does have a perf command that can be used in the pipelines of service meshes. I aim at making such capabilities for SMI conformance as well. +Meshery is _the cloud native management plane__. +It supports all the popular meshes, teaches you how to manage them, assists you in applying custom +or recommended configurations, tests for compatibility, performs performance tests for meshes and a +lot more. The SMI conformance testing requires performance testing capabilities, load generation +(Meshery is about to support distributed load generation as well), and other functionalities such +that these conformance tests can be easily used in the pipelines of all the popular service meshes. +mesheryctl does have a perf command that can be used in the pipelines of service meshes. I aim at +making such capabilities for SMI conformance as well. As you have made your way halfway through the post (thank you for your patience), you should now be aware of SMI, its conformance practices and how Meshery’s incredible engineering can be utilized for conformance tests. We can now tackle the larger questions and hope to see the bigger picture. ### The Bigger Picture -Do you know that almost all of the test cases that we would write in this project would be raw YAML files? To those doing traditional unit and integration tests, we might sound unhinged at this point. We assure you that we are completely sober and serious (if you don’t count the temporary euphoria from geeky jokes). +Do you know that almost all of the test cases that we would write in this project would be raw YAML files? To those doing traditional unit and integration tests, we might sound unhinged at this point. We assure you that we are completely sober and serious (if you don’t count the temporary euphoria from geeky jokes). #### Forking [kuttl](https://kuttl.dev/) -`kuttl` is a tool for writing tests against Kubernetes operators and controllers. It can ascertain whether any kind of resources exist or not in the Kubernetes cluster, spring up a kind cluster and do other convenient things. Another plus is that It's entirely declarative. Consider a scenario in which we have a special use case where we wanted to run some go code after each individual step in the test case was executed. To accomplish this, we forked `kuttl` and modified it a little. You can see our modified version [here](https://github.com/kanishkarj/kuttl). - +`kuttl` is a tool for writing tests against Kubernetes operators and controllers. It can ascertain whether any kind of resources exist or not in the Kubernetes cluster, spring up a kind cluster and do other convenient things. Another plus is that It's entirely declarative. Consider a scenario in which we have a special use case where we wanted to run some go code after each individual step in the test case was executed. To accomplish this, we forked `kuttl` and modified it a little. You can see our modified version [here](https://github.com/kanishkarj/kuttl). We are planning to use `kuttl` for all the APIs in SMI. We are also planning to use the Meshery load generator with the modified version of `kuttl`. @@ -77,5 +84,4 @@ This is where all the test cases along with the code will be placed. Currently, If any of this sounds remotely exciting, I implore you to give this a chance. You won’t regret it. Head over to our [Slack Channel](http://slack.layer5.io) and join the #smi channel where everything related to conformance testing is discussed. We would love to hear your feedback. Stay tuned for more blogs related to SMI Conformance and all things meshy!!! - diff --git a/src/collections/blog/2020/2020-07-03-my-meshy-journey/index.mdx b/src/collections/blog/2020/2020-07-03-my-meshy-journey/index.mdx index 22608bd770af..778f500d0279 100644 --- a/src/collections/blog/2020/2020-07-03-my-meshy-journey/index.mdx +++ b/src/collections/blog/2020/2020-07-03-my-meshy-journey/index.mdx @@ -1,22 +1,22 @@ --- -title: "My Meshy Journey" -subtitle: "" +title: 'My Meshy Journey' +subtitle: '' date: 2020-07-03 12:15:05 +0000 author: Ishita Kumar thumbnail: ./ishita-kumar.webp darkthumbnail: ./ishita-kumar.webp category: Internship Programs tags: - - Community + - Community published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import IshitaProfile from "./ishita-kumar-profile.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import IshitaProfile from './ishita-kumar-profile.webp'; -Ishita Kumar Profile +Ishita Kumar Profile As a graduate student at the Indiana University Bloomington, studying for my Masters in Computer Science, little did I consider that my thesis project would lead me on this amazing journey to becoming an open source contributor. @@ -26,7 +26,7 @@ A basic Google search led me to a plethora of resources, which in turn led me to ## Why Meshery? From the beginning, Meshery proved to be an intuitive and easy-to-use application. Among other benefits, it could be implemented into my project with ease which was also a major contributing factor behind my choice of taking advantage of its features for my project thesis. -There are tons of resources online that compare different service meshes for your deployment however meshery was the only project that actually offered a practical way of comparing service meshes. In just a few easy steps, I could download and deploy Meshery into my VM instance and compare the performance of my microservice application running atop two different service meshes: Istio and Linkerd, thereby gathering various statistics on how they worked on my application. +There are tons of resources online that compare different service meshes for your deployment however meshery was the only project that actually offered a practical way of comparing service meshes. In just a few easy steps, I could download and deploy Meshery into my VM instance and compare the performance of my microservice application running atop two different service meshes: Istio and Linkerd, thereby gathering various statistics on how they worked on my application. What really got my hooked though was Meshery's intuitive UI and the amazing open platform support, which made me strive to rise above and beyond my project goals, to truly understand and value the underlying idea. @@ -44,8 +44,7 @@ While presenting my findings to my class and professor, they were able to gauge The Layer5 community has proved to be incredibly helpful in my journey. Communicating mainly through Slack channels, the community is vibrant and very welcoming. Any integration issues that arose for me were quickly and efficiently solved.
    I am thankful that my experiences as a user, as well as a contributor, has allowed me to be a valued part of this wholesome group. Layer5 has truly made me understand the significance of an open source "community" and I’ll admit - I’m hooked. The number and variety of novel projects that are pushing the envelope of emerging technology within this community is enthralling.
    -I’m here for the long-haul, so expect to hear from me again as I wrap my arms around these projects. If the suite of Layer5 projects interests you, please [join the community](http://slack.layer5.io)!
    +I’m here for the long-haul, so expect to hear from me again as I wrap my arms around these projects. If the suite of Layer5 projects interests you, please [join the community](http://slack.layer5.io)!
    Then, drop me a line as I work toward becoming a [MeshMate](https://layer5.io/community/meshmates). -     diff --git a/src/collections/blog/2020/2020-07-16-communitybridge-2020-teaching-service-meshes-to-be-compliant/index.mdx b/src/collections/blog/2020/2020-07-16-communitybridge-2020-teaching-service-meshes-to-be-compliant/index.mdx index d8f5f3aff8cb..a26f57122af8 100644 --- a/src/collections/blog/2020/2020-07-16-communitybridge-2020-teaching-service-meshes-to-be-compliant/index.mdx +++ b/src/collections/blog/2020/2020-07-16-communitybridge-2020-teaching-service-meshes-to-be-compliant/index.mdx @@ -1,29 +1,29 @@ --- -title: "CommunityBridge 2020: Teaching service meshes to be compliant" -subtitle: "" +title: 'CommunityBridge 2020: Teaching service meshes to be compliant' +subtitle: '' date: 2020-07-16 10:30:05 -0530 author: Kanishkar J thumbnail: ./communitybridge.webp darkthumbnail: ./communitybridge.webp category: Internship Programs tags: - - Programs - - "Service Mesh Interface" - - "Internship" + - Programs + - 'Service Mesh Interface' + - 'Internship' published: true redirect_from: - - /blog/programs/community/communitybridge-2020-teaching-service-meshes-to-be-compliant - - /blog/programs/communitybridge-2020-teaching-service-meshes-to-be-compliant - - /blog/community-bridge-with-layer5/ + - /blog/programs/community/communitybridge-2020-teaching-service-meshes-to-be-compliant + - /blog/programs/communitybridge-2020-teaching-service-meshes-to-be-compliant + - /blog/community-bridge-with-layer5/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import cblogo from "./cblogo.webp"; -import smiLogo from "./smi.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import cblogo from './cblogo.webp'; +import smiLogo from './smi.webp'; -community-bridge-logo +community-bridge-logo My journey into service meshes began on April 27, 2020 when I was selected to be a mentee under the banner of Community Bridge for the Summer of 2020. The Community Bridge Mentorship is a structured remote learning opportunity for aspiring open source software developers. The projects they host are mentored by experienced open source project developers and maintainers. @@ -32,7 +32,7 @@ My journey into service meshes began on April 27, 2020 when I was selected to be I began working on SMI Conformance testing under the guidance of Lee Calcote, Founder of Layer5, in February 2020. Since then, my path into the world of service meshes has brought me an avalanche of opportunities and has helped me grow by leaps and bounds as a developer. The Service Mesh Interface (SMI) is a standard interface that encapsulates various common service mesh functionalities. It explains several Custom Resource Definitions (CRDs), their configuration variables, and their corresponding effect on the service mesh underneath in full detail. What makes SMI vital is that these CRDs are generic, and the specifications are implemented and actively followed up by various service meshes. Some of these service meshes have developed adapters that define SMI CRDs as a wrapper over the APIs they already provide, instead of adhering to the SMI spec internally. SMI specifications address essential features for the most common service mesh use cases: -smi-logo +smi-logo - Traffic policy – To apply policies like identity and transport encryption across services - Traffic telemetry – To capture key metrics like error rate and latency between services @@ -40,14 +40,13 @@ The Service Mesh Interface (SMI) is a standard interface that encapsulates vario However, at the moment, no service meshes adhere to the SMI specifications completely. Service meshes are rapidly developing and making active efforts to extend their feature set. Simultaneously, SMI has also been working towards adding more features to its specifications. -Consequently, it becomes a necessity for continual validation of service mesh conformance with respect to SMI specifications and the various versions of those specifications. The process of verifying conformance needs to be standardized and tooling made available. Hence, our project efforts to create an SMI conformance tool. +Consequently, it becomes a necessity for continual validation of service mesh conformance with respect to SMI specifications and the various versions of those specifications. The process of verifying conformance needs to be standardized and tooling made available. Hence, our project efforts to create an SMI conformance tool.

    Meshery to the Rescue

    Meshery is the multi-service mesh management plane, offering lifecycle, configuration, and performance management of service meshes and their workloads. It is closely connected to the Kubernetes cluster and allows easy deployment of various service meshes and sample applications onto those meshes. Meshery enables operators to run performance tests on workloads, collect, store, and manage the test results. - -We had found our solution. By leveraging the features provided in Meshery, we would be able to focus on the conformance validation and testing instead of sweating over the complexity in deployments. We can also use the performance management infrastructure to manage the conformance tests and their results. And so, the tool will be developed as an integral part of Meshery to aid and abate SMI conformance woes. +We had found our solution. By leveraging the features provided in Meshery, we would be able to focus on the conformance validation and testing instead of sweating over the complexity in deployments. We can also use the performance management infrastructure to manage the conformance tests and their results. And so, the tool will be developed as an integral part of Meshery to aid and abate SMI conformance woes. We are now enhancing Meshery to automate the process of verifying conformance against a standard set of tests against a sample workload designed specifically for SMI conformance testing. By the time we’re through, this capability of Meshery will allow each service mesh project to validate its conformance to each version of the SMI specifications and will provide a detailed report.

    My Projects

    @@ -55,16 +54,16 @@ We are now enhancing Meshery to automate the process of verifying conformance ag The goals accomplished in my tenure at Layer5 are summarized as follows: 1. **[Meshery Providers](https://docs.meshery.io/extensibility)** - Ported Meshery and its remote provider from using session based authentication to JWT based auth. This opened doors to: - - Usage of refresh tokens for longevity of sessions instead of asking user to re-login frequently. - - CLI based authentication (not done yet, but is on the roadmap) -2. **[Image Hub](https://github.com/layer5io/image-hub)** - WASM based envoy network packet filters in Rust-lang. Built a demo app demonstrating its potentials; we also built a WASM filter which performs custom user specific rate limiting. This app was demo’ed in Dockercon 2020 under the header “Service Meshing with Docker Desktop and WebAssembly”. + - Usage of refresh tokens for longevity of sessions instead of asking user to re-login frequently. + - CLI based authentication (not done yet, but is on the roadmap) +2. **[Image Hub](https://github.com/layer5io/image-hub)** - WASM based envoy network packet filters in Rust-lang. Built a demo app demonstrating its potentials; we also built a WASM filter which performs custom user specific rate limiting. This app was demo’ed in Dockercon 2020 under the header “Service Meshing with Docker Desktop and WebAssembly”. 3. **[Implementing the Service Mesh Performance Specification](/projects/cloud-native-performance)** - Enhanced Meshery’s performance testing and profile management capabilities. Added support for customizing the requests made by the load generator, and added the capability of using performance test profiles in the tool. You can find my code in the [**Learn Layer5 repository**](https://github.com/layer5io/learn-layer5/).

    Love for the Community

    -I have been actively involved in the Layer5 community for a number of months now and am proud of the contributions I have made to various projects under the Layer5 banner. The Layer5 community represents an eclectic mix of geeky developers, out of the box thinkers, sassy writers and some of the most amazing people I have met so far in the open source community. We build projects to provide learning environments, deployment, and operational best practices, performance benchmarks, create documentation, and more. I am truly ecstatic to be a part of such an enthusiastic and welcoming community.
    +I have been actively involved in the Layer5 community for a number of months now and am proud of the contributions I have made to various projects under the Layer5 banner. The Layer5 community represents an eclectic mix of geeky developers, out of the box thinkers, sassy writers and some of the most amazing people I have met so far in the open source community. We build projects to provide learning environments, deployment, and operational best practices, performance benchmarks, create documentation, and more. I am truly ecstatic to be a part of such an enthusiastic and welcoming community.
    As you’ve made it to the end of my post, why not stick around and take a look at the amazing projects I just described? You might just find your dream project and if not, I can promise that you will at least end up becoming a part of one of the best open source communities out there.
    To stay tuned with the progress of the project, please join us in the [Slack](http://slack.layer5.io) channel! diff --git a/src/collections/blog/2020/2020-07-16-growing-as-an-open-source-contributor-with-layer5/index.mdx b/src/collections/blog/2020/2020-07-16-growing-as-an-open-source-contributor-with-layer5/index.mdx index 2af2109366bf..88fd7dec270c 100644 --- a/src/collections/blog/2020/2020-07-16-growing-as-an-open-source-contributor-with-layer5/index.mdx +++ b/src/collections/blog/2020/2020-07-16-growing-as-an-open-source-contributor-with-layer5/index.mdx @@ -1,37 +1,37 @@ --- -title: "Growing as an open source contributor with Layer5" -subtitle: "" +title: 'Growing as an open source contributor with Layer5' +subtitle: '' date: 2020-07-16 10:30:06 -0530 author: Ashis Kumar Singh thumbnail: ./the-enterprise-path-to-service-mesh-book-signed-by-lee-calcote.webp darkthumbnail: ./the-enterprise-path-to-service-mesh-book-signed-by-lee-calcote.webp category: Community tags: - - Community + - Community published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import pic1 from "./pic1.webp"; -import pic2 from "./pic2.jpeg"; -import pic3 from "./pic3.webp"; -import pic4 from "./pic4.webp"; -import pic5 from "./pic5.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import pic1 from './pic1.webp'; +import pic2 from './pic2.jpeg'; +import pic3 from './pic3.webp'; +import pic4 from './pic4.webp'; +import pic5 from './pic5.webp'; It all started 9 months ago when I stumbled across the following LinkedIn post, written by a college senior who had recently scored an internship with Redhat. -book +book This led me to a long-winding conversation with Subham Kumar Rai and Anand Kumar Singh about Layer5 and how amazing an opportunity it would be to be a part of this emerging community. I did some research on service meshes and made my way to the Layer5 Github repo. From there, it was a swift journey to the Layer5 Slack Channel where I truly understood what Subham had meant about the warm welcome. I was amazed by how helpful and willing the entire community was. Armed with the resources I needed, I delved into the projects and churned out a few PRs and I was hooked. I dove aggressively into the projects and handled any curve balls with the help of my mentors. My participation in the Layer5 community drove me to a well earned obsession with open source projects which led me to make my own contributions in the FOSSASIA and GATSBY projects and take part in many open-source contests such as Hacktoberfest, DevopsCember, Kharagpur Winter Of Code (KWOC), NJACK Winter Of Code (NWOC), Girlscript Summer Of Code (GSSOC). -github-profile +github-profile #### What is Meshery? Meshery is a multi-service mesh management plane that offers lifecycle, configuration, and performance management of service meshes and applications running on top of those meshes.
    -meshry +meshry Meshery uses a common service mesh performance specification to describe and capture performance benchmarks and results. The spec contains general information about the performance test (e.g. start/end times), service mesh and proxy build numbers, Kubernetes cluster details (nodes, type of nodes, memory information), and the actual results. One of the ideas behind Meshery is to be a vendor and project-neutral tool that can benchmark the performance of different service meshes.
    It is a one stop for all your service meshing needs. Service meshes are still a novel concept for both, developers and users. Meshery steps in to bridge this gap and allows you to have a better understanding of what a service mesh can provide by helping you judge service mesh for your personal and professional needs. Meshery accomplishes this by providing you a thorough analysis of the options available so that you can make an informed choice.
    @@ -42,11 +42,11 @@ It is a one stop for all your service meshing needs. Service meshes are still a Lee Calcote is an innovative leader and has previously made waves in the tech community as a Docker Captain and a Cloud Native Ambassador and that is just a milestone in his impressive journey, which consists of his admirable work with developer platforms, cloud technology, containers, functions, and applications. Advanced and emerging technologies have been a consistent focus through Calcote’s tenure at SolarWinds, Seagate, Cisco, and Pelco. In my tenure at Layer5, Lee has been an amazing mentor, someone you can always look towards for encouragement, inspiration and a kind word, especially when you’re melting under the heat to make that late night deadline. - #### Layer5 and UEM Jaipur Partnership Program + In an effort to foster the open source community in my college, I along with four of my batchmates (Anand, Subham, Nikhil, Gunjan) decided to start an open source partnership program, encouraged by Lee and Rupayan Das (Faculty, UEM Jaipur). This will hopefully lead to making future batches more aware about the essence of open source and encourage them to participate in communities like Layer5. -layer5 +layer5 #### Community Love diff --git a/src/collections/blog/2020/2020-07-18-service-mesh-patterns-for-multitenancy/index.mdx b/src/collections/blog/2020/2020-07-18-service-mesh-patterns-for-multitenancy/index.mdx index 3ef71b10d20e..58b5c4d6bd08 100644 --- a/src/collections/blog/2020/2020-07-18-service-mesh-patterns-for-multitenancy/index.mdx +++ b/src/collections/blog/2020/2020-07-18-service-mesh-patterns-for-multitenancy/index.mdx @@ -1,6 +1,6 @@ --- -title: "Service Mesh (Istio) patterns for Multitenancy" -subtitle: "" +title: 'Service Mesh (Istio) patterns for Multitenancy' +subtitle: '' date: 2020-07-18 10:30:05 -0530 author: Sudeep Batra thumbnail: ./image2.webp @@ -19,12 +19,12 @@ redirect_from: - /blog/service-mesh-patterns-for-multitenancy/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import listioLayer5 from "./layer5-and-istio.webp"; -import img1 from "./image1.webp"; -import img2 from "./image2.webp"; -import img3 from "./image3.webp"; -import img4 from "./image4.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import listioLayer5 from './layer5-and-istio.webp'; +import img1 from './image1.webp'; +import img2 from './image2.webp'; +import img3 from './image3.webp'; +import img4 from './image4.webp'; @@ -97,8 +97,7 @@ c. Ingress Gateway in the Worskpace 2 namespace for traffic entry point to the w kubernetes-cluster

    - Single Control Plane with Multiple Data Plane each with separate Ingress - Gateway + Single Control Plane with Multiple Data Plane each with separate Ingress Gateway

    - Creation of Control Plane CR and Data Plane CR @@ -269,10 +268,8 @@ Special thanks to the [Istio Community](https://istio.slack.com/) for helping me
    Connect with Sudeep Batra on - LinkedIn, - {" "} - GitHub - , or + LinkedIn, + GitHub, or Twitter.
    diff --git a/src/collections/blog/2020/2020-08-04-how-i-schooled-my-seniors/index.mdx b/src/collections/blog/2020/2020-08-04-how-i-schooled-my-seniors/index.mdx index df53555bb452..06ea5810a8ac 100644 --- a/src/collections/blog/2020/2020-08-04-how-i-schooled-my-seniors/index.mdx +++ b/src/collections/blog/2020/2020-08-04-how-i-schooled-my-seniors/index.mdx @@ -1,36 +1,45 @@ --- -title: "How I schooled my seniors" -subtitle: "and why I swear by the experience" +title: 'How I schooled my seniors' +subtitle: 'and why I swear by the experience' date: 2020-08-04 10:15:05 +0000 author: Nupur Thakur thumbnail: ./feature-image.svg darkthumbnail: ./feature-image.svg category: Community tags: - - Community - - MeshMate + - Community + - MeshMate published: true redirect_from: - - /blog/how-i-schooled-my-seniors/ + - /blog/how-i-schooled-my-seniors/ --- -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; I started a new job at [RemoteState](https://www.linkedin.com/company/remotestate/) as a software development engineer in May of 2020. -Post the initial plunge, settling into the role was relatively easier for me due to the experience I had gained in working on open source contributions in the Layer5 community. My experience with open source had also been a big plus for me throughout the application and interview process. As a direct result, my colleagues and seniors became genuinely inquisitive about Meshery and its functionality as the Kubernetes Manager. So when asked, I happily agreed to deliver a session on the subject to the entire team. +Post the initial plunge, settling into the role was relatively easier for me due to the experience I had gained in working on open source contributions in the Layer5 community. My experience with open source had also been a big plus for me throughout the application and interview process. As a direct result, my colleagues and seniors became genuinely inquisitive about Meshery and its functionality as the Kubernetes Manager. So when asked, I happily agreed to deliver a session on the subject to the entire team. I pitched my idea to [Lee Calcote](https://layer5.io/community/members/lee-calcote) and in his usual supportive form, he was as excited as I was about the session. A brainstorm session led to creating an entire presentation with suggestions from Lee. The Layer5 community offers a number of resources to contributors, including these two decks ([Meshery - the cloud native management plane](https://layer5.io/meshery) and [Layer5](https://docs.google.com/presentation/d/1tLcMcyQ-Z6YYISYyR0Eyb30dojQiKHIjs7Rt5m8kcag/edit?usp=sharing) that I drew from as a basis for a personalized presentation and demonstration to my new team.
    -
    + + When the day arrived to present the concepts of service meshes, Meshery, and other cloud native initiatives to my team, I held a Google Meet with a full attendance. I started the session with a reader’s digest version of microservices and service meshes to set the stage for any newcomers to the world of cloud native, I went on to elaborate on Layer5 ‘s contributions to the CNCF landscape and the SMI project. This was followed by an in-depth discussion on data planes, control planes, and management planes. I spoke at-length about Meshery’s functionality including, its features for facilitating the benchmarking, interoperability and standardization of service meshes. I wrapped up the session with some insider tips that I have learned in my months as an open source contributor in the Layer5 community. In the stream of feedback received from my colleagues, the session seems to have been a success. This whole experience has been an amazing journey for me. From being a complete noob to utilizing my expertise in the service mesh domain to landing an actual job, the experience has been a maze of ups and downs. But, I feel like I have finally arrived and arrived with a pot of gold. I’m eternally grateful to Lee Calcote for motivating me and providing me with the appropriate resources. Entering and exploring an open source community can be a daunting task and the [resources provided by Layer5](https://layer5.io/community/newcomers) helped them in overcoming that challenge and enabled them to learn more about the widespread work of [Meshery](https://meshery.io). -I’m glad to have found a community that not only feeds my professional success, but also my personal growth. It’s not out of obligation, but out of a sense of gratitude and paying it forward to others (a tenant of the Layer5 community) that I now spend much of my time as a MeshMate. I help welcome and guide other new contributors along their open source path as they learn and grow. Giving to others and while continuing to grow professionally and personally is time well spent. I encourage you to join me and others in the Layer5 community by jumping into our [Slack](https://slack.layer5.io/) to start meshing around! - +I’m glad to have found a community that not only feeds my professional success, but also my personal growth. It’s not out of obligation, but out of a sense of gratitude and paying it forward to others (a tenant of the Layer5 community) that I now spend much of my time as a MeshMate. I help welcome and guide other new contributors along their open source path as they learn and grow. Giving to others and while continuing to grow professionally and personally is time well spent. I encourage you to join me and others in the Layer5 community by jumping into our [Slack](https://slack.layer5.io/) to start meshing around!     diff --git a/src/collections/blog/2020/2020-08-07-announcing-meshery-v0.4/index.mdx b/src/collections/blog/2020/2020-08-07-announcing-meshery-v0.4/index.mdx index c511c4b9b41c..e8e1be353f21 100644 --- a/src/collections/blog/2020/2020-08-07-announcing-meshery-v0.4/index.mdx +++ b/src/collections/blog/2020/2020-08-07-announcing-meshery-v0.4/index.mdx @@ -1,25 +1,25 @@ --- -title: "Announcing Meshery v0.4.0" -subtitle: "" +title: 'Announcing Meshery v0.4.0' +subtitle: '' date: 2020-08-07 08:00:00 +0000 author: Layer5 Team thumbnail: ./meshery-v040.webp darkthumbnail: ./meshery-v040.webp category: Announcements tags: - - Meshery - - Projects + - Meshery + - Projects published: true type: Blog product: Meshery resource: true redirect_from: - - /blog/meshery/announcing-meshery-v0.4.0/ + - /blog/meshery/announcing-meshery-v0.4.0/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import operator from "./meshery-operator-dark.svg"; -import MesheryArchitecture from "./meshery-architecture.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import operator from './meshery-operator-dark.svg'; +import MesheryArchitecture from './meshery-architecture.webp'; @@ -32,8 +32,10 @@ Layer5 community members are hard at work providing our users with easy access t The v0.4.0 release of Meshery introduces a plethora of new features and bug fixes across service mesh environments spanning Meshery and it's various adapters. ### Meshery's CLI: `mesheryctl` + **New Command Structure**
    `mesheryctl` commands and subcommands have been restructured in v0.4.0 into the categories: + - Global Commands and Flags - Meshery Lifecycle Management - Performance Management @@ -52,11 +54,12 @@ Support extended to Scoop Bucket. You can now install mesheryctl on your Windows The `cleanup` is used to reset your Meshery deployment configuration back to its default settings. This command has been renamed to `reset` to more appropriately reflect its purpose. ### MeshSync
    + meshery-operator-dark -- A component of the [Meshery Operator](https://github.com/layer5io/meshery-operator), MeshSync can scan the environment to get the deployment details of specific types of service meshes and the connected Kubernetes cluster. -- MeshSync is a new component addition to Meshery. Meshery needs to be constantly updated given that service meshes and their underlying infrastructure are dynamic, constantly changing. Meshery operations should be resilient in the face of this change. -- MeshSync brings a service mesh agnostic object model that defines relationships between all objects under management. +- A component of the [Meshery Operator](https://github.com/layer5io/meshery-operator), MeshSync can scan the environment to get the deployment details of specific types of service meshes and the connected Kubernetes cluster. +- MeshSync is a new component addition to Meshery. Meshery needs to be constantly updated given that service meshes and their underlying infrastructure are dynamic, constantly changing. Meshery operations should be resilient in the face of this change. +- MeshSync brings a service mesh agnostic object model that defines relationships between all objects under management. ### Meshery Adapter for Citrix Service Mesh (beta)
    @@ -82,8 +85,24 @@ The `cleanup` is used to reset your Meshery deployment configuration back to its - ES-Lint has been added to the client side to ensure the quality of code and increase maintainaiblity of code. - Cypress has been set-up to enable end-to-end tests and integration tests for Meshery UI. -
    - +
    + +
    ### Other notable changes @@ -92,7 +111,6 @@ The `cleanup` is used to reset your Meshery deployment configuration back to its To get a more comprehensive list of the bug fixes and enhancements packaged in the v0.4.0 release, see the [Meshery Documentation](https://docs.meshery.io/project/releases) - _**P.S.: If these topics excite you and you want to explore the beautiful realm of service meshes, come and say "Hi" on our [Slack Channel](http://slack.layer5.io) and one of us will reach out to you!**_     diff --git a/src/collections/blog/2020/2020-08-11-20-learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/index.mdx b/src/collections/blog/2020/2020-08-11-20-learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/index.mdx index 4306a69a7804..f3fde9e1f33b 100644 --- a/src/collections/blog/2020/2020-08-11-20-learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/index.mdx +++ b/src/collections/blog/2020/2020-08-11-20-learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/index.mdx @@ -1,28 +1,28 @@ --- -title: "Learn How to Write WASM Filters" -subtitle: "for Envoy in Rust and Deploy with Consul" +title: 'Learn How to Write WASM Filters' +subtitle: 'for Envoy in Rust and Deploy with Consul' date: 2020-08-11 08:00:00 -0530 author: Lee Calcote thumbnail: ./layer5-white-bg.webp darkthumbnail: ./layer5-white-bg.webp category: WebAssembly tags: - - WASM - - WebAssembly - - Rust - - Envoy - - Consul + - WASM + - WebAssembly + - Rust + - Envoy + - Consul published: false redirect_from: - - /blog/webassembly/learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/ + - /blog/webassembly/learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/ --- -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; - [Image Hub](/projects/image-hub) was built under the vision that most people are not deriving the full potential of a service mesh. +[Image Hub](/projects/image-hub) was built under the vision that most people are not deriving the full potential of a service mesh. - Whether you identify as a service owner or a product owner, you stand to significantly benefit from the use of a service mesh as the infrastructure running your application. +Whether you identify as a service owner or a product owner, you stand to significantly benefit from the use of a service mesh as the infrastructure running your application. diff --git a/src/collections/blog/2020/2020-08-11-my-journey-from-a-contributor-to-a-maintainer/index.mdx b/src/collections/blog/2020/2020-08-11-my-journey-from-a-contributor-to-a-maintainer/index.mdx index ed4acc75128c..cfc5607cccd6 100644 --- a/src/collections/blog/2020/2020-08-11-my-journey-from-a-contributor-to-a-maintainer/index.mdx +++ b/src/collections/blog/2020/2020-08-11-my-journey-from-a-contributor-to-a-maintainer/index.mdx @@ -1,19 +1,19 @@ --- -title: "My journey from a contributor to a maintainer!" -subtitle: "" +title: 'My journey from a contributor to a maintainer!' +subtitle: '' date: 2020-08-11 10:55:05 -0530 author: Nikhil Ladha thumbnail: ./pic1.webp darkthumbnail: ./pic1.webp category: Community tags: - - MeshMate - - Community + - MeshMate + - Community published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import SignedBook from "./pic2.jpeg"; +import { BlogWrapper } from '../../Blog.style.js'; +import SignedBook from './pic2.jpeg'; diff --git a/src/collections/blog/2020/2020-08-20-announcing-the-meshery-adapter-for-open-service-mesh/index.mdx b/src/collections/blog/2020/2020-08-20-announcing-the-meshery-adapter-for-open-service-mesh/index.mdx index 5a635d7a8583..48a2ad95173c 100644 --- a/src/collections/blog/2020/2020-08-20-announcing-the-meshery-adapter-for-open-service-mesh/index.mdx +++ b/src/collections/blog/2020/2020-08-20-announcing-the-meshery-adapter-for-open-service-mesh/index.mdx @@ -1,26 +1,26 @@ --- -title: "Announcing the Meshery Adapter for Open Service Mesh" -subtitle: "Adding another service mesh to the landscape and another adapter to Meshery" +title: 'Announcing the Meshery Adapter for Open Service Mesh' +subtitle: 'Adding another service mesh to the landscape and another adapter to Meshery' date: 2020-08-20 10:17:05 +0000 author: Lee Calcote thumbnail: ./meshery-open-service.webp darkthumbnail: ./meshery-open-service.webp -category: "Service Mesh" +category: 'Service Mesh' tags: - - Meshery - - Service Mesh + - Meshery + - Service Mesh published: true resource: true type: Blog product: Meshery mesh: Open Service Mesh redirect_from: - - /blog/meshery/announcing-the-meshery-adapter-for-open-service-mesh/ - - /blog/open-service-mesh/announcing-the-meshery-adapter-for-open-service-mesh + - /blog/meshery/announcing-the-meshery-adapter-for-open-service-mesh/ + - /blog/open-service-mesh/announcing-the-meshery-adapter-for-open-service-mesh --- -import { BlogWrapper } from "../../Blog.style.js"; -import conformance from "./conformance-results.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import conformance from './conformance-results.webp'; @@ -29,19 +29,19 @@ Released on August 5th, 2020 by Microsoft, [Open Service Mesh](https://openservi First pronounced to be SMI compliant by [Meshery](https://meshery.io/), the cloud native management plane, the first release of OSM supports a myriad of basic
      -
    • Securing service to service links
      • -
    • Supporting traffic shifting
      • -
    • Managing observability for your services
      • -
    • Validating and Implementing access control policies
      • -
    • Auto addition of applications and services
      • +
    • Securing service to service links
      • +
    • Supporting traffic shifting
      • +
    • Managing observability for your services
      • +
    • Validating and Implementing access control policies
      • +
    • Auto addition of applications and services
    ### Get started with OSM using Meshery + In Layer5's effort to support our multi-mesh world, our Meshery project provides an effortless way for Kubernetes operators to install, maintain and run service meshes. [Meshery v0.4.3](https://github.com/layer5io/meshery/releases/tag/v0.4.3) includes the [Meshery Adapter for Open Service Mesh](https://github.com/layer5io/meshery-osm), enabling you to quickly provision OSM, run any number of sample applications, manage its performance using [Service Mesh Performance](https://smp-spec.io/) (SMP), validate OSM's compliance to SMI using a suite of conformance tests. Meshery offers configuraiton management with builtin best practice configuration analysis giving you confidence in applying custom configuration to OSM. Meshery's documenation on the [Open Service Mesh integation](https://docs.meshery.io/service-meshes/adapters/osm) provides a complete walkthrough on how to get set up, install, deploy and configure OSM according to your needs. meshery-smi-conformance-results-image Try Open Service Mesh now, by [getting started with Meshery](/cloud-native-management/meshery/getting-started). -     diff --git a/src/collections/blog/2020/2020-09-19-performance-benchmarking-using-meshery-and-nighthawk/index.mdx b/src/collections/blog/2020/2020-09-19-performance-benchmarking-using-meshery-and-nighthawk/index.mdx index 3e1d5e31e59b..d32fd32ff73c 100644 --- a/src/collections/blog/2020/2020-09-19-performance-benchmarking-using-meshery-and-nighthawk/index.mdx +++ b/src/collections/blog/2020/2020-09-19-performance-benchmarking-using-meshery-and-nighthawk/index.mdx @@ -1,26 +1,26 @@ --- -title: "Performance benchmarking using Meshery and Nighthawk" -subtitle: "" +title: 'Performance benchmarking using Meshery and Nighthawk' +subtitle: '' date: 2020-09-19 11:00:05 +0530 author: Layer5 Team thumbnail: ./mesheryctl.webp darkthumbnail: ./mesheryctl.webp category: Performance tags: - - Nighthawk - - Performance - - Service Mesh Performance - - Meshery + - Nighthawk + - Performance + - Service Mesh Performance + - Meshery published: true type: Blog product: Nighthawk resource: true redirect_from: - - /blog/performance-benchmarking-using-meshery-and-nighthawk/ + - /blog/performance-benchmarking-using-meshery-and-nighthawk/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import smpImg from "./smp.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import smpImg from './smp.webp'; @@ -33,9 +33,11 @@ There are several advantages of preliminary service benchmarking, which may exte There are several tools for performance benchmarking. A major one is the interconnected relationship between load generators and benchmarks. Some of the well-known load generators in the cloud native realm are: The conclusion can be encapsulated as following, Meshery, the cloud native management plane possesses the ability to generate load and benchmark services in/out of your service mesh using Fortio, Wrk2 and now, Nighthawk too. @@ -48,11 +50,12 @@ Nighthawk is built using open-source builds and test tool Bazel and supports out On the other hand, Meshery, written and maintainer by Layer5 Community is the multi-service mesh management plane offering lifecycle, configuration and performance management of service meshes and their workloads. With Meshery, you can both, manage your service mesh's lifecycle, and benchmark them with industry-grade tools to let you know how much under or over-utilized your services are. -smp-image +smp-image Soon, Meshery is going to be a canonical implementation for [Service Mesh Performance](https://github.com/layer5io/service-mesh-performance) which is a common and standardised format to describe : - Performance test configuration - Service mesh configuration - Environment configuration - Workload configuration - Performance test results. ### How did we achieve it ? + The following project was proposed as a Google Summer of Code Idea, I was selected as a student mentee to draft the design, architecture and code my way from scratch. On my journey, I received guidance from some amazing mentors, colleagues and open-source stake holders. I discussed the design proposal with Envoy Team as well as Layer5 Team and from suggestions from both, I was able to complete my project. In the course of the project, I came up with the idea of invoking Nighthawk as a separate container with which Meshery will communicate using a go-lang based middleware. @@ -60,6 +63,7 @@ In the course of the project, I came up with the idea of invoking Nighthawk as a To my elation, the project was a huge success and Nighthawk is now invoked as a load-generator in Meshery. Soon, the public release for the new version will be made and users will be able to utilize Nighthawk as a performance-benchamark tool alongside with Fortio and Wrk2. ### What's next? + This is just the first relay, in the long run, there are many more milestones to come. The following is a list of projects which will be completed in upcoming months: - Invoke Nighthawk as an gRPC Service and support gRPC connection between Nighthawk & Meshery. @@ -70,7 +74,7 @@ This is just the first relay, in the long run, there are many more milestones to and many more awesome and bleeding-edge ideas. ### How can I get involved? -If any of this sounds remotely exciting, I implore you to give this a chance. You won’t regret it. Head over to our [Slack Channel](http://slack.layer5.io) and join the #performance channel where everything related to performance testing is discussed. We would love to hear your feedback. Stay tuned for more blogs related to Performance Benchmarking, SMI Conformance and all things meshy!!! +If any of this sounds remotely exciting, I implore you to give this a chance. You won’t regret it. Head over to our [Slack Channel](http://slack.layer5.io) and join the #performance channel where everything related to performance testing is discussed. We would love to hear your feedback. Stay tuned for more blogs related to Performance Benchmarking, SMI Conformance and all things meshy!!! diff --git a/src/collections/blog/2020/2020-09-25-announcing-meshmates/index.mdx b/src/collections/blog/2020/2020-09-25-announcing-meshmates/index.mdx index bbe89e595a65..eb8cc1f515e0 100644 --- a/src/collections/blog/2020/2020-09-25-announcing-meshmates/index.mdx +++ b/src/collections/blog/2020/2020-09-25-announcing-meshmates/index.mdx @@ -1,137 +1,146 @@ --- -title: "Announcing a new line of MeshMates" +title: 'Announcing a new line of MeshMates' date: 2020-09-25 08:00:00 +0000 author: Our MeshMates with 🤍 thumbnail: ./meshmate-announcement.webp darkthumbnail: ./meshmate-announcement.webp category: Announcements tags: - - Community - - MeshMate + - Community + - MeshMate published: true redirect_from: - - /blog/community/announcing-meshmates/ + - /blog/community/announcing-meshmates/ --- -import { Link } from "gatsby"; +import { Link } from 'gatsby'; -import Ruth from "./meshmate-ruth-ikegah.webp"; -import Kelechi from "./meshmate-kelechi-precious.webp"; -import Tanuj from "./meshmate-tanuj-agarwal.webp"; +import Ruth from './meshmate-ruth-ikegah.webp'; +import Kelechi from './meshmate-kelechi-precious.webp'; +import Tanuj from './meshmate-tanuj-agarwal.webp'; -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; -

    Layer5 MeshMates are committed to helping community members be successful contributors. MeshMates aid in identifying areas of projects to engage within, working groups to join, and in helping community members grow in their open source and cloud native knowledge. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible.

    - -

    - - Tanuj Agarwal - -

    - tanuj-agarwal -

    - I was introduced to the Layer5 community three months back. Being fairly new - to the world of open source and looking for new communities and technology to - delve into, I hopped onto the Layer5 bandwagon and was amazed by the warm - welcome I received from the wholesome community. I had done video animation - jobs on a small scale before, which is what led me to confidently take up the - task of creating a short intro jingle for the various community meetings - hosted on the Layer5 youtube channel. After iterating for about a week, I - finally came up with something worthwhile. And to my elation, it was accepted! - It still warms my heart to see the intro flash before every meeting. -

    -

    - Next up I started work on a next generation model of the layer5.io site. Being - a new project based on Gatsby and heavily relying on React, Javascript and - GraphQL, the site project was a perfect and challenging opportunity for me to - expand on my skill set. Speed learning my way through Gatsby, with a - continuous influx of help and helpful suggestions from my MeshMate, Kush - Trivedi and others within the community, I soon mastered the platform and have - spent weeks on creating countless issues and PRs in hopes of achieving the - project goals. A few months down the line, I started reviewing PRs and began - helping others contribute, something which I had never had the opportunity to - do before! After months of continuous effort, I am proud to write that I - recently joined as a maintainer on the project and was soon approached to be a - MeshMate, which I happily accepted. My learning graph has seen a soaring - positive tangent in the months I have been at Layer5 and I’m looking forward - to an even more educative and rewarding journey ahead 😊 -

    -
    -

    - - Kelechi Precious Nwachukwu - -

    - kelechi-precious -

    - It was the middle of the COVID-19 pandemic and being unproductive wasn't - something I can stomach. Wanting to expand on my technical domain knowledge, I - stumbled across an open-source challenge for women in tech with lists of - projects to contribute to by the Women of Open Source Community Africa - (WOSCA). My eyes landed on Layer5 and I haven’t looked back since. -

    -

    - A quick look through the repositories left me quaking in my boots. To give you - some much needed context and to give some hope to all the newbies out there, I - recently transitioned to working in technical domains from accounting and - managing construction site projects. Forever getting stuck trying to get my - hands on new tech and trying to find a way into the bewildering and humongous - tech domains , I didn't even understand some of the jargon, and was too - ashamed to ask questions. Stumbling through my first contribution, I somehow - made it to the finish line and to my happiness, was soon assigned another - task. Instead of complaining, I set out to study up on the issue and took a - peek at the other assignees in the repository to ensure that I was not the - only one taking inordinate amounts of time on an issue. To my surprise, I was - not. -

    -

    - I got working on the assignment and soon encountered issues that would - previously have made me quit. Thankfully, I decided to take a different - approach this time. I shared my challenge with the Layer5 community, and was - amazed at the immediate and abundant response I received. Since then, I have - helped other contributors get through their challenges, and have received an - invitation to join the organization as a member, and then as a MeshMate 😎 I - have been wholly satisfied with the learning opportunities and the friendly - environment that the Layer5 community has to offer. I have learned that I may - not be perfect, but by making full use of the resources provided to me, having - a supportive community by my side and by being open to learning and showing - determined courage in the face of difficulties, I can achieve anything! -

    -

    - Ruth Ikegah -

    - ruth-ikegah -

    - The field of open source had always been intriguing to me. The idea of a - close-knit community working with an aim had me wanting to contribute myself. - Considering the fact that I have a small skill set (Donned the coder hat only - 6 months ago), Layer5 was a great community for me to start out with. I came - to know about the Layer5 community from the She Code Africa slack channel, - after which I visited the GitHub repository and hopped on to the Layer5 slack channel. -

    -

    - To my good luck, I received a warm welcome from the community and was able to attend a community meeting the day I joined. I made my way through the Github repos and stumbled across a beginner friendly issue. I started work but to my dismay, my PR failed to pass the DCO check at the final rung. Stuck and with low spirits, I talked to Lee (Layer5 Maintainer) and related my problems with the DCO check fail. He patiently assured me that first-time checks can be hard to get right and assigned me a MeshMate, Ashis Singh (read saviour 😳). I sent a message to Ashis and told him about the issues I was having in submitting my Pull Request. He led me through a step by step tutorial on committing and signing off my changes, after which my first PR passed all the checks. I was thrilled at this point, waiting for my PR to be merged. I soon received two emails, the first relaying that my PR had been merged and a few pull requests later, a second one with an invitation to join the Layer5 organization on Github. -

    +{' '} +

    - Impressed by the process and being passionate about helping others, I soon - began helping out with welcoming newcomers in the Layer5 Community and a happy two months later, I am elated to write that I have helped and held the hand of many-a contributors into Open-Source, offering them the same warm welcome that I had received. I was soon promoted to become a MeshMate. Apart from adding another feather to my cap, this also helped me enhance my own skill set and reach in a dozen different directions.The most intriguing fact about the Layer5 community is how welcoming it is. You can contribute something, even as a beginner, no matter how small your skillset is. I have been through the same journey and I recommend it to everyone reading. Experience an open-source community with Layer5 today! Once you’re set up on Slack, do send me a ping to - say hi. The exciting part, we might even meet as MeshMates 😉 + + Layer5 MeshMates + {' '} + are committed to helping community members be successful contributors. MeshMates aid in + identifying areas of projects to engage within, working groups to join, and in helping community + members grow in their open source and cloud native knowledge. By connecting one-on-one, + MeshMates will share tips on how to have the best community experience possible.

    +
    + +{' '} +

    + + Tanuj Agarwal + +

    +tanuj-agarwal +

    + I was introduced to the Layer5 community three months back. Being fairly new to the world of open + source and looking for new communities and technology to delve into, I hopped onto the Layer5 + bandwagon and was amazed by the warm welcome I received from the wholesome community. I had done + video animation jobs on a small scale before, which is what led me to confidently take up the task + of creating a short intro jingle for the various community meetings hosted on the Layer5 youtube + channel. After iterating for about a week, I finally came up with something worthwhile. And to my + elation, it was accepted! It still warms my heart to see the intro flash before every meeting. +

    +

    + Next up I started work on a next generation model of the layer5.io site. Being a new project based + on Gatsby and heavily relying on React, Javascript and GraphQL, the site project was a perfect and + challenging opportunity for me to expand on my skill set. Speed learning my way through Gatsby, + with a continuous influx of help and helpful suggestions from my MeshMate, Kush Trivedi and others + within the community, I soon mastered the platform and have spent weeks on creating countless + issues and PRs in hopes of achieving the project goals. A few months down the line, I started + reviewing PRs and began helping others contribute, something which I had never had the opportunity + to do before! After months of continuous effort, I am proud to write that I recently joined as a + maintainer on the project and was soon approached to be a MeshMate, which I happily accepted. My + learning graph has seen a soaring positive tangent in the months I have been at Layer5 and I’m + looking forward to an even more educative and rewarding journey ahead 😊 +

    +
    +

    + + Kelechi Precious Nwachukwu + +

    +kelechi-precious +

    + It was the middle of the COVID-19 pandemic and being unproductive wasn't something I can stomach. + Wanting to expand on my technical domain knowledge, I stumbled across an open-source challenge for + women in tech with lists of projects to contribute to by the Women of Open Source Community Africa + (WOSCA). My eyes landed on Layer5 and I haven’t looked back since. +

    +

    + A quick look through the repositories left me quaking in my boots. To give you some much needed + context and to give some hope to all the newbies out there, I recently transitioned to working in + technical domains from accounting and managing construction site projects. Forever getting stuck + trying to get my hands on new tech and trying to find a way into the bewildering and humongous + tech domains , I didn't even understand some of the jargon, and was too ashamed to ask questions. + Stumbling through my first contribution, I somehow made it to the finish line and to my happiness, + was soon assigned another task. Instead of complaining, I set out to study up on the issue and + took a peek at the other assignees in the repository to ensure that I was not the only one taking + inordinate amounts of time on an issue. To my surprise, I was not. +

    +

    + I got working on the assignment and soon encountered issues that would previously have made me + quit. Thankfully, I decided to take a different approach this time. I shared my challenge with the + Layer5 community, and was amazed at the immediate and abundant response I received. Since then, I + have helped other contributors get through their challenges, and have received an invitation to + join the organization as a member, and then as a MeshMate 😎 I have been wholly satisfied with the + learning opportunities and the friendly environment that the Layer5 community has to offer. I have + learned that I may not be perfect, but by making full use of the resources provided to me, having + a supportive community by my side and by being open to learning and showing determined courage in + the face of difficulties, I can achieve anything! +

    +

    + + {' '} + Ruth Ikegah{' '} + +

    +ruth-ikegah +

    + The field of open source had always been intriguing to me. The idea of a close-knit community + working with an aim had me wanting to contribute myself. Considering the fact that I have a small + skill set (Donned the coder hat only 6 months ago), Layer5 was a great community for me to start + out with. I came to know about the Layer5 community from the She Code Africa slack channel, after + which I visited the GitHub repository and hopped on + to the Layer5 slack channel. +

    +

    + To my good luck, I received a warm welcome from the community and was able to attend a community + meeting the day I joined. I made my way through the Github repos and stumbled across a beginner + friendly issue. I started work but to my dismay, my PR failed to pass the DCO check at the final + rung. Stuck and with low spirits, I talked to Lee (Layer5 Maintainer) and related my problems with + the DCO check fail. He patiently assured me that first-time checks can be hard to get right and + assigned me a MeshMate, Ashis Singh (read saviour 😳). I sent a message to Ashis and told him + about the issues I was having in submitting my Pull Request. He led me through a step by step + tutorial on committing and signing off my changes, after which my first PR passed all the checks. + I was thrilled at this point, waiting for my PR to be merged. I soon received two emails, the + first relaying that my PR had been merged and a few pull requests later, a second one with an + invitation to join the Layer5 organization on Github. +

    +

    + Impressed by the process and being passionate about helping others, I soon began helping out with + welcoming newcomers in the Layer5 Community and a happy two months later, I am elated to write + that I have helped and held the hand of many-a contributors into Open-Source, offering them the + same warm welcome that I had received. I was soon promoted to become a MeshMate. Apart from adding + another feather to my cap, this also helped me enhance my own skill set and reach in a dozen + different directions.The most intriguing fact about the Layer5 community is how welcoming it is. + You can contribute something, even as a beginner, no matter how small your skillset is. I have + been through the same journey and I recommend it to everyone reading. Experience an open-source + community with Layer5 today! Once you’re set up on Slack, do send me a ping to say hi. The + exciting part, we might even meet as MeshMates 😉 +

    - \- Tanuj, Ruth, and Kelechi +\- Tanuj, Ruth, and Kelechi     diff --git a/src/collections/blog/2020/2020-11-17-layer5-at-kubecon-2020/index.mdx b/src/collections/blog/2020/2020-11-17-layer5-at-kubecon-2020/index.mdx index bb4535fce805..e6bb4d7ed2ef 100644 --- a/src/collections/blog/2020/2020-11-17-layer5-at-kubecon-2020/index.mdx +++ b/src/collections/blog/2020/2020-11-17-layer5-at-kubecon-2020/index.mdx @@ -1,6 +1,6 @@ --- -title: "Layer5 at KubeCon NA" -subtitle: "Join us at KubeCon North America 2020" +title: 'Layer5 at KubeCon NA' +subtitle: 'Join us at KubeCon North America 2020' date: 2020-11-17 11:10:00 +0000 author: Lee Calcote thumbnail: ./kubecon-layer5.webp @@ -10,38 +10,35 @@ tags: - KubeCon published: true redirect_from: - - /blog/layer5-at-kubecon-na-2020/ + - /blog/layer5-at-kubecon-na-2020/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import kubecon1 from "./kubecon1.webp"; -import kubecon2 from "./kubecon2.webp"; -import kubecon3 from "./kubecon3.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import kubecon1 from './kubecon1.webp'; +import kubecon2 from './kubecon2.webp'; +import kubecon3 from './kubecon3.webp';

    - Thanks to our open source contributors, Layer5 projects are well represented - at KubeCon. Attend our talks to help you get started with managing your own - service mesh! + Thanks to our open source contributors, Layer5 projects are well represented at KubeCon. Attend + our talks to help you get started with managing your own service mesh!

    -

    - KubeCon + CloudNativeCon NA 2020 is here and Layer5 is in the spotlight! -

    +

    KubeCon + CloudNativeCon NA 2020 is here and Layer5 is in the spotlight!

    - Service Mesh Specifications and Why They Matter in your Deployment{" "} + Service Mesh Specifications and Why They Matter in your Deployment{' '}

    November 18, 2020

    As the ubiquity of service meshes unfolds so does the need for vendor and technology-agnostic -interfaces to interact with them. The following three open specifications solving -the challenge of interoperability, workload and performance management between service -meshes: Service Mesh Performance (SMP) and Service Mesh Interface (SMI), Multi-Vendor -Service Mesh Interoperation (Hamlet). Attend to learn what makes each of these specifications -unique and why they are very much needed. +interfaces to interact with them. The following three open specifications solving the challenge of +interoperability, workload and performance management between service meshes: Service Mesh +Performance (SMP) and Service Mesh Interface (SMI), Multi-Vendor Service Mesh Interoperation +(Hamlet). Attend to learn what makes each of these specifications unique and why they are very much +needed.

    @@ -51,17 +48,15 @@ unique and why they are very much needed.

    November 20, 2020

    -It’s the network! is the cry of every system administrator, every -developer. With the increased prevalence of - {" "} +It’s the network! is the cry of every system administrator, every developer. With the +increased prevalence of + {' '} -microservice-based distributed systems, it’s true - networking as a discipline -has never been more critical in the efficient operation of cloud native -deployments. Networking primitives, including load balancing, observability, -authentication, authorization, policy, rate limiting, QoS, mesh networks, legacy -infrastructure bridging, and so on are now receiving substantial development and -investment throughout the industry and are the subject of focus of the CNCF SIG -Network. +microservice-based distributed systems, it’s true - networking as a discipline has never been more +critical in the efficient operation of cloud native deployments. Networking primitives, including +load balancing, observability, authentication, authorization, policy, rate limiting, QoS, mesh +networks, legacy infrastructure bridging, and so on are now receiving substantial development and +investment throughout the industry and are the subject of focus of the CNCF SIG Network. See what the CNCF's Service Mesh Working Group has been up to. Join this talk for an intro to the SIG, its charter and a deeper discussion of current cloud native networking topics being advanced in this SIG. Current CNCF projects in-scope: Open Service Mesh, Kuma, Chaos Mesh, Ambassador, CNI, CoreDNS, Envoy, gRPC, Linkerd, NATS, Network Service Mesh. @@ -75,18 +70,16 @@ See what the CNCF's Service Mesh Working Group has been up to. Join this talk fo

    November 17, 2020

    -Join the Service Mesh Interface (SMI) and Meshery maintainers for a Meet the Maintainers -office hours. Learn all about Service Mesh Interface and how Meshery is the service -mesh manager to determine the conformance of all service meshes in or out of compliance -with the specification. +Join the Service Mesh Interface (SMI) and Meshery maintainers for a Meet the Maintainers office +hours. Learn all about Service Mesh Interface and how Meshery is the service mesh manager to +determine the conformance of all service meshes in or out of compliance with the specification.


    - We hope to see you at KubeCon + CloudNativeCon NA 2020. Be sure to say hello - in the Layer5 Community! + We hope to see you at KubeCon + CloudNativeCon NA 2020. Be sure to say hello in the{' '} + Layer5 Community!

    -     diff --git a/src/collections/blog/2020/2020-12-16-functional-testing-with-cypress-in-Meshery-ui/index.mdx b/src/collections/blog/2020/2020-12-16-functional-testing-with-cypress-in-Meshery-ui/index.mdx index e6bc64ffebd4..b5256f726f18 100644 --- a/src/collections/blog/2020/2020-12-16-functional-testing-with-cypress-in-Meshery-ui/index.mdx +++ b/src/collections/blog/2020/2020-12-16-functional-testing-with-cypress-in-Meshery-ui/index.mdx @@ -1,6 +1,6 @@ --- -title: "Functional Testing with Cypress in Meshery UI" -subtitle: "" +title: 'Functional Testing with Cypress in Meshery UI' +subtitle: '' date: 2020-12-16 11:10:00 +0000 author: Rodolfo Martinez Vega thumbnail: ./cypress-logo.webp @@ -15,13 +15,20 @@ resource: true published: true --- -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; import bestPracticesSelectingElementsImg from './best-practices-selecting-elements.webp'; import cypressTestRunnerImg from './cypress-test-runner.webp'; -Cypress is the functional test tool used in development of Meshery UI. As a reliably test tool, Cypress works with ReactJS, VueJS, AngularJS and so on; it is agnostic of the framework you use. You can write all types of tests: end-to-end, integration, and unit tests. + + Cypress + is the functional test tool used in development of Meshery UI. As a reliably test tool, Cypress +works with ReactJS, VueJS, AngularJS and so on; it is agnostic of the framework +you use. You can write all types of tests: end-to-end, integration, and + unit tests + +. Tests allow you to ensure that the new code do not break the current one. They help you to develop and integrate new features faster and ensure everything will work after including your changes. The more tests you have, the more coverage you will have (and less likelihood of issues in production). @@ -29,35 +36,42 @@ Tests allow you to ensure that the new code do not break the current one. They h Meshery has two web projects: -- provider-ui: A ReactJS app that allows you to select the Provider to be used for Meshery -- ui: Also a ReactJS app where you can do everything related with Meshery. It is the cloud native management plane. +- provider-ui: A ReactJS app that allows you to select the Provider to be used for + Meshery +- ui: Also a ReactJS app where you can do everything related with Meshery. It is the + cloud native management plane. We create UI tests for both projects using Cypress. Also, we write two types of UI tests at the moment: -- Integration: Test a specific functionality without backend communication (mocking requests and responses) -- End-to-end: Test a whole flow like setting up Linkerd Service Mesh or running a SMI Performance Test sending requests and validating the responses from the back-end + +- Integration: Test a specific functionality without backend communication (mocking requests + and responses) +- End-to-end: Test a whole flow like setting up Linkerd Service Mesh or running a SMI + Performance Test sending requests and validating the responses from the back-end ### How to write UI tests for Meshery If you are writting your first test, you can read and watch the great getting started from Cypress blog. -Then, you have to add your test below `"provider-ui/cypress/integration"` or `"ui/cypress/integration"` folders (do not forget adding _spec in the filename). +Then, you have to add your test below `"provider-ui/cypress/integration"` or `"ui/cypress/integration"` folders (do not forget adding \_spec in the filename). Here is a basic example of a test validating that Provider UI component exists: ```javascript describe('Provider UI', () => { it('renders provider component', () => { - cy - .get('[data-cy=root]') - .should('exist') - }) -}) + cy.get('[data-cy=root]').should('exist'); + }); +}); ``` Please follow the best practices recommended by Cypress. One of the most important is to use or add the `"data-cy"` attribute to the element you want to interact to: -Best Practices selecting elements with Cypress +Best Practices selecting elements with Cypress

    Best Practices Selecting Elements

    ### Run your test! @@ -102,12 +116,13 @@ just double-click on your test and a window browser will be opened and you will To improve writting better tests, I recommend that you watch: - Watch the Meshery Development Meeting (Nov 4th, 2020) where I gave a demo running UI tests on the Meshery project (slides) -- Tutorial Videos from Cypress blog. +- + Tutorial Videos + from Cypress blog. - The Brian Mann – I see your point, but… (Part 1) YouTube video where he gives pro tips writting tests in Cypress. If you have questions, do not hesitate to ask to the Meshery community on Slack :) Happy testing! -     diff --git a/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/MeetTheMaintainer.style.js b/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/MeetTheMaintainer.style.js index 3348309ad415..2a4d8710fbf4 100644 --- a/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/MeetTheMaintainer.style.js +++ b/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/MeetTheMaintainer.style.js @@ -1,42 +1,40 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const MeetTheMaintainer = styled.div` - - - div.interviewer { - margin-top: 1rem; - text-align:left; - span { - font-weight: 600; - font-style: normal; - } + div.interviewer { + margin-top: 1rem; + text-align: left; + span { + font-weight: 600; + font-style: normal; } - div.interviewee { - display: flex; - flex-direction: column; - justify-content: flex-start; - color: ${(props) => props.theme.text};; - font-style: italic; - text-align:left; - border-left: 2px solid ${props => props.theme.primaryLightColor}; - padding-left: 2rem; - span { - font-weight: 600; - font-style: normal; - } + } + div.interviewee { + display: flex; + flex-direction: column; + justify-content: flex-start; + color: ${(props) => props.theme.text}; + font-style: italic; + text-align: left; + border-left: 2px solid ${(props) => props.theme.primaryLightColor}; + padding-left: 2rem; + span { + font-weight: 600; + font-style: normal; } - div.note { - margin: 1rem; - padding: 2rem; - display: flex; - border: 1px solid ${props => props.theme.primaryLightColor}; - img { - margin-right: 3rem; - } - } - .centered-text { - padding-top: 2rem; - padding-bottom: 2rem; - font-size: 1.2rem; - font-weight: 600; + } + div.note { + margin: 1rem; + padding: 2rem; + display: flex; + border: 1px solid ${(props) => props.theme.primaryLightColor}; + img { + margin-right: 3rem; } + } + .centered-text { + padding-top: 2rem; + padding-bottom: 2rem; + font-size: 1.2rem; + font-weight: 600; + } `; diff --git a/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/index.mdx b/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/index.mdx index e5859064ad65..a525251ea118 100644 --- a/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/index.mdx +++ b/src/collections/blog/2021/2021-02-04-meet-the-maintainer-michael-gfeller/index.mdx @@ -1,92 +1,129 @@ --- -title: "Meet the Maintainer: Michael Gfeller" -subtitle: "An interview series with Layer5 Maintainers" +title: 'Meet the Maintainer: Michael Gfeller' +subtitle: 'An interview series with Layer5 Maintainers' date: 2021-02-04 10:30:05 -0530 author: Shriti Chandra -thumbnail: "./michael-gfeller-layer5-maintainer.webp" -darkthumbnail: "./michael-gfeller-layer5-maintainer.webp" -category: "Community" +thumbnail: './michael-gfeller-layer5-maintainer.webp' +darkthumbnail: './michael-gfeller-layer5-maintainer.webp' +category: 'Community' tags: - - Community + - Community published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import img from "./michael-gfeller-layer5-maintainer.webp"; -import { MeetTheMaintainer } from "./MeetTheMaintainer.style"; -import { Link } from "gatsby"; -import ForkLift from "../../../../assets/images/app/hero/forklift.svg"; -import MoireCircles from "./Line Moire.svg"; -import MoireLines from "./Circle Moire.svg"; - +import { BlogWrapper } from '../../Blog.style.js'; +import img from './michael-gfeller-layer5-maintainer.webp'; +import { MeetTheMaintainer } from './MeetTheMaintainer.style'; +import { Link } from 'gatsby'; +import ForkLift from '../../../../assets/images/app/hero/forklift.svg'; +import MoireCircles from './Line Moire.svg'; +import MoireLines from './Circle Moire.svg'; -

    Kicking off Layer5's Meet the Maintainer series, we have Michael Gfeller. Michael is an avid research enthusiast in addition to holding the title of Chief Engineer at his day job. With exhaustive interests ranging from software architecture to systems security, he has been working with cloud architecture for the past four years. -

    +
    +

    + Kicking off Layer5's Meet the Maintainer series, we have Michael Gfeller. Michael is an avid + research enthusiast in addition to holding the title of Chief Engineer at his day job. With + exhaustive interests ranging from software architecture to systems security, he has been working + with cloud architecture for the past four years. +

    +
    -Shriti:

    -Michael, thank you for joining me today. Many people inside and outside of the Layer5 Community have seen the affects of your contributions, but may not know the backstory as to who Michael is and how you arrived at your maintainer role. Indulge us. How did you come across the Layer5 community? What made you stay? -

    + Shriti: +

    + Michael, thank you for joining me today. Many people inside and outside of the Layer5 Community + have seen the affects of your contributions, but may not know the backstory as to who Michael is + and how you arrived at your maintainer role. Indulge us. How did you come across the Layer5 + community? What made you stay? +

    +
    -Michael:

    -"Hey Shriti, thank you for having me. If I remember correctly, I was looking for a professional focus area earlier this year, and landed on service meshes. I had worked with service meshes before, which piqued my initial interest. I had worked with Istio as part of my work for some time, and in the same context I stumbled across Meshery. I wasn’t able to dig deep in Meshery back then, but the concept sounded fascinating to me. Additionally, I had been benefiting from open source, both personally and professionally for a long time, but apart from a few minor contributions, I had never been able to give back to the community. I hoped to correct that." -

    -

    -"I re-discovered Meshery and the Layer5 community, listened to a recording of a community meeting, and read a couple of blog posts describing the community and member experience posts. One that stood out for me was a post by MeshMate Nikhil Ladha. Going by his words, it appeared to be a warm, diverse and active community. My suspicions were confirmed when I joined. Layer5 offers a wholesome, interactive community in addition to unbiasedly providing help and guidance around the virtual corner." -

    + Michael: +

    + "Hey Shriti, thank you for having me. If I remember correctly, I was looking for a professional + focus area earlier this year, and landed on service meshes. I had worked with service meshes + before, which piqued my initial interest. I had worked with Istio as part of my work for some + time, and in the same context I stumbled across Meshery. I wasn’t able to dig deep in Meshery + back then, but the concept sounded fascinating to me. Additionally, I had been benefiting from + open source, both personally and professionally for a long time, but apart from a few minor + contributions, I had never been able to give back to the community. I hoped to correct that." +

    +

    + "I re-discovered Meshery and the Layer5 community, listened to a recording of a community + meeting, and read a couple of blog posts describing the community and member experience posts. + One that stood out for me was a post by{' '} + MeshMate Nikhil Ladha. Going by his words, it + appeared to be a warm, diverse and active community. My suspicions were confirmed when I joined. + Layer5 offers a wholesome, interactive community in addition to unbiasedly providing help and + guidance around the virtual corner." +

    +
    Shriti:

    -Layer5 projects has a number of active, open source projects. You’ve been consistently contributing to a few of them. Which one(s) are you currently focusing on? +Layer5 projects has a number of active, open source projects. You’ve been consistently contributing to a few of them. Which one(s) are you currently focusing on? Psst. Also, which one’s your favorite? I won’t tell.

    -Michael: -

    -"I’m a technical architect and programmer, which made the backend, especially the adapters, a natural choice for me. It involves both contributing to the management plane, but also looking at and using service meshes from an architectural point of view. The possible implementations of service meshes is an area that has been particularly fascinating for me." -

    -

    -"I’d probably continue to work with the Meshery adapters for now before moving on to other areas of the project. Haha, I would probably name the Meshery Adapter Library as my favorite Layer5 project till date." -

    + Michael: +

    + "I’m a technical architect and programmer, which made the backend, especially the adapters, a + natural choice for me. It involves both contributing to the management plane, but also looking + at and using service meshes from an architectural point of view. The possible implementations of + service meshes is an area that has been particularly fascinating for me." +

    +

    + "I’d probably continue to work with the Meshery adapters for now before moving on to other areas + of the project. Haha, I would probably name the Meshery Adapter Library as my favorite Layer5 + project till date." +

    +
    -Shriti: -

    Have you worked with any other open source project? How does Layer5 compare? -

    + Shriti: +

    Have you worked with any other open source project? How does Layer5 compare?

    +
    -Michael: -

    -"I have worked and collaborated with several open source communities before, including Eclipse Modelling Framework and Apache ServiceMix . I couldn’t possibly make a very accurate comparison, given by limited interaction with other communities, but the Layer5 community stands out based on the unique and extremely inclusive approach it takes towards upholding community values." -

    + Michael: +

    + "I have worked and collaborated with several open source communities before, including Eclipse + Modelling Framework and Apache ServiceMix . I couldn’t possibly make a very accurate comparison, + given by limited interaction with other communities, but the Layer5 community stands out based + on the unique and extremely inclusive approach it takes towards upholding community values." +

    +
    -Shriti:

    -What is so fascinating about service meshes? -

    + Shriti: +

    What is so fascinating about service meshes?

    + -
    -Michael: -

    -"I find meshes intriguing in general. Meshes can look intricate, layered and complicated at a first glance, and yet they are built on the most basic principles. For me, meshes are visual structures, complete with an aesthetic and artistic dimension. " -

    -

    "Fun Fact: Overlapping meshes resulting in Moiré patterns are an example of this. They appealed to me from a young age, and I learned about their mathematics from my mathematics teacher." -

    + Michael: +

    + "I find meshes intriguing in general. Meshes can look intricate, layered and complicated at a + first glance, and yet they are built on the most basic principles. For me, meshes are visual + structures, complete with an aesthetic and artistic dimension. " +

    +

    + "Fun Fact: Overlapping meshes resulting in Moiré patterns are an example of this. They appealed + to me from a young age, and I learned about their mathematics from my mathematics teacher." +

    +
    -Shriti:

    -Fascinating. Why did you pick service meshes specifically though? -

    - + Shriti: +

    Fascinating. Why did you pick service meshes specifically though?

    +
    Michael:

    @@ -94,7 +131,10 @@ Fascinating. Why did you pick service meshes specifically though?

    -"Service meshes are complex but that is something I enjoy attempting as a challenge, to have control and overview and make it appear simple, investing into automating options. Another field that I’m excited to learn about continuously is related to the security of distributed systems, and how service meshes contribute to implementing a zero trust network architecture." + "Service meshes are complex but that is something I enjoy attempting as a challenge, to have + control and overview and make it appear simple, investing into automating options. Another field + that I’m excited to learn about continuously is related to the security of distributed systems, + and how service meshes contribute to implementing a zero trust network architecture."

    @@ -108,81 +148,153 @@ Haha. Leading on that, what should Meshery dream about next? What can we hope to

    -Michael:

    -"Meshery currently does a great job of providing a neutral platform. Continuing in that direction would be a superb base plan. Enabling innovative applications from vendors, supporting all service meshes, integrating best practice methods, and implementing the SMP and SMI abstractions would probably score the top five positions in Meshery’s new year resolutions in 2021." -

    + Michael: +

    + "Meshery currently does a great job of providing a neutral platform. Continuing in that + direction would be a superb base plan. Enabling innovative applications from vendors, supporting + all service meshes, integrating best practice methods, and implementing the SMP and SMI + abstractions would probably score the top five positions in Meshery’s new year resolutions in + 2021." +

    -Shriti:

    -Interesting. Do expand on that. What do you think Meshery could offer, in addition to what it already does? -

    + Shriti: +

    + Interesting. Do expand on that. What do you think Meshery could offer, in addition to what it + already does? +

    -Michael:

    -"At the moment, Meshery provides a management plane solution and provides support for the SMI and Service Mesh Performance (SMP) specifications. Helpful additions in the future should be the configuration based best practices, especially with regards to security and to possibly extend to owning up specific routes on security. For instance by verifying that the recommendations outlined in the NIST report “Building Secure Microservices-based Applications Using Service-Mesh Architecture” by Ramaswamy Chandramouli and Zack Butcher." -

    + Michael: +

    + "At the moment, Meshery provides a management plane solution and provides support for the SMI + and Service Mesh Performance (SMP) specifications. Helpful + additions in the future should be the configuration based best practices, especially with + regards to security and to possibly extend to owning up specific routes on security. For + instance by verifying that the recommendations outlined in the NIST report “Building Secure + Microservices-based Applications Using Service-Mesh Architecture” by Ramaswamy Chandramouli and + Zack Butcher." +

    -Shriti:

    -What are today's challenges when working with service meshes? -

    + Shriti: +

    What are today's challenges when working with service meshes?

    -Michael:

    -“I can’t claim to have worked with many implementations, and to have a good overview and wide experience. A lot of the complexity is already handled, but there is still enough to decide and implement for each solution. The solution makes for a challenging but highly interesting task. Additionally, there are a variety of different solutions from different vendors, which is excellent but it also makes it hard to know which would be the best fit for a given situation. Here, again, Meshery can be of invaluable help.” -

    + Michael: +

    + “I can’t claim to have worked with many implementations, and to have a good overview and wide + experience. A lot of the complexity is already handled, but there is still enough to decide and + implement for each solution. The solution makes for a challenging but highly interesting task. + Additionally, there are a variety of different solutions from different vendors, which is + excellent but it also makes it hard to know which would be the best fit for a given situation. + Here, again, Meshery can be of invaluable help.” +

    -Shriti:

    -That’s good to hear. What do you think we should look forward to with respect to service mesh development? -

    + Shriti: +

    + That’s good to hear. What do you think we should look forward to with respect to service mesh + development? +

    -Michael:

    -The service mesh promise holds a lot of potential, for instance for modernization and ease of use. A lot appears to be happening these times. It will be interesting to see how serverless solutions will be integrated. Enabling a seamless implementation experience for solutions embracing multi-cloud, on-prem and legacy systems is also something to look forward to. Additionally, service meshes are aimed at making your architecture more secure and stable, which makes security a big concern for any service mesh provider. Improvements along these points will be topics I’ll be watching out for over the next few years. -

    + Michael: +

    + The service mesh promise holds a lot of potential, for instance for modernization and ease of + use. A lot appears to be happening these times. It will be interesting to see how serverless + solutions will be integrated. Enabling a seamless implementation experience for solutions + embracing multi-cloud, on-prem and legacy systems is also something to look forward to. + Additionally, service meshes are aimed at making your architecture more secure and stable, which + makes security a big concern for any service mesh provider. Improvements along these points will + be topics I’ll be watching out for over the next few years. +

    -Shriti:

    - Ah while I have you here, let me get more reading recommendations lined up. Cloud Native and especially, the field of service meshes evolving exceptionally fast. Keeping up with all the developments can be challenging. Which resources do you use to stay up-to-date? -

    + Shriti: +

    + Ah while I have you here, let me get more reading recommendations lined up. Cloud Native and + especially, the field of service meshes evolving exceptionally fast. Keeping up with all the + developments can be challenging. Which resources do you use to stay up-to-date? +

    +
    -Michael:

    -Service mesh implementations consist of many components, and I try to stay up to date in general. Try to follow as much as possible conferences and vendor announcements, blog posts etc. mainly by following related Twitter accounts. Also, trying to find some time to explore various solutions. Lee’s books are of course an excellent source. Another book I can recommend is Zero Trust Networks book by Gilman and Barth. It really helped me to understand how service meshes relate to zero trust network architecture and can help to move towards it. -

    + Michael: +

    + Service mesh implementations consist of many components, and I try to stay up to date in + general. Try to follow as much as possible conferences and vendor announcements, blog posts etc. + mainly by following related Twitter accounts. Also, trying to find some time to explore various + solutions. Lee’s books are of course an excellent source. Another book I can recommend is Zero + Trust Networks book by Gilman and Barth. It really helped me to understand how service meshes + relate to zero trust network architecture and can help to move towards it. +

    +
    -Shriti:

    What does being a Meshery maintainer mean to you? How has being a maintainer impacted your full-time role? -

    + Shriti: +

    + {' '} + What does being a Meshery maintainer mean to you? How has being a maintainer impacted your + full-time role? +

    +
    -Michael:

    -“I take my role as a Meshery maintainer with its benefits and responsibilities. For one, it means to be able to give back to the community. I meet a lot of interesting and friendly people from around the globe, learning about their culture at the same time. Additionally, Open Source allows me to work on and dive into tasks as I like, making it easy to integrate the work with my existing work schedule. It also allows me to learn a lot, expanding on my understanding of service meshes, keeping up with the latest developments in the field, and also giving me the opportunity to witness first-hand how others are using them. This has a quite direct impact on my full-time role, complementing the work I do.” -

    + Michael: +

    + “I take my role as a Meshery maintainer with its benefits and responsibilities. For one, it + means to be able to give back to the community. I meet a lot of interesting and friendly people + from around the globe, learning about their culture at the same time. Additionally, Open Source + allows me to work on and dive into tasks as I like, making it easy to integrate the work with my + existing work schedule. It also allows me to learn a lot, expanding on my understanding of + service meshes, keeping up with the latest developments in the field, and also giving me the + opportunity to witness first-hand how others are using them. This has a quite direct impact on + my full-time role, complementing the work I do.” +

    +{' '}
    -Shriti:

    Do you have any advice for individuals hopeful to become Layer5 contributors or potentially maintainers? -

    + Shriti: +

    + {' '} + Do you have any advice for individuals hopeful to become Layer5 contributors or potentially + maintainers? +

    +
    -Michael:

    -"A general love for software development combined with a readiness to help out newcomers and participating in the growing community is the key. -

    -

    -Come and visit, there is something for everyone, be it frontend, backend, CI/CD, website, documentation, standards, interfacing with other communities, and more. The friendly community members and the meshmates will provide support and guidance. Browse the Layer5 and Meshery websites and the repositories on GitHub, where issues suitable for newcomers are especially tagged." -

    - + Michael: +

    + "A general love for software development combined with a readiness to help out newcomers and + participating in the growing community is the key. +

    +

    + Come and visit, there is something for everyone, be it frontend, backend, CI/CD, website, + documentation, standards, interfacing with other communities, and more. The friendly community + members and the meshmates will provide support and guidance. Browse the Layer5 and Meshery + websites and the repositories on GitHub, where issues suitable for newcomers are especially + tagged." +

    + -

    In his relatively short tenure at Layer5, Michael has already delivered a wave of meshy contributions enhancing the Meshery adapters and improving upon Meshery’s architecture. With a penchant for looking behind the curtain and tightening loose cogs until they run to perfection, Michael's impactful and consistent contributions have him taking his place as Meshery maintainer. The Meshery project moves an impressive pace thanks to maintainers like Michael. -

    +
    + +

    + In his relatively short tenure at Layer5, Michael has already delivered a wave of meshy + contributions enhancing the Meshery adapters and improving upon Meshery’s architecture. With a + penchant for looking behind the curtain and tightening loose cogs until they run to perfection, + Michael's impactful and consistent contributions have him taking his place as Meshery + maintainer. The Meshery project moves an impressive pace thanks to maintainers like Michael. +

    +

    "Be like Mike". Join the Layer5 Slack and say hi. diff --git a/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/MeshkitMesheryAdapterLib.style.js b/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/MeshkitMesheryAdapterLib.style.js index faab94d06dae..4ae389857429 100644 --- a/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/MeshkitMesheryAdapterLib.style.js +++ b/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/MeshkitMesheryAdapterLib.style.js @@ -1,36 +1,34 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const MeshkitMesheryAdapterLib = styled.div` - + div.fact { + display: flex; + flex-direction: column; + justify-content: flex-start; + color: ${(props) => props.theme.secondaryColor}; + font-style: italic; + font-size: 1.3rem; + font-weight: 600; + text-align: right; + border-right: 4px solid ${(props) => props.theme.secondaryColor}; + padding-left: 2rem; + padding-right: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + } - div.fact { - display: flex; - flex-direction: column; - justify-content: flex-start; - color: ${props => props.theme.secondaryColor}; - font-style: italic; - font-size: 1.3rem; - font-weight: 600; - text-align: right; - border-right: 4px solid ${props => props.theme.secondaryColor}; - padding-left: 2rem; - padding-right: 2rem; - padding-top: 1rem; - padding-bottom: 1rem; - } - - div.note { - margin: 1rem; - padding: 2rem; - display: flex; - border: 1px solid ${props => props.theme.primaryLightColor}; - img { - margin-right: 3rem; - } - } - .centered-text { - padding-top: 2rem; - padding-bottom: 2rem; - font-size: 1.2rem; - font-weight: 600; + div.note { + margin: 1rem; + padding: 2rem; + display: flex; + border: 1px solid ${(props) => props.theme.primaryLightColor}; + img { + margin-right: 3rem; } + } + .centered-text { + padding-top: 2rem; + padding-bottom: 2rem; + font-size: 1.2rem; + font-weight: 600; + } `; diff --git a/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx b/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx index 0e4792e186ba..6611146a6b14 100644 --- a/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx +++ b/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx @@ -1,6 +1,6 @@ --- -title: "Introducing Meshkit and the Meshery Adapter Library" -subtitle: "Making the DX of service mesh management easy." +title: 'Introducing Meshkit and the Meshery Adapter Library' +subtitle: 'Making the DX of service mesh management easy.' date: 2021-02-07 12:12:12 +0002 author: Michael Gfeller thumbnail: ./meshery-adapter-library-overview.webp @@ -16,12 +16,12 @@ resource: true published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import { MeshkitMesheryAdapterLib } from "./MeshkitMesheryAdapterLib.style"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import { MeshkitMesheryAdapterLib } from './MeshkitMesheryAdapterLib.style'; +import { Link } from 'gatsby'; -import mesheryAdapterLibrary from "./meshery-adapter-library.svg"; -import malOverview from "./meshery-adapter-library-overview.webp"; +import mesheryAdapterLibrary from './meshery-adapter-library.svg'; +import malOverview from './meshery-adapter-library-overview.webp'; @@ -47,8 +47,8 @@ This package provides a Kubernetes and a Helm client that implements functionali Another advantage MeshKit that it is not necessary to use the command line versions of these tools, providing a more tailored experience for developers, and better logging and error handling integration. -MeshKit is simple and straight -forward to use, as the following code example illustrates.{" "} +MeshKit is simple and straight forward to use, +as the following code example illustrates.{' '} ```go package main @@ -166,9 +166,8 @@ It reduces the amount of boilerplate code in the adapters substantially, making Also, it means new adapters can be implemented quickly, as only configuration and operations that differ between services meshes need to be implemented.

    - The Meshery Adapter Library provides a common and consistent set of - functionality that Meshery adapters use for managing the lifecycle of - service meshes and their workloads. + The Meshery Adapter Library provides a common and consistent set of functionality that Meshery + adapters use for managing the lifecycle of service meshes and their workloads.
    The initial commit was submitted on October 6th, 2020 based on a refactoring effort in the adapter for the Kuma service mesh. Within a few months, several adapters have been refactored or implemented from scratch based on the Meshery Adapter Library. @@ -207,11 +206,7 @@ Usually, it is sufficient that this adapter handler overrides only the `ApplyOpe The figure below illustrates this and the usage of the library in an adapter. -meshery adapter library +meshery adapter library In the `main` package of the adapter, the default configuration provider `Viper` from the library is instantiated, and reads the adapter specific configuration. This includes a specification of all available operations. As configuration providers are implementations of an interface, you can choose any of the providers from the library, or implement your own. @@ -223,8 +218,13 @@ The `service` is a struct that holds all the parameters that specify an adapter Extracting common code from adapters to the two new libraries has proven to be a worthwhile investment. It led to cleaner code as well as cleaner application architecture, shortened implementation time for new adapters considerably, and upleveled the quality of Meshery's adapters through consistency of implementation. - -

    P.S. If these topics excite you and you want to explore the beautiful realm of service meshes, come and say "Hi" on the community Slack and you are sure to be warmly welcomed. 😀

    +
    +

    + P.S. If these topics excite you and you want to explore the beautiful realm of service meshes, + come and say "Hi" on the community Slack and you are + sure to be warmly welcomed. 😀 +

    +
     diff --git a/src/collections/blog/2021/2021-04-05-meshmate-of-the-year-2020-nikhil-ladha/index.mdx b/src/collections/blog/2021/2021-04-05-meshmate-of-the-year-2020-nikhil-ladha/index.mdx index 34f490cb80bb..aba62572c274 100644 --- a/src/collections/blog/2021/2021-04-05-meshmate-of-the-year-2020-nikhil-ladha/index.mdx +++ b/src/collections/blog/2021/2021-04-05-meshmate-of-the-year-2020-nikhil-ladha/index.mdx @@ -1,6 +1,6 @@ --- -title: "MeshMate of the Year 2020: Nikhil Ladha" -subtitle: "" +title: 'MeshMate of the Year 2020: Nikhil Ladha' +subtitle: '' date: 2021-04-05 09:10:00 +0000 author: Lee Calcote thumbnail: ./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp @@ -11,14 +11,14 @@ tags: published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import MMoY2020 from "./meshmate-of-the-year-2020.webp"; -import Blockquote from "../../../../reusecore/Blockquote"; -import BlockquoteAlt from "../../../../reusecore/Blockquote/Blockquote-alt-style"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import MMoY2020 from './meshmate-of-the-year-2020.webp'; +import Blockquote from '../../../../reusecore/Blockquote'; +import BlockquoteAlt from '../../../../reusecore/Blockquote/Blockquote-alt-style'; +import { Link } from 'gatsby'; -import MeshMate from "../../../../assets/images/meshmate/meshmate-stack.svg"; -import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp"; +import MeshMate from '../../../../assets/images/meshmate/meshmate-stack.svg'; +import MMOYNikhil from './MeshMate-of-the-Year-2020-Nihkil-Ladha.webp'; @@ -26,10 +26,11 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp"; If you are in the Layer5 Community, no doubt, you've met Nikhil Ladha - . If not, I recommend that you join the community and get to know Nikhil. - He's the Layer5 MeshMate of the Year and here's why: Nikhil consistently volunteers - to uplift and support others in the community, freely sharing of his time and knowledge. - His actions embody and espouse the pay-it-forward culture of Layer5. + + . If not, I recommend that you join the community and get to know Nikhil. He's the Layer5 MeshMate + of the Year and here's why: Nikhil consistently volunteers to uplift and support others in the + community, freely sharing of his time and knowledge. His actions embody and espouse the + pay-it-forward culture of Layer5.

    MeshMate - is a distinction that Layer5 awards select members of the community who innately - align with our culture of helping others, paying it forward, and a commitment to - knowledge sharing. MeshMates are Layer5 mentors and ambassadors (not employees). + is a distinction that Layer5 awards select members of the community who innately align with our + culture of helping others, paying it forward, and a commitment to knowledge sharing. MeshMates are + Layer5 mentors and ambassadors (not employees).

    - A Layer5 MeshMate is individual who has consistently demonstrated their - commitment to helping community members. The MeshMate program pairs - experienced Layer5 community members with community newcomers to ensure a - smooth onboarding experience. Helping community members takes all forms from - ensuring the member has access to resources, is introduced to others, - understands the vision and goals of projects, can build and contribute to - projects, can use projects and have their feedback heard. MeshMates aid in - identifying areas of projects and activities within the community to engage - within, which working groups to join, and in help community members grow in - their open source and cloud native knowledge. + A Layer5 MeshMate is individual who has consistently demonstrated their commitment to helping + community members. The MeshMate program pairs experienced Layer5 community members with community + newcomers to ensure a smooth onboarding experience. Helping community members takes all forms from + ensuring the member has access to resources, is introduced to others, understands the vision and + goals of projects, can build and contribute to projects, can use projects and have their feedback + heard. MeshMates aid in identifying areas of projects and activities within the community to + engage within, which working groups to join, and in help community members grow in their open + source and cloud native knowledge.

    - There is a lot going in the Layer5 community. Projects and working groups move - fast. By connecting one-on-one, MeshMates share tips on how to have the best - community experience possible, but also build a relationship with the - community member inevitably leaving a lasting mark as is evident from member - comments about Nikhil. + There is a lot going in the Layer5 community. Projects and working groups move fast. By connecting + one-on-one, MeshMates share tips on how to have the best community experience possible, but also + build a relationship with the community member inevitably leaving a lasting mark as is evident + from member comments about Nikhil.

    It's not easy being a MeshMate

    - With thousands of members in the Layer5 community, many come and go. Many take - and many give. While we hope that each and every individual that joins will - find a fit in the community and/or on a project, this isn't always the case. + With thousands of members in the Layer5 community, many come and go. Many take and many give. + While we hope that each and every individual that joins will find a fit in the community and/or on + a project, this isn't always the case. - Engaging with and investing in community members can be taxing on mentors in - terms of both their time and their emotional investment in seeing the newcomer - plant roots, grow, and blossom. + Engaging with and investing in community members can be taxing on mentors in terms of both their + time and their emotional investment in seeing the newcomer plant roots, grow, and blossom.

    - One of the goals MeshMates have is that of enabling the newcomer's passion and - finding their sweetspot in the community and on a project, so that the - newcomer ultimately achieves their goals - goals that are often similar, but - different for each person. To help them acheive their goals, each individual - is engaged 1:1 by their Meshmate, supporting them in becoming a landstanding - Layer5 community member and contributor. MeshMates understand that many - mentees start out with the best of intentions, but that not all overcome their - hurdles in finding an area of the community to call home or aspect of a - project to own. + One of the goals MeshMates have is that of enabling the newcomer's passion and finding their + sweetspot in the community and on a project, so that the newcomer ultimately achieves their goals + - goals that are often similar, but different for each person. To help them acheive their goals, + each individual is engaged 1:1 by their Meshmate, supporting them in becoming a landstanding + Layer5 community member and contributor. MeshMates understand that many mentees start out with the + best of intentions, but that not all overcome their hurdles in finding an area of the community to + call home or aspect of a project to own.

    MeshMates are a massive force

    - In just a year's time, with thousands of people in the Layer5 community and - 500+ contributors to our projects, it's clear that Layer5 MeshMates - significantly uplift our collaborative efforts and are steady force in the - community. In process of confirming Nikhil as the winner of the inaugural - MeshMate of the Year award, we looked to the community for validation. Little - did I realize that meant reaching out to nearly a hundred people whom Nikhil - has mentored or supported in the Layer5 community. More than a few of them had - something to say about their time with Nikhil: + In just a year's time, with thousands of people in the Layer5 community and 500+ contributors to + our projects, it's clear that Layer5 MeshMates significantly uplift our collaborative efforts and + are steady force in the community. In process of confirming Nikhil as the winner of the inaugural + MeshMate of the Year award, we looked to the community for validation. Little did I realize that + meant reaching out to nearly a hundred people whom Nikhil has mentored or supported in the Layer5 + community. More than a few of them had something to say about their time with Nikhil:

    @@ -178,12 +171,11 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp"; alt="MeshMate of the Year 2020: Nikhil Ladha" />

    - In recognition a year's worth of paying it forward, and for the inaugural - award, a new badge identifies our MeshMate of the Year award winner. Only one - person carries this badge today. I can only guess as to who this ribbon may be - awarded to for 2021. In the year and a half that Nikhil has been in the - community, he has touched the lives of many people, including mine. Nikhil is - my friend. He is the Layer5 MeshMate of the Year. + In recognition a year's worth of paying it forward, and for the inaugural award, a new badge + identifies our MeshMate of the Year award winner. Only one person carries this badge today. I can + only guess as to who this ribbon may be awarded to for 2021. In the year and a half that Nikhil + has been in the community, he has touched the lives of many people, including mine. Nikhil is my + friend. He is the Layer5 MeshMate of the Year.

    @@ -191,13 +183,10 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp";

    - The MeshMate badge is a point of pride for individuals participating in the - program and looked upon with admiration and veneration by many within and - external to the Layer5 community. + The MeshMate badge is a point of pride for individuals participating in the program and looked + upon with admiration and veneration by many within and external to the Layer5 community.

    -

    - Wear your MeshMate of the Year badge proudly, Nikhil. -

    +

    Wear your MeshMate of the Year badge proudly, Nikhil.

    diff --git a/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/MeetTheMaintainer.style.js b/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/MeetTheMaintainer.style.js index ab46b4b32119..60833d6f840c 100644 --- a/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/MeetTheMaintainer.style.js +++ b/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/MeetTheMaintainer.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const MeetTheMaintainer = styled.div` div.intro { word-spacing: 0.5rem; diff --git a/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/index.mdx b/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/index.mdx index d6765eb5ecf1..625673d93669 100644 --- a/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/index.mdx +++ b/src/collections/blog/2021/2021-04-16-meet-the-maintainer-jash-patel/index.mdx @@ -1,224 +1,204 @@ --- -title: "Meet the Maintainer: Jash Patel" -subtitle: "An interview series with Layer5 Maintainers" +title: 'Meet the Maintainer: Jash Patel' +subtitle: 'An interview series with Layer5 Maintainers' date: 2021-04-16 10:30:05 -0530 author: Ruth Ikegah -thumbnail: "./jash-patel-layer5-maintainer.webp" -darkthumbnail: "./jash-patel-layer5-maintainer.webp" +thumbnail: './jash-patel-layer5-maintainer.webp' +darkthumbnail: './jash-patel-layer5-maintainer.webp' category: Community tags: - - Community + - Community published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import img from "./jash-patel-layer5-maintainer.webp"; -import { MeetTheMaintainer } from "./MeetTheMaintainer.style"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import img from './jash-patel-layer5-maintainer.webp'; +import { MeetTheMaintainer } from './MeetTheMaintainer.style'; +import { Link } from 'gatsby';

    - Next on Layer5 Meet the Maintainer’s series, we have Jash Patel. Jash is a - Computer Science undergraduate at the Indian Institute of Technology and a - maintainer for the Layer5 website - - - {" "} - Service Mesh Performance - {" "} - and - Service Mesh Landscape. He works with - React, Gatsby, Jekyll, and Discourse and loves contributing to Open Source. + Next on Layer5 Meet the Maintainer’s series, we have Jash Patel. Jash is a Computer Science + undergraduate at the Indian Institute of Technology and a maintainer for the Layer5 website - + Service Mesh Performance and + Service Mesh Landscape. He works with React, Gatsby, + Jekyll, and Discourse and loves contributing to Open Source.

    Ruth:

    - Jash, thank you for joining me today. Many people inside and outside of the - Layer5 Community have seen the effects of your contributions but may not - know the backstory as to who Jash is and how you arrived at your maintainer - role. Indulge us. How did you come across the Layer5 community? What made - you stay? + Jash, thank you for joining me today. Many people inside and outside of the Layer5 Community + have seen the effects of your contributions but may not know the backstory as to who Jash is and + how you arrived at your maintainer role. Indulge us. How did you come across the Layer5 + community? What made you stay?

    Jash:

    - Back in August 2020, I was looking for an open-source organization. I found - my friend - Tanuj was part of Layer5, - and I thought of joining it. I jumped onto my first community call, and Whoo! - It was so smooth. I was delighted to see the overwhelming response of the community. - I loved the way the community encouraged every newcomer to their first contribution. - After that, I never looked back. I still remember my first community meeting - in which I introduced myself, highlighting my interests in React. The response - was Lee giving an overly positive reaction. + Back in August 2020, I was looking for an open-source organization. I found my friend + Tanuj was part of Layer5, and I thought of + joining it. I jumped onto my first community call, and Whoo! It was so smooth. I was delighted + to see the overwhelming response of the community. I loved the way the community encouraged + every newcomer to their first contribution. After that, I never looked back. I still remember my + first community meeting in which I introduced myself, highlighting my interests in React. The + response was Lee giving an overly positive + reaction.

    Ruth:

    - I can totally relate to how amazing the Layer5 onboarding process is unique! - Layer5 Projects has many active, open-source projects. You’ve been - consistently contributing to a few of them. Which one(s) are you currently - focusing on? Psst. Also, which one’s your favorite? I won’t tell. + I can totally relate to how amazing the Layer5 onboarding process is unique! Layer5 Projects has + many active, open-source projects. You’ve been consistently contributing to a few of them. Which + one(s) are you currently focusing on? Psst. Also, which one’s your favorite? I won’t tell.

    Jash:

    - I started contributing to docs and soon dived into Layer5 websites. While I - have worked on almost all websites, t (a little in some). The next - generation Layer5 website (built on Gatsby) was the site I worked on the - longest. We recently launched this new site (it takes a lot to launch a - website). Currently, I am working on enhancements to the website and on - Layer5’s upcoming discussion forum. I think, after this, you would already - know my favorite one. + I started contributing to docs and soon dived into Layer5 websites. While I have worked on + almost all websites, t (a little in some). The next generation Layer5 website (built on Gatsby) + was the site I worked on the longest. We recently launched this new site (it takes a lot to + launch a website). Currently, I am working on enhancements to the website and on Layer5’s + upcoming discussion forum. I think, after this, you would already know my favorite one.

    Ruth:

    - Definitely, winks! Have you worked with any other open source project? How - does Layer5 compare? + Definitely, winks! Have you worked with any other open source project? How does Layer5 compare?

    Jash:

    - I am a part of my college’s open-source organization. I have contributed to - and also have mentored a few open-source projects there. Open source is - always fun - it doesn't matter where you do it. The difference I found here - was the vast and diverse community that was missing there. Also, exposure to - different technologies was advantageous for me. + I am a part of my college’s open-source organization. I have contributed to and also have + mentored a few open-source projects there. Open source is always fun - it doesn't matter where + you do it. The difference I found here was the vast and diverse community that was missing + there. Also, exposure to different technologies was advantageous for me.

    Ruth:

    - You know for me, coming to The Next Generation Layer5 Website was done in - the space of 6 months which is really impressive. How was the team able to - pull that off? + You know for me, coming to The Next Generation Layer5 Website was done in the space of 6 months + which is really impressive. How was the team able to pull that off?

    Jash:

    - It was a pretty big task. Many people have worked on it(At the time of - launch we had 140 contributors). It started with Tanuj and me, and then got - many hands to help us and strive towards its completion. I can’t write all - those names, or else it would take an entire page to note them down. And - this is what communities are meant for; open source is intended for. It was - a combined effort, and we worked on almost everything. The team worked on - Gatsby, GraphQL, SEO, Analytics, and anything related to the website. The - two mentors Lee and - Nikhil , - were quite helpful for the team to bring it through 6 months. + It was a pretty big task. Many people have worked on it(At the time of launch we had 140 + contributors). It started with Tanuj and me, and then got many hands to help us and strive + towards its completion. I can’t write all those names, or else it would take an entire page to + note them down. And this is what communities are meant for; open source is intended for. It was + a combined effort, and we worked on almost everything. The team worked on Gatsby, GraphQL, SEO, + Analytics, and anything related to the website. The two mentors{' '} + Lee and + Nikhil , were quite helpful for the team to + bring it through 6 months.

    Ruth:

    - It’s amazing you are in school and still actively contribute to Layer5, how - are you able to multitask it? + It’s amazing you are in school and still actively contribute to Layer5, how are you able to + multitask it?

    Jash:

    - I once mentioned that while my exams were going on, I would study the entire - day, and when I took breaks, I would just open up Github and work on some - minor issues. If you are interested in it, you will find a way, I would say. - This is what helped me. One of the advantages of being in such a diverse - environment is that when you are stuck somewhere, the work doesn't stop, - some other contributor picks it up, and it goes on. + I once mentioned that while my exams were going on, I would study the entire day, and when I + took breaks, I would just open up Github and work on some minor issues. If you are interested in + it, you will find a way, I would say. This is what helped me. One of the advantages of being in + such a diverse environment is that when you are stuck somewhere, the work doesn't stop, some + other contributor picks it up, and it goes on.

    Ruth:

    - I’m really curious, what does being a Layer5 maintainer mean to you? How has - being a maintainer impacted you? + I’m really curious, what does being a Layer5 maintainer mean to you? How has being a maintainer + impacted you?

    Jash:

    - I still remember my first pull request being reviewed. And now I am on the - other side, reviewing requests. Being a maintainer was a rollercoaster of an - experience to me. You don’t just review PRs and point out changes, but you - also have to think of fixes for them. The evolution of green to purple is - the joy every open-source contributor wishes to see. And me being the one - doing it makes me feel good. Being a maintainer adds responsibility on the - one hand and gives freedom on the other hand. + I still remember my first pull request being reviewed. And now I am on the other side, reviewing + requests. Being a maintainer was a rollercoaster of an experience to me. You don’t just review + PRs and point out changes, but you also have to think of fixes for them. The evolution of green + to purple is the joy every open-source contributor wishes to see. And me being the one doing it + makes me feel good. Being a maintainer adds responsibility on the one hand and gives freedom on + the other hand.

    Ruth:

    - I really picked a lot of points on that! Do you have any advice for - individuals hoping to become Layer5 contributors or potentially maintainers? + I really picked a lot of points on that! Do you have any advice for individuals hoping to become + Layer5 contributors or potentially maintainers?

    Jash:

    - My advice would be to not look for becoming something. I never thought of - becoming a maintainer. You just enjoy whatever you are doing, and when the - time comes, you will get it. Being a maintainer is always special, but - what's more critical is contributing healthily. A maintainer was always a - contributor first, and it is that experience that sails them through. I have - already recommended many of my friends and would like to share it with you; - if you want to learn open source, Layer5 is the place. We, as a community, - are always excited to have more people on board and learning something new - from here. I would love to share the stage with you shortly. + My advice would be to not look for becoming something. I never thought of becoming a maintainer. + You just enjoy whatever you are doing, and when the time comes, you will get it. Being a + maintainer is always special, but what's more critical is contributing healthily. A maintainer + was always a contributor first, and it is that experience that sails them through. I have + already recommended many of my friends and would like to share it with you; if you want to learn + open source, Layer5 is the place. We, as a community, are always excited to have more people on + board and learning something new from here. I would love to share the stage with you shortly.

    Ruth:

    - That was some great advice there and tips! Thanks, Jash for all you do for - the community. It’s lovely having you as a maintainer. + That was some great advice there and tips! Thanks, Jash for all you do for the community. It’s + lovely having you as a maintainer.

    Ruth:

    - That was some great advice there and tips! Thanks, Jash for all you do for - the community. It’s lovely having you as a maintainer. + That was some great advice there and tips! Thanks, Jash for all you do for the community. It’s + lovely having you as a maintainer.

    - Jash is an impactful contributor and a kind-hearted maintainer. His story is - special, but not unique. Take Jash’s advice and engage in our uplifting - community. Write your own story. Join the Layer5 Community. Be like Jash, - Join the Layer5 Community! + Jash is an impactful contributor and a kind-hearted maintainer. His story is special, but not + unique. Take Jash’s advice and engage in our uplifting community. Write your own story. Join the + Layer5 Community. Be like Jash, Join the Layer5 Community!

    - "Be like Jash." Join the Layer5 Slack and - say hi. + "Be like Jash." Join the Layer5 Slack and say hi.

    diff --git a/src/collections/blog/2021/2021-04-19-announcing-meshery-v0.5/index.mdx b/src/collections/blog/2021/2021-04-19-announcing-meshery-v0.5/index.mdx index fd5281efd41b..ee3b6d838739 100644 --- a/src/collections/blog/2021/2021-04-19-announcing-meshery-v0.5/index.mdx +++ b/src/collections/blog/2021/2021-04-19-announcing-meshery-v0.5/index.mdx @@ -1,40 +1,47 @@ --- -title: "Announcing Meshery v0.5.0" -subtitle: "" +title: 'Announcing Meshery v0.5.0' +subtitle: '' date: 2021-04-19 08:00:00 +0000 author: Aisuko Li thumbnail: ./v0.5.0.webp darkthumbnail: ./v0.5.0.webp category: Announcements tags: - - Meshery - - Projects + - Meshery + - Projects published: true resource: true type: Blog product: Meshery redirect_from: - - /blog/meshery/announcing-meshery-v0.5.0/ + - /blog/meshery/announcing-meshery-v0.5.0/ --- -import { BlogWrapper } from "../../Blog.style.js"; -import { Link } from "gatsby"; -import MesheryOperatorShot from "./meshery-operator-v0.5.0.webp"; -import MesheryOperator from "./meshery-operator-dark.svg"; -import MeshSync from "./meshsync.svg"; -import MesheryDB from "./meshery-database.svg"; -import MesheryAdapterLibrary from "./meshery-adapter-library.svg"; -import Traefik from "./traefik-mesh.svg"; -import MesheryExtensibility from "./meshery-extensibility.svg"; -import NGINXSM from "./nginx-service-mesh.svg"; -import layer5Logo from "../../../../assets/images/layer5/layer5-only/svg/layer5-no-trim.svg"; +import { BlogWrapper } from '../../Blog.style.js'; +import { Link } from 'gatsby'; +import MesheryOperatorShot from './meshery-operator-v0.5.0.webp'; +import MesheryOperator from './meshery-operator-dark.svg'; +import MeshSync from './meshsync.svg'; +import MesheryDB from './meshery-database.svg'; +import MesheryAdapterLibrary from './meshery-adapter-library.svg'; +import Traefik from './traefik-mesh.svg'; +import MesheryExtensibility from './meshery-extensibility.svg'; +import NGINXSM from './nginx-service-mesh.svg'; +import layer5Logo from '../../../../assets/images/layer5/layer5-only/svg/layer5-no-trim.svg'; -

    We're pleased to announce the release of Meshery 0.5.0! Consisting of a number of significant architectural enhancements with 8 new capabilities entering alpha, Meshery v0.5.0's feature density is impressive. Previewed in the Using Istio workshop delivered at the inaugural IstioCon 2021 earlier this month, Meshery v0.5.0 provides a strong architectural foundation for cloud native application and service mesh management.

    - +

    + We're pleased to announce the release of Meshery 0.5.0! Consisting of a number of + significant architectural enhancements with 8 new capabilities entering alpha, Meshery v0.5.0's + feature density is impressive. Previewed in the Using Istio workshop delivered at the{' '} + inaugural IstioCon 2021 earlier this month, + Meshery v0.5.0 provides a strong architectural foundation for cloud native application and service + mesh management. +

    ## Feature Highlights + - New GraphQL API - Meshery Operator with MeshSync inside - Meshery Adapter for Traefik Mesh (beta) @@ -43,105 +50,191 @@ import layer5Logo from "../../../../assets/images/layer5/layer5-only/svg/layer5- - Meshery Remote Provider extensions with dynamic injection - New Meshery CLI commands to manage mutiple Meshery deployments -
    +
    -

    Thank you to the wonderful Layer5 community of open source contributors in making this significant release possible.

    +

    + Thank you to the wonderful Layer5 community of open source contributors in making this + significant release possible. +

    ## New Service Mesh Support -

    2 new Meshery service mesh adapters are bundled with this latest version of Meshery: The Meshery Adapter for Traefik Mesh and the Meshery Adapter for NGINX Service Mesh.

    +

    + 2 new Meshery service mesh adapters are bundled with this + latest version of Meshery: The Meshery Adapter for Traefik Mesh and the Meshery Adapter for NGINX + Service Mesh. +

    Meshery Adapter for Traefik Mesh (beta)

    - - -

    Traefik Mesh is a straight-forward, easy to configure, and non-invasive service mesh that allows visibility and management of the traffic flows inside any Kubernetes cluster.

    - -

    Meshery supports the lifecycle and performance management of Traefik Mesh. Along with support for multiple versions of Traefik Mesh, bundled with this adapter are the Book Info and HttpBin sample applications operations to aid you in familiarizing with the functionality of Traefik Mesh. As a Meshery user, you can apply custom configuration to your instances of Traefik Mesh, managing the onboarding of your own applications onto the service mesh and providing the ability for you as a service mesh manager to customize your service mesh deployment.

    - -

    Review the sample application guides to familiarize with their differences and learn more about the beta adapter for Meshery Adapter for Traefik Mesh.

    - + + +

    + Traefik Mesh is a straight-forward, easy to configure, and non-invasive service mesh that allows + visibility and management of the traffic flows inside any Kubernetes cluster. +

    + +

    + Meshery supports the lifecycle and performance management of Traefik Mesh. Along with support for + multiple versions of Traefik Mesh, bundled with this adapter are the Book Info and HttpBin sample + applications operations to aid you in familiarizing with the functionality of Traefik Mesh. As a + Meshery user, you can apply custom configuration to your instances of Traefik Mesh, managing the + onboarding of your own applications onto the service mesh and providing the ability for you as a + service mesh manager to customize your service mesh deployment. +

    + +

    + Review the sample application guides to + familiarize with their differences and learn more about the beta adapter for{' '} + Meshery Adapter for Traefik Mesh. +

    Meshery Adapter for NGINX Service Mesh (alpha)

    - - -

    NGINX Service Mesh (NSM) is a fully integrated, lightweight service mesh that leverages a data plane powered by NGINX Plus to manage container traffic in Kubernetes environments.

    - -

    Meshery supports lifecycle and performance management of NGINX Service Mesh. Bundled with this support are a few sample applications to help users understand the functionality of NGINX Service Mesh. lifecycle management and sample applications operations below:

    - -
      -
    • Book Info
      • -
    • HTTPBin
      • -
    • Emojivoto
      • -
    + + +

    + NGINX Service Mesh (NSM) is a fully integrated, lightweight service mesh that leverages a data + plane powered by NGINX Plus to manage container traffic in Kubernetes environments.{' '} +

    + +

    + Meshery supports lifecycle and performance management of NGINX Service Mesh. Bundled with this + support are a few sample applications to help users understand the functionality of NGINX Service + Mesh. lifecycle management and sample applications operations below: +

    + +{' '} +
      +
    • Book Info
      • +
    • HTTPBin
      • +
    • Emojivoto
      • +
    -

    Review the sample application guides to familiarize with their differences. Learn more about the alpha adapter for Meshery Adapter for NGINX Service Mesh.

    +

    + Review the sample application guides to + familiarize with their differences. Learn more about the alpha adapter for{' '} + Meshery Adapter for NGINX Service Mesh. +

    Integrating with Meshery: Using extension points

    -As the cloud native manager, Meshery, is an extensible platform offering user and integrators well-crafted, extension points. Extension points allow you to augment the behavior of Meshery by either adding entirely new capabilities or affecting the behavior of existing functionality, as see in the figure below. +As the cloud native manager, Meshery, is an extensible platform offering user and integrators well-crafted, extension points. Extension points allow you to augment the behavior of Meshery by either adding entirely new capabilities or affecting the behavior of existing functionality, as see in the figure below.
    - + + +
    As you can see in the diagram, Meshery offers many types of extension points. - Extensible Service Mesh Adapters - bring your own service mesh. -- Extensible APIs - bring your own GraphQL resolvers and expose new, custom endpoints. -- Extensible Load Generators - Meshery supports three types of load generators, however, you can bring your own and plug it in. -- Extensible Providers - the v0.5.0 release delivers dynamic injection of Remote Provider extensions. Providers are a powerful mechanism for integrating Meshery into your existing tooling and systems. +- Extensible APIs - bring your own GraphQL resolvers and expose new, custom + endpoints. +- Extensible Load Generators - Meshery supports three types of load generators, + however, you can bring your own and plug it in. +- Extensible Providers - the v0.5.0 release delivers dynamic injection of Remote + Provider extensions. Providers are a powerful mechanism for integrating Meshery into your existing + tooling and systems. There are two types of Providers in Meshery: Local - built into Meshery and Remote - implemented by anyone or any organization that wishes to integrate with Meshery. Remote Provider extensibility includes: - * Pluggable UI functionality - * Pluggable Backend functionality - * Pluggable Authentication and Authorization - * Long-Term Persistence - * Enhanced Visualization - * Historical Reporting +- Pluggable UI functionality +- Pluggable Backend functionality +- Pluggable Authentication and Authorization +- Long-Term Persistence +- Enhanced Visualization +- Historical Reporting Learn more about the platform Meshery provides to extend its funcionality by exploring its extension points. If you have or are building your own Remote Provider, let us know! +

    MeshKit and Meshery Adapter Library

    As a service mesh toolkit, MeshKit aims to specifically focus on service mesh management and provides broadly useful functionality, it provides a standard policy for error handling and logging across all Meshery components, and implementations for error handling, logging, and tracing.
      -
    • MeshKit provides common data models of Service Mesh Interface conformance testing for Meshery.
      • -
    • The low-level API abstract by MeshKit to the high-level functions provides out-of-the-box functions.
      • +
    • + MeshKit provides common data models of Service Mesh Interface conformance testing for Meshery. +
      • +
    • + The low-level API abstract by MeshKit to the high-level functions provides out-of-the-box + functions. +

    Meshery Adapter Library

    -

    The Meshery Adapter Library provides a common and consistent set of functionality for managing the lifecycle of service meshes and their workloads.

    +

    + The Meshery Adapter Library provides a common and consistent set of functionality for managing the + lifecycle of service meshes and their workloads. +

    - + + +
    -* The library provides a set of interfaces, some with default implementations like a mini framework implementing the gRPC server that allows plugging in the mesh-specific configuration and operations implemented in the adapters. -* The default configuration provider we use Viper to reads the adapter specific configuration, and the configuration providers are implementations of an interface, this can be flexible if anyone wants to implement it on their own. - -

    Read Maintainer Michael Gfeller's blog post Introduction MeshKit and the Meshery Adapter Library for more details.

    +- The library provides a set of interfaces, some with default implementations like a mini framework implementing the gRPC server that allows plugging in the mesh-specific configuration and operations implemented in the adapters. +- The default configuration provider we use Viper to reads the adapter specific configuration, and the configuration providers are implementations of an interface, this can be flexible if anyone wants to implement it on their own. + +
    +

    + Read Maintainer Michael Gfeller's blog post{' '} + + Introduction MeshKit and the Meshery Adapter Library + {' '} + for more details. +

    +
    With the increasing the number and diversity of service meshes supported by Meshery, you might find the list of [Supported Service Meshes](https://docs.meshery.io/service-meshes) a helpful, complete list.

    Meshery Operator

    -As a Kubernetes custom controller, Meshery Operator provides a Kubernetes-native approach to interfacing with Meshery. Kubernetes is where service meshes have gotten their initial foothold, and therefore, important that Meshery interface to Kubernetes natively.

    Some service meshes support non-containerized workloads outside of the cluster and will grow in this focus over time. While Meshery Operator is Kubernetes only in the v0.5.0 release, Meshery's arichitecture makes considerations for different workload and platform types.

    + As a Kubernetes custom controller, Meshery Operator provides a Kubernetes-native approach to + interfacing with Meshery. Kubernetes is where service meshes have gotten their initial foothold, + and therefore, important that Meshery interface to Kubernetes natively. +

    +

    + Some service meshes support non-containerized workloads outside of the cluster and will grow in + this focus over time. While Meshery Operator is Kubernetes only in the v0.5.0 release, Meshery's + arichitecture makes considerations for different workload and platform types. +

    - + + +
      -
    • Meshery Operator is the multi-service mesh operator that runs as a Kubernetes Operator and defines two custom resources: MeshSync and Meshery Broker (NATS)
      • -
    • Meshery Operator is provides abilities includes cluster discovery, service mesh discovery, and data streaming via NATS.
      • +
    • + Meshery Operator is the multi-service mesh operator that runs as a Kubernetes Operator and + defines two custom resources: MeshSync and Meshery Broker (NATS) +
      • +
    • + Meshery Operator is provides abilities includes cluster discovery, service mesh discovery, and + data streaming via NATS. +

    MeshSync

    -

    MeshSync is available as a Kubernetes custom resource that provides tiered discovery and continual synchronization with Meshery Server as to the state of the Kubernetes cluster, service meshes, and their workloads.

    +

    + MeshSync is available as a Kubernetes custom resource that provides tiered discovery and continual + synchronization with Meshery Server as to the state of the Kubernetes cluster, service meshes, and + their workloads. +

    @@ -160,25 +253,34 @@ maintain the local snapshot of the cluster and refreshed periodically. Meshery's relational database serves as a repository for MeshSync data, user preferences, and system settings. This database should be considered ephemeral and given that it operates as a cache. Meshery relational database offers federated datasets for managing multiple Kubernetes cluster and multiple service meshes.
    - + + +
    -

    Learn more and consider contributing to MeshSync.

    +

    + Learn more and consider contributing to + MeshSync. +

    ## GraphQL Support -Meshery now supports GraphQL instances between Meshery UI and Meshery Server offering any GraphQL client the power to ask for exactly what they need from mesh. This new API sets the stage preparing for exciting features in upcoming releases. Extension points are also built into Meshery's GraphQL support allowing integrators to bring their own GraphQL resolvers to the Meshery server runtime. - +Meshery now supports GraphQL instances between Meshery UI and Meshery Server offering any GraphQL client the power to ask for exactly what they need from mesh. This new API sets the stage preparing for exciting features in upcoming releases. Extension points are also built into Meshery's GraphQL support allowing integrators to bring their own GraphQL resolvers to the Meshery server runtime.

    Meshery Command Line Interface Enhancements

    -The beloved `mesheryctl` introduces new commands in the v0.5.0 release expands the CLI's support of multiple Meshery deployments with the `context` command and control over when Meshery auto-updates with the `channel` command. +The beloved `mesheryctl` introduces new commands in the v0.5.0 release expands the CLI's support of +multiple Meshery deployments with the `context` command and control over when Meshery auto-updates +with the `channel` command.

    Managing Multiple Meshery Deployments

    -Introduced in this release is the meshconfig - a configuration file that describes Meshery deployments in separate contexts. A Meshery context describes deployments across Docker hosts and Kubernetes clusters. mesheryctl system context enables user to easy manage multiple deployments of Meshery by quickly switching contexts. +Introduced in this release is the meshconfig - a configuration file that describes Meshery +deployments in separate contexts. A Meshery context describes deployments across +Docker hosts and Kubernetes clusters. mesheryctl system context enables user to easy +manage multiple deployments of Meshery by quickly switching contexts.{' '} ### Subscribing to Meshery Release Channels -`mesheryctl system channel` allows you to easily set and switch between which Meshery release channel (stable or edge) that you want a particilar Meshery deployment (`context`) to use. Meshery deployments subscribe to one of two release channels and can either automatically self-update the deployment or prompt you to update the deployment. Alternatively, you can pin a given Meshery deployment to a specific release should you want tighter control over when Meshery updates. Read more about Meshery's stable and edge release channels. +`mesheryctl system channel` allows you to easily set and switch between which Meshery release channel (stable or edge) that you want a particilar Meshery deployment (`context`) to use. Meshery deployments subscribe to one of two release channels and can either automatically self-update the deployment or prompt you to update the deployment. Alternatively, you can pin a given Meshery deployment to a specific release should you want tighter control over when Meshery updates. Read more about Meshery's stable and edge release channels. Review the mesheryctl Command Reference for details on all subcommands, flags, and their behavior. @@ -186,6 +288,12 @@ Review the mesheryctl Co To get a more comprehensive list of the bug fixes and enhancements packaged in the v0.5.0 release, see the [Meshery Documentation](https://docs.meshery.io/). With v0.6.0 planning complete these signal of the Layer5 community's innovation cycle trending upward sharply. See Meshery's roadmap for a prelude of what's yet to come. -

    If these topics excite you and you want to explore the wonderful world of service meshes, come and say "Hi" on the community Slack and you are sure to be warmly welcomed. 😀

    +
    +

    + If these topics excite you and you want to explore the wonderful world of service meshes, come + and say "Hi" on the community Slack and you are sure to + be warmly welcomed. 😀 +

    +
    diff --git a/src/collections/blog/2021/2021-04-24-buf-protocols/BufProtocol.style.js b/src/collections/blog/2021/2021-04-24-buf-protocols/BufProtocol.style.js index c2db96f8e73f..64eb4f56ba83 100644 --- a/src/collections/blog/2021/2021-04-24-buf-protocols/BufProtocol.style.js +++ b/src/collections/blog/2021/2021-04-24-buf-protocols/BufProtocol.style.js @@ -1,14 +1,14 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const BufProtocol = styled.div` div.fact { - color: ${props => props.theme.secondaryColor}; + color: ${(props) => props.theme.secondaryColor}; font-style: italic; font-size: 1.3rem; font-weight: 600; text-align: right; - border-right: 4px solid ${props => props.theme.secondaryColor}; + border-right: 4px solid ${(props) => props.theme.secondaryColor}; padding-left: 2rem; padding-right: 2rem; padding-top: 1rem; @@ -19,12 +19,12 @@ export const BufProtocol = styled.div` display: flex; flex-direction: column; justify-content: flex-start; - color: ${props => props.theme.secondaryColor}; + color: ${(props) => props.theme.secondaryColor}; font-style: italic; font-size: 1.3rem; font-weight: 600; text-align: left; - border-left: 4px solid ${props => props.theme.secondaryColor}; + border-left: 4px solid ${(props) => props.theme.secondaryColor}; padding-left: 2rem; padding-right: 2rem; padding-top: 1rem; @@ -34,13 +34,13 @@ export const BufProtocol = styled.div` display: flex; flex-direction: column; justify-content: flex-start; - color: ${props => props.theme.secondaryColor}; + color: ${(props) => props.theme.secondaryColor}; font-style: italic; font-size: 1.3rem; font-weight: 600; text-align: center; - border-left: 4px solid ${props => props.theme.secondaryColor}; - border-right: 4px solid ${props => props.theme.secondaryColor}; + border-left: 4px solid ${(props) => props.theme.secondaryColor}; + border-right: 4px solid ${(props) => props.theme.secondaryColor}; padding-left: 2rem; padding-right: 2rem; padding-top: 1rem; @@ -67,7 +67,7 @@ export const BufProtocol = styled.div` margin: 1rem; padding: 2rem; display: flex; - border: 1px solid ${props => props.theme.primaryLightColor}; + border: 1px solid ${(props) => props.theme.primaryLightColor}; img { margin-right: 3rem; } diff --git a/src/collections/blog/2021/2021-04-24-buf-protocols/index.mdx b/src/collections/blog/2021/2021-04-24-buf-protocols/index.mdx index ad1986bbc5af..c70bb6cd12f1 100644 --- a/src/collections/blog/2021/2021-04-24-buf-protocols/index.mdx +++ b/src/collections/blog/2021/2021-04-24-buf-protocols/index.mdx @@ -1,42 +1,58 @@ --- -title: "Rethinking Protocol Buffers with Buf" -subtitle: "Buf makes Protocol Buffer APIs easier to create, maintain, and consume" +title: 'Rethinking Protocol Buffers with Buf' +subtitle: 'Buf makes Protocol Buffer APIs easier to create, maintain, and consume' date: 2021-05-24 22:19:00 -author: "Adithya Krishna" +author: 'Adithya Krishna' thumbnail: ./buf-protocol.webp darkthumbnail: ./buf-protocol.webp -category: "Cloud Native" -tags: - - gRPC +category: 'Cloud Native' +tags: + - gRPC published: true resource: true type: Blog --- -import { BlogWrapper } from "../../Blog.style.js"; -import { BufProtocol } from "./BufProtocol.style"; -import { Link } from "gatsby"; -import Problems from "./problems.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import { BufProtocol } from './BufProtocol.style'; +import { Link } from 'gatsby'; +import Problems from './problems.webp'; - -

    At Layer5, we are continuously evaluating new technologies and incorporating them into our open source projects. Buf is one of those projects. This post presents an overview of Buf.

    - +
    +

    + At Layer5, we are continuously evaluating new technologies and incorporating them into our open + source projects. Buf is one of those projects. This post presents an overview of Buf. +

    +
    ## What is Buf? -

    A tool to make Protobuf reliable and easy to use for service owners and clients, while keeping it the obvious choice on the technical merits. -Our organization should not have to reinvent the wheel to create, maintain, and consume Protobuf APIs efficiently and effectively. It will handle our Protobuf management strategy for us, so we can focus on what matters.

    - -
    Learn more about Buf Protocol, visit Buf Protocol or their documentation at Buf Protocol Docs
    +

    + A tool to make Protobuf reliable and easy to use for service owners and clients, while keeping it + the obvious choice on the technical merits. Our organization should not have to reinvent the wheel + to create, maintain, and consume Protobuf APIs efficiently and effectively. It will handle our + Protobuf management strategy for us, so we can focus on what matters. +

    + +
    + Learn more about Buf Protocol, visit{' '} + + Buf Protocol + {' '} + or their documentation at{' '} + + Buf Protocol Docs + +
    -## Features +## Features -- Automatic file discovery. +- Automatic file discovery. - Selectable configuration - 40 lint checkers and 54 breaking checkers - Selectable error output - `file:line:col:message` - Check anything from anywhere - proto files, tar, git, pre-built images or file descriptors. @@ -53,32 +69,45 @@ Buf attempts to simplify your Protocol Buffers workflow using the Buf CLI and pr - A configurable file builder that produces Images, our extension of FileDescriptorSets. ## Comparison Between Protobuf and Buf + Layer5 projects currently use protoc as the tool for building their protobuf defintions. The following are some considerations made while determining whether to use Buf. - Protobuf is not as widely adopted as JSON. -- API Structure +- API Structure - No standards enforcement - - Inconsistency can arise across an organization's Protobuf APIs, + - Inconsistency can arise across an organization's Protobuf APIs, - Design decisions can be made that can affect your API's future iterability. - Backward Compatibility - Stub distribution - Tooling -

    Buf aims to solve the above problems and it's long-term goal is to enable schema-driven development: A future where APIs are defined consistently, in a way that service owners and us can depend on

    +

    + Buf aims to solve the above problems and it's long-term goal is to enable schema-driven + development: A future where APIs are defined consistently, in a way that service owners and us can + depend on +

    ## Roadmap to Adopting Buf + In consideration of the use of Buf, we would adopt it in phases, starting with the following ares of integration. -- **API Structure Enforcements** - - Linter solves this issue by enforcing standards. - - Also, we don’t need to use Buf as a standalone tool we can just use linter as plugins. +- **API Structure Enforcements** + - Linter solves this issue by enforcing standards. + - Also, we don’t need to use Buf as a standalone tool we can just use linter as plugins. - **Backward Compatibility** - It will check for different things that can cause breaking change. - For example, type change. -

    If these topics excite you and you want to explore more cloud native technolgies, come and say "Hi" on the community Slack and you are sure to be warmly welcomed. 😀

    +
    +

    + If these topics excite you and you want to explore more{' '} + cloud native technolgies, come and say "Hi" on the community{' '} + Slack and you are sure to be warmly welcomed.{' '} + 😀 +

    +
     -     \ No newline at end of file + diff --git a/src/collections/blog/2021/2021-06-25-she-code-africa-contributhon-boot-camp/index.mdx b/src/collections/blog/2021/2021-06-25-she-code-africa-contributhon-boot-camp/index.mdx index eb27584cf045..691019a8b453 100644 --- a/src/collections/blog/2021/2021-06-25-she-code-africa-contributhon-boot-camp/index.mdx +++ b/src/collections/blog/2021/2021-06-25-she-code-africa-contributhon-boot-camp/index.mdx @@ -1,27 +1,27 @@ --- -title: "She Code Africa Contributhon Boot Camp Report" +title: 'She Code Africa Contributhon Boot Camp Report' date: 2021-06-25 16:00:00 +0000 author: Anita Charles thumbnail: ./sca-thumbnail.webp darkthumbnail: ./sca-thumbnail.webp category: Community tags: - - Community - - MeshMate + - Community + - MeshMate published: true --- -import { Link } from "gatsby"; +import { Link } from 'gatsby'; -import Sandy from "./sandySCA.webp"; -import Abiola from "./abiolaSCA.webp"; -import Cynthia from "./cynthiaSCA.webp"; -import Elizabeth from "./elizabethSCA.webp"; -import Blossom from "./blossomSCA.webp"; -import Joy from "./joySCA.webp"; -import Naimat from "./naimatSCA.webp"; +import Sandy from './sandySCA.webp'; +import Abiola from './abiolaSCA.webp'; +import Cynthia from './cynthiaSCA.webp'; +import Elizabeth from './elizabethSCA.webp'; +import Blossom from './blossomSCA.webp'; +import Joy from './joySCA.webp'; +import Naimat from './naimatSCA.webp'; -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js';

    @@ -31,100 +31,120 @@ import { BlogWrapper } from "../../Blog.style.js"; The She Code Africa hosts their Contributhon as an Africa-wide open source boot camp focused on building more women OSS contributors & creating more diversity in the African open source ecosystem by matching African women in technology with sponsors and mentors from Open Source organizations. During this boot camp, participants work with an open source organisation on a project for 4 weeks with the help of organisation mentors and get rewarded at the end of the boot camp upon successful project completion.

    - During the boot camp, Layer5 received a total of 8 mentees - all from Nigeria. These mentees were teamed up to work on the 3 project ideas selected by Layer5. Each project had an average of 2 members of the community who were delegated as mentors to oversee the contributions of the mentees. Often Layer5 MeshMates volunteer to be mentors. +During the boot camp, Layer5 received a total of 8 mentees - all from Nigeria. These mentees were teamed up to work on the 3 project ideas selected by Layer5. Each project had an average of 2 members of the community who were delegated as mentors to oversee the contributions of the mentees. Often Layer5 MeshMates volunteer to be mentors. -

    Projects

    -

    Layer5 mentors prepared and organized a few projects in advance of the start of the boot camp, so that mentees might hit the ground running.

    +{' '} +

    Projects

    +

    + Layer5 mentors prepared and organized a few projects in advance of the start of the boot camp, so + that mentees might hit the ground running. +

    -

    Layer5 Community Handbook

    - -

    - Layer5 Community Handbook is a curated Document with the ABC's of the community. In this project, mentees were expected to look for repetition pattern across existing docs thereby, creating a structured guide for interaction across all projects. -

    - Mentors: -
      -
    • Ruth Ikegah
      • -
    • Anita Ihuman
      • -
    - Mentee(s): - - - -

    - sandy-testimonial - abiola-testimonial -

    - -

    Layer5 Main Website

    - -

    - This required the contributors to fix existing issues on the GitHub repository, while suggesting ideas to improve the website, which used Gatsbyjs and Reactjs. The layer5.io website is hosted on GitHub Pages and is a collaborative effort of nearly 200 contributors. -

    - Mentors: -
      -
    • Jash Patel
      • -
    • Chinmay Mehta
      • -
    - Mentee(s): - +{' '} +

    Layer5 Community Handbook

    +

    + Layer5 Community Handbook is a curated Document with the ABC's of the community. In this project, + mentees were expected to look for repetition pattern across existing docs thereby, creating a + structured guide for interaction across all projects. +

    +Mentors: +
      +
    • + Ruth Ikegah +
      • +
    • + Anita Ihuman +
      • +
    +Mentee(s): + +

    + sandy-testimonial + abiola-testimonial +

    +

    Layer5 Main Website

    +

    + This required the contributors to fix existing issues on the GitHub repository, while suggesting + ideas to improve the website, which used Gatsbyjs and Reactjs. The layer5.io website is hosted on + GitHub Pages and is a collaborative effort of nearly 200 contributors. +

    +Mentors: +
      +
    • + Jash Patel +
      • +
    • + Chinmay Mehta +
      • +
    +Mentee(s): + -

    - cynthia-testimonial - elizabeth-testimonial -

    -

    Meshery CLI

    -

    - mesheryctl is a command-line tool for Meshery, the cloud native management plane. Using Golang, mentees were required to design new CLI commands and attend to existing issues, focusing on enforcing the consistency of user experience with the command line client. -

    - - Mentors: -
      -
    • Navendu Pottekkat
      • -
    • Chinmay Mehta
      • -
    - Mentee(s): -
      -
    • Joy Nwaiwu
      • -
    • Naimat Oyewale
      • -
    - -

    - naimat-testimonial - joy-testimonial -

    - -

    - The mentors were in constant communication with the mentees, taking their questions and rendering help when needed. At the end of the Contribution boot camp, it was heartwarming to see the mentees were able to make noticeable contributions to the projects. During the boot camp wrap up call, mentees gave presentations that revealed how impactful it was for them working on Layer5 projects. -

    - -

    Appreciation

    -

    - In gratitude, we acknowledge the commitment and contributions of the mentees toward the projects and we won't forget our incredible mentors who were devoted to meeting the needs and answering to the mentees during this bootcamp. Also, we would like to appreciate Zainab Abubakar for having facilitated the She Code Africa - Contribution 2021.

    +{' '} +

    + cynthia-testimonial + elizabeth-testimonial +

    +

    Meshery CLI

    +

    + mesheryctl is a command-line tool for Meshery, the cloud native management plane. + Using Golang, mentees were required to design new CLI commands and attend to existing issues, + focusing on enforcing the consistency of user experience with the command line client. +

    +Mentors: +
      +
    • Navendu Pottekkat
      • +
    • + Chinmay Mehta +
      • +
    +Mentee(s): +
      +
    • + Joy Nwaiwu +
      • +
    • + Naimat Oyewale +
      • +
    +

    + naimat-testimonial + joy-testimonial +

    +

    + The mentors were in constant communication with the mentees, taking their questions and rendering + help when needed. At the end of the Contribution boot camp, it was heartwarming to see the mentees + were able to make noticeable contributions to the projects. During the boot camp wrap up call, + mentees gave presentations that revealed how impactful it was for them working on Layer5 projects. +

    +

    Appreciation

    +

    + In gratitude, we acknowledge the commitment and contributions of the mentees toward the projects + and we won't forget our incredible mentors who were devoted to meeting the needs and answering to + the mentees during this bootcamp. Also, we would like to appreciate{' '} + Zainab Abubakar for having facilitated the She Code + Africa Contribution 2021. +

     diff --git a/src/collections/blog/2021/2021-06-4-announcing-summer-interns/index.mdx b/src/collections/blog/2021/2021-06-4-announcing-summer-interns/index.mdx index 93c306066136..aaf4d0dcfea1 100644 --- a/src/collections/blog/2021/2021-06-4-announcing-summer-interns/index.mdx +++ b/src/collections/blog/2021/2021-06-4-announcing-summer-interns/index.mdx @@ -1,93 +1,170 @@ --- -title: "Meet the Summer Interns of 2021" +title: 'Meet the Summer Interns of 2021' date: 2021-06-04 08:00:00 +0000 author: Interns of Summer 2021 thumbnail: ./summer-intern.webp darkthumbnail: ./summer-intern.webp -category: "Community" +category: 'Community' tags: - - Community + - Community featured: true published: true --- -import { Link } from "gatsby"; +import { Link } from 'gatsby'; -import Dhruv from "./intern-dhruv-patel.webp"; -import Soham from "./intern-soham-sonawane.webp"; -import Piyush from "./intern-piyush-singariya.webp"; +import Dhruv from './intern-dhruv-patel.webp'; +import Soham from './intern-soham-sonawane.webp'; +import Piyush from './intern-piyush-singariya.webp'; -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; -
    -

    - Layer5 participates in many - open source internship programs. We seek out existing contributors who - actively reflect the culture and principles of Layer5 to participate in these programs. Here are the Summer of 2021's open source interns.

    -
    +{' '} +
    +

    + Layer5 participates in many + + open source internship programs + + . We seek out existing contributors who actively reflect the culture and principles of Layer5 to + participate in these programs. Here are the Summer of 2021's open source interns. +

    +
    Hear about their journeys and follow along this summer as they make waves in the Layer5 community. -

    - +{' '} +

    + Dhruv Patel - -

    - dhruv-patel -

    - Open source has been intriguing to me ever since I had joined my college's open-source community (DevlupLabs). It was in the middle of the pandemic, though, with my mind trying to find an escape, that I stumbled upon Layer5. Within the first week of joining the Layer5 community, I had a pull request posted, and much to my surprise, found myself demo'ing it in the very next community meeting. In retrospect, it was a minor pull request, making some UI changes for Meshery. The encouragement I received was so welcoming and supportive. After that first week's experience, and so much technology and projects to explore, I was hooked - there was no turning back for me from that point. -

    -

    - I started learning more about the projects in Layer5 and its tech stack. From how Meshery Server was using gRPC and protobufs to communicate with each of its service mesh adaptors to defining how SMI Conformance works and the Service Mesh Performance specification to how Meshery UI leverages some awesome libraries like NextJS, BillboardJS, and Redux. It has been through contributing to each of these areas, that I have learned each of these technologies more deeply and it was all possible because of the continuous influx of awesome support from the community, especially Abishek Kumar and I probably won't stop poking him for support anytime soon. -

    -

    - As I look forward to a structured internship with Layer5 through Google Summer of Code this summer, I do so knowing I will be collaborating with the large Layer5 community, engineers from other technology companies and spending a lot of time with Soham and Piyush. For my part, I'll be working on a visual topology to help service mesh operators map their deployments, model their application performance, and parse their service proxy logs. I am ready to make an impact, learn more, and help other community members ( and watch as they, too, are initiated into the Layer5 community through ritual of giving an awkward first-timer introduction in our Community Meeting 😛). -

    - -

    - + +

    +dhruv-patel +

    + Open source has been intriguing to me ever since I had joined my college's open-source community{' '} + + (DevlupLabs) + + . It was in the middle of the pandemic, though, with my mind trying to find an escape, that I + stumbled upon Layer5. Within the first week of joining the Layer5 community, I had a pull request + posted, and much to my surprise, found myself demo'ing it in the very next community meeting. In + retrospect, it was a minor pull request, making some UI changes for Meshery. The encouragement I + received was so welcoming and supportive. After that first week's experience, and so much + technology and projects to explore, I was hooked - there was no turning back for me from that + point. +

    +

    + I started learning more about the projects in Layer5 and its tech stack. From how Meshery Server + was using gRPC and protobufs to communicate with each of its service mesh adaptors to defining how{' '} + SMI Conformance works and the{' '} + + Service Mesh Performance + {' '} + specification to how Meshery UI leverages some awesome libraries like NextJS, BillboardJS, and + Redux. It has been through contributing to each of these areas, that I have learned each of these + technologies more deeply and it was all possible because of the continuous influx of awesome + support from the community, especially{' '} + Abishek Kumar{' '} + and I probably won't stop poking him for support anytime soon. +

    +

    + As I look forward to a structured internship with Layer5 through Google Summer of Code this + summer, I do so knowing I will be collaborating with the large Layer5 community, engineers from + other technology companies and spending a lot of time with Soham and Piyush. For my part, I'll be + working on a visual topology to help service mesh operators map their deployments, model their + application performance, and parse their service proxy logs. I am ready to make an impact, learn + more, and help other community members ( and watch as they, too, are initiated into the Layer5 + community through ritual of giving an awkward first-timer introduction in our Community Meeting + 😛). +

    +

    + Piyush Singariya - -

    - piyush-singariya -

    - It all started with an idea, the idea of doing open source contributions. And with that after scrolling through many open source communities, I found Layer5, jumped up into our Slack workspace, started learning about Meshery. I raised a PR and was immediately made to feel like a rockstar. I began meeting more of the community members, learning more about Meshery and its command line client, `mesheryctl` with each contribution. And you know, its extrenely gratifying to have your pull request merged, and that feeling is amplified by the feedback and attention you receive as a contributor at Layer5. -

    -

    - I knew that I wanted to engage even more deeply and learn all that I can from the seasoned engineers at Layer5. And so, I applied for internship. Layer5 takes internships seriously and doesn't accept anyone into internship until you have proven your commitment to their awesome projects. - And at the time of writing this, it’s been almost three months of contributing bfore being accepted as GSoC student. I have spent most of my time focusing on Layer5’s Meshery project and it’s command line client, `mesheryctl`. -

    -

    - And so, we reach the beginning of my GSoC 2021 program, which began on the night of May 17th, 2021 when I learned that I had been selected as a GSoC Participant with the Cloud Native Computing Foundation (CNCF). I am hyped up and excited to go ahead with Layer5 for the upcoming months. -

    -

    - My GSoC project is about introducing interesting and important features to Meshery Server and `mesheryctl`. Such as automating Documentation and Interactive playground for Meshery Server’s REST API endpoints, adding commands related to performance testing and enhancing Meshery’s environment health checking, introducing unit testing for `mesheryctl`, and CI/CD and documentation for all the new features. -

    -

    - It has been 2 weeks since I have started my GSoC’21 tenure with the Layer5 community, and from the very beginning (I mean before GSoC), I have learned a lot with my code contributions and the Community here. I began with setting up the performance command under mesheryctl and Open API Specification 2.0 for REST API documentation to the project. I am learning a lot of new things, like Unit Testing, Open API Specification, and much more to include. -

    + + +piyush-singariya +

    + It all started with an idea, the idea of doing open source contributions. And with that after + scrolling through many open source communities, I found Layer5, jumped up into our Slack + workspace, started learning about Meshery. I raised a PR and was immediately made to feel like a + rockstar. I began meeting more of the community members, learning more about Meshery and its + command line client, `mesheryctl` with each contribution. And you know, its extrenely gratifying + to have your pull request merged, and that feeling is amplified by the feedback and attention you + receive as a contributor at Layer5. +

    +

    + I knew that I wanted to engage even more deeply and learn all that I can from the seasoned + engineers at Layer5. And so, I applied for internship. Layer5 takes internships seriously and + doesn't accept anyone into internship until you have proven your commitment to their awesome + projects. And at the time of writing this, it’s been almost three months of contributing bfore + being accepted as GSoC student. I have spent most of my time focusing on Layer5’s Meshery project + and it’s command line client, `mesheryctl`. +

    +

    + And so, we reach the beginning of my GSoC 2021 program, which began on the night of May 17th, 2021 + when I learned that I had been selected as a GSoC Participant with the Cloud Native Computing + Foundation (CNCF). I am hyped up and excited to go ahead with Layer5 for the upcoming months. +

    +

    + My GSoC project is about introducing interesting and important features to Meshery Server and + `mesheryctl`. Such as automating Documentation and Interactive playground for Meshery Server’s + REST API endpoints, adding commands related to performance testing and enhancing Meshery’s + environment health checking, introducing unit testing for `mesheryctl`, and CI/CD and + documentation for all the new features. +

    +

    + It has been 2 weeks since I have started my GSoC’21 tenure with the Layer5 community, and from the + very beginning (I mean before GSoC), I have learned a lot with my code contributions and the + Community here. I began with setting up the performance command under mesheryctl and Open API + Specification 2.0 for REST API documentation to the project. I am learning a lot of new things, + like Unit Testing, Open API Specification, and much more to include. +

    -

    - Soham Sonawane -

    - soham-sonaware -

    - I got to know about Layer5 last year in December when one of my batchmates told me that he was contributing to the community. He asked me if I wanted to join Slack and wanted to contribute to a project. So I looked at the projects on Github and some open issues that I could contribute to. Me being a frontend developer I saw an issue related to removing whitespaces and minor frontend changes. I just made a PR and it was merged then I joined the Slack workspace and attended the Newcomers meeting. I was introduced to a lot of things that I could work on. All of them felt amazing and interesting, all I had to do was “signal” and I could work on any one of them. -

    -

    - At first I thought that I should just work on layer5.io or maybe NightHawk, but then I was given an opportunity to work on something that I had never done before. It has been around 4 months that I have been a part of the community and I am actively trying to add to the project attending weekly meetings where everyone shares amazing stuff about what they did. -

    -

    - As I said earlier my project is something that I had never worked on before, very interesting to work on, it adds one of the most important and unique features to Meshery. Meshery's MeshMap enables users to visualize their service meshes, look at important statistics. It also enables users to design their own service meshes by either importing their designs from a yaml file or by dragging and dropping service mesh components into a - canvas, creating edges, grouping components, persisting these designs to see or edit later, realizing these designs by actually deploying them as service meshes and a lot more. -

    -

    - My job is to be the God of CytoscapeJS, who knows every nook and cranny of the library that enables us to create the visual topology. It's been a week since I have started my LFX internship and I have been working on visual topology even before that. These months of contributing code have taught me a lot. The first task that was given to me was to explore the - CytoscapeJS library and demonstrate a proof of concept of animated edges between 2 components. I sat for 3 hours straight right after the community meeting creating the demo and posted a video on our slack. I was never - appreciated better than on that day. I have never looked back since, each time I am given a feature or issue or any request I try my hardest to realize it in the earliest. I am constantly trying to improve myself and add to the project. -

    +{' '} +

    + + {' '} + Soham Sonawane{' '} + +

    +soham-sonaware +

    + I got to know about Layer5 last year in December when one of my batchmates told me that he was + contributing to the community. He asked me if I wanted to join Slack and wanted to contribute to a + project. So I looked at the projects on Github and some open issues that I could contribute to. Me + being a frontend developer I saw an issue related to removing whitespaces and minor frontend + changes. I just made a PR and it was merged then I joined the Slack workspace and attended the{' '} + Newcomers meeting. I was introduced to a lot of things that + I could work on. All of them felt amazing and interesting, all I had to do was “signal” and I + could work on any one of them. +

    + At first I thought that I should just work on layer5.io or maybe NightHawk, but then I was given + an opportunity to work on something that I had never done before. It has been around 4 months that + I have been a part of the community and I am actively trying to add to the project attending + weekly meetings where everyone shares amazing stuff about what they did. +

    +

    + As I said earlier my project is something that I had never worked on before, very interesting to + work on, it adds one of the most important and unique features to Meshery. Meshery's MeshMap + enables users to visualize their service meshes, look at important statistics. It also enables + users to design their own service meshes by either importing their designs from a yaml file or by + dragging and dropping service mesh components into a canvas, creating edges, grouping components, + persisting these designs to see or edit later, realizing these designs by actually deploying them + as service meshes and a lot more. +

    + My job is to be the God of CytoscapeJS, who knows every nook and cranny of the library that + enables us to create the visual topology. It's been a week since I have started my LFX internship + and I have been working on visual topology even before that. These months of contributing code + have taught me a lot. The first task that was given to me was to explore the CytoscapeJS library + and demonstrate a proof of concept of animated edges between 2 components. I sat for 3 hours + straight right after the community meeting creating the demo and posted a video on our slack. I + was never appreciated better than on that day. I have never looked back since, each time I am + given a feature or issue or any request I try my hardest to realize it in the earliest. I am + constantly trying to improve myself and add to the project. +

    + +\- Dhruv, Piyush, and Soham - \- Dhruv, Piyush, and Soham -     \ No newline at end of file + diff --git a/src/collections/blog/2021/2021-08-24-experience-gsoc-piyush-singariya/index.mdx b/src/collections/blog/2021/2021-08-24-experience-gsoc-piyush-singariya/index.mdx index c651b3806db2..d85b46d2ea4b 100644 --- a/src/collections/blog/2021/2021-08-24-experience-gsoc-piyush-singariya/index.mdx +++ b/src/collections/blog/2021/2021-08-24-experience-gsoc-piyush-singariya/index.mdx @@ -14,9 +14,9 @@ tags: published: true --- -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; -import gsocLogo from "./gsoc.webp"; +import gsocLogo from './gsoc.webp'; gsoc-image diff --git a/src/collections/blog/2021/2021-09-01-announcing-fall-interns/index.mdx b/src/collections/blog/2021/2021-09-01-announcing-fall-interns/index.mdx index 3eeaadc4289a..412b00cf5735 100644 --- a/src/collections/blog/2021/2021-09-01-announcing-fall-interns/index.mdx +++ b/src/collections/blog/2021/2021-09-01-announcing-fall-interns/index.mdx @@ -1,36 +1,35 @@ --- -title: "Meet the Fall Interns of 2021" +title: 'Meet the Fall Interns of 2021' date: 2021-09-01 08:00:00 +0000 author: Interns of Fall 2021 thumbnail: ./fall-interns.webp darkthumbnail: ./fall-interns.webp -category: "Community" +category: 'Community' tags: - Community featured: true published: true --- -import { Link } from "gatsby"; +import { Link } from 'gatsby'; -import Nithish from "./nithish-karthik.webp"; -import Ashish from "./ashish-tiwari.webp"; -import Rudraksh from "./rudraksh-pareek.webp"; -import Bariq from "./bariq-nurlis.webp"; +import Nithish from './nithish-karthik.webp'; +import Ashish from './ashish-tiwari.webp'; +import Rudraksh from './rudraksh-pareek.webp'; +import Bariq from './bariq-nurlis.webp'; -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; -

    Layer5 participates in many open source internship programs - . We seek out existing contributors who actively reflect the culture and - principles of Layer5 to participate in these programs. Here are the Fall of 2021's - open source interns. + + . We seek out existing contributors who actively reflect the culture and principles of Layer5 to + participate in these programs. Here are the Fall of 2021's open source interns.

    @@ -100,7 +99,6 @@ So, I started working on myself. After I got the fundamentals clear, I wanted to Some of my seniors, who had the best interest in me, encouraged me to get into open source, but I did not take it seriously because I felt intimidated by the idea. I instead thought I would look for some open source internships that way I would have someone mentoring me and that would help me in starting my open source journey. I went through many programs but most of them were closed at that time, except, Meshery in LFX. I thought, this is the only choice I have, let's do it, I had nothing to lose. I applied for that program and as a prerequisite, I had to engage with the community. I looked at the community calendar and I saw that there was a newcomer's call that day and I attended it. I have never had such a warm welcome in any other communities. -

    On that day, I knew that this community is special and I should spend more time with it. I explored the projects and as usual, I felt intimidated, but this time, I had people, wonderful people to help me. I landed my first open source PR, which was a single line style change. But the encouragement and support I got from the community for that was so wonderful . I realised that this community is not just about building best quality products but also about building best quality human beings. It has been a roller coaster ride with Layer5 since then. I got so involved with the process that I had stopped caring about getting that internship. diff --git a/src/collections/blog/2021/2021-09-20-service-mesh-specifications-and-why-they-matter/index.mdx b/src/collections/blog/2021/2021-09-20-service-mesh-specifications-and-why-they-matter/index.mdx index ac39a5a4b275..833a698084d2 100644 --- a/src/collections/blog/2021/2021-09-20-service-mesh-specifications-and-why-they-matter/index.mdx +++ b/src/collections/blog/2021/2021-09-20-service-mesh-specifications-and-why-they-matter/index.mdx @@ -1,47 +1,50 @@ --- -title: "Service Mesh Specifications and Why They Matter" +title: 'Service Mesh Specifications and Why They Matter' date: 2021-09-20 10:30:05 -0530 author: Debopriya Bhattacharjee thumbnail: ./Cover-image.webp darkthumbnail: ./Cover-image.webp -category: "Service Mesh" +category: 'Service Mesh' tags: - - Projects - - Service Mesh Interface - - Service Mesh Performance + - Projects + - Service Mesh Interface + - Service Mesh Performance published: true resource: true type: Blog product: Service Mesh Performance --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; - -import Hamlet from "./Hamlet.webp"; -import Graph from "./Graph1.webp"; -import Bucket from "./Graph2.webp"; -import SMI from "./SMI-demo.webp"; -import SMP from "./SMP.webp"; -import Abstractions from "./abstractions.webp"; -import Journey from "./cloud-native-journey.webp"; -import Flowchart from "./flowchart.webp"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import Hamlet from './Hamlet.webp'; +import Graph from './Graph1.webp'; +import Bucket from './Graph2.webp'; +import SMI from './SMI-demo.webp'; +import SMP from './SMP.webp'; +import Abstractions from './abstractions.webp'; +import Journey from './cloud-native-journey.webp'; +import Flowchart from './flowchart.webp'; +import { Link } from 'gatsby';

    - Lee Calcote is an innovator, product and technology leader, active in the community as a Docker Captain, Cloud Native Ambassador and GSoC, GSoD, and Community Bridge Mentor. In this talk, he walked through service mesh specifications and why they matter in your deployment. - How many service mesh specifications do you know? He went through all of them. So, no worries if you're unfamiliar. + Lee Calcote is an innovator, product and + technology leader, active in the community as a Docker Captain, Cloud Native Ambassador and + GSoC, GSoD, and Community Bridge Mentor. In this talk, he walked through service mesh + specifications and why they matter in your deployment. How many service mesh specifications do + you know? He went through all of them. So, no worries if you're unfamiliar.

    -
    +
    {' '} ### Service Mesh Specifications: + abstractions -As the ubiquity of service meshes unfolds and they become a commonplace for any cloud native or edge environment, so does the need for vendor and technology-agnostic interfaces to interact with them. The Service Mesh Interface (SMI), the Service Mesh Performance (SMP), and Multi-Vendor Service Mesh Interoperation (Hamlet) are three open specifications solving the challenge of interoperability, workload and performance management between service meshes. +As the ubiquity of service meshes unfolds and they become a commonplace for any cloud native or edge environment, so does the need for vendor and technology-agnostic interfaces to interact with them. The Service Mesh Interface (SMI), the Service Mesh Performance (SMP), and Multi-Vendor Service Mesh Interoperation (Hamlet) are three open specifications solving the challenge of interoperability, workload and performance management between service meshes. Learn what makes each of them unique and why they are much needed. See each of these three specifications in action as we use Meshery, the open-source service mesh management plane to demonstrate the value and functionality of each service mesh abstraction, and the adherence of these specifications by Istio, Linkerd, Consul and other popular service meshes. @@ -54,47 +57,113 @@ The advent of cloud native was the popularization of containers. Thank you Docke Service meshes have become a hot topic in the last few years. They still continue to be, rightfully so, a very powerful piece of technology. “A lot of the power is yet to come from my perspective. For my part, I believe that there is a tomorrow in which data plane intelligence really matters. And matters about how people write cloud native applications.”, Lee emphasized. Not everyone quite understands the capabilities of meshes as they are promoted and spoken about today. So come along into the journey of service mesh. There are a number of service meshes out there. One of the community projects is to track the landscape of all of the meshes there are. There’s a lot to say about each of them, their architecture, and their working. Why are they made? Who are they focused on? What do they do? When did they come about? Why are some of them not here anymore? Why are we still seeing new ones? A lot of things to go through. You might be interested in any number of the details that the landscape tracks. -
    Be Aware, It's Meshy Out There!
    + +{' '} +
    Be Aware, It's Meshy Out There!
    ### Service Mesh Interface + smi-image
      -
    • Its goal and genesis were born inside of Kubernetes.
      • -
    • Being a specification that is native to Kubernetes, its focus is on lowest common denominator functionality.
      • -
    • The focus on bringing forth APIs that highlight and reinforce the most common use cases that service meshes are being used for currently
      • -
    • Leaves space and provides extensibility room for additional APIs to address other service mesh functionality as more people adopt and make use cases well known.
      • -
    • There are seven service meshes that claim compatibility with SMI. There's been a community effort, open-source effort to create service mesh conformance tests to assert whether or not a given service mesh is compatible with SMI
      • -
    • In order to facilitate those types of tests, you need to have a tool to provision a sample application on those services which will generate load and test whether traffic splitting behaves as expected or works with that service mesh implementation properly.
      • -
    • Then you need to be able to collect the results, guarantee the provenance of those results and publish them.
      • -
    • As a community, we turned to Meshery as the tool to implement SMI conformance and we have been working with the individual service meshes to validate their conformance.
      • -
    +
  • Its goal and genesis were born inside of Kubernetes.
    • +
  • + {' '} + Being a specification that is native to Kubernetes, its focus is on lowest common denominator + functionality. +
    • +
  • + {' '} + The focus on bringing forth APIs that highlight and reinforce the most common use cases that + service meshes are being used for currently +
    • +
  • + Leaves space and provides extensibility room for additional APIs to address other service mesh + functionality as more people adopt and make use cases well known. +
    • +
  • + There are seven service meshes that claim compatibility with SMI. There's been a community + effort, open-source effort to create service mesh conformance tests to assert whether or not a + given service mesh is compatible with SMI +
    • +
  • + {' '} + In order to facilitate those types of tests, you need to have a tool to provision a sample + application on those services which will generate load and test whether traffic splitting + behaves as expected or works with that service mesh implementation properly. +
    • +
  • + Then you need to be able to collect the results, guarantee the provenance of those results and + publish them. +
    • +
  • + {' '} + As a community, we turned to Meshery as the tool to implement{' '} + SMI conformance and we have been + working with the individual service meshes to validate their conformance.{' '} +
    • + Meshery
      -
    • We work on an open-source project called Meshery.
      • -
    • Meshery, the cloud native management plane, is the canonical implementation of the service mesh performance.
      • -
    • The management planes can do a number of things to help bridge the divide between other back-end systems and service meshes. They also help performance management, configuration management, making sure you are following best practices in your implementations by taking common patterns and applying them to your environment
      • +
    • + {' '} + We work on an open-source project called{' '} + Meshery. +
      • +
    • + {' '} + Meshery, the cloud native management plane, is the canonical implementation of the service mesh + performance. +
      • +
    • + The management planes can do a number of things to help bridge the divide between other back-end + systems and service meshes. They also help performance management, configuration management, + making sure you are following best practices in your implementations by taking common patterns + and applying them to your environment{' '} +
    Let's take a moment to demo what it looks like to validate conformance in SMI using Meshery. graph
      -
    • We need to spin up Meshery locally
      • -
    • We use mesheryctl as the command line interface to work with Meshery.
      • -
    • We can interact with a number of different service mesh. The service mesh we’re going to work with today is an Open service mesh (one of those 7 that is compatible with SMI). Let’s put it to the test.
      • -
    • We'll initiate SMI conformance
      • -
    • These tests go and do assertions across these different specifications. We’re looking at traffic access, traffic splitting, traffic specification. Meshery then collects these results and will eventually be publishing them in combination with the SMI project.
      • +
    • We need to spin up Meshery locally
      • +
    • We use mesheryctl as the command line interface to work with Meshery.
      • +
    • + {' '} + We can interact with a number of different service mesh. The service mesh we’re going to work + with today is an Open service mesh (one of those 7 that is compatible with SMI). Let’s put it to + the test. +
      • +
    • + {' '} + We'll initiate SMI conformance +
      • +
    • + These tests go and do assertions across these different specifications. We’re looking at traffic + access, traffic splitting, traffic specification. Meshery then collects these results and will + eventually be publishing them in combination with the SMI project. +
    ### Service Mesh Performance + smp-image
      -
    • Focused on describing and capturing the performance of a service mesh.
      • -
    • The overhead of the value is another way of looking at it and characterizing it.
      • -
    • Trying to characterize the performance of the infrastructure of a service mesh can be really difficult.
      • -
    • Considering the number of variables that you would have to track, how difficult it can be to have repeatable tests, and benchmark your environment, to track your history based on your environment, compare performance between other meshes people need.
      • -
    • SMP creates a standard way of capturing the performance of the mesh to help with these issues.
      • -
    • It's also the way in which you're configuring your control plan of your service mesh.
      • -
    +
  • Focused on describing and capturing the performance of a service mesh.
    • +
  • The overhead of the value is another way of looking at it and characterizing it.
    • +
  • + Trying to characterize the performance of the infrastructure of a service mesh can be really + difficult. +
    • +
  • + Considering the number of variables that you would have to track, how difficult it can be to + have repeatable tests, and benchmark your environment, to track your history based on your + environment, compare performance between other meshes people need. +
    • +
  • + SMP creates a standard way of capturing the performance of the mesh to help with these issues. +
    • +
  • It's also the way in which you're configuring your control plan of your service mesh.
    • +{' '} You might be using a client library to do some service mesh functionality. Maybe you're using those in combination with the service mesh. What costs more? What's more efficient? What's more powerful? Maybe you're using web assembly and filters there. These are all open questions that SMP assists in answering in your environment. You’d be surprised by some of the results of some tests that we have done and that the community has done in combination with a couple of universities and graduate students. @@ -117,29 +186,48 @@ Demonstration of the implementation of service mesh Performance:
  • You can also see that Meshery has the capability to search your environment, see what specifications are being used and what's the load on your Kubernetes.
  • Jump into the results Tab and see how we compare with these results.
  • You can click on the download. You will see that a yaml gets downloaded in which you can browse and see that the start time, load time, the performance latencies, the metrics are being captured.
    • - + ### Hamlet or Multi-vendor Service Mesh Interoperation + hamlet-image
    • Focus on service mesh federation
    • Specifies a set of API standards for enabling service mesh federation
      • -
    • Hamlet takes on a client-server architecture in which resources and services of one service mesh are discovered, registered and using a common format, information about them is exchanged between different service mesh.
      • -
    • Rules around authentication and authorization rules around which Services get exposed and to whom and who can communicate with them and whether or not they can do it securely. These are things that Hamlet addresses.
      • -
    • The specification currently consists of two APIs: +
    • + Hamlet takes on a client-server architecture in which resources and services of one service mesh + are discovered, registered and using a common format, information about them is exchanged + between different service mesh. +
      • +
    • + Rules around authentication and authorization rules around which Services get exposed and to + whom and who can communicate with them and whether or not they can do it securely. These are + things that Hamlet addresses. +
      • +
    • + The specification currently consists of two APIs:
        -
      • The Federated Resource Discovery API: API to authenticate and securely distribute resources between federated service meshes.
        • -
      • The Federated Service Discovery API: API to discover, reach, authenticate and securely communicate with federated services.
        • +
      • + The Federated Resource Discovery API: API to authenticate and securely + distribute resources between federated service meshes. +
        • +
      • + The Federated Service Discovery API: API to discover, reach, authenticate + and securely communicate with federated services. +
      • -
    • Part of the real power is the ability to overcome what are likely to be separate administrative domains. The intention here is to marry up connect two disparate service mesh deployments, those deployments might be of the same type, they might be of two different types.
      • +
    • + Part of the real power is the ability to overcome what are likely to be separate administrative + domains. The intention here is to marry up connect two disparate service mesh deployments, those + deployments might be of the same type, they might be of two different types. +
    In addition to SMI, SMP and Hamlet there has been an emergence of service mesh patterns, by which people are running and operating service meshes. There is a service mesh working group under CNCFs network that is helping identify those patterns of which there's a list right now unbeknownst to you. Reach out, join it, help us work through the 60 patterns that are defined right now. 30 of those are going into an O’Reilly book called Service Mesh Patterns. -Something that isn’t always obvious to folks is this piece of value that people get from a service mesh and actually from the specifications that we were just mentioning. It is the fact that teams are decoupled when you’re running a mesh. Developers get to iterate a bit independently of operators, and so do operators get to make changes to implement infrastructure to the way that applications behave independent of developers in the presence of a mesh. Both of these teams are significantly empowered. Everybody gets a piece of power when they deploy a mesh. - +Something that isn’t always obvious to folks is this piece of value that people get from a service mesh and actually from the specifications that we were just mentioning. It is the fact that teams are decoupled when you’re running a mesh. Developers get to iterate a bit independently of operators, and so do operators get to make changes to implement infrastructure to the way that applications behave independent of developers in the presence of a mesh. Both of these teams are significantly empowered. Everybody gets a piece of power when they deploy a mesh. -_**P.S.: If these topics excite come and say "Hi" on our [Slack Channel](http://slack.layer5.io) and one of us will reach out to you!**_ +_**P.S.: If these topics excite come and say "Hi" on our [Slack Channel](http://slack.layer5.io) and one of us will reach out to you!**_ diff --git a/src/collections/blog/2021/2021-10-01-pipelining-service-mesh-specifications/index.mdx b/src/collections/blog/2021/2021-10-01-pipelining-service-mesh-specifications/index.mdx index 1307e932942c..61a328ba70d0 100644 --- a/src/collections/blog/2021/2021-10-01-pipelining-service-mesh-specifications/index.mdx +++ b/src/collections/blog/2021/2021-10-01-pipelining-service-mesh-specifications/index.mdx @@ -1,54 +1,106 @@ --- -title: "Pipelining Service Mesh Specifications" +title: 'Pipelining Service Mesh Specifications' subtitle: "Using SMI and SMP specs on your CI/CD pipelines with Meshery's GitHub Actions" date: 2021-11-09 10:30:05 -0530 author: Layer5 Team thumbnail: ./service-mesh-specifications.webp darkthumbnail: ./service-mesh-specifications.webp -category: "Service Mesh" +category: 'Service Mesh' tags: - - Service Mesh Interface - - Service Mesh Performance - - Meshery + - Service Mesh Interface + - Service Mesh Performance + - Meshery published: true resource: true type: Blog product: Service Mesh Performance --- -import { Link } from "gatsby"; -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; -import token from "./download-token.webp"; -import perfdashboard from "./service-mesh-performance-profile-test-results.webp" -import smidashboard from "./smi-conformance-result.webp"; -import smpLogo from "../../../../assets/images/service-mesh-performance/horizontal/smp-dark-text-side.svg"; -import smiLogo from "../../../../assets/images/service-mesh-icons/service-mesh-interface/horizontal-stackedtext/color/servicemeshinterface-horizontal-stackedtext-color.svg"; -import githubBlack from "../../../../assets/images/socialIcons/github_black.svg"; +import { Link } from 'gatsby'; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import token from './download-token.webp'; +import perfdashboard from './service-mesh-performance-profile-test-results.webp'; +import smidashboard from './smi-conformance-result.webp'; +import smpLogo from '../../../../assets/images/service-mesh-performance/horizontal/smp-dark-text-side.svg'; +import smiLogo from '../../../../assets/images/service-mesh-icons/service-mesh-interface/horizontal-stackedtext/color/servicemeshinterface-horizontal-stackedtext-color.svg'; +import githubBlack from '../../../../assets/images/socialIcons/github_black.svg';

    With growing adoption of service meshes in cloud native environments, service mesh abstractions - service mesh-neutral specifications - have emerged. Service Mesh Performance and Service Mesh Interface are two open specifications that address the need for universal interfaces for interacting with and managing any type of service mesh. Let’s examine what each specification provides.

    -service mesh performance logo

    Service Mesh Performance standardizes service mesh value measurement, characterizing any deployment's performance by capturing the details of infrastructure capacity, service mesh configuration and workload metadata.

    - -service mesh interface logo

    Service Mesh Interface provides a standard interface for service meshes on Kubernetes. These (currently) four specfications offer a common denominator set of interfaces to support most common service mesh use cases and the flexibility to evolve to support new service mesh capabilities over time.

    - -

    As a service mesh agnostic tool that provides lifecycle and performance management of a large number of (10+) service meshes, Kubernetes applications, service mesh patterns and WebAssembly filters, Meshery is the ideal tool for the job when it comes to implementing these specifications.

    - -

    Meshery also comes with two new GitHub Actions that do exactly this. The Meshery SMI Conformance Action which validates SMI conformance in your pipeline and the Meshery SMP Action which runs SMP compatible performance benchmarks.

    +service mesh performance logo +

    + Service Mesh Performance standardizes service mesh value + measurement, characterizing any deployment's performance by capturing the details of + infrastructure capacity, service mesh configuration and workload metadata. +

    + +service mesh interface logo +

    + Service Mesh Interface provides a standard interface for service + meshes on Kubernetes. These (currently) four specfications offer a common denominator set of + interfaces to support most common service mesh use cases and the flexibility to evolve to support + new service mesh capabilities over time. +

    + +

    + As a service mesh agnostic tool that provides lifecycle and performance management of a large + number of (10+) service meshes, Kubernetes applications, service mesh patterns and WebAssembly + filters, Meshery is the ideal tool for the job when it comes to implementing these specifications. +

    + +

    + Meshery also comes with two new GitHub Actions that do exactly this. The{' '} + + Meshery SMI Conformance Action + {' '} + which{' '} + + validates SMI conformance + {' '} + in your pipeline and the{' '} + Meshery SMP Action which runs{' '} + + SMP compatible performance benchmarks + + . +

    But how do we use these actions? What do they offer? Let’s find out!

    Service Mesh Interface Conformance GitHub Action

    -

    Conformance of SMI specifications is defined as a series of test assertions. These test assertions are categorised by SMI specification (of which, there are currently four specifications) and comprise the complete suite of SMI conformance tests. Conformance requirements will change appropriately as each new version of the SMI spec is released. Refer to Meshery's documentation for details of how Meshery performs SMI conformance.

    +

    + Conformance of SMI specifications is defined as a series of test assertions. These test assertions + are categorised by SMI specification (of which, there are currently four specifications) and + comprise the complete suite of SMI conformance tests. Conformance requirements will change + appropriately as each new version of the SMI spec is released. Refer to Meshery's documentation + for details of how{' '} + + Meshery performs SMI conformance + + . +

    Using Meshery's SMI Conformance GitHub Action

    -

    The Service Mesh Interface Conformance GitHub Action is available in the GitHub Marketplace. You can configure this action to trigger with each of your releases, on every pull request. or any GitHub workflow trigger event.

    -

    An example of the action configuration which runs on every release is shown below. The action handles setting up a Kubernetes environment, deploying the service mesh (see supported service meshes), running the conformance tests and reporting back the results to the SMI Conformance dashboard in Meshery.

    +

    + The{' '} + + Service Mesh Interface Conformance GitHub Action + {' '} + is available in the GitHub Marketplace. You can configure this action to trigger with each of your + releases, on every pull request. or any GitHub workflow trigger event. +

    +

    + An example of the action configuration which runs on every release is shown below. The action + handles setting up a Kubernetes environment, deploying the service mesh (see supported service + meshes), running the conformance tests and reporting back the results to the SMI Conformance + dashboard in Meshery. +

    ```yaml name: SMI Conformance with Meshery @@ -62,7 +114,6 @@ jobs: name: SMI Conformance runs-on: ubuntu-latest steps: - - name: SMI conformance tests uses: layer5io/mesheryctl-smi-conformance-action@master with: @@ -71,7 +122,10 @@ jobs: mesh_deployed: false ``` -

    You can also bring in their own cluster with specific capabilities and with a service mesh already installed.

    +

    + You can also bring in their own cluster with specific capabilities and with a service mesh already + installed. +

    ```yaml name: SMI Conformance with Meshery @@ -85,7 +139,6 @@ jobs: name: SMI Conformance tests on master runs-on: ubuntu-latest steps: - - name: Deploy k8s-minikube uses: manusa/actions-setup-minikube@v2.4.1 with: @@ -95,12 +148,12 @@ jobs: - name: Install OSM run: | - curl -LO https://github.com/openservicemesh/osm/releases/download/v0.9.1/osm-v0.9.1-linux-amd64.tar.gz - tar -xzf osm-v0.9.1-linux-amd64.tar.gz - mkdir -p ~/osm/bin - mv ./linux-amd64/osm ~/osm/bin/osm-bin - PATH="$PATH:$HOME/osm/bin/" - osm-bin install --osm-namespace default + curl -LO https://github.com/openservicemesh/osm/releases/download/v0.9.1/osm-v0.9.1-linux-amd64.tar.gz + tar -xzf osm-v0.9.1-linux-amd64.tar.gz + mkdir -p ~/osm/bin + mv ./linux-amd64/osm ~/osm/bin/osm-bin + PATH="$PATH:$HOME/osm/bin/" + osm-bin install --osm-namespace default - name: SMI conformance tests uses: layer5io/mesheryctl-smi-conformance-action@master @@ -110,29 +163,61 @@ jobs: mesh_deployed: true ``` -

    You can download a token from Meshery and add it as a GitHub secret (in the example above, the secret is MESHERY_PROVIDER_TOKEN). After the test is run, you can view the results from the Service Mesh Interface dashboard in Meshery UI.

    - -

    smi conformance dashboard
    -Meshery's Service Mesh Interface Conformance Results

    - -

    Participating service mesh projects can also automatically report their conformance test results to the SMI Conformance dashboard

    +

    + You can download a token from Meshery and add it as a GitHub secret (in the example above, the + secret is MESHERY_PROVIDER_TOKEN). After the test is run, you can view the results + from the Service Mesh Interface dashboard in Meshery UI. +

    + +

    + smi conformance dashboard{' '} +
    + Meshery's Service Mesh Interface Conformance Results +

    + +

    + Participating service mesh projects can also{' '} + + automatically report their conformance test results + {' '} + to the SMI Conformance dashboard +

    Service Mesh Performance GitHub Action

    -

    Measuring and managing the performance of a service mesh is key to efficient operation of any service mesh. Meshery is the canonical implementation of the Service Mesh Performance specification. You can choose from multiple load generators and use a highly configurable set of load profiles with variable tunable facets to run a performance test. Meshery packages all these features into an easy-to-use GitHub Action.

    +

    + Measuring and managing the performance of a service mesh is key to efficient operation of any + service mesh. Meshery is the canonical implementation of the Service Mesh Performance + specification. You can choose from multiple load generators and use a highly configurable set of + load profiles with variable tunable facets to run a performance test. Meshery packages all these + features into an easy-to-use GitHub Action. +

    Using Meshery's Service Mesh Performance GitHub Action

    -

    The Service Mesh Performance GitHub Action is available in the GitHub Marketplace.You can create your own performance profiles to run repeatable tests with Meshery. You can configure this action to trigger with each of your releases, on every pull request. or any GitHub workflow trigger event. A sample configuration of the action is shown below.

    +

    + The{' '} + + Service Mesh Performance GitHub Action + {' '} + is available in the GitHub Marketplace.You can create your own performance profiles to run + repeatable tests with Meshery. You can configure this action to trigger with each of your + releases, on every pull request. or any GitHub workflow trigger event. A sample configuration of + the action is shown below. +

    ```yaml name: Meshery SMP Action on: push: - branches: - 'master' + branches: 'master' jobs: performance-test: @@ -159,7 +244,10 @@ jobs: profile_name: soak-test ``` -

    You can also define your test configuration in an SMP compatible configuration file as shown below.

    +

    + You can also define your test configuration in an SMP compatible configuration file as shown + below. +

    ```yaml smp_version: v0.0.1 @@ -167,25 +255,36 @@ id: name: Istio Performance Test labels: {} clients: -- internal: false - load_generator: fortio - protocol: 1 - connections: 2 - rps: 10 - headers: {} - cookies: {} - body: "" - content_type: "" - endpoint_urls: - - http://localhost:2323/productpage -duration: "30m" + - internal: false + load_generator: fortio + protocol: 1 + connections: 2 + rps: 10 + headers: {} + cookies: {} + body: '' + content_type: '' + endpoint_urls: + - http://localhost:2323/productpage +duration: '30m' ``` -

    See this sample GitHub workflow (action.yml) for more configuration details.

    +

    + See this sample GitHub workflow ( + action.yml) + for more configuration details. +

    performance management dashboard -

    The results from the tests are updated on the Performance Management dashboard in Meshery. To learn more about interpreting the test results, check out this guide. You can always checkout the Meshery User Guides to dive deep into these features.

    +

    + The results from the tests are updated on the Performance Management dashboard in Meshery. To + learn more about interpreting the test results, check out{' '} + this guide. You + can always checkout the Meshery User Guides to dive + deep into these features. +

    Stay meshy! +     diff --git a/src/collections/blog/2021/2021-10-04-ccoss-meshery-event/index.mdx b/src/collections/blog/2021/2021-10-04-ccoss-meshery-event/index.mdx index e091d65ce816..3f09775ba7ff 100644 --- a/src/collections/blog/2021/2021-10-04-ccoss-meshery-event/index.mdx +++ b/src/collections/blog/2021/2021-10-04-ccoss-meshery-event/index.mdx @@ -1,6 +1,6 @@ --- -title: "Meshery Workshop at CCOSS 2021" -subtitle: "Announcing the participation of the Meshery project in CCOSS 2021 event" +title: 'Meshery Workshop at CCOSS 2021' +subtitle: 'Announcing the participation of the Meshery project in CCOSS 2021 event' date: 2021-10-04 11:10:00 +0000 author: Rodolfo Martinez Vega thumbnail: ./ccoss-open-source.webp @@ -12,23 +12,32 @@ tags: published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import { Link } from "gatsby"; -import meshery from "./meshery-logo-light-text.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import { Link } from 'gatsby'; +import meshery from './meshery-logo-light-text.webp';

    October 04 to 09, 2021

    CCOSS is an Open Source Software Contributor Summit that focuses on promoting and increasing the contributions from people and organizations to Open Source in Latin America. This event will happen online from October 4th to 9th.

    -

    Meshery will be participating as a project in a workshop where attendees will contribute to Documentation, Tests, and more. It’s a good opportunity to learn how to contribute to Open Source supported by the community. To participate you can register here.

    +

    + Meshery will be participating as a + project in a workshop{' '} + where attendees will contribute to Documentation, Tests, and more. It’s a good opportunity to + learn how to contribute to Open Source supported by the community. To participate you can register{' '} + here. +

    Speakers:

    -
  • Rodolfo Martinez Vega
    • -
  • Alonso López Romo
    • - +
  • + Rodolfo Martinez Vega +
    • +
  • + Alonso López Romo +

    • We hope to see you at CCOSS Meshery contribution workshop 2021. Be sure to say hello in the Layer5 Community!

    -     \ No newline at end of file + diff --git a/src/collections/blog/2021/2021-10-09-an-introduction-to-meshery/index.mdx b/src/collections/blog/2021/2021-10-09-an-introduction-to-meshery/index.mdx index 2e1290aef0d2..683b387f132d 100644 --- a/src/collections/blog/2021/2021-10-09-an-introduction-to-meshery/index.mdx +++ b/src/collections/blog/2021/2021-10-09-an-introduction-to-meshery/index.mdx @@ -1,10 +1,10 @@ --- -title: "An Introduction to Meshery (Webinar-on-Demand) " +title: 'An Introduction to Meshery (Webinar-on-Demand) ' date: 2021-10-09 10:30:05 -0530 author: Debopriya Bhattacharjee thumbnail: ./meshery-webinar.webp darkthumbnail: ./meshery-webinar.webp -category: "Meshery" +category: 'Meshery' tags: - Projects - Meshery @@ -14,53 +14,53 @@ type: Blog product: Meshery --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; -import MeshManager from "./mesh-manager.webp"; -import MesheryClients from "./meshery-clients.webp"; -import Mesheryfeatures from "./meshery-features.webp"; -import MesheryDeployments from "./meshery-deployment.webp"; -import Nighthawk from "./nighthawk.webp"; -import Patterns from "./patterns.webp"; -import ServiceMeshPatterns from "./service-mesh-patterns.webp"; -import Planes from "./planes.webp"; -import Mesheryoperatoricon from "../../../../assets/images/meshery-operator/meshery-operator.svg"; -import MesheryLogo from "../../../../assets/images/meshery/icon-only/meshery-logo-light.svg"; -import NighthawkIcon from "../../../../assets/images/nighthawk/icon-only/SVG/nighthawk-logo.svg"; -import PatternsLogo from "./patterns-logo.webp"; -import { Link } from "gatsby"; +import MeshManager from './mesh-manager.webp'; +import MesheryClients from './meshery-clients.webp'; +import Mesheryfeatures from './meshery-features.webp'; +import MesheryDeployments from './meshery-deployment.webp'; +import Nighthawk from './nighthawk.webp'; +import Patterns from './patterns.webp'; +import ServiceMeshPatterns from './service-mesh-patterns.webp'; +import Planes from './planes.webp'; +import Mesheryoperatoricon from '../../../../assets/images/meshery-operator/meshery-operator.svg'; +import MesheryLogo from '../../../../assets/images/meshery/icon-only/meshery-logo-light.svg'; +import NighthawkIcon from '../../../../assets/images/nighthawk/icon-only/SVG/nighthawk-logo.svg'; +import PatternsLogo from './patterns-logo.webp'; +import { Link } from 'gatsby';

    - Meshery is the open-source, collaborative cloud native manager that can - configure 230+ Kuberentes infrasturcture operators different service meshes, onboard your applications, manage WebAssembly filters, apply cloud native patterns, validate against best practices, and benchmarks the performance of your cloud native deployments. Let’s learn how to manage cloud native infrastructure with confidence with Meshery.{" "} + Meshery is the open-source, collaborative cloud native manager that can configure 230+ + Kuberentes infrasturcture operators different service meshes, onboard your applications, manage + WebAssembly filters, apply cloud native patterns, validate against best practices, and + benchmarks the performance of your cloud native deployments. Let’s learn how to manage cloud + native infrastructure with confidence with Meshery.{' '}

    Network Planes

    network-planes

    - As we unfold what a management plane is, it would serve us well to talk about - network planes in this regard. Architecturally, a service mesh consists of two - planes. One of those is the data plane, while the other one is the control - plane. A service mesh data plane is the collection of intelligent proxies that - operate in unison under the coordination of the control plane. The control - plane performs configuration management of these intelligent proxies. + As we unfold what a management plane is, it would serve us well to talk about network planes in + this regard. Architecturally, a service mesh consists of two planes. One of those is the data + plane, while the other one is the control plane. A service mesh data plane is the collection of + intelligent proxies that operate in unison under the coordination of the control plane. The + control plane performs configuration management of these intelligent proxies.

    - A management plane can do many things. Essentially, a management plane helps - you integrate service meshes into your backend systems. A robust management - plane allows you to take full advantage of the power of the network while - integrating your service delivery processes seamlessly. Your management plane - might federate different types of service meshes, help you instigate chaos - through controlled experiments, or offer automated traffic splitting in order - to execute different styles of canarying of your applications. Your management - plane might offer deep insights into the performance of your applications and - to the performance of your infrastructure or might deliver a change in - management framework. + A management plane can do many things. Essentially, a management plane helps you integrate service + meshes into your backend systems. A robust management plane allows you to take full advantage of + the power of the network while integrating your service delivery processes seamlessly. Your + management plane might federate different types of service meshes, help you instigate chaos + through controlled experiments, or offer automated traffic splitting in order to execute different + styles of canarying of your applications. Your management plane might offer deep insights into the + performance of your applications and to the performance of your infrastructure or might deliver a + change in management framework.

    @@ -71,44 +71,33 @@ import { Link } from "gatsby"; height="35rem" width="35rem" style="padding-bottom:5px;padding-top:auto;" - />{" "} + />{' '} Meshery

    -mesh-manager +mesh-manager

    - Meshery manages the - lifecycle of service meshes. Meshery does workload management, helps you - onboard or offboard your applications onto the mesh. It also lets you do - performance management.{" "} - MeshSync, - a custom controller within{" "} - - Meshery operator - - , performs discovery of existing service meshes and deep fingerprinting of the - specific functions that version of your service mesh is capable of performing. - Through MeshSync, Meshery supports brownfield deployments of your service meshes - (Meshery discovers your existing service mesh deployment that is already running - inside your cluster(s) whether those service meshes were deployed by Meshery or - not){" "} + Meshery manages the lifecycle of service + meshes. Meshery does workload management, helps you onboard or offboard your applications onto the + mesh. It also lets you do performance management.{' '} + MeshSync, a custom controller + within Meshery operator, + performs discovery of existing service meshes and deep fingerprinting of the specific functions + that version of your service mesh is capable of performing. Through MeshSync, Meshery supports + brownfield deployments of your service meshes (Meshery discovers your existing service mesh + deployment that is already running inside your cluster(s) whether those service meshes were + deployed by Meshery or not){' '}

    - In order to facilitate such a deep level of understanding of each type of - service mesh, Meshery has - adapters that are specific to each service mesh (given that each service mesh - has its own set of features). Consequently, in order to leverage the maximum - functionality of each service mesh, Meshery has separate, dedicated adapter - for each of the{" "} + In order to facilitate such a deep level of understanding of each type of service mesh,{' '} + Meshery has adapters that are specific to each + service mesh (given that each service mesh has its own set of features). Consequently, in order to + leverage the maximum functionality of each service mesh, Meshery has separate, dedicated adapter + for each of the{' '} supported service meshes - :{" "} + :{' '}

    @@ -137,9 +126,7 @@ import { Link } from "gatsby"; @@ -147,7 +134,7 @@ import { Link } from "gatsby"; @@ -211,31 +198,24 @@ import { Link } from "gatsby";
    - - Meshery Adapter for Kuma - + Meshery Adapter for Kuma stable
    Meshery Adapter for Linkerd - {" "} + {' '} stable

    - Meshery also lets you - integrate your Prometheus and Grafana add-ons so you can import your existing - Grafana dashboards to Meshery. When you first start Meshery, we also have a - configuration wizard, which basically walks you through the entire setup to - get Meshery up and running. By the end of this, it will make sure that you - have Meshery running on your cluster. + Meshery also lets you integrate your Prometheus + and Grafana add-ons so you can import your existing Grafana dashboards to Meshery. When you first + start Meshery, we also have a configuration wizard, which basically walks you through the entire + setup to get Meshery up and running. By the end of this, it will make sure that you have Meshery + running on your cluster.

    -meshery-deployment +meshery-deployment

    - If you want a more finer configuration, you can configure your environment - through settings and you can configure service meshes, and you can configure - the metrics, you can define your performance tests to be reused. + If you want a more finer configuration, you can configure your environment through settings and + you can configure service meshes, and you can configure the metrics, you can define your + performance tests to be reused.

    - For configuration management,{" "} - Meshery will analyze your - runtime environment for certain service meshes and tell you if you're doing - things right or not. What you can do is you can upload your applications - directly into Meshery, edit them in the Meshery UI itself and actually apply - these applications or onboard these applications on your service mesh. + For configuration management, Meshery will + analyze your runtime environment for certain service meshes and tell you if you're doing things + right or not. What you can do is you can upload your applications directly into Meshery, edit them + in the Meshery UI itself and actually apply these applications or onboard these applications on + your service mesh.

    @@ -246,47 +226,36 @@ import { Link } from "gatsby"; height="32rem" width="32rem" style="padding-bottom:5px;padding-top:auto;" - />{" "} + />{' '} Meshery Operator

    -Meshery-features +Meshery-features

    - - Meshery operator - {" "} - is a custom controller called MeshSync. MeshSync helps keep Meshery apprised - of the various changes that are going on to the service meshes and various - changes that are happening within Kubernetes itself. In this way Meshery - supports not only greenfield deployments like deploying service meshes itself, - it also supports connecting to existing service mesh deployments, that is, - brownfield deployment. So it will discover your existing deployments as well. + Meshery operator is a custom + controller called MeshSync. MeshSync helps keep Meshery apprised of the various changes that are + going on to the service meshes and various changes that are happening within Kubernetes itself. In + this way Meshery supports not only greenfield deployments like deploying service meshes itself, it + also supports connecting to existing service mesh deployments, that is, brownfield deployment. So + it will discover your existing deployments as well.

    - There's an extensible concept in Meshery called a{" "} - provider. - Providers can typically offer a layer of persistence so to the extent that - users are running performance tests intensely or to the extent that users want - to have a particular type of directory integrated to bring their own identity - to Meshery and have a multi-user experience. The other area of extensibility - is the notion that Meshery has a couple of APIs both – rest API and graphql - API. It comes with a command-line interface as well as a user interface.{" "} + There's an extensible concept in Meshery called a{' '} + provider. Providers can typically + offer a layer of persistence so to the extent that users are running performance tests intensely + or to the extent that users want to have a particular type of directory integrated to bring their + own identity to Meshery and have a multi-user experience. The other area of extensibility is the + notion that Meshery has a couple of APIs both – rest API and graphql API. It comes with a + command-line interface as well as a user interface.{' '}

    Layer5 MeshMap

    - Another capability of Meshery that is going to be released in the upcoming - version is visually configuring your service mesh using MeshMap. You can add - filters, applications as well as make other configurations visually here and - you can export it as patterns to make it reusable quite easily. It - automatically figures out the sample application we have deployed, then - generates a visual representation. It provides users the ability to design - service meshes, service mesh configuration, and the applications that run on - it. + Another capability of Meshery that is going to be released in the upcoming version is visually + configuring your service mesh using MeshMap. You can add filters, applications as well as make + other configurations visually here and you can export it as patterns to make it reusable quite + easily. It automatically figures out the sample application we have deployed, then generates a + visual representation. It provides users the ability to design service meshes, service mesh + configuration, and the applications that run on it.

    Patterns @@ -298,33 +267,26 @@ import { Link } from "gatsby"; height="35rem" width="32rem" style="padding-bottom:5px;padding-top:auto;" - />{" "} + />{' '} Patterns

    - {" "} - A pattern is capable of describing the deployment of any of the meshes that Meshery - supports as well as the configuration of the mesh. It also notes ongoing behavior - so if you wanted to run a canary you can describe that in a pattern. So, patterns - are like a template, they're customizable and ingestible into Meshery itself. + {' '} + A pattern is capable of describing the deployment of any of the meshes that Meshery supports as + well as the configuration of the mesh. It also notes ongoing behavior so if you wanted to run a + canary you can describe that in a pattern. So, patterns are like a template, they're customizable + and ingestible into Meshery itself.

    -Service-Mesh-Patterns +Service-Mesh-Patterns

    - Meshery will take action based on what you've described in the pattern, things - like generating or running a performance test, generating load, and then doing - statistical analysis on that set of results. In the future, if you want to - deploy a web assembly filter, you can describe that in a pattern as well and - have Meshery apply it. The patterns are service mesh agnostic, they're - reusable and the initial set of them is being stored in a public-facing - repository. There are almost 60 patterns that have been identified. - Ultimately, it will allow you to ingest these and measure then orchestrate and - apply them to your infrastructure. You can also use Meshery to visually - represent them and to visually design. + Meshery will take action based on what you've described in the pattern, things like generating or + running a performance test, generating load, and then doing statistical analysis on that set of + results. In the future, if you want to deploy a web assembly filter, you can describe that in a + pattern as well and have Meshery apply it. The patterns are service mesh agnostic, they're + reusable and the initial set of them is being stored in a public-facing repository. There are + almost 60 patterns that have been identified. Ultimately, it will allow you to ingest these and + measure then orchestrate and apply them to your infrastructure. You can also use Meshery to + visually represent them and to visually design.

    @@ -335,47 +297,41 @@ import { Link } from "gatsby"; height="35rem" width="35rem" style="padding-bottom:5px;padding-top:auto;" - />{" "} + />{' '} Nighthawk

    - There’s a project called Nighthawk that - helps advance the existing integration of nighthawk and Meshery. Nighthawk is - a load generator that is an envoy project. It's written in c plus plus and has - a couple of intriguing capabilities that are the ongoing study within - Nighthawk. There is an ongoing effort to take advantage of nighthawk’s - adaptive load controllers, add a couple of those in and expose them through - Meshery to let people recursively evaluate what is ultimately an optimal - configuration in your environment and the service mesh. + There’s a project called Nighthawk that helps advance the + existing integration of nighthawk and Meshery. Nighthawk is a load generator that is an envoy + project. It's written in c plus plus and has a couple of intriguing capabilities that are the + ongoing study within Nighthawk. There is an ongoing effort to take advantage of nighthawk’s + adaptive load controllers, add a couple of those in and expose them through Meshery to let people + recursively evaluate what is ultimately an optimal configuration in your environment and the + service mesh.

    Nighthawk

    - If you consider that you've got a certain SLO or a certain minimum latency - requirement that you need to stick to that but you also want to at the same - time maximize resiliency characteristics of your deployment, that can be a - difficult thing to figure out particularly if any of your infrastructure - changes: + If you consider that you've got a certain SLO or a certain minimum latency requirement that you + need to stick to that but you also want to at the same time maximize resiliency characteristics of + your deployment, that can be a difficult thing to figure out particularly if any of your + infrastructure changes:

    • if you add another node to your environment, your clusters,
    • if you upgrade your service mesh,
    • if you change the configuration of your service mesh,
      • -
    • - if you add another service to your set of workloads that you're running. -
      • +
    • if you add another service to your set of workloads that you're running.

    - If these factors change, so does the ability to run optimization routines. To - help you identify the optimal configuration of your mesh but in accordance - with your own constraints is again the study of{" "} - Nighthawk.{" "} + If these factors change, so does the ability to run optimization routines. To help you identify + the optimal configuration of your mesh but in accordance with your own constraints is again the + study of Nighthawk.{' '}

    - Check out the CNCF On-Demand Webinar:{" "} - Meshery - The Cloud Native - Manager to learn more! + Check out the CNCF On-Demand Webinar: Meshery - + The Cloud Native Manager to learn more!

    +
    diff --git a/src/collections/blog/2022/2022-01-14-open-source-journey-gaurav-chadha/index.mdx b/src/collections/blog/2022/2022-01-14-open-source-journey-gaurav-chadha/index.mdx index 93f7bb14ab52..5c24a52fa635 100644 --- a/src/collections/blog/2022/2022-01-14-open-source-journey-gaurav-chadha/index.mdx +++ b/src/collections/blog/2022/2022-01-14-open-source-journey-gaurav-chadha/index.mdx @@ -15,8 +15,8 @@ tags: published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Profile from "./Intern-profile.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import Profile from './Intern-profile.webp';

    @@ -40,42 +40,58 @@ Layer5 {" "} MeshMates and

    Way to my First Pull Request 🏁

    -I still remember at that time I was just a beginner with Git, HTML, CSS, and JavaScript and most of the issues on the repository were going over my head. -So I started with a very beginner-friendly issue about changing a background of a component and who would have thought this changing background issue will eventually change my life in open source. -Then I made my first ever pull request in Layer5 and that got merged! + I still remember at that time I was just a beginner with Git, HTML, CSS, and JavaScript and most + of the issues on the repository were going over my head. So I started with a very + beginner-friendly issue about changing a background of a component and who would have thought this + changing background issue will eventually change my life in open source. Then I made my first ever + pull request in Layer5 and that got merged!

    -Try out some good first issues here{""} Layer5 {""} ,Meshery💻 + Try out some good first issues here{''}{' '} + + Layer5 + {' '} + {''} , + + Meshery + + 💻

    From 1 Pull Request to 90+ Pull Requests Merged 🚀

    - After my first pull request got merged I really got pumped up with joy and told myself that I can do more. This journey of learning and pull requests was not at all easy for me, it took almost 9 months of continuous dedication and effort. There are many great folks I met here in the community, who helped me and taught me new interesting concepts. - A big thanks to all of them, this was not possible without their guidance and support. + After my first pull request got merged I really got pumped up with joy and told myself that I can + do more. This journey of learning and pull requests was not at all easy for me, it took almost 9 + months of continuous dedication and effort. There are many great folks I met here in the + community, who helped me and taught me new interesting concepts. A big thanks to all of them, this + was not possible without their guidance and support.

    Things I learned at Layer5

    - There are a variety of things I learned at Layer5 and a lot I'm learning currently. I gained much technical knowledge as well as soft skills in these 9 months. I spend most of my time working on the UI of Meshery and its various projects. - In terms of technical items I learned React, Docker, Kubernetes, new JavaScript concepts, etc. + There are a variety of things I learned at Layer5 and a lot I'm learning currently. I gained much + technical knowledge as well as soft skills in these 9 months. I spend most of my time working on + the UI of Meshery and its various projects. In terms of technical items I learned React, Docker, + Kubernetes, new JavaScript concepts, etc.

    - I would say Layer5 is the best in terms of work ethics, community management, a healthy work environment, and a lot more. - You can gain real-life working experience on such big projects and guidance related to your career. + I would say Layer5 is the best in terms of work ethics, community management, a healthy work + environment, and a lot more. You can gain real-life working experience on such big projects and + guidance related to your career.

    How I landed an internship at Layer5?

    - I gradually started learning about the project and made myself choose one area to start with and continued to explore further. I kept pushing myself with patience until I feel strong and capable enough to - take responsibilities and give my best to the community, Then I asked and applied for an internship and eventually, I got selected. + I gradually started learning about the project and made myself choose one area to start with and + continued to explore further. I kept pushing myself with patience until I feel strong and capable + enough to take responsibilities and give my best to the community, Then I asked and applied for an + internship and eventually, I got selected.

    Now I can make more impact and grow more under the right guidance.😃

    Apart from coding

    +

    Besides coding at Layer5, I made many new friends, great experiences, and memories.

    - Besides coding at Layer5, I made many new friends, great experiences, and memories. -

    -

    - At last, I would say, join this amazing community and experience the change in yourself. This will open the doors for opportunities for you. Just be tenacious and push yourself, that's all that I did. -

    -

    - Thank you + At last, I would say, join this amazing community and experience the change in yourself. This will + open the doors for opportunities for you. Just be tenacious and push yourself, that's all that I + did.

    +

    Thank you

     diff --git a/src/collections/blog/2022/2022-01-22-the-story-of-meshery-1000-stars/index.mdx b/src/collections/blog/2022/2022-01-22-the-story-of-meshery-1000-stars/index.mdx index e7e5391866a7..2decab68d4b8 100644 --- a/src/collections/blog/2022/2022-01-22-the-story-of-meshery-1000-stars/index.mdx +++ b/src/collections/blog/2022/2022-01-22-the-story-of-meshery-1000-stars/index.mdx @@ -1,12 +1,12 @@ --- title: "The Story of Meshery's 1,000 Stars" -subtitle: "A story about growing together as a community and building a project that matters" +subtitle: 'A story about growing together as a community and building a project that matters' date: 2022-01-26 10:30:05 -0530 author: Debopriya Bhattacharjee thumbnail: ./Meshery-Stars-cover.webp darkthumbnail: ./Meshery-Stars-cover.webp -category: "Announcements" -description: "Meshery has achieved yet another milestone! Our GitHub repository has surpassed a 1,000 stars." +category: 'Announcements' +description: 'Meshery has achieved yet another milestone! Our GitHub repository has surpassed a 1,000 stars.' tags: - Meshery type: Blog @@ -14,12 +14,12 @@ published: true featured: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; -import BlockquoteAlt from "../../../../reusecore/Blockquote/Blockquote-alt-style"; -import { Link } from "gatsby"; -import Stars from "./stars-forks.webp"; -import Slack from "./meshery-star-notifications.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import BlockquoteAlt from '../../../../reusecore/Blockquote/Blockquote-alt-style'; +import { Link } from 'gatsby'; +import Stars from './stars-forks.webp'; +import Slack from './meshery-star-notifications.webp';

    @@ -27,37 +27,34 @@ import Slack from "./meshery-star-notifications.webp";

    - As a project, Meshery is comprised of about 30 repositories, and so, in total, - the project has many more than a thousand stars. The rate by which Meshery is - accumulating stars only continues to accelerate and is a small moment of pride - recognized in the community Slack each time a star is added. As we hit the - 1,000+ stars milestone, let's pause to reflect on the project's incredible + As a project, Meshery is comprised of about 30 repositories, and so, in total, the project has + many more than a thousand stars. The rate by which Meshery is accumulating stars only continues to + accelerate and is a small moment of pride recognized in the community Slack each time a star is + added. As we hit the 1,000+ stars milestone, let's pause to reflect on the project's incredible journey since its inception.

    Why was Meshery created?

    - Meshery is an open source, vendor-neutral, extensible management plane that - enables service mesh users to overcome the challenges of complex virtual - networking,{" "} + Meshery is an open source, vendor-neutral, extensible management plane that enables service mesh + users to overcome the challenges of complex virtual networking,{' '}

    {" "} - empowers them to design and apply patterns containing tried and true best - practices, and enables developers, operators, and product managers to - understand and manage their cloud native services with confidence. Meshery is - the only openly-governed service mesh manager. Given its ability to deeply - manage Kubernetes, its workloads, and any service mesh, and the highly - configurable way in which users can load a variety of plugins, the project has - certainly earned its title as the extensible service mesh manager. + />{' '} + empowers them to design and apply patterns containing tried and true best practices, and enables + developers, operators, and product managers to understand and manage their cloud native services + with confidence. Meshery is the only openly-governed service mesh manager. Given its ability to + deeply manage Kubernetes, its workloads, and any service mesh, and the highly configurable way in + which users can load a variety of plugins, the project has certainly earned its title as the{' '} + extensible service mesh manager.

    - Within just a year of its creation,{" "} + Within just a year of its creation,{' '} Meshery lands in the CNCF Landscape @@ -70,23 +67,21 @@ import Slack from "./meshery-star-notifications.webp"; person="Anton Weiss, Founder and CEO, Otomato" />

    - Not long after, Meshery was{" "} + Not long after, Meshery was{' '} adopted by the CNCF - {" "} - in October 2021. With its natural step into the Cloud Native Computing - Foundation, the contributor community and Meshery's functionality maintains - steadfast in their rate of growth and use. With continuous improvements in the - architecture, user experience and in other features regulated by inclusive - monitoring, the project is gaining traction very quickly. + {' '} + in October 2021. With its natural step into the Cloud Native Computing Foundation, the contributor + community and Meshery's functionality maintains steadfast in their rate of growth and use. With + continuous improvements in the architecture, user experience and in other features regulated by + inclusive monitoring, the project is gaining traction very quickly.

    Engagement in the community is on the rise!

    - It isn't just the number of stars that has grown. We've seen a surge of new - contributors, maintainers, new features, commits, PRs, releases, and so much - more! How do we assess the impact of Meshery? Here are some statistics on how - we track our engagement: + It isn't just the number of stars that has grown. We've seen a surge of new contributors, + maintainers, new features, commits, PRs, releases, and so much more! How do we assess the impact + of Meshery? Here are some statistics on how we track our engagement:

      @@ -101,8 +96,8 @@ import Slack from "./meshery-star-notifications.webp";
    • In the last 12 months, we had 341 contributors with 291 new.
    • - Number of PR's merged in the last 12 months is 2108. Our count of PR’s - merged is more than that of 106 CNCF hosted projects. + Number of PR's merged in the last 12 months is 2108. Our count of PR’s merged is more than that + of 106 CNCF hosted projects.
    @@ -112,8 +107,8 @@ import Slack from "./meshery-star-notifications.webp"; alt="Meshery Stars and Forks Graph" />

    - Note: These metrics and reports were obtained from DevStats, a CNCF-created - tool for analyzing and graphing developer contributions. + Note: These metrics and reports were obtained from DevStats, a CNCF-created tool for analyzing and + graphing developer contributions.

    Latest Meshery Features

    - Meshery v0.6.0 will release soon, jam-packed full of major new features. Final - release candidate, Meshery v0.6.0-rc-4, available today, so you can take - advantage of Meshery's new functionality now: + Meshery v0.6.0 will release soon, jam-packed full of major new features. Final release candidate, + Meshery v0.6.0-rc-4, available today, so you can take advantage of Meshery's new functionality + now:

    • Manage Kubernetes Workloads (Applications)
    • Manage WASM filters
    • - Manage{" "} - - Service Mesh Patterns - + Manage Service Mesh Patterns
    • - MeshMap: Visualize - service mesh deployments + MeshMap: Visualize service mesh deployments
    • - Enhanced service mesh discovery in{" "} + Enhanced service mesh discovery in{' '} Meshery Operator and Meshsync @@ -151,9 +142,8 @@ import Slack from "./meshery-star-notifications.webp";

    - Last, but not least is the announcement of MeshMap's beta release! The waiting - list is filling up fast, so I recommend{" "} - signing up for access now! + Last, but not least is the announcement of MeshMap's beta release! The waiting list is filling up + fast, so I recommend signing up for access now!

    diff --git a/src/collections/blog/2022/2022-02-25-layer5-collab-with-openforce/index.mdx b/src/collections/blog/2022/2022-02-25-layer5-collab-with-openforce/index.mdx index 2b7a682d53f0..fc5542d17ab0 100644 --- a/src/collections/blog/2022/2022-02-25-layer5-collab-with-openforce/index.mdx +++ b/src/collections/blog/2022/2022-02-25-layer5-collab-with-openforce/index.mdx @@ -1,40 +1,48 @@ --- -title: "Layer5 collaboration with OpenForce 2022" -date: 2022-02-25 +title: 'Layer5 collaboration with OpenForce 2022' +date: 2022-02-25 author: Shebeul Inyang thumbnail: ./thumbnail.webp darkthumbnail: ./thumbnail.webp -category: "Community" +category: 'Community' tags: - - Community - - Events - - Open Source + - Community + - Events + - Open Source published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Profile from "./thumbnail.webp"; + +import { BlogWrapper } from '../../Blog.style.js'; +import Profile from './thumbnail.webp'; profile-img

    Layer5 collaboration with OpenForce 2022

    -Great News!🎉🎉 -OpenForce2022 by CodeFlow is here! And Layer5 is joining forces with other open source organizations to make it an unforgettable experience. -OpenForce 2022 is a place where contributors can meet mentors from open source organizations and contribute to projects under guidance, network with project maintainers, and “bring the open source culture” with great enthusiasm. + Great News!🎉🎉 OpenForce2022 by CodeFlow is here! And Layer5 is joining forces with other open + source organizations to make it an unforgettable experience. OpenForce 2022 is a place where + contributors can meet mentors from open source organizations and contribute to projects under + guidance, network with project maintainers, and “bring the open source culture” with great + enthusiasm.

    What Layer5 will do?

    -During the program, Layer5 as an open source organization will provide OpenForce specific issues which participants can resolve during the contribution period. In addition, there will be a panel of mentors assigned to assist contributors to overcome any challenges they might face. -Beyond the direct support offered by Layer5 mentors, program participants will have an amazing networking opportunity to connect with the broader set of community members at Layer5. This event will kick-off virtually from March 3rd to March 28th, 2022. + During the program, Layer5 as an open source organization will provide OpenForce specific issues + which participants can resolve during the contribution period. In addition, there will be a panel + of mentors assigned to assist contributors to overcome any challenges they might face. Beyond the + direct support offered by Layer5 mentors, program participants will have an amazing networking + opportunity to connect with the broader set of community members at Layer5. This event will + kick-off virtually from March 3rd to March 28th, 2022.

    CodeFlow

    -The program is organized by CodeFlow, an organization whose main motive is to empower the student community by organizing webinars, hackathons, and open source events, providing them with the best learning environment and helping them gain the principal knowledge about the fast-paced, open source ecosystem. What a great learning opportunity this would prove to be as ‘open source meets its contributor force’ at OpenForce 2022! Come be a part of this amazing initiative. -

    -

    -Layer5 is an amazing and welcoming community. + The program is organized by CodeFlow, an organization whose main motive is to empower the student + community by organizing webinars, hackathons, and open source events, providing them with the best + learning environment and helping them gain the principal knowledge about the fast-paced, open + source ecosystem. What a great learning opportunity this would prove to be as ‘open source meets + its contributor force’ at OpenForce 2022! Come be a part of this amazing initiative.

    +

    Layer5 is an amazing and welcoming community.

     - diff --git a/src/collections/blog/2022/2022-04-01-she-code-africa-contributhon/index.mdx b/src/collections/blog/2022/2022-04-01-she-code-africa-contributhon/index.mdx index 59b9dc96b0cf..4d1bd41c9885 100644 --- a/src/collections/blog/2022/2022-04-01-she-code-africa-contributhon/index.mdx +++ b/src/collections/blog/2022/2022-04-01-she-code-africa-contributhon/index.mdx @@ -6,49 +6,89 @@ thumbnail: ./layer5-contributhon-banner.webp darkthumbnail: ./layer5-contributhon-banner.webp category: Community tags: - - Community - - Events - - MeshMate + - Community + - Events + - MeshMate published: true --- -import { Link } from "gatsby"; +import { Link } from 'gatsby'; - -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js'; -

    - The Contributhon Program is organized by She Code Africa, a non-profit organization focused on celebrating and empowering young Girls and Women in Technology across Africa. They provide support through diverse offline and online communities, resources, mentorship, and organize amazing programs and initiatives to always keep members or participants engaged. -

    - -

    - The Contributhon Program is a virtual open-source Bootcamp focused on building more women open-source contributors & creating more diversity in the African open source ecosystem. During this Bootcamp, participants work with an open-source organization on a project for the period of 8 weeks with the help of organization mentors. -

    - -

    - At the end of the Bootcamp, participants get rewarded a stipend of $500 upon successful project completion. -

    - -

    - Layer5 is participating as a mentoring organization and will be working directly with the program participants during the Bootcamp to help ensure that the project is completed successfully. -

    - -

    - At Layer5 we use Layer5 Community Forum for discussions in the community, this platform is active and it is easy to miss out on questions answered or important information. For this project, we want to create a leaderboard to show the most active participants based on helpful answers, questions asked, and more. -

    - -

    - Our selected mentors, Ekene Leonard Nwobodo, Yash Kamboj, Etiene James, Raj Gaurav Maurya and Kunal Verma who are trusted, capable, and qualified will guide participants Oyindamola Dawodu and Ednah Akoth throughout the duration of this Bootcamp, help them become a part of the community, teach them how to stay motivated and productive, show them how to solve technical problems, and also give constructive feedback as they keep track of the participants progress -

    - -

    - The She Code Africa hosts their Contributhon as an Africa-wide open source boot camp focused on building more women OSS contributors & creating more diversity in the African open source ecosystem by matching African women in technology with sponsors and mentors from Open Source organizations. During this boot camp, participants work with an open source organisation on a project for 4 weeks with the help of organisation mentors and get rewarded at the end of the boot camp upon successful project completion. -

    - -

    - This program kicks off virtually from April 1, 2022, to May 28, 2022. -

    +{' '} +

    + The Contributhon Program is organized by She Code Africa, a non-profit organization focused on + celebrating and empowering young Girls and Women in Technology across Africa. They provide support + through diverse offline and online communities, resources, mentorship, and organize amazing + programs and initiatives to always keep members or participants engaged. +

    +

    + The{' '} + + Contributhon Program + {' '} + is a virtual open-source Bootcamp focused on building more women open-source contributors & + creating more diversity in the African open source ecosystem. During this Bootcamp, participants + work with an open-source organization on a project for the period of 8 weeks with the help of + organization mentors. +

    + +{' '} +

    + At the end of the Bootcamp, participants get rewarded a stipend of $500 upon successful project + completion. +

    + +{' '} +

    + + Layer5 + {' '} + is participating as a mentoring organization and will be working directly with the program + participants during the Bootcamp to help ensure that the project is completed successfully. +

    + +{' '} +

    + At Layer5 we use{' '} + + Layer5 Community Forum + {' '} + for discussions in the community, this platform is active and it is easy to miss out on questions + answered or important information. For this project, we want to create a leaderboard to show the + most active participants based on helpful answers, questions asked, and more. +

    + +{' '} +

    + Our selected mentors, Ekene Leonard Nwobodo, Yash Kamboj,{' '} + Etiene James, Raj Gaurav Maurya and Kunal Verma{' '} + who are trusted, capable, and qualified will guide participants{' '} + Oyindamola Dawodu and{' '} + Ednah Akoth throughout the duration of this Bootcamp, + help them become a part of the community, teach them how to stay motivated and productive, show + them how to solve technical problems, and also give constructive feedback as they keep track of + the participants progress +

    + +{' '} +

    + The{' '} + + She Code Africa + {' '} + hosts their Contributhon as an Africa-wide open source boot camp focused on building more women + OSS contributors & creating more diversity in the African open source ecosystem by matching + African women in technology with sponsors and mentors from Open Source organizations. During this + boot camp, participants work with an open source organisation on a project for 4 weeks with the + help of organisation mentors and get rewarded at the end of the boot camp upon successful project + completion. +

    + +{' '} +

    This program kicks off virtually from April 1, 2022, to May 28, 2022.

     diff --git a/src/collections/blog/2022/2022-05-10-dockercon-22-hashicorp-talk/index.mdx b/src/collections/blog/2022/2022-05-10-dockercon-22-hashicorp-talk/index.mdx index dfb689389a9b..1a1102e74e88 100644 --- a/src/collections/blog/2022/2022-05-10-dockercon-22-hashicorp-talk/index.mdx +++ b/src/collections/blog/2022/2022-05-10-dockercon-22-hashicorp-talk/index.mdx @@ -1,14 +1,14 @@ --- -title: "Extending the Docker Compose Experience to Service Mesh" +title: 'Extending the Docker Compose Experience to Service Mesh' date: 2022-05-10 10:30:05 -0530 author: Gaurav Chadha thumbnail: ./DC22-talk-HashiCorp.webp darkthumbnail: ./DC22-talk-HashiCorp.webp -description: "DockerCon 2022 talk with HashiCorp and MeshMap Demo" -category: "Docker" +description: 'DockerCon 2022 talk with HashiCorp and MeshMap Demo' +category: 'Docker' tags: - - Docker - - Meshery + - Docker + - Meshery published: true resource: true type: Blog @@ -17,10 +17,10 @@ product: Docker Extension featured: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; -import slidesTAG from "../../../events/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import slidesTAG from '../../../events/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf'; +import { Link } from 'gatsby'; import DDE from './docker-extension-meshery.webp'; import developer from './developers-need.webp'; import dashboard from './dashboard.webp'; @@ -30,64 +30,101 @@ import visualizer from './viz-1.webp';
    -

    - Lee Calcote and Nic Jackson gave a presentation entitled Extending the Docker Compose Experience to Service Mesh at DockerCon 2022. -

    +

    + Lee Calcote and{' '} + Nic Jackson gave a presentation entitled{' '} + Extending the Docker Compose Experience to Service Mesh at DockerCon 2022. +

    - The Meshery Docker Extension extends Docker Desktop's position as the cloud native developer's go-to Kubernetes environment with easy access to the next - layer of cloud native infrastructure: service meshes. + The Meshery Docker Extension extends Docker Desktop's + position as the cloud native developer's go-to Kubernetes environment with easy access to the next + layer of cloud native infrastructure: service meshes.

    - Lee Calcote is an innovative product and technology leader, passionate about empowering engineers and enabling organizations. As the founder and CEO of Layer5, he is at the forefront of the cloud native movement. - Nic Jackson is a developer advocate at HashiCorp, and the author of “Building Microservices in Go”, a book which examines the best patterns and practices for building microservices with the Go. Nic is also a coauthor of the Service Mesh Patterns book. + Lee Calcote is an innovative product and + technology leader, passionate about empowering engineers and enabling organizations. As the + founder and CEO of Layer5, he is at the forefront of the cloud native movement. + Nic Jackson is a developer advocate at + HashiCorp, and the author of “Building Microservices in Go”, a book which examines the best + patterns and practices for building microservices with the Go. Nic is also a coauthor of the + Service Mesh Patterns book.

    - Nic Jackson has been using Docker Desktop from long time and tells how Docker Desktop provides feasibility to run Kubernetes for his local environment, - while Lee Calcote recalls how Docker Desktop has become a staple of his daily routine while building an extension for Meshery. -

    - -

    -

    Discussing Developers need to access Service Mesh

    -Developers need to access service mesh + Nic Jackson has been using Docker Desktop from long time and tells how Docker Desktop provides + feasibility to run Kubernetes for his local environment, while Lee Calcote recalls how Docker + Desktop has become a staple of his daily routine while building an extension for Meshery.

    -Moving forward with the introduction to Docker Extension for Meshery, Nic says, "When it comes to Service Mesh, should developers care about Service Mesh? And the answer is Yes because developers need service mesh because of the changing reliability patterns implementation rapidly, it provides a tight feedback loop for developing and deploying workloads onto your service mesh and makes the over developer experience smooth. With the help of service, mesh developers should be able to create environments without needing to be operational experts." +

    Discussing Developers need to access Service Mesh

    + Developers need to access service mesh

    -

    Meshery Extension offers an easy single click button to go from Docker Compose to Kubernetes wih all cloud native infrastructure supported.

    -Docker Desktop Extension Meshery + Moving forward with the introduction to Docker Extension for Meshery, Nic says, "When it comes to + Service Mesh, should developers care about Service Mesh? And the answer is Yes because developers + need service mesh because of the changing reliability patterns implementation rapidly, it provides + a tight feedback loop for developing and deploying workloads onto your service mesh and makes the + over developer experience smooth. With the help of service, mesh developers should be able to + create environments without needing to be operational experts."

    +

    - The Docker Extension for Meshery provides: +

    + Meshery Extension offers an easy single click button to go from Docker Compose to Kubernetes wih + all cloud native infrastructure supported. +

    + Docker Desktop Extension Meshery

    +

    The Docker Extension for Meshery provides:

      -
    • Kubernetes support for your Docker Compose apps - Import your Docker Compose apps. Configure and deploy them to Kubernetes and integrate into your GitOps pipeline.
      • -
    • Collaborative designer for Docker Compose apps - Early access to the Docker Extension for Meshery that offers a visual topology for designing Docker Compose applications, operating Kubernetes, Kubernetes Operators, and their workloads.
      • -
    • Single-click deployment of your infrastructure - Support of 250+ different cloud native infrastructure projects (including all the CNCF projects) at the fingertips of developers in connection with Docker Desktop’s ability to deliver Kubernetes locally.
      • +
    • + Kubernetes support for your Docker Compose apps - Import your Docker Compose apps. Configure and + deploy them to Kubernetes and integrate into your GitOps pipeline. +
      • +
    • + Collaborative designer for Docker Compose apps - Early access to the Docker Extension for + Meshery that offers a visual topology for designing Docker Compose applications, operating + Kubernetes, Kubernetes Operators, and their workloads. +
      • +
    • + Single-click deployment of your infrastructure - Support of 250+ different cloud native + infrastructure projects (including all the CNCF projects) at the fingertips of developers in + connection with Docker Desktop’s ability to deliver Kubernetes locally. +

    - - Docker Desktop Extension Meshery Dashboard -

    + Docker Desktop Extension Meshery Dashboard +

    -

      +
      • - While giving the demo Meshery Lee explained how with Docker Desktop running and Meshery extension installed we can see that Meshery has discovered - the installed service mesh automatically and it performs action with the adapter present. + While giving the demo Meshery Lee explained how with Docker Desktop running and Meshery + extension installed we can see that Meshery has discovered the installed service mesh + automatically and it performs action with the adapter present.
      • - Meshery is a Kubernetes multi-cluster manager capable of performing lifecycle management of all CNCF projects, like Flux, Argo, Prometheus, Envoy, Jaeger, and so on. -
        • + Meshery is a Kubernetes multi-cluster manager capable of performing lifecycle management of + all CNCF projects, like Flux, Argo, Prometheus, Envoy, Jaeger, and so on. +
      • - We can configure different service mesh based on their configurations and performs actions such as deploy, design, and explore all of the capabilities of service mesh via a rich schema with a live preview. -
        • -
      + We can configure different service mesh based on their configurations and performs actions + such as deploy, design, and explore all of the capabilities of service mesh via a rich schema + with a live preview. + +

    @@ -97,7 +134,8 @@ Moving forward with the introduction to Docker Extension for Meshery, Nic says, MeshMap Designer MeshMap is the world's only visual designer for Kubernetes and all cloud native infrastructure. Collaborate with other engineers in real-time as you use MeshMap to design, deploy, and manage your Kubernetes-based deployments. Save time and use a design template. Take advantage of the best practices embedded in the patterns found in Meshery Catalog. MeshMap not only allows you to create and verify your cloud native application and infrastructure configurations, but to deploy and operate that infrastructure as well. - Lee demonstrated MeshMap Designer design capabilities using Consul Service Mesh as an eample and configures various Consul-specific features. He designs a service mesh deployment with application and Envoy filter from scratch. + Lee demonstrated MeshMap Designer design capabilities using Consul Service Mesh as an eample and configures various Consul-specific features. He designs a service mesh deployment with application and Envoy filter from scratch. +

    MeshMap Designer @@ -105,18 +143,32 @@ MeshMap is the world's only visual designer for Kubernetes and all cloud native

    - To Lee's demo, Nic also added in the context of developer experience that MeshMap also makes it easy to do the job and with Meshery extension it makes it super easy to write and configure code without being worried for the developer environment. -

    -

    - These Docker Extensions are so powerful that it allows you to do multiple tasks without leaving Docker Desktop. -

    + To Lee's demo, Nic also added in the context of developer experience that MeshMap also makes it + easy to do the job and with Meshery extension it makes it super easy to write and configure code + without being worried for the developer environment. +

    +

    + These Docker Extensions are so powerful that it allows you to do multiple tasks without leaving + Docker Desktop. +

    - +
    -

    Lee Calcote and Nic Jackson packed a great deal of information in this talk. Find the recording below. The Meshery Extension is now out! Try now, and Share your Experience -Apply for MeshMap Beta Program +

    + + Lee Calcote and Nic Jackson packed a great deal of information in this talk. Find the recording + below. The Meshery Extension is now out! Try now, and Share your Experience{' '} + + Apply for MeshMap Beta Program

    diff --git a/src/collections/blog/2022/2022-05-10-dockercon-22-hpe-talk/index.mdx b/src/collections/blog/2022/2022-05-10-dockercon-22-hpe-talk/index.mdx index 05363de9f1f2..b10f25907c6e 100644 --- a/src/collections/blog/2022/2022-05-10-dockercon-22-hpe-talk/index.mdx +++ b/src/collections/blog/2022/2022-05-10-dockercon-22-hpe-talk/index.mdx @@ -1,14 +1,14 @@ --- -title: "Extending Docker with Meshery, SPIRE, and Istio" +title: 'Extending Docker with Meshery, SPIRE, and Istio' date: 2022-05-10 10:30:05 -0530 author: Gaurav Chadha thumbnail: ./dc22-hpe-talk.webp darkthumbnail: ./dc22-hpe-talk.webp -description: "DockerCon 2022 talk with HPE and Meshery Docker Extension Demo" -category: "Docker" +description: 'DockerCon 2022 talk with HPE and Meshery Docker Extension Demo' +category: 'Docker' tags: - - Docker - - Meshery + - Docker + - Meshery published: true resource: true type: Blog @@ -17,57 +17,87 @@ product: Docker Extension featured: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import { Link } from 'gatsby'; import CloudNative from './cloud-native-management.webp'; import CloudNativeIdentity from './cloud-native-identity.webp'; import dde from './dde.webp'; -import designer from './Designer.webp'; +import designer from './Designer.webp'; import visualizer from './Visualizer.webp'; import meshmapInDocker from './meshmap-docker-extension-for-meshery.webp';
    -

    - Lee Calcote and Maximiliano Churichi gave a presentation entitled Extending Docker with Meshery, SPIRE, and Istio at DockerCon 2022. -

    +

    + Lee Calcote and{' '} + Maximiliano Churichi gave a + presentation entitled Extending Docker with Meshery, SPIRE, and Istio at DockerCon 2022. +

    - Lee Calcote is an innovative product and technology leader, passionate about empowering engineers and enabling organizations. As the founder and CEO of Layer5, he is at the forefront of the cloud native movement. + Lee Calcote is an innovative product and + technology leader, passionate about empowering engineers and enabling organizations. As the + founder and CEO of Layer5, he is at the forefront of the cloud native movement.

    - Maximiliano Churichi is a Software Engineer at Hewlett Packard Enterprise, working in the Security Engineering team, and fully engaged in open source technologies, passionate about service mesh and cloud-native security. + Maximiliano Churichi is a Software + Engineer at Hewlett Packard Enterprise, working in the Security Engineering team, and fully + engaged in open source technologies, passionate about service mesh and cloud-native security.

    -

    - Cloud Native Management - Meshery Docker Extension -

    -

    - Lee Calcote introduces Meshery as a Cloud Native Management Plane, stating, "Meshery does Lifecycle and Performance Management of 10 different service meshes more than that it helps with configuration management with Kubernetes and with the Meshery Docker Extension it does same for the Docker Compose application." -

    -
    - +

    + Cloud Native Management + Meshery Docker Extension +

    +

    + Lee Calcote introduces Meshery as a Cloud Native Management Plane, stating, "Meshery does + Lifecycle and Performance Management of 10 different service meshes more than that it helps with + configuration management with Kubernetes and with the Meshery Docker Extension it does same for + the Docker Compose application." +

    +
    +

    - "As a Docker Captain, Lee have always been a proponent of Docker, and in particular its enablement of developer workflows", "Now, Docker Extensions bring an integrated experience with ecosystem tooling, like Meshery - a critical tool for developers, who are configuring and managing cloud native applications." + "As a{' '} + Docker Captain, + Lee have always been a proponent of Docker, and in particular its enablement of developer + workflows", "Now, Docker Extensions bring an integrated experience with ecosystem tooling, like + Meshery - a critical tool for developers, who are configuring and managing cloud native + applications."

    -

    - Cloud Native Identity -

    -

    - Maximiliano Churichi briefly explains about Cloud Native Identity and HPE's open source Project Mithril, "SPIFFE (Secure Production Identity Framework For Everyone) is a CNCF-incubated project that defines a set of standards for identifying and securing communications between application services. The SPIRE project (another CNCF project), the SPIFFE Runtime Environment, is a production-ready reference implementation of the SPIFFE principles, and additionally it also implements a set of APIs for controlling attestation policies, and coordinate certificate issuance and rotation." -

    - Meshery Docker Extension -

    - Maximiliano also tells how HPE's Project Mithril integrates SPIRE and Istio to strengthen service identity in the data plane. Project Mithril leverages the service management capabilities of Istio and the strong identity by attestation principles of SPIFFE and SPIRE to deliver robust and flexible attestation beyond Kubernetes namespaces and service accounts, and provide end-to-end secure attestation of workloads based on zero trust principles regardless of the location of such workloads. The improvements introduced by Project Mithril were already upstreamed into Istio, and are expected to be released in the upcoming Istio 1.14. Starting from this release, Istio users will be able to leverage SPIRE for SPIFFE identities management, and stronger identity attestation mechanisms. -

    +

    Cloud Native Identity

    +

    + Maximiliano Churichi briefly explains about Cloud Native Identity and HPE's open source Project + Mithril, "SPIFFE (Secure Production Identity Framework For + Everyone) is a CNCF-incubated project that + defines a set of standards for identifying and securing communications between application + services. The SPIRE project (another + CNCF project), the SPIFFE Runtime Environment, is a production-ready reference implementation of + the SPIFFE principles, and additionally it also implements a set of APIs for controlling + attestation policies, and coordinate certificate issuance and rotation." +

    + Meshery Docker Extension +

    + Maximiliano also tells how HPE's Project Mithril integrates SPIRE and Istio to strengthen + service identity in the data plane.{' '} + + Project Mithril leverages the service management capabilities of Istio and the strong identity + by attestation principles of SPIFFE and SPIRE to deliver robust and flexible attestation + beyond Kubernetes namespaces and service accounts + + , and provide end-to-end secure attestation of workloads based on zero trust principles + regardless of the location of such workloads. The improvements introduced by Project Mithril + were already upstreamed into Istio, and are expected to be released in the upcoming Istio 1.14. + Starting from this release, Istio users will be able to leverage SPIRE for SPIFFE identities + management, and stronger identity attestation mechanisms. +

    @@ -83,9 +113,17 @@ import meshmapInDocker from './meshmap-docker-extension-for-meshery.webp';

    • Kubernetes and service mesh support for your Docker Compose apps - Import your Docker Compose apps. Configure and deploy them to Kubernetes and any service mesh.
      • -
    • Visual design of Kubernetes applications - Using MeshMap as a visual topology for designing Docker Compose applications, operating Kubernetes, all Kubernetes operators, workloads, and custom resources.
      • +
    • + Visual design of Kubernetes applications - Using{' '} + MeshMap as a visual topology for designing Docker Compose applications, + operating Kubernetes, all Kubernetes operators, workloads, and custom resources. +
      • -
    • Single-click deployment of your infrastructure - Support of 250+ different Kubernetes operators and 60+ cloud services at the fingertips of developers in connection with Docker Desktop’s ability to deliver Kubernetes locally.
      • +
    • + Single-click deployment of your infrastructure - Support of 250+ different + Kubernetes operators and 60+ cloud services at the fingertips of developers in connection with + Docker Desktop’s ability to deliver Kubernetes locally. +
    • Detection of Kubernetes environments - Scan your kubeconfigs and select your current Kubernetes environment. Switch from one environment to another or manage all clusters concurrently.
    @@ -118,14 +156,23 @@ import meshmapInDocker from './meshmap-docker-extension-for-meshery.webp';
    -
    - -
    + +{' '} -

    Lee Calcote and Maximiliano Churichi packed a great deal of information in this talk. Find the recording below. The Meshery Extension is now out! Try now, and Share your Experience -Apply for MeshMap Beta Program +

    + + Lee Calcote and Maximiliano Churichi packed a great deal of information in this talk. Find the + recording below. The Meshery Extension is now out! Try now, and Share your Experience{' '} + + Apply for MeshMap Beta Program

    - - \ No newline at end of file + diff --git a/src/collections/blog/2022/2022-05-14-service-meshcon-talk-intel/index.mdx b/src/collections/blog/2022/2022-05-14-service-meshcon-talk-intel/index.mdx index d861850e1f71..729f4af257c9 100644 --- a/src/collections/blog/2022/2022-05-14-service-meshcon-talk-intel/index.mdx +++ b/src/collections/blog/2022/2022-05-14-service-meshcon-talk-intel/index.mdx @@ -1,16 +1,16 @@ --- -title: "MeshMark: Cloud Native Value Measurement" +title: 'MeshMark: Cloud Native Value Measurement' date: 2022-05-17 10:30:05 -0530 author: Gaurav Chadha thumbnail: ./banner.webp darkthumbnail: ./banner.webp -description: "An open index for measuring performance of cloud native infrastructure in context of the value provided to your business." -category: "Service Mesh" +description: 'An open index for measuring performance of cloud native infrastructure in context of the value provided to your business.' +category: 'Service Mesh' tags: - - MeshMark - - ServiceMeshCon - - KubeCon - - Partners + - MeshMark + - ServiceMeshCon + - KubeCon + - Partners published: true featured: true resource: true @@ -18,10 +18,10 @@ type: Blog product: MeshMap --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; -import slidesTAG from "../../../events/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import slidesTAG from '../../../events/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf'; +import { Link } from 'gatsby'; import meshmark from './meshmark-dark-text-side.svg'; import performanceQuestion from './performance-question.webp'; import smp from './smp.webp'; @@ -34,107 +34,188 @@ import MeshMapDemo from './meshmark-score.webp';
    -

    - Lee Calcote and Mrittika Ganguli presented MeshMark: Service Mesh value measurement at ServiceMeshCon Europe 2022. -

    +

    + Lee Calcote and{' '} + Mrittika Ganguli presented MeshMark: Service Mesh value measurement at + ServiceMeshCon Europe 2022. +

    - Lee Calcote is an innovative product and technology leader, passionate about empowering engineers and enabling organizations. As the founder and CEO of Layer5, he is at the forefront of the cloud native movement. - Mrittika Ganguli is the Director Cloud Native Data Plane, Principle Engineer and Network Architect at Intel. + Lee Calcote is an innovative product and + technology leader, passionate about empowering engineers and enabling organizations. As the + founder and CEO of Layer5, he is at the forefront of the cloud native movement. + Mrittika Ganguli is the Director Cloud Native Data Plane, Principle Engineer + and Network Architect at Intel.

    -Developers need to access service mesh +Developers need to access service mesh

    -

    What is Meshmark?

    +

    What is Meshmark?

    - MeshMark is a performance index that measures the value and overhead of your cloud native environment. By converting performance measurements into insights about the value of individual, cloud native application networking functions, MeshMark distills a variety of overhead signals and key performance indicators into a simple index. + MeshMark is a performance index that measures the value and overhead of your cloud native + environment. By converting performance measurements into insights about the value of individual, + cloud native application networking functions, MeshMark distills a variety of overhead signals and + key performance indicators into a simple index.

    -Developers need to access service mesh +Developers need to access service mesh

    -

    Talk started with a question to audience: Missing performance characteristics?

    +

    Talk started with a question to audience: Missing performance characteristics?

    -

    -

    + /> +

    {' '}

    Lee Calcote explains about "Business Performance"

    -We're quite frequently overlooking business performance, which is in large respect to why we're running the infrastructure in the first place. We usually talk about performance and cold, hard, quantitative speeds and feeds, but instead, I would submit to you that performance should absolutely be measured in terms of speeds and feeds, but it's a lot more meaningful to layer in the value and to quantify -the value that your infrastructure is providing. So we're really kind of missing the business performance aspects of what we're tracking, how we're characterizing. -

    - - -Developers need to access service mesh + We're quite frequently overlooking business performance, which is in large respect to why we're + running the infrastructure in the first place. We usually talk about performance and cold, hard, + quantitative speeds and feeds, but instead, I would submit to you that performance should + absolutely be measured in terms of speeds and feeds, but it's a lot more meaningful to layer in + the value and to quantify the value that your infrastructure is providing. So we're really kind of + missing the business performance aspects of what we're tracking, how we're characterizing. +

    {' '} + +Developers need to access service mesh

    Introduction to Service Mesh Performance

    - The Service Mesh Performance project falls under the umbrella of CNCF project. This project is, at its core, probably a specification for capturing the details of your environment in a uniform way, in a consistent way, - capturing your infrastructure configuration, your service mesh configuration, and characterizing the details of your workloads and doing so consistently such that you can baseline your environments. - You can benchmark them in a consistent way, share with others, maybe compare with the performance that others are having. To the extent that it's codified, you can have system to system exchange of this information. + The Service Mesh Performance project falls under the umbrella of CNCF project. This project is, at + its core, probably a specification for capturing the details of your environment in a uniform way, + in a consistent way, capturing your infrastructure configuration, your service mesh configuration, + and characterizing the details of your workloads and doing so consistently such that you can + baseline your environments. You can benchmark them in a consistent way, share with others, maybe + compare with the performance that others are having. To the extent that it's codified, you can + have system to system exchange of this information.

    -

    Mrittika Ganguli introduces MeshMark with an example

    - MeshMark is a Cloud Native value measurement, from value you are essentially trying to measure if the performance of your infrastructure matches what you want to get from your deployment, - what kind of value you want to get, business value you want to get from your deployment. So, for example, if you have some key performance indicators, do you want to measure whether the MeshMark value is directly responsible for how your video gets loaded or your image gets loaded on a particular webpage. -

    -

    +
    - So often you see when you have a YouTube video uploaded, it will have only the text and not the video. -

    - And so what happens is you do not want that kind of an experience. You want the video to be and the images to be loaded first. As you can see in video if you click on something, you may often see the text get rendered first and then the video. - The load latency of the video traffic is what impacts you see visually. And so the deployment of your cloud native environment. If it can be indexed through a MeshMark ratio, your load latency will be directly proportional to that and then the number of resources you're using to deploy this environment to get a particular lower latency or a higher latency is a usage metric and that's directly proportional to your MeshMark. - The TCO of your application hence becomes directly related to MeshMark. + So often you see when you have a YouTube video uploaded, it will have only the text and not the + video. +

    + And so what happens is you do not want that kind of an experience. You want the video to be and + the images to be loaded first. As you can see in video if you click on something, you may often + see the text get rendered first and then the video. The load latency of the video traffic is what + impacts you see visually. And so the deployment of your cloud native environment. If it can be + indexed through a MeshMark ratio, your load latency will be directly proportional to that and then + the number of resources you're using to deploy this environment to get a particular lower latency + or a higher latency is a usage metric and that's directly proportional to your MeshMark. The TCO + of your application hence becomes directly related to MeshMark.

    -meshmark -meshmark example + meshmark + meshmark example

    MeshMark formula

    MeshMark The Formula

    - MeshMark functions as a value performance index (a scale) to provide organizations the ability to weigh the value of their service mesh versus the overhead of their service mesh and assess whether they are getting out of the mesh what they are “paying” for in it. MeshMark’s scoring system ranges from 0 to 100 and incorporates collections of resource utilization efficiency calculations, categorized into similar consumption classes. + MeshMark functions as a value performance index (a scale) to provide organizations the ability to + weigh the value of their service mesh versus the overhead of their service mesh and assess whether + they are getting out of the mesh what they are “paying” for in it. MeshMark’s scoring system + ranges from 0 to 100 and incorporates collections of resource utilization efficiency calculations, + categorized into similar consumption classes.

    Mrittika explains MUE

    - It's a calculation, combined ratio of measured platform resources to assign resources. If you're able to measure what your assigned resources are in whatever form and able to also monitor what's the used resources, you can have this ratio. So, for example, a very simple one is CPU performance. - MeshMark MUE And you would want to see if the CPU performance as a ratio to the available resources is a loss or a gain. So CPU performance, raw loss over total CPU is our MUE one. - And that's just one minus CPU utilization over 100. That's a very simple ratio and if you see on the slide, the graph shows you that as the latency increases, your Mue lowers. And so that's a very good indicator that your efficiency of your infrastructure is not very good because your latencies are increasing as your QPS increases. - So like this you can measure and create other MUEs. We will look at how you can visualize this within an environment and so let's look at the demonstration. So let's jump into a sibling CNCF project called Meshery. - Meshery is a cloud native management plane. Users of Meshery can configure their Kubernetes deployments any and every service mesh as well as on board and off board their workloads onto any given mesh. -

    - -MeshMap demo + It's a calculation, combined ratio of measured platform resources to assign resources. If you're + able to measure what your assigned resources are in whatever form and able to also monitor what's + the used resources, you can have this ratio. So, for example, a very simple one is CPU + performance. + MeshMark MUE And you + would want to see if the CPU performance as a ratio to the available resources is a loss or a + gain. So CPU performance, raw loss over total CPU is our MUE one. And that's just one minus CPU + utilization over 100. That's a very simple ratio and if you see on the slide, the graph shows you + that as the latency increases, your Mue lowers. And so that's a very good indicator that your + efficiency of your infrastructure is not very good because your latencies are increasing as your + QPS increases. So like this you can measure and create other MUEs. We will look at how you can + visualize this within an environment and so let's look at the demonstration. So let's jump into a + sibling CNCF project called Meshery. Meshery is a cloud native management plane. Users of Meshery + can configure their Kubernetes deployments any and every service mesh as well as on board and off + board their workloads onto any given mesh. +

    {' '} + +MeshMap demo

    Lee demonstrates MeshMap with an example Consul application

    -Let's take an example workload a Consul application, load it into the visual designer, take a look at the service splitting functionality of console and note in this case we're assigning a weight of three when we can change that to four to derive its MeshMark which is a mesh utilization efficiency calculation of the efficiency by which that network function is being performed. -We could also take a look at service intentions of console and examine the efficiency of that network function. Now that you've seen the demo you want to go ahead and publish the results and call everyone to get together. -

    + Let's take an example workload a Consul application, load it into the visual designer, take a look + at the service splitting functionality of console and note in this case we're assigning a weight + of three when we can change that to four to derive its MeshMark which is a mesh utilization + efficiency calculation of the efficiency by which that network function is being performed. We + could also take a look at service intentions of console and examine the efficiency of that network + function. Now that you've seen the demo you want to go ahead and publish the results and call + everyone to get together. +

    {' '}
    - -

    MeshMark in Meshery (an excerpt from ServiceMeshCon EU 2022 demo)

    + +

    + MeshMark in Meshery (an excerpt from ServiceMeshCon EU 2022 demo) +

    -

    Lee Calcote and Mrittika Ganguli covered all the concepts of SMP and MeshMark in this great talk. Learn more about MeshMark on the Service Mesh Performance website. +

    + + Lee Calcote and Mrittika Ganguli covered all the concepts of SMP and MeshMark in this great + talk. Learn more about MeshMark on the{' '} + Service Mesh Performance website. +

    diff --git a/src/collections/blog/2022/2022-05-20-meshmate-of-the-year-2021-aditya-chatterjee/index.mdx b/src/collections/blog/2022/2022-05-20-meshmate-of-the-year-2021-aditya-chatterjee/index.mdx index 4d55b829eb6f..93ed1dbba467 100644 --- a/src/collections/blog/2022/2022-05-20-meshmate-of-the-year-2021-aditya-chatterjee/index.mdx +++ b/src/collections/blog/2022/2022-05-20-meshmate-of-the-year-2021-aditya-chatterjee/index.mdx @@ -1,6 +1,6 @@ --- -title: "MeshMate of the Year 2021: Aditya Chatterjee" -subtitle: "" +title: 'MeshMate of the Year 2021: Aditya Chatterjee' +subtitle: '' date: 2022-05-20 09:10:00 +0000 author: Nikhil Ladha thumbnail: ./MeshMate-of-the-Year-2021-Aditya-Chatterjee.webp @@ -11,48 +11,43 @@ tags: published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import MMoY2021 from "./meshmate-of-the-year-2021.svg"; -import Blockquote from "../../../../reusecore/Blockquote"; -import BlockquoteAlt from "../../../../reusecore/Blockquote/Blockquote-alt-style"; -import { Link } from "gatsby"; -import graduateLFX from "./aditya-chatterjee-graduates-lfx-meshery-program.webp"; -import MeshMate from "../../../../assets/images/meshmate/meshmate-stack.svg"; -import MMOYAditya from "./MeshMate-of-the-Year-2021-Aditya-Chatterjee.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import MMoY2021 from './meshmate-of-the-year-2021.svg'; +import Blockquote from '../../../../reusecore/Blockquote'; +import BlockquoteAlt from '../../../../reusecore/Blockquote/Blockquote-alt-style'; +import { Link } from 'gatsby'; +import graduateLFX from './aditya-chatterjee-graduates-lfx-meshery-program.webp'; +import MeshMate from '../../../../assets/images/meshmate/meshmate-stack.svg'; +import MMOYAditya from './MeshMate-of-the-Year-2021-Aditya-Chatterjee.webp';

    - Nuturing a diverse, inclusive, and newcomer-friendly community like Layer5's - is not easy. As a group of hardworking, committed mentors,{" "} + Nuturing a diverse, inclusive, and newcomer-friendly community like Layer5's is not easy. As a + group of hardworking, committed mentors,{' '} MeshMates - , tirelessly work to help make the Layer5 community the award-winning, open - source community that it is. Each year, out of the group of MeshMates who - continuously engage and support community members, a single individual is - identified as the of MeshMate of the Year. + , tirelessly work to help make the Layer5 community the award-winning, open source community that + it is. Each year, out of the group of MeshMates who continuously engage and support community + members, a single individual is identified as the of MeshMate of the Year.

    - As the{" "} - + As the{' '} + inaugral winner of last year's - {" "} - MeshMate of the Year award, I am honored to present the prestigious MeshMate - of the Year badge to{" "} + {' '} + MeshMate of the Year award, I am honored to present the prestigious MeshMate of the Year badge to{' '} Aditya Chatterjee - . Chosen by his peers and for his sheer dedication, Aditya Chatterjee is - awarded this badge of honor for 2021.{" "} - Congratulations mate, you have earned it! + . Chosen by his peers and for his sheer dedication, Aditya Chatterjee is awarded this badge of + honor for 2021. Congratulations mate, you have earned it!

    {" "} +
    MeshMate - is a distinction that Layer5 awards select members of the community who innately - align with our culture of helping others, paying it forward, and a commitment to - knowledge sharing. MeshMates are Layer5 mentors and ambassadors (not employees). + is a distinction that Layer5 awards select members of the community who innately align with our + culture of helping others, paying it forward, and a commitment to knowledge sharing. MeshMates are + Layer5 mentors and ambassadors (not employees).

    - A Layer5 MeshMate is individual who has consistently demonstrated their - commitment to helping community members. The MeshMate program pairs - experienced Layer5 community members with community newcomers to ensure a - smooth onboarding experience. Helping community members takes all forms from - ensuring the member has access to resources, is introduced to others, - understands the vision and goals of projects, can build and contribute to - projects, can use projects and have their feedback heard.{" "} + A Layer5 MeshMate is individual who has consistently demonstrated their commitment to helping + community members. The MeshMate program pairs experienced Layer5 community members with community + newcomers to ensure a smooth onboarding experience. Helping community members takes all forms from + ensuring the member has access to resources, is introduced to others, understands the vision and + goals of projects, can build and contribute to projects, can use projects and have their feedback + heard.{' '}

    - MeshMates aid in identifying areas of projects and activities within the community - to engage within, which working groups to join, and in help community members grow - in their open source and cloud native knowledge. + MeshMates aid in identifying areas of projects and activities within the community to engage + within, which working groups to join, and in help community members grow in their open source and + cloud native knowledge.

    - There is a lot going in the Layer5 community. Projects and working groups move - fast. By connecting one-on-one, MeshMates share tips on how to have the best - community experience possible, but also build a relationship with the - community member inevitably leaving a lasting mark as is evident from member - comments about Aditya. + There is a lot going in the Layer5 community. Projects and working groups move fast. By connecting + one-on-one, MeshMates share tips on how to have the best community experience possible, but also + build a relationship with the community member inevitably leaving a lasting mark as is evident + from member comments about Aditya.

    It's not easy being a MeshMate

    - With thousands of members in the Layer5 community, many come and go. Many take - and many give. While we hope that each and every individual that joins will - find a fit in the community and/or on a project, this isn't always the case. + With thousands of members in the Layer5 community, many come and go. Many take and many give. + While we hope that each and every individual that joins will find a fit in the community and/or on + a project, this isn't always the case. - Engaging with and investing in community members can be taxing on mentors in - terms of both their time and their emotional investment in seeing the newcomer - plant roots, grow, and blossom. + Engaging with and investing in community members can be taxing on mentors in terms of both their + time and their emotional investment in seeing the newcomer plant roots, grow, and blossom.

    - One of the goals MeshMates have is that of enabling the newcomer's passion and - finding their sweetspot in the community and on a project, so that the - newcomer ultimately achieves their goals - goals that are often similar, but - different for each person. To help them acheive their goals, each individual - is engaged 1:1 by their Meshmate, supporting them in becoming a landstanding - Layer5 community member and contributor. MeshMates understand that many - mentees start out with the best of intentions, but that not all overcome their - hurdles in finding an area of the community to call home or aspect of a - project to own. + One of the goals MeshMates have is that of enabling the newcomer's passion and finding their + sweetspot in the community and on a project, so that the newcomer ultimately achieves their goals + - goals that are often similar, but different for each person. To help them acheive their goals, + each individual is engaged 1:1 by their Meshmate, supporting them in becoming a landstanding + Layer5 community member and contributor. MeshMates understand that many mentees start out with the + best of intentions, but that not all overcome their hurdles in finding an area of the community to + call home or aspect of a project to own.

    MeshMates are a massive force

    - With all that said, you must have already realized that it is not easy being a - MeshMate. Only a few get this opportunity by showcasing their abilities and - commitment to the community. Aditya has always hovered around the horizon of - MeshMate since the moment he joined the community. In process of confirming - Aditya as the winner of the MeshMate of the Year award, we looked to the - community for validation. Little did I realize that meant reaching out to - nearly a hundred people whom Aditya has mentored or supported in the Layer5 - community. More than a few of them had something to say about their time with - Aditya: + With all that said, you must have already realized that it is not easy being a MeshMate. Only a + few get this opportunity by showcasing their abilities and commitment to the community. Aditya has + always hovered around the horizon of MeshMate since the moment he joined the community. In process + of confirming Aditya as the winner of the MeshMate of the Year award, we looked to the community + for validation. Little did I realize that meant reaching out to nearly a hundred people whom + Aditya has mentored or supported in the Layer5 community. More than a few of them had something to + say about their time with Aditya:

    @@ -165,9 +153,7 @@ import MMOYAditya from "./MeshMate-of-the-Year-2021-Aditya-Chatterjee.webp";
    -

    - Aditya graduates the LFX Meshery program. -

    +

    Aditya graduates the LFX Meshery program.

    @@ -209,6 +195,7 @@ import MMOYAditya from "./MeshMate-of-the-Year-2021-Aditya-Chatterjee.webp"; /> {" "} + Meshmate of the Year
    {" "} +
    {" "} +

    - In recognition a year's worth of paying it forward, and for the award,{" "} - Aditya Chatterjee's - profile identifies him as the MeshMate of the Year award winner. Only two - people carry this badge today. I can only guess as to who this ribbon may be - awarded to in 2022. In the year and a half that Aditya has been in the - community, he has touched the lives of many people, including mine. + In recognition a year's worth of paying it forward, and for the award,{' '} + Aditya Chatterjee's profile identifies him + as the MeshMate of the Year award winner. Only two people carry this badge today. I can only guess + as to who this ribbon may be awarded to in 2022. In the year and a half that Aditya has been in + the community, he has touched the lives of many people, including mine.

    - The MeshMate badge is a point of pride for individuals participating in the - program and looked upon with admiration and veneration by many within and - external to the Layer5 community. + The MeshMate badge is a point of pride for individuals participating in the program and looked + upon with admiration and veneration by many within and external to the Layer5 community.

    -

    - Wear your MeshMate of the Year badge proudly, Aditya. -

    +

    Wear your MeshMate of the Year badge proudly, Aditya.

    diff --git a/src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx b/src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx index d342bcf97ed4..e034e12803fe 100644 --- a/src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx +++ b/src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx @@ -1,7 +1,7 @@ --- -title: "Debug Envoy Proxy" -subtitle: "" -description: "An open index for measuring performance of cloud native infrastructure in context of the value provided to your business." +title: 'Debug Envoy Proxy' +subtitle: '' +description: 'An open index for measuring performance of cloud native infrastructure in context of the value provided to your business.' date: 2022-05-27 09:10:00 +0000 author: Layer5 Team thumbnail: ./debug-envoy-proxy.svg @@ -14,15 +14,15 @@ published: true resource: true type: Blog redirect_from: - - /blog/envoy/debug-envoy-proxy/ - - /blog/envoy/debug-envoy-proxy + - /blog/envoy/debug-envoy-proxy/ + - /blog/envoy/debug-envoy-proxy --- -import { BlogWrapper } from "../../Blog.style.js"; -import { Link } from "gatsby"; -import bugEnvoy from "./debug-envoy-proxy.svg"; -import DockerExtensionCTA from "../../../../sections/Docker-Meshery/docker-extension-CTA"; -import Code from "../../../../components/CodeBlock"; +import { BlogWrapper } from '../../Blog.style.js'; +import { Link } from 'gatsby'; +import bugEnvoy from './debug-envoy-proxy.svg'; +import DockerExtensionCTA from '../../../../sections/Docker-Meshery/docker-extension-CTA'; +import Code from '../../../../components/CodeBlock';

    @@ -49,13 +49,27 @@ import Code from "../../../../components/CodeBlock"; The available log levels are:

      -
    • trace
      • -
    • debug
      • -
    • info
      • -
    • warning/warn
      • -
    • error
      • -
    • critical
      • -
    • off
      • +
    • + trace +
      • +
    • + debug +
      • +
    • + info +
      • +
    • + warning/warn +
      • +
    • + error +
      • +
    • + critical +
      • +
    • + off +
    The default is info. @@ -63,24 +77,33 @@ The default is info.

    Setting Envoy logs in the Helm configuration

    - The Consul helm chart uses envoyExtraArgs: to leverage Envoy command line options. One of the helpful options is --component-log-level. This provides granular control over setting log levels for Envoy components. In the example below, the components upstream, http, router and config are set to the debug log level. These four components are vital when debugging issues with requests between your services(sidecar proxies). + The Consul helm chart uses envoyExtraArgs: to leverage Envoy command line options. + One of the helpful options is --component-log-level. This provides granular control + over setting log levels for Envoy components. In the example below, the components upstream, http, + router and config are set to the debug log level. These four components are vital when debugging + issues with requests between your services(sidecar proxies). 

    -    connectInject:
-  enabled: true
-  envoyExtraArgs: "--component-log-level upstream:debug,http:debug,router:debug,config:debug"
+    
+      connectInject: enabled: true envoyExtraArgs: "--component-log-level
+      upstream:debug,http:debug,router:debug,config:debug"
+

    - If you haven't set envoyExtraArgs: in consul-values.yaml just yet, you can set the log levels on the fly by using the following kubectl command: + If you haven't set envoyExtraArgs: in consul-values.yaml just yet, you can set the log levels on + the fly by using the following kubectl command: 

    -    $ kubectl exec pod/pod-name -c container-name -- curl -X POST http://localhost:19000/logging?config=debug
+    
+      $ kubectl exec pod/pod-name -c container-name -- curl -X POST
+      http://localhost:19000/logging?config=debug
+
    @@ -88,16 +111,23 @@ The default is info. 
    -    $ kubectl exec pod/static-client-5bf4575d9c-zr2b -c static-client -- curl -X POST  http://localhost:19000/logging?config=debug
+    
+      $ kubectl exec pod/static-client-5bf4575d9c-zr2b -c static-client -- curl -X POST
+      http://localhost:19000/logging?config=debug
+

    - You will execute the kubectl command for each component. Make sure to append the correct component at the end of the curl command, i.e. logging? component = debug. + You will execute the kubectl command for each component. Make sure to append the correct component + at the end of the curl command, i.e. logging? component = debug.

    - If curl is not able to be used in your pod, you can alternatively use kubectl port-forward pod-name 19000 to make the Envoy admin accessible. From another terminal window, you can then curl to change the log levels. The output you receive in the terminal will show the modified component log levels. + If curl is not able to be used in your pod, you can alternatively use{' '} + kubectl port-forward pod-name 19000 to make the Envoy admin accessible. From another + terminal window, you can then curl to change the log levels. The output you receive in the + terminal will show the modified component log levels.

    @@ -119,25 +149,38 @@ The default is info.

    Setting and Accessing Envoy logs when not using Helm.

    -

    The following command will start an envoy side car proxy, set the log level to debug with -l debug and capture Envoy logs in envoy_logs.txt. The .txt file will need to be created before executing this command.

    +

    + The following command will start an envoy side car proxy, set the log level to debug with -l debug + and capture Envoy logs in envoy_logs.txt. The .txt file will need to be created before executing + this command. +

    -    $ consul connect envoy -sidecar-for counting-1 -- -l debug --log-path envoy_logs.txt
+    
+      $ consul connect envoy -sidecar-for counting-1 -- -l debug --log-path envoy_logs.txt
+
    -

    To have granular control over the Envoy components that is needed to be debugged, use the following command:

    +

    + To have granular control over the Envoy components that is needed to be debugged, use the + following command: +

    -    $ consul connect envoy -sidecar-for counting-1 -- --log-path envoy_logs.txt --component-log-level upstream:debug,http:debug,router:debug,config:debug
+    
+      $ consul connect envoy -sidecar-for counting-1 -- --log-path envoy_logs.txt
+      --component-log-level upstream:debug,http:debug,router:debug,config:debug
+

    Find your Istio Ingress Gateway

    - With Istio as your gateway, you should first look at VirtualService objects. These can show if the hosts are registered to the gateway correctly. + With Istio as your gateway, you should first look at VirtualService objects. These + can show if the hosts are registered to the gateway correctly.

    @@ -147,13 +190,20 @@ The default is info.

    - However, sometimes, the Envoy inside the gateway container is not properly configured (likely due to a bug). You can dump Envoy configuration to debug this further. + However, sometimes, the{' '} + + Envoy + {' '} + inside the gateway container is not properly configured (likely due to a bug). You can dump Envoy + configuration to debug this further. 

    -    # find istio ingress gateway pod \
-      $ kubectl get pods -n istio-system -l app=istio-ingressgateway
+    
+      # find istio ingress gateway pod \ $ kubectl get pods -n istio-system -l
+      app=istio-ingressgateway
+
    @@ -164,27 +214,39 @@ The default is info. 
         
-      # enable debugging on envoy \
-      $ kubectl exec --namespace=istio-system \
-      istio-ingressgateway-a93019f9dfw-l39xd \
-      -c istio-proxy -- curl -X POST \
+      # enable debugging on envoy \ $ kubectl exec --namespace=istio-system \
+      istio-ingressgateway-a93019f9dfw-l39xd \ -c istio-proxy -- curl -X POST \
       http://localhost:15000/logging?level=debug

    - Then, use istioctl tool to dump route configuration (this will show the output from the /config_dump admin endpoint on Envoy): + Then, use istioctl tool to dump route configuration (this will show the output from + the{' '} + + /config_dump admin endpoint + {' '} + on Envoy): 

         
-    $ istioctl proxy-config routes -n istio-system -o=json \
+      $ istioctl proxy-config routes -n istio-system -o=json \
       istio-ingressgateway-a93019f9dfw-l39xd

    - We hope these steps are useful to you. If you're still having trouble configuring Envoy proxy, open up a new thread on the community discussion forum or subscribe to the Layer5 newletter for tips and tricks. + We hope these steps are useful to you. If you're still having trouble configuring Envoy proxy, + open up a new thread on the{' '} + + community discussion forum + {' '} + or subscribe to the{' '} + + Layer5 newletter + {' '} + for tips and tricks.

    - \ No newline at end of file + diff --git a/src/collections/blog/2022/2022-06-01-perfbytes-podcast/index.mdx b/src/collections/blog/2022/2022-06-01-perfbytes-podcast/index.mdx index 5a7a11a379e5..3ead9af2e107 100644 --- a/src/collections/blog/2022/2022-06-01-perfbytes-podcast/index.mdx +++ b/src/collections/blog/2022/2022-06-01-perfbytes-podcast/index.mdx @@ -1,6 +1,6 @@ --- -title: "Perfbytes Podcast" -subtitle: "Ask Me Anything" +title: 'Perfbytes Podcast' +subtitle: 'Ask Me Anything' date: 2022-06-01 09:10:00 +0000 author: Debopriya Bhattacharjee thumbnail: ./perfbytes-layer5.svg @@ -16,25 +16,41 @@ type: Blog product: Meshery --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; -import BlockquoteAlt from "../../../../reusecore/Blockquote/Blockquote-alt-style"; -import { Link } from "gatsby"; -import { PerfbytesPodcast } from "./perfbytesPodcast"; -import ConsulDemo from "./consul-docker-extension-demo.webp" +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; +import BlockquoteAlt from '../../../../reusecore/Blockquote/Blockquote-alt-style'; +import { Link } from 'gatsby'; +import { PerfbytesPodcast } from './perfbytesPodcast'; +import ConsulDemo from './consul-docker-extension-demo.webp';

    Podcast Insights

    -

    Many questions were asked, answered, and a variety of topics were discussed. The story just gets better. This podcast goes deep into service meshes, load generators, circuit breaker, service mesh patterns in addition to a live demo of Meshery and more. Hosted by Henrik from Perfbytes and joined by Mark, Lee Calcote from Layer5 and Mrittika Ganguli from Intel. Tune in to find out more. Get answers to all community questions as a bonus.

    +

    + Many questions were asked, answered, and a variety of topics were discussed. The story just gets + better. This podcast goes deep into service meshes, load generators, circuit breaker, service mesh + patterns in addition to a live demo of Meshery{' '} + and more. Hosted by Henrik from Perfbytes and joined by Mark,{' '} + Lee Calcote from Layer5 and Mrittika Ganguli from + Intel. Tune in to find out more. Get answers to all community questions as a bonus. +

    What is a service mesh?

    -

    Service mesh is one of the solutions that helps you to route traffic within your cluster so as to expose your services outside the cluster. It is a solution to control how different parts of an application share data with one another. Unlike other systems for managing this communication, a service mesh is a dedicated infrastructure layer built right into an app. You have different options like the service type load balancer or using ingress but service mesh makes sense because it will manage a lot of features around your service to service communication.

    +

    + Service mesh is one of the solutions that helps you to route traffic within your cluster so + as to expose your services outside the cluster. It is a solution to control how different parts + of an application share data with one another. Unlike other systems for managing this + communication, a service mesh is a dedicated infrastructure layer built right into an app. You + have different options like the service type load balancer or using ingress but service mesh + makes sense because it will manage a lot of features around your service to service + communication. +

    -In general, service meshes arose from the concept of proxies such as the NGINX proxy. Then Envoy was introduced by Lyft. Lyft had the architecture, and Google came along and created it. That gave us Istio, which is now part of CNCF. +In general, service meshes arose from the concept of proxies such as the NGINX proxy. Then Envoy was introduced by Lyft. Lyft had the architecture, and Google came along and created it. That gave us Istio, which is now part of CNCF. +
    -

    -The way I prefer to think about a surface mesh is that it's all about resiliency. -If you were to take a three-tiered web or three-tiered app and you think about how you're breaking out those tiers with some amount of -kind of vertical scaling, you'd probably, end up putting at least a virtual IP address out in front of the whole web tier and then you've got an app tier and a database tier because you've got multiple instances of those things. Maybe there's a load balancer in between. This structure makes it simple to boost your resiliency. -

    +

    + The way I prefer to think about a surface mesh is that it's all about resiliency. If you were to + take a three-tiered web or three-tiered app and you think about how you're breaking out those + tiers with some amount of kind of vertical scaling, you'd probably, end up putting at least a + virtual IP address out in front of the whole web tier and then you've got an app tier and a + database tier because you've got multiple instances of those things. Maybe there's a load + balancer in between. This structure makes it simple to boost your resiliency. +

    -Henrik goes on to elaborate that in service mesh we can do a lot of things to make sure that the communication is reliable. +Henrik goes on to elaborate that in service mesh we can do a lot of things to make sure that the communication is reliable. When you design microservice architecture, there is a need of implementing retry logic. So if a service A needs to introduce another service B, then the service mesh will manage the retry logic such that if we reach at one time and the service B is not responding then the service mesh will try to reach out several times. Therefore a service mesh offers a variety of features like this to manage the certificates within the cluster and and circle them in a regular pace. You can also have traffic splitting if you do canary releases. In your service to service communication, there are a plethora of scenarios that the service mesh can handle. Henrik recalled that it's normally difficult to obtain a full view of what rules we've applied in the cluster, and when he first saw Meshery, his immediate thought was, "Wow, this is exactly what is missing in the market at the moment." - Lets dig deeper into this tool we've been alluding to for a while now: Meshery.

    Meshery

    -If you were on a pager and were managing a large service mesh deployment with a number of rules and configurations around how security is enforced and identities are managed, and things like uniform observability and how metrics and logs are collected and enforced, and then the different traffic writing rules and stuff. You might soil myself if you had to go make a change in that sea of yaml. That's in part what we're working towards. There's a capability within Meshery for solving this challenge. As a cloud native management plane, Meshery presides over top of 10 different types of service meshes and it also presides over kubernetes. You can run it outside of kubernetes or inside of kubernetes. +If you were on a pager and were managing a large service mesh deployment with a number of rules and +configurations around how security is enforced and identities are managed, and things like uniform +observability and how metrics and logs are collected and enforced, and then the different traffic +writing rules and stuff. You might soil myself if you had to go make a change in that sea of yaml. +That's in part what we're working towards. There's a capability within Meshery for solving this +challenge. As a cloud native management plane, Meshery presides over top of 10 different types of +service meshes and it also presides over kubernetes. You can run it outside of kubernetes or inside +of kubernetes.

    -Meshery has a number of components to its architecture. There is Meshery UI. It has a Mesheryctl, which is a CLI component. We have a number of service mesh adapters for each service mesh that Meshery supports. + Meshery has a number of components to its architecture. There is Meshery UI. It has a Mesheryctl, + which is a CLI component. We have a number of service mesh adapters for each service mesh that + Meshery supports.

    What is the need for different adapters?
    -Meshery, as the multi-mesh manager, supports couple of different adapters. Adapters are used by Meshery to manage the numerous service meshes. Different service mesh adapters are written to expose the unique value of each service mesh. Consequently, they are not equally capable just as each service mesh is not equally capable as the other. Some of them work in a similar way. Some of the service meshes have their own differentiated value, which is why there are individual adapters. Some of them work slightly differently depending on whether they're running as a managed service or not. + Meshery, as the multi-mesh manager, supports couple of different adapters. Adapters are used by + Meshery to manage the numerous service meshes. Different service mesh adapters are written to + expose the unique value of each service mesh. Consequently, they are not equally capable just as + each service mesh is not equally capable as the other. Some of them work in a similar way. Some of + the service meshes have their own differentiated value, which is why there are individual + adapters. Some of them work slightly differently depending on whether they're running as a managed + service or not.
    - We have a plug-in for Meshery it's called MeshMap, it is what you might consider a visual topology. It has a lot of use cases for observing in kind of a read-only mode. There's a second mode to this tool: The Designer Mode. It's a visual configurator of not only the specific settings within any of those service meshes that it supports like a circuit breaker and adjusting the sensor video but also end up being a visual designer for your kubernetes deployments. When users drop in, they're able to go over and grab the specific capabilities of any of those service mesh adapters that are loaded for any of the versions of that mesh that they might want to design. The concept here is that they drag and drop these capabilities over and there's a bit of discoverability that's afforded through this ui rather than parsing through yaml, trying to understand what's going on. @@ -79,51 +111,102 @@ but also end up being a visual designer for your kubernetes deployments. When us I like to pretend that I know a lot about service meshes, but when it comes to having to keep track of all of them, I don't know what the gateway tls sds config is, and so this type of inline help is quite useful to design your deployments. The deployments may or may not use a mesh; in fact, you can use this to create your Kubernetes configuration and deployment as well.  You can even save and recall those designs. Taking this example of consul, produced by hashicorp, is a little more of an -intriguing deployment and a simple two-tier deck. We announced the Meshery Docker Extension recently. So if you're using docker desktop, Meshery will be a first class app that's available inside of market and part of what it does as it integrates with docker desktop is it will import docker compose apps convert them to kubernetes manifests or kubernetes apps and they'll let you deploy those formerly docker compose apps onto a mesh which is why I'm talking about a two-tiered service. +intriguing deployment and a simple two-tier deck. We announced the Meshery Docker Extension recently. So if you're using docker desktop, Meshery will be a first class app that's available inside of market and part of what it does as it integrates with docker desktop is it will import docker compose apps convert them to kubernetes manifests or kubernetes apps and they'll let you deploy those formerly docker compose apps onto a mesh which is why I'm talking about a two-tiered service. -
    Does MeshMap allow you to load the current configuration that is has been applied in the current cluster? +
    + Does MeshMap allow you to load the current configuration that is has been applied in the current + cluster?
    -Currently, there are two modes: the one we were looking at before was the designer mode, and the one we'll be looking at now is the visualizer mode, which is probably a little more of an it's not entirely read-only to the extent that you could grab a pod and start an interactive session with the containers in that pod or you could you start a logging session. You could also initiate a performance test against  that particular service or that particular endpoint.  -Meshery supports three different types of load generators, which is a nighthawk, fortio and wrk2. + Currently, there are two modes: the one we were looking at before was the designer mode, and the + one we'll be looking at now is the visualizer mode, which is probably a little more of an it's not + entirely read-only to the extent that you could grab a pod and start an interactive session with + the containers in that pod or you could you start a logging session. You could also initiate a + performance test against  that particular service or that particular endpoint.  Meshery supports + three different types of load generators, which is a nighthawk, fortio and wrk2.
    -
    What are the capabilities of these three load generators? When you speak about service mesh testing or performance testing, what is actually the process behind the scene? What should users think about when they're starting a gig and need to configure and optimize the service mesh?
    +
    + What are the capabilities of these three load generators? When you speak about service mesh + testing or performance testing, what is actually the process behind the scene? What should users + think about when they're starting a gig and need to configure and optimize the service mesh? +
    -

    Lee expounds on that for our benefit. -It takes weeks to months that you've got to dedicate for performance engineers to go over and like pull together various tools and scripts around them to then get into a spreadsheet or into some database that you then generate results. -The genesis of Meshery part was to help people comprehend what a service mesh is, when to use one and which one to use? As you go to explain these common questions, the real answer is a totally disappointing, which is, it just depends on what you're asking to do.

    -

    -People want to measure it in cold hard quantitative metrics but if you're asking to do 100 percent sampling then also consider the distributed tracing implementation you had somewhere else and the fact that you're getting it -in a uniform way here. Maybe you're likely to consider the overhead that you would have over there. It's frustrating to be trying to explain stuff to folks and get them excited about the tech and and to give them a vague response. Instead we give them a tool that says "Hey look here's a tool that will deploy any of the service meshes that you want to test out." -

    -

    -There's a reason why there's ten of them like and actually many more than that. -There's a lot of overlap between them but different tools for different purposes for different size orgs, so it would be inappropriate to say well you know here's the one. It's rather hey here's a tool that that lets you deploy any number of them quickly, answer your own question about performance, because we can pump out benchmarks of the various service meshes under various configurations, using different types of workloads but which may or may not match your environment and over time those reports are going to get stale and so rather he's a tool to make you empowered. -

    +

    + Lee expounds on that for our benefit. It takes weeks to months that you've got to dedicate for + performance engineers to go over and like pull together various tools and scripts around them to + then get into a spreadsheet or into some database that you then generate results. The genesis of + Meshery part was to help people comprehend what a service mesh is, when to use one and which one + to use? As you go to explain these common questions, the real answer is a totally disappointing, + which is, it just depends on what you're asking to do.{' '} +

    +

    + People want to measure it in cold hard quantitative metrics but if you're asking to do 100 + percent sampling then also consider the distributed tracing implementation you had somewhere + else and the fact that you're getting it in a uniform way here. Maybe you're likely to consider + the overhead that you would have over there. It's frustrating to be trying to explain stuff to + folks and get them excited about the tech and and to give them a vague response. Instead we give + them a tool that says "Hey look here's a tool that will deploy any of the service meshes that + you want to test out." +

    +

    + There's a reason why there's ten of them like and actually many more than that. There's a lot of + overlap between them but different tools for different purposes for different size orgs, so it + would be inappropriate to say well you know here's the one. It's rather hey here's a tool that + that lets you deploy any number of them quickly, answer your own question about performance, + because we can pump out benchmarks of the various service meshes under various configurations, + using different types of workloads but which may or may not match your environment and over time + those reports are going to get stale and so rather he's a tool to make you empowered. +

    -
    Do you actually generate traffic that will go through the sidecar proxy of the service and then reach out the actual service?
    +
    + Do you actually generate traffic that will go through the sidecar proxy of the service and then + reach out the actual service? +
    -That load is generated on demand or on schedule against one or more endpoints, one or more of your services or something that is not even on your service. You can generate load not only against something running within your infrastructure but something external as well to do statistical analysis based on the configuration that you gave it and so yeah the answer is yes the traffic flows through the sidecar. + That load is generated on demand or on schedule against one or more endpoints, one or more of your + services or something that is not even on your service. You can generate load not only against + something running within your infrastructure but something external as well to do statistical + analysis based on the configuration that you gave it and so yeah the answer is yes the traffic + flows through the sidecar.
    -
    If I say I have never scripted or built any scenarios for fortio or nighthawk. Let's say I'm a loadrunner, a neoload, or a k6 user, and I want to accomplish the same thing with them. So what is the journey on those load generator? is it the same thing you have to build a workflow of requests that you want to send in that scenario?
    +
    + If I say I have never scripted or built any scenarios for fortio or nighthawk. Let's say I'm a + loadrunner, a neoload, or a k6 user, and I want to accomplish the same thing with them. So what is + the journey on those load generator? is it the same thing you have to build a workflow of requests + that you want to send in that scenario? +
    -

    That leads us to probably talk about one of our other projects which is called Performance which is a specification. It's another one of the projects that we've donated to the CNCF. Service Mesh Performance is the spec while Meshery is an implementation of the spec. -At a high level, if those other load generators were to adhere to how we standardize and describe the test that you want to run and then hand off that configuration to generate the performance profiles that are created here you're not gonna down download them but the descriptor is important. -

    -This implements a standard for the industry on what is the actual -service mesh test and then standardize the format so then anyone can use the same format to design their script or whatever they want and then use it to test. -So when I build a script, and I don't know loadrunner today and I want to use neologo tomorrow, then I don't have to rewrite everything. Great! +

    + That leads us to probably talk about one of our other projects which is called{' '} + Performance which is a specification. It's + another one of the projects that we've donated to the CNCF. Service Mesh Performance is the spec + while Meshery is an implementation of the spec. At a high level, if those other load generators + were to adhere to how we standardize and describe the test that you want to run and then hand + off that configuration to generate the performance profiles that are created here you're not + gonna down download them but the descriptor is important. +

    + This implements a standard for the industry on what is the actual service mesh test and then + standardize the format so then anyone can use the same format to design their script or whatever + they want and then use it to test. So when I build a script, and I don't know loadrunner today and + I want to use neologo tomorrow, then I don't have to rewrite everything. Great!
    Missed the podcast? No worries, we got you covered. Check out the recording below :)
    - +
    -     diff --git a/src/collections/blog/2022/2022-06-01-perfbytes-podcast/perfbytesPodcast.js b/src/collections/blog/2022/2022-06-01-perfbytes-podcast/perfbytesPodcast.js index acc7bc0efd27..f7b4bd67cbf7 100644 --- a/src/collections/blog/2022/2022-06-01-perfbytes-podcast/perfbytesPodcast.js +++ b/src/collections/blog/2022/2022-06-01-perfbytes-podcast/perfbytesPodcast.js @@ -1,6 +1,5 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const PerfbytesPodcast = styled.div` - div.answer { margin: 1rem 0; display: flex; @@ -12,11 +11,10 @@ export const PerfbytesPodcast = styled.div` border-left: 2px solid ${(props) => props.theme.secondaryColor}; padding-left: 2rem; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - + span { font-weight: 600; font-style: normal; } } - `; diff --git a/src/collections/blog/2022/2022-06-07-week-open-source-contributions-with-layer5/index.mdx b/src/collections/blog/2022/2022-06-07-week-open-source-contributions-with-layer5/index.mdx index 50dd4059621e..3cd6044f1efc 100644 --- a/src/collections/blog/2022/2022-06-07-week-open-source-contributions-with-layer5/index.mdx +++ b/src/collections/blog/2022/2022-06-07-week-open-source-contributions-with-layer5/index.mdx @@ -1,112 +1,171 @@ ---- -title: "8 Weeks of Open Source Contribution with Layer5" -subtitle: "#SCA Contributhon 2022" -date: 2022-06-07 06:00:00 +0000 -author: Ednah Akoth & Oyin Dawodu -thumbnail: ./sca-contributhon-2022.webp -darkthumbnail: ./sca-contributhon-2022.webp -category: Community -tags: - - Programs - - Internship -published: true ---- - -import { Link } from "gatsby"; -import { BlogWrapper } from "../../Blog.style.js"; -import mentees from './mentees.webp' -import meshmate from "../../../../assets/images/meshmate/meshmate-icon.svg" - - - -
    -

    -To newbies, open source contributions may seem daunting. In much the same way that non-techies develop a reverence for programmers courtesy of the film industry’s portrayal of them as wizards whose brains magically sprout up elaborate mathematical models and whose mouths eloquently spew technological jargon, so do newbies perceive contributors: a bunch of techies who debug in seconds, recite programming language documentation by heart and, well, create pull requests in their sleep (this is a bit exaggerated, but you get the point). -

    -
    - -

    - This perception diminished any notion of our Stack Overflow and W3Schools-dependent selves ever having a shot at open source contribution. It often felt as if we haven’t attained the required caliber of ‘techie-ness’ requisite to join the erudite army of programming soldiers; that our match and stomps wouldn’t match the rhythm of these valiant sergeants. -

    - - layer5 mentees -

    - However, She Code Africa’s Contributhon program deconstructs this perception, moreso for women, by partnering with open source organizations like Layer5 and offering women the opportunity to receive mentorship that eases them into being ardent contributors. -

    -

    - After a rigorous selection process, we: -

    - gained entry into SCA’s second contributhon program and would like to immerse you in the voyage that the contributhon program was through this article. -

    - -

    The Leaderboard Project

    -

    - For 8 weeks, we have had the chance to immerse ourselves into Layer5’s open source contribution community by curating a leaderboard for Layer5’s discussion forum to show the most active participants based on various metrics such as likes received and posts created. -

    -

    - We built this leaderboard to encourage more intentional communication and exert positive peer pressure on community members, thereby subconsciously incentivising them to give more solutions to problems discussed on the forum, and actively engage with content posted by other members -

    -

    - The project has presented an immersive learning experience for us, right from learning how to navigate using the ubuntu terminal, learning how to set up a local discourse development environment and render web pages, examining the discuss API documentation and understanding the API endpoints needed to fetch the required data and designing the UI (User Interface) of the leaderboard. -

    - -

    Challenges We Faced

    -

    - Getting acclimated to the intricacies of the discourse development environment has been no easy feat. There were moments where we stared at code on discourse in utter oblivion on its purpose or functionality, or faced version issues that impeded our discourse instance’s ability to run. It sometimes got even more frustrating when something as simple as a fetch instruction that you have been writing for almost the entirety of your programming life fails to work and none of the Stack Overflow fixes work. -

    -

    - This question kept us going; How would we become the ardent while in their sleep bug fixers and prolific contributors if we don’t build the fortitude to weather such disheartening moments? -

    -

    - During moments like these, the Layer5 community, particularly MeshMates and our mentors often saved the day, sharing resources or offering explanations on what ought to be done to salvage the situations. -

    - -

    Lessons We Learned Along the Way

    -

    - Overall, the journey has exercised and built upon our skills repertoire in HTML, CSS, JavaScript and Version Control, and induced us into the contribution workflow, right from finding an open issue to work on, setting up the required environment to developing the solution. -

    -

    - Furthermore, receiving feedback from both our mentors and members of the Layer5 community with regards to matters like the scalability of our data fetch methods, potential misuse of the leaderboard metrics to gain advantage, the converse outcome that our leaderboard could have (dishearten new members form contributing due to the seemingly low chance of their input reflecting on the board), more responsive UI fixes among others, helped us to become even more cognizant of the idea that we are developing not just for ourselves and our portfolios, but for a wider and greater audience. -

    -

    - We became more abreast with the idea of developing for a community or for a greater purpose and the imperative role of feedback in that development process. We became more comfortable with the idea that we essentially do not own the product despite all the sweat we pour into it; we are instead a part of a larger community that comes together to build a widely suitable, sustainable and inclusive product. -

    - - -

    Appreciation

    -

    - Through building this leaderboard for Layer5’s Community Forum, we have assimilated ourselves into the glorious match of soldiers that previously intimidated us. We stepped foot into the previously deemed insidious territory of open source contribution and realised that we too have a lot to offer in this ecosystem. -

    -

    - We have discovered a community of competent, supportive and serial problem-solvers, right from our mentors: -

    -
      -
    • - Ekene Leonard Nwobodo -
      • -
    • - Etiene James -
      • -
    • - Ruth Ikegah -
      • -
    • - Oluwabamikemi Kayode -
      • -
    -

    - to the entirety of the contributors, a knowledge powerhouse that we look forward to continue contributing and building towards. -

    - -

    - Additionally, we would like to convey hearty regards to She Code Africa for availing this program as a stepping stone to women like us to get started in OSS. Their clarity in mission and vision execution and elaborate support structure has given a significant lift to women in Tech and curated a place where they can receive mentorship and the intellectual stimulation that necessitates and inevitably culminates to growth. -

    - -     +--- +title: '8 Weeks of Open Source Contribution with Layer5' +subtitle: '#SCA Contributhon 2022' +date: 2022-06-07 06:00:00 +0000 +author: Ednah Akoth & Oyin Dawodu +thumbnail: ./sca-contributhon-2022.webp +darkthumbnail: ./sca-contributhon-2022.webp +category: Community +tags: + - Programs + - Internship +published: true +--- + +import { Link } from 'gatsby'; +import { BlogWrapper } from '../../Blog.style.js'; +import mentees from './mentees.webp'; +import meshmate from '../../../../assets/images/meshmate/meshmate-icon.svg'; + + + +
    +

    + To newbies, open source contributions may seem daunting. In much the same way that non-techies + develop a reverence for programmers courtesy of the film industry’s portrayal of them as wizards + whose brains magically sprout up elaborate mathematical models and whose mouths eloquently spew + technological jargon, so do newbies perceive contributors: a bunch of techies who debug in + seconds, recite programming language documentation by heart and, well, create pull requests in + their sleep (this is a bit exaggerated, but you get the point). +

    +
    + +{' '} +

    + This perception diminished any notion of our Stack Overflow and W3Schools-dependent selves ever + having a shot at open source contribution. It often felt as if we haven’t attained the required + caliber of ‘techie-ness’ requisite to join the erudite army of programming soldiers; that our + match and stomps wouldn’t match the rhythm of these valiant sergeants. +

    +layer5 mentees +

    + However,{' '} + + She Code Africa’s Contributhon + {' '} + program deconstructs this perception, moreso for women, by partnering with open source + organizations like Layer5 and offering women the opportunity to receive mentorship that eases them + into being ardent contributors. +

    +

    + After a rigorous selection process, we: +

    + gained entry into SCA’s second contributhon program and would like to immerse you in the voyage + that the contributhon program was through this article. +

    + +{' '} +

    The Leaderboard Project

    +

    + For 8 weeks, we have had the chance to immerse ourselves into Layer5’s open source contribution + community by curating a leaderboard for{' '} + Layer5’s discussion forum to show the most active + participants based on various metrics such as likes received and posts created. +

    +

    + We built this leaderboard to encourage more intentional communication and exert positive peer + pressure on community members, thereby subconsciously incentivising them to give more solutions to + problems discussed on the forum, and actively engage with content posted by other members +

    +

    + The project has presented an immersive learning experience for us, right from learning how to + navigate using the ubuntu terminal, learning how to set up a local discourse development + environment and render web pages, examining the discuss API documentation and understanding the + API endpoints needed to fetch the required data and designing the UI (User Interface) of the + leaderboard. +

    +

    Challenges We Faced

    +

    + Getting acclimated to the intricacies of the discourse development environment has been no easy + feat. There were moments where we stared at code on discourse in utter oblivion on its purpose or + functionality, or faced version issues that impeded our discourse instance’s ability to run. It + sometimes got even more frustrating when something as simple as a fetch instruction that you have + been writing for almost the entirety of your programming life fails to work and none of the Stack + Overflow fixes work. +

    +

    + This question kept us going; How would we become the ardent{' '} + while in their sleep bug fixers and prolific contributors if we don’t build the fortitude + to weather such disheartening moments? +

    +

    + During moments like these, the Layer5 community, particularly{' '} + MeshMates and our mentors often saved the day, sharing + resources or offering explanations on what ought to be done to salvage the situations. +

    + +{' '} +

    Lessons We Learned Along the Way

    +

    + Overall, the journey has exercised and built upon our skills repertoire in HTML, CSS, JavaScript + and Version Control, and induced us into the contribution workflow, right from finding an open + issue to work on, setting up the required environment to developing the solution. +

    +

    + Furthermore, receiving feedback from both our mentors and members of the Layer5 community with + regards to matters like the scalability of our data fetch methods, potential misuse of the + leaderboard metrics to gain advantage, the converse outcome that our leaderboard could have + (dishearten new members form contributing due to the seemingly low chance of their input + reflecting on the board), more responsive UI fixes among others, helped us to become even more + cognizant of the idea that we are developing not just for ourselves and our portfolios, but for a + wider and greater audience. +

    +

    + We became more abreast with the idea of developing for a community or for a greater purpose and + the imperative role of feedback in that development process. We became more comfortable with the + idea that we essentially do not own the product despite all the sweat we pour into it; we are + instead a part of a larger community that comes together to build a widely suitable, sustainable + and inclusive product. +

    + +{' '} +

    Appreciation

    +

    + Through building this leaderboard for Layer5’s Community Forum, we have assimilated ourselves into + the glorious match of soldiers that previously intimidated us. We stepped foot into the previously + deemed insidious territory of open source contribution and realised that we too have a lot to + offer in this ecosystem. +

    +

    + We have discovered a community of competent, supportive and serial problem-solvers, right from our + mentors: +

    +
      +
    • + + Ekene Leonard Nwobodo + +
      • +
    • + Etiene James +
      • +
    • + Ruth Ikegah +
      • +
    • + Oluwabamikemi Kayode +
      • +
    +

    + to the entirety of the contributors, a knowledge powerhouse that we look forward to continue + contributing and building towards. +

    + +{' '} +

    + Additionally, we would like to convey hearty regards to{' '} + She Code Africa for availing this program as a stepping + stone to women like us to get started in OSS. Their clarity in mission and vision execution and + elaborate support structure has given a significant lift to women in Tech and curated a place + where they can receive mentorship and the intellectual stimulation that necessitates and + inevitably culminates to growth. +

    + +     diff --git a/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx b/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx index ffec6abb20f9..67d27f0c4a46 100644 --- a/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx +++ b/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx @@ -8,53 +8,53 @@ darkthumbnail: ./lfx-pranav.webp category: Internship Programs description: "Pranav Singh's experience as a LFX intern at Layer5" redirect_from: - - /blog/community/lfx-experience-layer5-pranav-singh + - /blog/community/lfx-experience-layer5-pranav-singh tags: - - Community - - Internship - - Programs + - Community + - Internship + - Programs published: true type: Blog --- -import { BlogWrapper } from "../../Blog.style.js"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import { Link } from 'gatsby'; -It all started with my curiosity to find an open-source project with open issues with DevOps and CI/CD labels on them. -While I was searching that on GitHub, I found Meshery, one of the projects at Layer5. I started going through the -[README](https://github.com/meshery/meshery#readme), and it just felt like that is it. -It integrates with all kinds of technologies that I ever wanted to learn and explore. Then I jumped onto their [slack](http://slack.layer5.io/) and got even -more excited by the enthusiasm and energy of each community members welcoming me in the newcomers channel. I started attending all the community meetings and -learned about the project through the demos/updates from fellow contributors. Slowly and gradually, I started contributing too, then delivering updates in the +It all started with my curiosity to find an open-source project with open issues with DevOps and CI/CD labels on them. +While I was searching that on GitHub, I found Meshery, one of the projects at Layer5. I started going through the +[README](https://github.com/meshery/meshery#readme), and it just felt like that is it. +It integrates with all kinds of technologies that I ever wanted to learn and explore. Then I jumped onto their [slack](http://slack.layer5.io/) and got even +more excited by the enthusiasm and energy of each community members welcoming me in the newcomers channel. I started attending all the community meetings and +learned about the project through the demos/updates from fellow contributors. Slowly and gradually, I started contributing too, then delivering updates in the community calls, and consequently started climbing the contributor ladder. -When I realised that I would be working on [Layer5 Cloud](https://meshery.layer5.io) and Meshery as an LFX intern at Layer5, then I couldn't control my excitement. -That excitement was to ship more impactful features for the Layer5 projects, work and engage more deeply with the engineering team at Layer5 and have an overall -upliftment of my development skills. Throughout my internship I worked on several features. Few on the top of the list are as follows, expanding -[Meshery extension points](https://docs.meshery.io/extensibility), exposing node details of the K8s clusters on which Meshery runs performance tests, -supporting [Cilium service mesh adapter](https://github.com/meshery/meshery-cilium) with Meshery, persisting MeshMap user preferences with -Layer5 Cloud, migrating Layer5 Cloud UI to NextJS, support for user profile on Layer5 Cloud and exposing performance profiles -(generated from Meshery performance tests that run on CNCF hosted runners through [meshery-smp-action](https://github.com/layer5io/meshery-smp-action)) +When I realised that I would be working on [Layer5 Cloud](https://meshery.layer5.io) and Meshery as an LFX intern at Layer5, then I couldn't control my excitement. +That excitement was to ship more impactful features for the Layer5 projects, work and engage more deeply with the engineering team at Layer5 and have an overall +upliftment of my development skills. Throughout my internship I worked on several features. Few on the top of the list are as follows, expanding +[Meshery extension points](https://docs.meshery.io/extensibility), exposing node details of the K8s clusters on which Meshery runs performance tests, +supporting [Cilium service mesh adapter](https://github.com/meshery/meshery-cilium) with Meshery, persisting MeshMap user preferences with +Layer5 Cloud, migrating Layer5 Cloud UI to NextJS, support for user profile on Layer5 Cloud and exposing performance profiles +(generated from Meshery performance tests that run on CNCF hosted runners through [meshery-smp-action](https://github.com/layer5io/meshery-smp-action)) through a public facing API. -In terms of the learning curve, I learned so much that the knowledge I gained in the past three months overpowers the education I received in the last two years of college, -if we put in context the applicability of each of the learnings in the software industry. -I learned and applied the tech stack from Golang, GraphQL, and NextJS to Postgres, SQL, and GoBuffalo to GitHub actions. I got introduced to the topics like -performance engineering, service meshes, networking, and several cloud-native tool. While at the same time, I met several experienced developers who are very involved in +In terms of the learning curve, I learned so much that the knowledge I gained in the past three months overpowers the education I received in the last two years of college, +if we put in context the applicability of each of the learnings in the software industry. +I learned and applied the tech stack from Golang, GraphQL, and NextJS to Postgres, SQL, and GoBuffalo to GitHub actions. I got introduced to the topics like +performance engineering, service meshes, networking, and several cloud-native tool. While at the same time, I met several experienced developers who are very involved in the communities which revolve around these realms. -One of the major realizations I got through this internship was that it is okay to make mistakes. There were a few instances where I made mistakes. -For instance, once I forgot to add pagination in an SQL query which depressed the whole production instance of Layer5 Cloud, which means no one would be able -to log into Meshery until that gets fixed. Or once I unknowingly used an incorrect default SSH port in a workflow that failed a GitHub action responsible for -pushing the latest Layer5 Cloud image to Docker Hub and then updating the deployment in AWS VM. But that was okay, and no one got mad at me, but rather I have +One of the major realizations I got through this internship was that it is okay to make mistakes. There were a few instances where I made mistakes. +For instance, once I forgot to add pagination in an SQL query which depressed the whole production instance of Layer5 Cloud, which means no one would be able +to log into Meshery until that gets fixed. Or once I unknowingly used an incorrect default SSH port in a workflow that failed a GitHub action responsible for +pushing the latest Layer5 Cloud image to Docker Hub and then updating the deployment in AWS VM. But that was okay, and no one got mad at me, but rather I have always received constructive feedback. I did learn from each mistake and made sure that I dont repeat it because that is all that matters. -I had a great time as an intern @ Layer5. Each day brought new challenges and a desire to raise PRs with great features. I not only learned how to fix bugs but also -learned how to avoid them in the first place. I not only learned hard skills but also learned soft skills. I not only learned the meaning of self-reliance but also learned -the true meaning of team spirit. All in all, that was one of the most exquisite experiences I have ever had and ofcourse, the best internship experience -(considering it was my first internship ever!). +I had a great time as an intern @ Layer5. Each day brought new challenges and a desire to raise PRs with great features. I not only learned how to fix bugs but also +learned how to avoid them in the first place. I not only learned hard skills but also learned soft skills. I not only learned the meaning of self-reliance but also learned +the true meaning of team spirit. All in all, that was one of the most exquisite experiences I have ever had and ofcourse, the best internship experience +(considering it was my first internship ever!). I will be engaged in this community and will keep contributing to Layer5 projects as much as possible. diff --git a/src/collections/blog/2022/2022-06-09-evolution-of-mesheryctl-ref/index.mdx b/src/collections/blog/2022/2022-06-09-evolution-of-mesheryctl-ref/index.mdx index a0436152f35d..bc0cf609b2f5 100644 --- a/src/collections/blog/2022/2022-06-09-evolution-of-mesheryctl-ref/index.mdx +++ b/src/collections/blog/2022/2022-06-09-evolution-of-mesheryctl-ref/index.mdx @@ -1,15 +1,15 @@ --- -title: "Evolution of the Meshery CLI Command Reference" +title: 'Evolution of the Meshery CLI Command Reference' date: 2022-06-09 01:15:00 -0600 author: Aadhitya Amarendiran description: Autogeneration of Meshery CLI command reference thumbnail: ./mesheryctl.webp darkthumbnail: ./mesheryctl.webp -category: "Meshery" +category: 'Meshery' tags: - - Projects - - Meshery - - mesheryctl + - Projects + - Meshery + - mesheryctl published: true resource: true type: Blog @@ -17,36 +17,64 @@ product: Meshery featured: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Blockquote from "../../../../reusecore/Blockquote"; +import { BlogWrapper } from '../../Blog.style.js'; +import Blockquote from '../../../../reusecore/Blockquote'; -import oldDesign from "./initial-design.webp"; -import newDesign from "./mesheryctl-docs.webp"; +import oldDesign from './initial-design.webp'; +import newDesign from './mesheryctl-docs.webp';
    -

    Documentation plays a major role in any project. Even if the project is small or too big, the creator or the team behind the project needs to curate the documentation very well such that it'll be useful for new end users to refer and learn to use the project, troubleshoot the problems occurred and lot more. Thus, we, Layer5 have curated the documentation for Meshery to meet such purposes. Not to mention, mesheryctl, the CLI client of Meshery needs a curated documentation as well. This blog describes about the evolution of mesheryctl command reference page.

    +

    + Documentation plays a major role in any project. Even if the project is small or too big, the + creator or the team behind the project needs to curate the documentation very well such that + it'll be useful for new end users to refer and learn to use the project, troubleshoot the + problems occurred and lot more. Thus, we, Layer5 have curated the documentation for Meshery to + meet such purposes. Not to mention, mesheryctl, the CLI client of Meshery needs a + curated documentation as well. This blog describes about the evolution of{' '} + mesheryctl command reference page.{' '} +

    Initial Command Reference Design

    -

    The initial design of mesheryctl command reference page is all made using pure markdown and the functionality is handled using Jekyll, the main framework used for Meshery Docs. This handled great at initial stage but had many limitations, such as: -

      -
    • Updation of YAML for data is often required
      • -
    • Design was obselete at initial stage
      • -
    • No separate pages for each command and subcommand
      • -
    - Thus, the idea for redesigning the mesheryctl reference page was desperately needed.

    -

    - Initial design of mesheryctl command reference

    +

    + The initial design of mesheryctl command reference page is all made using pure + markdown and the functionality is handled using Jekyll, the main framework used for Meshery Docs. + This handled great at initial stage but had many limitations, such as: +

      +
    • Updation of YAML for data is often required
      • +
    • Design was obselete at initial stage
      • +
    • No separate pages for each command and subcommand
      • +
    + Thus, the idea for redesigning the mesheryctl reference page was desperately needed. +

    +

    + + Initial design of mesheryctl command reference + +

    Updated Command Reference Design

    -

    To tackle the shortcomings of the previous design, I was tasked to redesign the mesheryctl command reference page entirely. This was a big task at first glance to me, as I was a new contributor back then. Eventually after manipulating the reference section with help of great folks, I was able to pull off the task and the design was updated.

    - -Meshery CLI command reference + To tackle the shortcomings of the previous design, I was tasked to redesign the{' '} + mesheryctl command reference page entirely. This was a big task at first glance to + me, as I was a new contributor back then. Eventually after manipulating the reference section with + help of great folks, I was able to pull off the task and the design was updated.{' '} +

    +

    + + Meshery CLI command reference + +

    +

    + The redesign work was done with help of HTML in markdown and with optimization in YAML code. A + sample is given below.

    -

    The redesign work was done with help of HTML in markdown and with optimization in YAML code. A sample is given below.

    ``` @@ -63,14 +91,22 @@ import newDesign from "./mesheryctl-docs.webp"; 
         
    
-    mesheryctl mesh [flags] 
+    mesheryctl mesh [flags]
    ........... ```

    Adding auto generation feature in reference

    -

    As time passed, we realized that the command reference missed something for a while, though the design has been changed. Then, we thought the idea of automating the generation of docs such that developers don't need to change the code in docs section while working towards mesheryctl. That's where we got to know that Cobra library (the library for CLI apps made using golang) has a feature to make doc pages automatically. So we decided to incorporate that feature into mesheryctl docs page as well! After making several changes and a PR, I was finally able to introduce the feature in the docs site!

    +

    + As time passed, we realized that the command reference missed something for a while, though the + design has been changed. Then, we thought the idea of automating the generation of docs such that + developers don't need to change the code in docs section while working towards{' '} + mesheryctl. That's where we got to know that Cobra library (the library for CLI apps + made using golang) has a feature to make doc pages automatically. So we decided to incorporate + that feature into mesheryctl docs page as well! After making several changes and a + PR, I was finally able to introduce the feature in the docs site! +

    ``` var startCmd = &cobra.Command { diff --git a/src/collections/blog/2022/2022-06-10-validation-meshery-cli-functionality/index.mdx b/src/collections/blog/2022/2022-06-10-validation-meshery-cli-functionality/index.mdx index 7ad7b73dad00..fb3dd4f39c6e 100644 --- a/src/collections/blog/2022/2022-06-10-validation-meshery-cli-functionality/index.mdx +++ b/src/collections/blog/2022/2022-06-10-validation-meshery-cli-functionality/index.mdx @@ -1,58 +1,118 @@ --- -title: "Validating Meshery CLI Functionality" -subtitle: "An introduction to testing mesheryctl" +title: 'Validating Meshery CLI Functionality' +subtitle: 'An introduction to testing mesheryctl' date: 2022-06-10 10:30:05 -0530 author: Piyush Singariya description: Guide for End to End manual testing Meshery CLI (mesheryctl) thumbnail: ./thumbnail.webp darkthumbnail: ./thumbnail.webp -category: "Meshery" +category: 'Meshery' tags: - - Projects - - Meshery - - mesheryctl + - Projects + - Meshery + - mesheryctl published: true resource: true type: Blog product: Meshery --- -import { BlogWrapper } from "../../Blog.style.js"; +import { BlogWrapper } from '../../Blog.style.js';

    Hola folks,

    -

    As a contributor, each of us is always striving hard in the ocean to open more and more pull-requests, but being a contributor just doesn't mean only raising PRs, it also means reviewing other PRs, pointing out mistakes, helping others in improving the code-quality/code-reusability/code-readability, helping in finding missing edge-cases that haven't been tackled yet, giving your opinions, writing LGTM, CITY helps nothing but just improving the confidence and engagement of the PR author.

    -

    So put on your Quality Tester hats because here I'll talk about how to test the PRs with the label component/mesheryctl i.e. pull-requests related to mesheryctl

    -

    Okay before we start, I'll like to tell you about GitHub CLI, it helps you checkout PRs very easily in your local system.

    +

    + As a contributor, each of us is always striving hard in the ocean to open more and more + pull-requests, but being a contributor just doesn't mean only raising PRs, it also means + reviewing other PRs, pointing out mistakes, helping others in improving the + code-quality/code-reusability/code-readability, helping in finding missing edge-cases that + haven't been tackled yet, giving your opinions, writing LGTM, CITY helps nothing but just + improving the confidence and engagement of the PR author. +

    +

    + So put on your Quality Tester hats because here I'll talk about how to test + the PRs with the label component/mesheryctl i.e. pull-requests related to{' '} + mesheryctl +

    +

    + Okay before we start, I'll like to tell you about{' '} + GitHub CLI, it helps you checkout PRs very easily in your + local system. +

      -

    1. The very first step is to review the PR, suggest changes if you think of any, ask queries, help the author to improve the code quality/readability/reusability, ask questions because asking helps you learn asking more better questions next time.

      -
      2. -

    2. PR authors either attach a video showcasing expected behavior or add written instructions about their fix under User Acceptance Behavior

      -
      3. -

    3. Now it's the time to checkout PR in your local system, we can check out any PR like this

      -
      gh pr checkout https://github.com/meshery/meshery/pull/4823
-
      -
      4. -

    4. You can check if you're into the same branch as the PR author with

      -
      git branch
-
      -
      5. -

    5. Well, if we're testing a PR related to mesheryctl, we need to build the binary from the same branch. change your directory to mesheryctl folder and run

      -
      make
-
      -

      This will create a mesheryctl binary according to your OS in the same directory

      -
      6. -

    6. Now it's time to test out this newly built binary according to what's been tackled in the PR and related issues. For e.g. system start has some new functionality, make sure you followed the pull-request/linked-issue instruction for env setup, as sometimes fix/features are tackling an issue with a specific type of environment.

      -
      7. +
    7. +

      + The very first step is to review the PR, suggest changes if you think of any, ask queries, + help the author to improve the code quality/readability/reusability, ask questions because + asking helps you learn asking more better questions next time. +

      +
      8. +
    8. +

      + PR authors either attach a video showcasing expected behavior or add written instructions + about their fix under User Acceptance Behavior +

      +
      9. +
    9. +

      + Now it's the time to checkout PR in your local system, we can check out any PR like this +

      + 
      +      gh pr checkout https://github.com/meshery/meshery/pull/4823
+
      +
      10. +
    10. +

      You can check if you're into the same branch as the PR author with

      + 
      +      git branch
+
      +
      11. +
    11. +

      + Well, if we're testing a PR related to mesheryctl, we need to build the binary from the + same branch. change your directory to mesheryctl folder and run +

      + 
      +      make
+
      +

      This will create a mesheryctl binary according to your OS in the same directory

      +
      12. +
    12. +

      + Now it's time to test out this newly built binary according to what's been tackled in + the PR and related issues. For e.g. system start has some new functionality, make + sure you followed the pull-request/linked-issue instruction for env setup, as sometimes + fix/features are tackling an issue with a specific type of environment. +

      +
    -
    ./mesheryctl system start 
-
    -

    the ./ helps us in using the newly built cli-binary present in the current directory which we built in 5th step

    +
    +  ./mesheryctl system start
+
    +

    + the ./ helps us in using the newly built cli-binary present in the current directory + which we built in 5th step +

      -
    1. make sure we have a similar experience as mentioned in the Video or the instructions added to the PR. but the wait is it okay to give green flags to the PR? not yet tbh. We as a tester should turn a little evil and think of the relevant situations/environments which might not have been tackled but should be(basically we're trying to break the new feature/fix)
      2. -
    2. After spending a good amount of time testing the new behaviors, old standard behaviors, new test cases, few edge cases. We can provide new insights to the PR author about the behavior in your system, depending on our experience we can ask the PR author to address our new queries, or we can appreciate the work, or give green flags to the PR.
      3. +
    3. + make sure we have a similar experience as mentioned in the Video or the instructions added to + the PR. but the wait is it okay to give green flags to the PR? not yet tbh. We as a tester + should turn a little evil and think of the relevant situations/environments which might not have + been tackled but should be(basically we're trying to break the new feature/fix) +
      4. +
    4. + After spending a good amount of time testing the new behaviors, old standard behaviors, new test + cases, few edge cases. We can provide new insights to the PR author about the behavior in your + system, depending on our experience we can ask the PR author to address our new queries, or we + can appreciate the work, or give green flags to the PR. +
    -

    Wow, that was a ton of work there. well being a Tester is tough but very important before we merge pull requests. Every PR should be marked green with end-to-end testing before merging, we as a project are using GH Workflows to perform standard golang-testing but manual end-to-end testing completely removes margins of error.

    +

    + Wow, that was a ton of work there. well being a Tester is tough but very important before we merge + pull requests. Every PR should be marked green with end-to-end testing before merging, we as a + project are using GH Workflows to perform standard golang-testing but manual end-to-end testing + completely removes margins of error. +

     diff --git a/src/collections/blog/2022/2022-07-06-aaditya-gsoc-blogpost/index.mdx b/src/collections/blog/2022/2022-07-06-aaditya-gsoc-blogpost/index.mdx index ef07d3865cf0..79d2ed591038 100644 --- a/src/collections/blog/2022/2022-07-06-aaditya-gsoc-blogpost/index.mdx +++ b/src/collections/blog/2022/2022-07-06-aaditya-gsoc-blogpost/index.mdx @@ -1,6 +1,6 @@ --- -title: "My Journey as a Contributor to GSoC Intern at Layer5" -subtitle: "Nothing but a magical experience" +title: 'My Journey as a Contributor to GSoC Intern at Layer5' +subtitle: 'Nothing but a magical experience' date: 2022-07-06 08:00:00 -0630 author: Aaditya Narayan Subedy thumbnail: ./aaditya-subedy-layer5-intern.webp @@ -8,45 +8,47 @@ darkthumbnail: ./aaditya-subedy-layer5-intern.webp category: Programs description: "Aaditya Narayan Subedy's journey from a Contributor at Layer5 to getting an GSoC internship at Layer5" tags: - - Programs - - GSoC - - Internship + - Programs + - GSoC + - Internship type: Blog published: true --- -import { Link } from "gatsby"; -import { BlogWrapper } from "../../Blog.style.js"; -import aadityaFirstPr from "./aaditya-first-pr.webp" -import aadityaPresenting from "./aaditya-presenting.webp" +import { Link } from 'gatsby'; +import { BlogWrapper } from '../../Blog.style.js'; +import aadityaFirstPr from './aaditya-first-pr.webp'; +import aadityaPresenting from './aaditya-presenting.webp'; -### Early Interest in Coding +### Early Interest in Coding + I had a strong interest in computers growing up. I used to find it fascinating how computer programs operate because they have such a tremendous impact on their users. This has always motivated me to work in the field of computers. -As I grew up, I was introduced to a broad spectrum of coding languages that enabled us to make the software that we used on the computer. These languages piqued my interest even more. I started exploring and made projects. The more I understood them, the more interesting they got. Slowly I realized that I don’t want to make projects that satisfy just my needs. I want to build something that will be on the internet and will be used by people around the world. With this goal in my mind, I started exploring and hit a gemstone that is open source. I would be working on real-world programming solutions that will be used by people all around the world. This helped me to get started and got me excited about contributing to open source projects. +As I grew up, I was introduced to a broad spectrum of coding languages that enabled us to make the software that we used on the computer. These languages piqued my interest even more. I started exploring and made projects. The more I understood them, the more interesting they got. Slowly I realized that I don’t want to make projects that satisfy just my needs. I want to build something that will be on the internet and will be used by people around the world. With this goal in my mind, I started exploring and hit a gemstone that is open source. I would be working on real-world programming solutions that will be used by people all around the world. This helped me to get started and got me excited about contributing to open source projects. + +### First PR at Layer5 -### First PR at Layer5 -I still remember the first issue I worked on for Layer5 was the auto labeler on a pull request. I spotted a [good first issue](https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22good+first+issue%22+) tag and expressed interest in working on it despite not knowing what the task was. The issue required knowledge of GitHub Actions, something I was unaware of at the time. After getting the issue assigned, I started researching what GitHub Actions were. I found out that these actions helped automate workflows to build, test, and deploy software. After getting the basics down, I checked if there were any existing GitHub Actions for the auto labeling of the PR. To my surprise, there were a couple of them. +I still remember the first issue I worked on for Layer5 was the auto labeler on a pull request. I spotted a [good first issue](https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22good+first+issue%22+) tag and expressed interest in working on it despite not knowing what the task was. The issue required knowledge of GitHub Actions, something I was unaware of at the time. After getting the issue assigned, I started researching what GitHub Actions were. I found out that these actions helped automate workflows to build, test, and deploy software. After getting the basics down, I checked if there were any existing GitHub Actions for the auto labeling of the PR. To my surprise, there were a couple of them. -So before actually making a PR, I experimented with the actions extensively in my private repo. I remember making about 20-25 PR in my private repo to get the auto labeler working fine. After verifying that I got the desired results, I made a PR. I also got to discuss my approach in the [Meshery Development Call](https://layer5.io/community/calendar). I was so nervous at that time since that was the first meeting I attended where I had to make people understand what I did and the strategies I used. I was quite thrilled when my code got merged. I was enthralled to see that my code was working and being useful to the community. This motivated me to make more and more contributions. +So before actually making a PR, I experimented with the actions extensively in my private repo. I remember making about 20-25 PR in my private repo to get the auto labeler working fine. After verifying that I got the desired results, I made a PR. I also got to discuss my approach in the [Meshery Development Call](https://layer5.io/community/calendar). I was so nervous at that time since that was the first meeting I attended where I had to make people understand what I did and the strategies I used. I was quite thrilled when my code got merged. I was enthralled to see that my code was working and being useful to the community. This motivated me to make more and more contributions. Aaditya's first PR merged -### A Journey Never to forget +### A Journey Never to forget -My Layer5 journey began with this small issue. I gradually started learning more about the projects and made some impactful contributions. I started to engage in the community more prominently. With the help of these contributions, I learned new technologies and techniques. Contributing to the codebase gave me so much exposure to React.js, which would not have been possible if I had done it on my own. I took up issues that used React.js and started solving them, and in no time, I was comfortable with it. I am thankful that I didn’t wait for me to learn more about react and then start contributing. I have always applied this principle, learning more by doing actual stuff rather than sitting there and getting stuck in the tutorial loop. +My Layer5 journey began with this small issue. I gradually started learning more about the projects and made some impactful contributions. I started to engage in the community more prominently. With the help of these contributions, I learned new technologies and techniques. Contributing to the codebase gave me so much exposure to React.js, which would not have been possible if I had done it on my own. I took up issues that used React.js and started solving them, and in no time, I was comfortable with it. I am thankful that I didn’t wait for me to learn more about react and then start contributing. I have always applied this principle, learning more by doing actual stuff rather than sitting there and getting stuck in the tutorial loop. -Another new technology I discovered was Jekyll, a static site generator. I was unfamiliar with this technology as well. I started contributing to issues involving Jekyll and slowly understood the basics and how the language works. I was very happy that I was able to make the [compatibility matrix](https://docs.meshery.io/project/compatibility-matrix), using Jekyll. Even my project for GSoC is written in Jekyll. So, going from not knowing what Jekyll is, to making some big changes, did make me happy. +Another new technology I discovered was Jekyll, a static site generator. I was unfamiliar with this technology as well. I started contributing to issues involving Jekyll and slowly understood the basics and how the language works. I was very happy that I was able to make the [compatibility matrix](https://docs.meshery.io/project/compatibility-matrix), using Jekyll. Even my project for GSoC is written in Jekyll. So, going from not knowing what Jekyll is, to making some big changes, did make me happy. -The community also helped me boost my confidence. The weekly meetings are responsible for this. The way the meetings required me to explain my fixes and give updates regarding the issues I was working on, helped me get vocal and comfortable with talking to various people. +The community also helped me boost my confidence. The weekly meetings are responsible for this. The way the meetings required me to explain my fixes and give updates regarding the issues I was working on, helped me get vocal and comfortable with talking to various people. -Aaditya Presenting +Aaditya Presenting{' '} -I am excited to be accepted as a Google Summer of Code Intern for this Summer of 2022. I am looking forward to contributing more and making an impact here. The project assigned to me is to create a dashboard on SMP Website. Results from the [CNCF Cluster labs](https://github.com/layer5io/meshery-smp-action/actions) will be displayed here graphically. I wish to learn more about cloud native technologies and make contributions on the backend too. I also want to state that this will not be the end. I will be engaged with this community as long as I can and will try to give back as much as I can. +I am excited to be accepted as a Google Summer of Code Intern for this Summer of 2022. I am looking forward to contributing more and making an impact here. The project assigned to me is to create a dashboard on SMP Website. Results from the [CNCF Cluster labs](https://github.com/layer5io/meshery-smp-action/actions) will be displayed here graphically. I wish to learn more about cloud native technologies and make contributions on the backend too. I also want to state that this will not be the end. I will be engaged with this community as long as I can and will try to give back as much as I can. -### Appreciation for the Community +### Appreciation for the Community Finally, I would like to thank the Layer5 Community for always being so supportive whenever I needed it. I took away a very significant lesson from this experience, there is always something to learn, and there is no harm in asking questions if you don't know the answer. It’s kinda hard to find such a welcoming community. There was not a day that I felt completely lost here, and that is what I adore about this community. diff --git a/src/collections/blog/2022/2022-07-07-deploy-meshery-on-aks/index.mdx b/src/collections/blog/2022/2022-07-07-deploy-meshery-on-aks/index.mdx index 76aa27dcdb3b..7b3e2e67afc0 100644 --- a/src/collections/blog/2022/2022-07-07-deploy-meshery-on-aks/index.mdx +++ b/src/collections/blog/2022/2022-07-07-deploy-meshery-on-aks/index.mdx @@ -1,12 +1,12 @@ --- -title: "How to deploy Meshery on AKS" +title: 'How to deploy Meshery on AKS' date: 2022-07-21 08:00:00 -0630 author: Srinivas Karnati -category: "Meshery" -description: "How to deploy Meshery on Azure Kubernetes service(AKS)." +category: 'Meshery' +description: 'How to deploy Meshery on Azure Kubernetes service(AKS).' tags: - - Meshery - - Kubernetes + - Meshery + - Kubernetes thumbnail: ./Meshery-on-AKS.webp darkthumbnail: ./Meshery-on-AKS.webp type: Blog @@ -14,36 +14,61 @@ published: true resource: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import mesheryui from "./mesheryui.webp"; +import { BlogWrapper } from '../../Blog.style.js'; +import mesheryui from './mesheryui.webp';
    -

    Meshery's goal is to make the operation of cloud native infrastructure and the service mesh layer of cloud simplified. Originally created by Layer5, Meshery is an open source project with hundreds of contributors world-wide and is actively maintained by engineers from Red Hat, VMware, Intel, Layer5 and others.

    +

    + Meshery's goal is to make the operation of cloud native + infrastructure and the service mesh layer of cloud simplified. Originally created by Layer5, + Meshery is an open source project with hundreds of contributors world-wide and is actively + maintained by engineers from Red Hat, VMware, Intel, Layer5 and others. +

    Setup and run Meshery on AKS

    -

    The following instructions expects you to have an active Azure subscription, and Azure CLI installed on your system.

    +

    + The following instructions expects you to have an active Azure subscription, and Azure CLI + installed on your system.{' '} +

    Spin up the AKS Cluster

    -

    Create the resource group (a logical group where all our resources will be deployed). The following command creates a resource group named MesheryGroup in southindia location.

    -
    
-az group create --name MesheryGroup --location southindia
-
    - -

    Create AKS cluster using az aks create. The following command creates aks cluster with a single node.

    - -
    
-az aks create --resource-group MesheryGroup --name MesheryAKS --node-count 1 --generate-ssh-keys
-
    -

    After a few minutes, the command completes and returns a JSON formatted information about the cluster.

    -

    You can connect with your cluster by using az aks get-credentials , which basically downloads credentials and configure the Kubernetes CLI.

    -
    
-az aks get-credentials --resource-group MesheryGroup --name MesheryAKS
-
    -

    Verify the connection to your cluster using the kubectl get command.

    -
    
-$kubectl get nodes
-
    +

    + Create the resource group (a logical group where all our resources will be deployed). The + following command creates a resource group named MesheryGroup in southindia location.{' '} +

    +
    +  az group create --name MesheryGroup --location southindia
+
    + +

    + Create AKS cluster using az aks create. The following command creates aks cluster + with a single node.{' '} +

    + +
    +  
+    az aks create --resource-group MesheryGroup --name MesheryAKS --node-count 1 --generate-ssh-keys
+  
+
    + +

    + After a few minutes, the command completes and returns a JSON formatted information about the + cluster. +

    +

    + You can connect with your cluster by using az aks get-credentials , which basically + downloads credentials and configure the Kubernetes CLI.{' '} +

    +
    +  az aks get-credentials --resource-group MesheryGroup --name MesheryAKS
+
    +

    + Verify the connection to your cluster using the kubectl get command.{' '} +

    +
    +  $kubectl get nodes
+

    Install Meshery into your AKS cluster

    ``` @@ -52,11 +77,19 @@ helm repo add meshery https://meshery.io/charts/ helm install meshery meshery/meshery --namespace meshery --create-namespace ``` -

    Meshery server supports customizing authentication flow callback URL, which can be configured in the following way.

    -
    
-helm install meshery meshery/meshery --namespace meshery --set env.MESHERY_SERVER_CALLBACK_URL=https://custom-host --create-namespace
-
    +

    + Meshery server supports customizing authentication flow callback URL, which can be configured in + the following way. +

    + +
    +  
+    helm install meshery meshery/meshery --namespace meshery --set
+    env.MESHERY_SERVER_CALLBACK_URL=https://custom-host --create-namespace
+  
+
    +

    Port forward to Meshery UI

    ``` @@ -65,12 +98,25 @@ export POD_NAME=$(kubectl get pods --namespace meshery -l "app.kubernetes.io/nam $ kubectl --namespace meshery port-forward $POD_NAME 9081:8080 ``` -

    Meshery should now be running in your AKS cluster and the Meshery UI should be accessible at the specified endpoint you’ve exposed to. Navigate to the meshery service endpoint to log into Meshery.

    -
    Meshery UI Dashboard
    +

    + Meshery should now be running in your AKS cluster and the Meshery UI should be accessible at the + specified endpoint you’ve exposed to. Navigate to the meshery service endpoint to log into + Meshery. +

    -

    From here, your Meshery deployment on AKS is ready to use. In order to login to Meshery, authenticate with your chosen provider from the list.

    -

    There are different ways to configure a Meshery on AKS. Join the community and share your deployment’s configuration on the discussion forum today!

    +
    + Meshery UI Dashboard +
    +

    + From here, your Meshery deployment on AKS is ready to use. In order to login to Meshery, + authenticate with your chosen provider from the list. +

    +

    + There are different ways to configure a Meshery on AKS. Join the{' '} + community and share your deployment’s configuration on + the discussion forum today!{' '} +

     diff --git a/src/collections/blog/2022/2022-07-28-managing-multiple-clusters-with-meshery/index.mdx b/src/collections/blog/2022/2022-07-28-managing-multiple-clusters-with-meshery/index.mdx index 3e0fbe7cb9ae..aa59d244e32b 100644 --- a/src/collections/blog/2022/2022-07-28-managing-multiple-clusters-with-meshery/index.mdx +++ b/src/collections/blog/2022/2022-07-28-managing-multiple-clusters-with-meshery/index.mdx @@ -3,10 +3,10 @@ title: Multi-Cluster Kubernetes Management with Meshery subtitle: Wrangling your services one cluster at-a-time date: 2022-07-28 08:00:00 -0630 author: Ashish Tiwari -description: "Manage all of your Kubernetes clusters with the cloud native management plane, Meshery. Learn how Meshery makes connecting, discovering, and configuring multiple clusters a breeze." +description: 'Manage all of your Kubernetes clusters with the cloud native management plane, Meshery. Learn how Meshery makes connecting, discovering, and configuring multiple clusters a breeze.' thumbnail: ./multi-cluster-kubernetes-management-with-meshery.webp darkthumbnail: ./multi-cluster-kubernetes-management-with-meshery.webp -category: "Meshery" +category: 'Meshery' tags: - Meshery - Multi-cluster @@ -16,26 +16,25 @@ featured: true published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import Switcher from "./context-switcher.webp"; -import Deploy from "./deploy-modal.webp"; -import Cluster2 from "./meshmap-cluster2.webp"; -import Cluster1 from "./meshmap-cluster1.webp"; -import Settings from "./settings.webp"; -import Cluster from "./cluster-mgmt.webp"; -import Flush from "./flush-meshsync.webp"; -import CoreArch from "./meshery-core-architecture.webp"; -import { Link } from "gatsby"; +import { BlogWrapper } from '../../Blog.style.js'; +import Switcher from './context-switcher.webp'; +import Deploy from './deploy-modal.webp'; +import Cluster2 from './meshmap-cluster2.webp'; +import Cluster1 from './meshmap-cluster1.webp'; +import Settings from './settings.webp'; +import Cluster from './cluster-mgmt.webp'; +import Flush from './flush-meshsync.webp'; +import CoreArch from './meshery-core-architecture.webp'; +import { Link } from 'gatsby';

    - From multi-mesh to now multi-cluster, Meshery is - continuously expanding its capability to give developers, operators, and - security engineers more control over their infrastructure. In this post, - we'll take a look behind the scenes at how each component in Meshery's - architecture plays a role in the management of many Kubernetes clusters. + From multi-mesh to now multi-cluster, Meshery is continuously + expanding its capability to give developers, operators, and security engineers more control over + their infrastructure. In this post, we'll take a look behind the scenes at how each component in + Meshery's architecture plays a role in the management of many Kubernetes clusters.

    @@ -68,18 +67,10 @@ Just before applying the operation, you will be prompted with a confirmation mod You can switch between views of your cluster in visualizer mode while using MeshMap.

    - visualizer showing data of context1 + visualizer showing data of context1

    - visualizer showing data of context2 + visualizer showing data of context2

    ### Managing Meshery on multiple clusters diff --git a/src/collections/blog/2022/2022-10-19-kubeconna2022/index.mdx b/src/collections/blog/2022/2022-10-19-kubeconna2022/index.mdx index ada5bd42a335..07642e2f8912 100644 --- a/src/collections/blog/2022/2022-10-19-kubeconna2022/index.mdx +++ b/src/collections/blog/2022/2022-10-19-kubeconna2022/index.mdx @@ -5,7 +5,7 @@ date: 2022-10-19 08:00:00 -0530 author: Deepesha Burse thumbnail: ./kubeconNA2022.webp darkthumbnail: ./kubeconNA2022.webp -description: "Layer5 projects on stage at KubeCon + CloudNativeCon NA 2022" +description: 'Layer5 projects on stage at KubeCon + CloudNativeCon NA 2022' type: Blog category: Events tags: @@ -15,10 +15,9 @@ tags: published: true --- -import { BlogWrapper } from "../../Blog.style.js"; -import { Link } from "gatsby"; -import Button from "../../../../reusecore/Button"; - +import { BlogWrapper } from '../../Blog.style.js'; +import { Link } from 'gatsby'; +import Button from '../../../../reusecore/Button';

    @@ -30,17 +29,27 @@ import Button from "../../../../reusecore/Button";

    -

    Layer5 at KubeCon NA 2022

    +

    + + Layer5 at KubeCon NA 2022 + +

    -Join us as we host project office hours. Don't be shy with your questions! Project maintainers are happy to receive your questions and will be available to share about current project activites, discuss current features as well as planned future project roadmap. +Join us as we host project office hours. Don't be shy with your questions! Project maintainers are happy to receive your questions and will be available to share about current project activites, discuss current features as well as planned future project roadmap.

    Meshery Project Office Hours

    -

    October 26, 2022
    :  Meshery is the open source, cloud native manager that enables the adoption, operation, and management of Kubernetes, any service mesh, and their workloads. Meshery is a multi-cluster Kubernetes manager hundreds of integrations supported for any workload or infrastructure components. +
    October 26, 2022
    : {' '} + Meshery is the open source, cloud native + manager that enables the adoption, operation, and management of Kubernetes, any service mesh, and + their workloads. Meshery is a multi-cluster Kubernetes manager hundreds of{' '} + integrations supported for any + workload or infrastructure components.

    - -

    - We will be briefing you all on the following feature highlights of the latest version of Meshery v0.6.0: + +

    + We will be briefing you all on the following feature highlights of the latest version of Meshery + v0.6.0:

    • Applications
    • Filters
      • @@ -49,50 +58,101 @@ Join us as we host project office hours. Don't be shy with your questions! Proje

    - +   - + -


    - See the WASM Filters repository. +

    +
    + See the WASM Filters repository + .

    @@ -85,4 +114,4 @@ const ImageHubPage = () => { ); }; -export default ImageHubPage; \ No newline at end of file +export default ImageHubPage; diff --git a/src/sections/Projects/Nighthawk/gnh.style.js b/src/sections/Projects/Nighthawk/gnh.style.js index 5a6cd0b2f909..607ce7ad04ad 100644 --- a/src/sections/Projects/Nighthawk/gnh.style.js +++ b/src/sections/Projects/Nighthawk/gnh.style.js @@ -1,278 +1,280 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const Gnhwrapper = styled.section` - - svg { - .nighthawk-colorMode_svg__colorMode1{ - fill: ${props => props.theme.whiteToGreen3C494F}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - .smp-colorMode_svg__colorMode1{ - fill: ${props => props.theme.whiteToGreen3C494F}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } + svg { + .nighthawk-colorMode_svg__colorMode1 { + fill: ${(props) => props.theme.whiteToGreen3C494F}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .smp-colorMode_svg__colorMode1 { + fill: ${(props) => props.theme.whiteToGreen3C494F}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + .hero-section { + padding: 5rem 0rem; + .logo { + display: block; + margin: 0 auto; + width: 80%; + } - .hero-section{ - padding: 5rem 0rem; - .logo{ - display: block; - margin: 0 auto; - width: 80%; - } + .hero-text { + margin: 0 auto; + img { + width: 70%; + } + padding-top: 3.125rem; + h1 { + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + p { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + } - .hero-text{ - margin: 0 auto; - img{ - width: 70%; - } - padding-top: 3.125rem; - h1{ - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - p{ - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - } + .stats { + text-align: center; + h3 { + font-weight: 700; + } + p { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } - .stats { - text-align: center; - h3 { - font-weight: 700; - } - p { - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + .explain-1 { + padding-top: 5rem; + text-align: center; + p { + color: ${(props) => props.theme.tertiaryColor}; + padding: 0px 3.125rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } + h1 { + padding: 1.25rem 0px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + img { + display: block; + margin-left: auto; + margin-right: auto; + width: 80%; + padding: 1.875rem 0; + } + .cards { + margin: 3.125rem 0; + width: 100%; + min-height: 500px; + padding: 5rem 1.25rem; + border-radius: 25px; + } + } - .explain-1 { - padding-top: 5rem; - text-align: center; - p { - color: ${props => props.theme.tertiaryColor}; - padding: 0px 3.125rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - h1 { - padding: 1.25rem 0px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - img { - display: block; - margin-left: auto; - margin-right: auto; - width: 80%; - padding: 1.875rem 0; - } - .cards { - margin: 3.125rem 0; - width: 100%; - min-height: 500px; - padding: 5rem 1.25rem; - border-radius: 25px; - } + .explain-2 { + padding: 25px 0px; + .align { + align-items: baseline; + } + .text { + padding: 1.25rem 1.25rem 0px 1.25rem; + h2 { + font-weight: 700; + font-size: 40px; + padding: 1.25rem 0px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + p { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + img { + display: block; + margin-left: auto; + margin-right: auto; } + Button { + margin: 1.25rem 0px; + color: white; + } + } - .explain-2{ - padding: 25px 0px; - .align{ - align-items: baseline; - } - .text{ - padding: 1.25rem 1.25rem 0px 1.25rem; - h2{ - font-weight: 700; - font-size: 40px; - padding: 1.25rem 0px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - p{ - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - img{ - display: block; - margin-left: auto; - margin-right: auto; - } - Button{ - margin: 1.25rem 0px; - color: white; - } + .list { + padding: 1.875rem 0px; + + .text { + h2 { + font-size: 2rem; + font-weight: 700; + padding: 1.25rem 0px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + p { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } } - .list{ - padding: 1.875rem 0px; + .listed { + text-align: left; + .table { + .icon { + object-fit: cover; + height: 2.5rem; + width: 2.5rem; + vertical-align: top; + } - .text{ - h2{ - font-size: 2rem; - font-weight: 700; - padding: 1.25rem 0px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + svg { + rect { + fill: ${(props) => props.theme.grey313131ToGreenC9FCF6}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } - p{ - color: ${props => props.theme.tertiaryColor}; + path { + stroke: ${(props) => props.theme.green00D3A9ToGreen00B39F}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } } - .listed{ - text-align: left; - .table{ - .icon{ - object-fit: cover; - height: 2.5rem; - width: 2.5rem; - vertical-align: top; - } + .service { + color: ${(props) => props.theme.tertiaryColor}; + font-size: 16px; + padding: 0 0 1.25rem 1.875rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - svg { - rect { - fill: ${props => props.theme.grey313131ToGreenC9FCF6}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - path { - stroke: ${props => props.theme.green00D3A9ToGreen00B39F}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - - .service{ - color: ${props => props.theme.tertiaryColor}; - font-size: 16px; - padding: 0 0 1.25rem 1.875rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - h4{ - font-weight: 600; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - } + h4 { + font-weight: 600; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } } + } } - - .distributedPerf { - display: relative; - float: left; - width: 30%; - padding-right: 1rem; - margin-top: 1rem; + } + + .distributedPerf { + display: relative; + float: left; + width: 30%; + padding-right: 1rem; + margin-top: 1rem; + } + .callout { + background: rgb(205, 28, 109); + background: linear-gradient( + 107deg, + rgba(205, 28, 109, 1) 0%, + rgba(40, 43, 98, 1) 99%, + rgba(41, 44, 99, 1) 100% + ); + padding: 5rem; + text-align: center; + color: ${(props) => props.theme.white}; + p { + margin: 0.94rem 0; } - .callout{ - background: rgb(205,28,109); - background: linear-gradient(107deg, rgba(205,28,109,1) 0%, rgba(40,43,98,1) 99%, rgba(41,44,99,1) 100%); - padding: 5rem; - text-align: center; - color: ${props => props.theme.white}; - p{ - margin: 0.94rem 0; - } - img{ - width: 25rem; - } + img { + width: 25rem; } - - @media only screen and (max-width: 767px) { - .hero-section{ - .hero-text{ - text-align:center; - } - } + } + + @media only screen and (max-width: 767px) { + .hero-section { + .hero-text { + text-align: center; + } } + } - @media only screen and (max-width: 568px) { - .hero-section{ - padding: 3.125rem 0; - .hero-text{ - width: 90%; - h1{ - margin-bottom:1rem; - } - } - } - .explain-1{ - padding-top: 3.125rem; - p{ - padding: 0 1.25rem; - } + @media only screen and (max-width: 568px) { + .hero-section { + padding: 3.125rem 0; + .hero-text { + width: 90%; + h1 { + margin-bottom: 1rem; } + } } + .explain-1 { + padding-top: 3.125rem; + p { + padding: 0 1.25rem; + } + } + } `; export const CardsContainer = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, 32%); - grid-auto-rows: 1fr; - justify-content: space-between; - padding-left: 20px; - padding-right: 20px; - grid-gap: 10px; + display: grid; + grid-template-columns: repeat(auto-fill, 32%); + grid-auto-rows: 1fr; + justify-content: space-between; + padding-left: 20px; + padding-right: 20px; + grid-gap: 10px; - .card { - box-shadow: rgb(0 0 0 / 5%) 2px 4px 2.5rem 0.5rem; - margin: 2px; - padding: 1.5rem; - background-color: ${props => props.theme.grey212121ToWhite}; - border-radius: 25px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - p { - text-align: left; - padding: 0px 0px; - letter-spacing: 0; - margin-top: 10px; - } + .card { + box-shadow: rgb(0 0 0 / 5%) 2px 4px 2.5rem 0.5rem; + margin: 2px; + padding: 1.5rem; + background-color: ${(props) => props.theme.grey212121ToWhite}; + border-radius: 25px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - ul { - text-align: left; - } + p { + text-align: left; + padding: 0px 0px; + letter-spacing: 0; + margin-top: 10px; + } - a:hover { - color: ${props => props.theme.text}; - } - h2 { - text-align: left; - font-size: 24px; - text-transform:uppercase; - margin-top: 10px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - .circle { - border-radius: 50%; - width: 4.65rem; - height: 4.65rem; - background-color: ${props => props.theme.secondaryLightColorTwo}; - padding: 0.35rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - img { - padding: 0.3rem 0px; - } - } + ul { + text-align: left; } - @media screen and (max-width: 974px) { - grid-template-columns: repeat(4, 1fr); - grid-template-rows: 1fr 1fr; - grid-gap: 20px; - padding: 20px; - div { - grid-column-end: span 2; - } - div:last-child { - grid-column-start: 2; - } + a:hover { + color: ${(props) => props.theme.text}; + } + h2 { + text-align: left; + font-size: 24px; + text-transform: uppercase; + margin-top: 10px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } + .circle { + border-radius: 50%; + width: 4.65rem; + height: 4.65rem; + background-color: ${(props) => props.theme.secondaryLightColorTwo}; + padding: 0.35rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + img { + padding: 0.3rem 0px; + } + } + } - @media screen and (max-width: 767px) { - display: flex; - flex-direction: column; + @media screen and (max-width: 974px) { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + grid-gap: 20px; + padding: 20px; + div { + grid-column-end: span 2; } -`; + div:last-child { + grid-column-start: 2; + } + } + @media screen and (max-width: 767px) { + display: flex; + flex-direction: column; + } +`; diff --git a/src/sections/Projects/Nighthawk/index.js b/src/sections/Projects/Nighthawk/index.js index 2dde5ab179b3..d1d601c419c8 100644 --- a/src/sections/Projects/Nighthawk/index.js +++ b/src/sections/Projects/Nighthawk/index.js @@ -1,23 +1,24 @@ -import React, { useState, useEffect } from "react"; -import { Link } from "gatsby"; -import { StaticImage } from "gatsby-plugin-image"; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import Button from "../../../reusecore/Button"; -import { ReactComponent as Logo } from "../../../assets/images/nighthawk/with-name/SVG/nighthawk-colorMode.svg"; -import { ReactComponent as SmpIcon } from "./images/smp-colorMode.svg"; -import cloud from "./images/cloud-network_green.svg"; -import cpu from "./images/cpu_green.svg"; -import distributedPerf from "./images/distributed-performance_green.svg"; -import cncf from "./images/cncf-white.svg"; +import React, { useState, useEffect } from 'react'; +import { Link } from 'gatsby'; +import { StaticImage } from 'gatsby-plugin-image'; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import Button from '../../../reusecore/Button'; +import { ReactComponent as Logo } from '../../../assets/images/nighthawk/with-name/SVG/nighthawk-colorMode.svg'; +import { ReactComponent as SmpIcon } from './images/smp-colorMode.svg'; +import cloud from './images/cloud-network_green.svg'; +import cpu from './images/cpu_green.svg'; +import distributedPerf from './images/distributed-performance_green.svg'; +import cncf from './images/cncf-white.svg'; -const explain1 = "./images/Rectangle 479.webp"; -const explain2 = "./images/optimizing-your-average-response-time.webp"; -const explain3 = "./images/Comparison-of-different-modes-of-delivery-of-service-mesh-network-functions.webp"; +const explain1 = './images/Rectangle 479.webp'; +const explain2 = './images/optimizing-your-average-response-time.webp'; +const explain3 = + './images/Comparison-of-different-modes-of-delivery-of-service-mesh-network-functions.webp'; -import { Gnhwrapper, CardsContainer } from "./gnh.style"; +import { Gnhwrapper, CardsContainer } from './gnh.style'; -import { URL } from "../../Counters/index"; -import Counter from "../../../reusecore/Counter"; +import { URL } from '../../Counters/index'; +import Counter from '../../../reusecore/Counter'; const Projects = () => { const [performanceCount, setPerformanceCount] = useState(0); @@ -34,13 +35,15 @@ const Projects = () => {
    - +
    {/* */}

    Unlock distributed systems behavioral performance analysis

    -

    Meshery is the easiest way to get started with Nighthawk on any cloud or platform.

    +

    + Meshery is the easiest way to get started with Nighthawk on any cloud or platform. +

    @@ -49,19 +52,27 @@ const Projects = () => {
    -

    +

    + +

    Histogram Statistics

    -

    +

    + +

    Meshery Tests

    -

    +

    + +

    Closed and Open-loop

    -

    +

    + +

    Percentiles calculated

     @@ -69,9 +80,15 @@ const Projects = () => {

    What is Nighthawk?

    -

    Nighthawk is a versatile HTTP load testing tool built out of a need to drill HTTP services with a constant request rate or with an adaptive request rate. Layer5 offers a custom distribution of Nighthawk with intelligent adaptive load controllers to automatically identify optimal configurations for your service mesh deployment. - As a Layer 7 performance characterization tool supporting HTTP/HTTPS/HTTP2, Nighthawk is Meshery's (and Envoy's) load generator and is written in C++.

    - +

    + Nighthawk is a versatile HTTP load testing tool built out of a need to drill HTTP + services with a constant request rate or with an adaptive request rate. Layer5 offers a + custom distribution of Nighthawk with intelligent adaptive load controllers to + automatically identify optimal configurations for your service mesh deployment. As a + Layer 7 performance characterization tool supporting HTTP/HTTPS/HTTP2, Nighthawk is + Meshery's (and Envoy's) load generator and is written in C++. +

    +
    @@ -79,7 +96,11 @@ const Projects = () => {

    Nighthawk and Meshery

    -

    Meshery integrates Nighthawk as one of (currently) three choices of load generator for characterizing and managing the performance of service meshes and their workloads.

    +

    + Meshery integrates Nighthawk as one of (currently) three choices of load generator + for characterizing and managing the performance of service meshes and their + workloads.{' '} +

    @@ -96,8 +117,20 @@ const Projects = () => {

    Easing Management of the Nighthawk Lifecycle

    -

    As with a lot of open source projects, there is a lack of consistent tooling. This makes it difficult to have easily repeatable tests in that the building, deploying, and maintaining of Nighthawk instances (potentially a fleet of Nighthawk instances) is a burden without additional tooling.

    -
    @@ -105,8 +138,18 @@ const Projects = () => {

    Distributed Performance Management

    -

    Distributed load testing offers insight into system behaviors that arguably more accurately represent real world behaviors of services under load as that load comes from any number of sources.

    -

    Engineers need multi-variate load generation and analysis techniques offered through distributed performance analysis. Nighthawk is being improved so that it can be horizontally scalable - such that multiple instances will be cognizant of one another and able to coordinate amongst each other. Nighthawk is growing in popularity with Layer5, Google, Red Hat, and AWS investing into it.

    +

    + Distributed load testing offers insight into system behaviors that arguably more + accurately represent real world behaviors of services under load as that load comes from + any number of sources. +

    +

    + Engineers need multi-variate load generation and analysis techniques offered through + distributed performance analysis. Nighthawk is being improved so that it can be + horizontally scalable - such that multiple instances will be cognizant of one another + and able to coordinate amongst each other. Nighthawk is growing in popularity with + Layer5, Google, Red Hat, and AWS investing into it. +

    @@ -115,7 +158,14 @@ const Projects = () => {

    SERVICE MESH PERFORMANCE COMPATIBILITY

    -

    Enabling Standards-based, Distributed Performance Management - Nighthawk integrates Meshery and Nighthawk. Through this integration Meshery facilitates Service Mesh Performance (SMP) compatibility for Nighthawk.

    +

    + Enabling Standards-based, Distributed Performance Management - Nighthawk + integrates Meshery and Nighthawk. Through this integration Meshery facilitates{' '} + + Service Mesh Performance (SMP) + {' '} + compatibility for Nighthawk. +

    @@ -141,8 +191,16 @@ const Projects = () => { cpu image

    SCHEDULING AND ANALYSIS

    -

    Nighthawk integrates with Meshery and provides you with the ability to schedule performance tests or insert them into your CI pipeline.

    -

    Adaptive analysis in which you may run multi-stage performance tests and persist their results in a historical archive is also enabled through integration with Meshery.

    +

    + Nighthawk integrates with Meshery and provides you + with the ability to schedule performance tests or insert them into your CI + pipeline. +

    +

    + Adaptive analysis in which you may run multi-stage performance tests and persist + their results in a historical archive is also enabled through integration with + Meshery. +

    @@ -153,53 +211,129 @@ const Projects = () => {
    - Cloud Native Distributed Performance Management + Cloud Native Distributed Performance Management

    Standards-based, distributed performance management

    -

    Nighthawk will provide generally-available distributions of Nighthawk under different architectures and platforms and easy-to-use tooling for installation and operation. This will include creating distributions of Nighthawk as well as augmenting existing tooling, Meshery, to retrieve these arch-specific packages and update their deployments.

    +

    + Nighthawk will provide generally-available distributions of Nighthawk under + different architectures and platforms and easy-to-use tooling for installation and + operation. This will include creating distributions of Nighthawk as well as + augmenting existing tooling, Meshery, to retrieve these arch-specific packages and + update their deployments. +

    -
    - + - + - + - + @@ -211,8 +345,11 @@ const Projects = () => {
    cncf logo -

    Participate in the state of the art.
    - Join us in the Cloud Native Computing Foundation's Service Mesh Working Group.

    +

    + {' '} + Participate in the state of the art.
    + Join us in the Cloud Native Computing Foundation's Service Mesh Working Group. +

    diff --git a/src/sections/Projects/Project-grid/index.js b/src/sections/Projects/Project-grid/index.js index 806a2a32cdfd..bb77ec752978 100644 --- a/src/sections/Projects/Project-grid/index.js +++ b/src/sections/Projects/Project-grid/index.js @@ -1,35 +1,31 @@ -import React, { useContext } from "react"; -import { Link } from "gatsby"; -import { Container, Row } from "../../../reusecore/Layout"; -import PageHeader from "../../../reusecore/PageHeader"; +import React, { useContext } from 'react'; +import { Link } from 'gatsby'; +import { Container, Row } from '../../../reusecore/Layout'; +import PageHeader from '../../../reusecore/PageHeader'; // import ProudMaintainers from "../../../sections/Home/Proud-maintainers"; -import { ThemeManagerContext } from "../../../theme/app/ThemeManager"; -import { ProjectWrapper } from "./projectGrid.style"; -import MeshMapCTA from "../../meshmap-cta"; +import { ThemeManagerContext } from '../../../theme/app/ThemeManager'; +import { ProjectWrapper } from './projectGrid.style'; +import MeshMapCTA from '../../meshmap-cta'; -import extension from "../../../assets/images/docker-extension/docker-extension-meshery-logo.svg"; -import meshery from "../../../assets/images/meshery/icon-only/meshery-logo-light.svg"; -import landscape from "../../../assets/images/landscape/layer5_landscape_green.svg"; -import imagehub from "../../../assets/images/image-hub/layer5-image-hub.svg"; -import smp_dark from "../../../assets/images/service-mesh-performance/icon/smp-dark.svg"; -import smp_light from "../../../assets/images/service-mesh-performance/icon/smp-light.svg"; -import patterns from "../../../assets/images/service-mesh-patterns/service-mesh-pattern.svg"; -import L5gray from "../../../assets/images/layer5/5 icon/svg/gray/5-gray-60.svg"; -import nighthawk from "../../../assets/images/nighthawk/icon-only/SVG/nighthawk-logo.svg"; -import meshmap from "../../../assets/images/meshmap/icon-only/meshmap-icon.svg"; -import catalog from "../../../assets/images/catalog-icon/catalog.svg"; -import sistent from "../../../assets/images/sistent/sistent-logo.svg"; -import SoSpecial from "../../Home/So-Special-Section"; +import extension from '../../../assets/images/docker-extension/docker-extension-meshery-logo.svg'; +import meshery from '../../../assets/images/meshery/icon-only/meshery-logo-light.svg'; +import landscape from '../../../assets/images/landscape/layer5_landscape_green.svg'; +import imagehub from '../../../assets/images/image-hub/layer5-image-hub.svg'; +import smp_dark from '../../../assets/images/service-mesh-performance/icon/smp-dark.svg'; +import smp_light from '../../../assets/images/service-mesh-performance/icon/smp-light.svg'; +import patterns from '../../../assets/images/service-mesh-patterns/service-mesh-pattern.svg'; +import L5gray from '../../../assets/images/layer5/5 icon/svg/gray/5-gray-60.svg'; +import nighthawk from '../../../assets/images/nighthawk/icon-only/SVG/nighthawk-logo.svg'; +import meshmap from '../../../assets/images/meshmap/icon-only/meshmap-icon.svg'; +import catalog from '../../../assets/images/catalog-icon/catalog.svg'; +import sistent from '../../../assets/images/sistent/sistent-logo.svg'; +import SoSpecial from '../../Home/So-Special-Section'; const ProjectPage = () => { const { isDark } = useContext(ThemeManagerContext); return ( - +

    for the Layer 5 icon th layer of distributed systems @@ -49,10 +45,7 @@ const ProjectPage = () => {

    Landscape
    - +
    Meshery
    Meshery
    @@ -64,24 +57,15 @@ const ProjectPage = () => {
    Image Hub
    - +
    MeshMap
    MeshMap
    - +
    - Cloud Native Performance + Cloud Native Performance
    Cloud Native Performance
    @@ -98,10 +82,7 @@ const ProjectPage = () => {
    NightHawk
    - +
    Meshery Docker Extension @@ -118,10 +99,7 @@ const ProjectPage = () => {
    Cloud Native Patterns
    - +
    Catalog
    Catalog
    diff --git a/src/sections/Projects/Project-grid/projectGrid.style.js b/src/sections/Projects/Project-grid/projectGrid.style.js index 767c1d48c9ea..d0fc5f5eb1b8 100644 --- a/src/sections/Projects/Project-grid/projectGrid.style.js +++ b/src/sections/Projects/Project-grid/projectGrid.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const ProjectWrapper = styled.div` padding-bottom: 5rem; h3 { diff --git a/src/sections/Projects/Project-single/index.js b/src/sections/Projects/Project-single/index.js index ca94c5c44fa7..6ca54c865257 100644 --- a/src/sections/Projects/Project-single/index.js +++ b/src/sections/Projects/Project-single/index.js @@ -1,18 +1,16 @@ -import React from "react"; -import { MDXRenderer } from "gatsby-plugin-mdx"; +import React from 'react'; +import { MDXRenderer } from 'gatsby-plugin-mdx'; -import { Container } from "../../../reusecore/Layout"; -import PageHeader from "../../../reusecore/PageHeader"; +import { Container } from '../../../reusecore/Layout'; +import PageHeader from '../../../reusecore/PageHeader'; -import ProjectPageWrapper from "./projectSingle.style"; +import ProjectPageWrapper from './projectSingle.style'; const ProjectSingle = ({ data }) => { const { frontmatter, body } = data.mdx; return ( - +
    @@ -24,4 +22,4 @@ const ProjectSingle = ({ data }) => { ); }; -export default ProjectSingle; \ No newline at end of file +export default ProjectSingle; diff --git a/src/sections/Projects/Project-single/projectSingle.style.js b/src/sections/Projects/Project-single/projectSingle.style.js index adc477db53da..4628771ce040 100644 --- a/src/sections/Projects/Project-single/projectSingle.style.js +++ b/src/sections/Projects/Project-single/projectSingle.style.js @@ -1,6 +1,6 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const ProjectPageWrapper = styled.div` - margin: 10px 0 10px 0; + margin: 10px 0 10px 0; `; -export default ProjectPageWrapper; \ No newline at end of file +export default ProjectPageWrapper; diff --git a/src/sections/Projects/SMI/data.js b/src/sections/Projects/SMI/data.js index aa182ff87383..7f21fef68f05 100644 --- a/src/sections/Projects/SMI/data.js +++ b/src/sections/Projects/SMI/data.js @@ -1,189 +1,192 @@ - const data = { features: [ { - name: "Project Goals", - link: "#", + name: 'Project Goals', + link: '#', services: [ { - content: "Provide users with a compatibility matrix identifying the SMI features that are supported per service mesh.", - className: "--on" + content: + 'Provide users with a compatibility matrix identifying the SMI features that are supported per service mesh.', + className: '--on' }, { - content: "An easy-to-use, service mesh and SMI-specific tool to give service mesh projects and users a suite of repeatable conformance tests.", - className: "--on" + content: + 'An easy-to-use, service mesh and SMI-specific tool to give service mesh projects and users a suite of repeatable conformance tests.', + className: '--on' } ] - },{ - name: "Project Objectives", - link: "#", + }, + { + name: 'Project Objectives', + link: '#', services: [ { - content: "Define what it means to be in conformance with the SMI specifications.", - className: "--on" + content: 'Define what it means to be in conformance with the SMI specifications.', + className: '--on' }, { - content: "Define a set of conformance tests and what behavior is expected of a conforming service mesh implementation.", - className: "--on" + content: + 'Define a set of conformance tests and what behavior is expected of a conforming service mesh implementation.', + className: '--on' }, { - content: "Built into each participating service mesh project’s release tooling.", - className: "--on" + content: 'Built into each participating service mesh project’s release tooling.', + className: '--on' } - ], - }, + ] + } ], testDetails: { - "0.6.0": [ + '0.6.0': [ { - test_no: "TA - 1.1.1", - spec: "Traffic Access", - test_type: "Presence", - desc: "Assert the presence of CRDs for Traffic Targets", + test_no: 'TA - 1.1.1', + spec: 'Traffic Access', + test_type: 'Presence', + desc: 'Assert the presence of CRDs for Traffic Targets' }, { - test_no: "TA - 1.1.2", - spec: "Traffic Access", - test_type: "Presence", - desc: " Create service accounts for each service", + test_no: 'TA - 1.1.2', + spec: 'Traffic Access', + test_type: 'Presence', + desc: ' Create service accounts for each service' }, { - test_no: "TA - 1.2.3", - spec: "Traffic Access", - test_type: "Assertion", - desc: "Assert that traffic is blocked by default", + test_no: 'TA - 1.2.3', + spec: 'Traffic Access', + test_type: 'Assertion', + desc: 'Assert that traffic is blocked by default' }, { - test_no: "TA - 1.2.4", - spec: "Traffic Access", - test_type: "Target Access", - desc: "Apply Traffic Target CRDs to enable traffic access by a service", + test_no: 'TA - 1.2.4', + spec: 'Traffic Access', + test_type: 'Target Access', + desc: 'Apply Traffic Target CRDs to enable traffic access by a service' }, { - test_no: "TA - 1.2.5", - spec: "Traffic Access", - test_type: "Assertion", - desc: "Assert that traffic is allowed for the said services", + test_no: 'TA - 1.2.5', + spec: 'Traffic Access', + test_type: 'Assertion', + desc: 'Assert that traffic is allowed for the said services' }, { - test_no: "TA - 1.2.6", - spec: "Traffic Access", - test_type: "Target Block", - desc: "Apply Traffic Target CRDs to block traffic to a service", + test_no: 'TA - 1.2.6', + spec: 'Traffic Access', + test_type: 'Target Block', + desc: 'Apply Traffic Target CRDs to block traffic to a service' }, { - test_no: "TA - 1.2.7", - spec: "Traffic Access", - test_type: "Assertion", - desc: "Assert that traffic is blocked for the said services", + test_no: 'TA - 1.2.7', + spec: 'Traffic Access', + test_type: 'Assertion', + desc: 'Assert that traffic is blocked for the said services' }, //TS { - test_no: "TS - 1.1.1", - spec: "Traffic Split", - test_type: "Presence", - desc: " Asserts if the TrafficSplit CRD exists", + test_no: 'TS - 1.1.1', + spec: 'Traffic Split', + test_type: 'Presence', + desc: ' Asserts if the TrafficSplit CRD exists' }, { - test_no: "TS - 1.1.2", - spec: "Traffic Split", - test_type: "Presence", - desc: "Deploy the app and assert that it is deployed", + test_no: 'TS - 1.1.2', + spec: 'Traffic Split', + test_type: 'Presence', + desc: 'Deploy the app and assert that it is deployed' }, { - test_no: "TS - 1.2.3", - spec: "Traffic Split", - test_type: "Random Split", - desc: "Custom test which verifies that if in default scenario the traffic to app-svc is split randomly between app-b and app-c", + test_no: 'TS - 1.2.3', + spec: 'Traffic Split', + test_type: 'Random Split', + desc: 'Custom test which verifies that if in default scenario the traffic to app-svc is split randomly between app-b and app-c' }, { - test_no: "TS - 1.2.4", - spec: "Traffic Split", - test_type: "Single Split 1", - desc: "Configure a TrafficSplit CRD such that all traffic to `app-svc` is sent to only `app-b` and none to `app-c`", + test_no: 'TS - 1.2.4', + spec: 'Traffic Split', + test_type: 'Single Split 1', + desc: 'Configure a TrafficSplit CRD such that all traffic to `app-svc` is sent to only `app-b` and none to `app-c`' }, { - test_no: "TS - 1.2.5", - spec: "Traffic Split", - test_type: "Assertion", - desc: " Assert that traffic sent to `app-svc` is sent to only `app-b`", + test_no: 'TS - 1.2.5', + spec: 'Traffic Split', + test_type: 'Assertion', + desc: ' Assert that traffic sent to `app-svc` is sent to only `app-b`' }, { - test_no: "TS - 1.2.6", - spec: "Traffic Split", - test_type: "Single Split 2", - desc: "Configure a TrafficSplit CRD such that all traffic to `app-svc` is sent to only `app-c` and none to `app-b`", + test_no: 'TS - 1.2.6', + spec: 'Traffic Split', + test_type: 'Single Split 2', + desc: 'Configure a TrafficSplit CRD such that all traffic to `app-svc` is sent to only `app-c` and none to `app-b`' }, { - test_no: "TS - 1.2.7", - spec: "Traffic Split", - test_type: "Assertion", - desc: "Assert that traffic sent to `app-svc` is sent to only `app-c`", + test_no: 'TS - 1.2.7', + spec: 'Traffic Split', + test_type: 'Assertion', + desc: 'Assert that traffic sent to `app-svc` is sent to only `app-c`' }, { - test_no: "TS - 1.2.8", - spec: "Traffic Split", - test_type: "Partial Split 1", - desc: "Configure a TrafficSplit CRD such that all traffic to `app-svc` is split between the two such that `app-b` gets more traffic (75%) than `app-c` (25%)", + test_no: 'TS - 1.2.8', + spec: 'Traffic Split', + test_type: 'Partial Split 1', + desc: 'Configure a TrafficSplit CRD such that all traffic to `app-svc` is split between the two such that `app-b` gets more traffic (75%) than `app-c` (25%)' }, { - test_no: "TS - 1.2.9", - spec: "Traffic Split", - test_type: "Assertion", - desc: "Assert that traffic sent to `app-svc` is sent to `app-b` (75%) and `app-c` (25%)", + test_no: 'TS - 1.2.9', + spec: 'Traffic Split', + test_type: 'Assertion', + desc: 'Assert that traffic sent to `app-svc` is sent to `app-b` (75%) and `app-c` (25%)' }, { - test_no: "TS - 1.2.10", - spec: "Traffic Split", - test_type: "Partial Split 2", - desc: "Configure a TrafficSplit CRD such that all traffic to `app-svc` is split between the two such that `app-c` gets more traffic (75%) than `app-b` (25%)", + test_no: 'TS - 1.2.10', + spec: 'Traffic Split', + test_type: 'Partial Split 2', + desc: 'Configure a TrafficSplit CRD such that all traffic to `app-svc` is split between the two such that `app-c` gets more traffic (75%) than `app-b` (25%)' }, { - test_no: "TS - 1.2.11", - spec: "Traffic Split", - test_type: "Assertion", - desc: "Assert that traffic sent to `app-svc` is sent to `app-c` (75%) and `app-b` (25%)", + test_no: 'TS - 1.2.11', + spec: 'Traffic Split', + test_type: 'Assertion', + desc: 'Assert that traffic sent to `app-svc` is sent to `app-c` (75%) and `app-b` (25%)' }, //TSc { - test_no: "TSC - 1.1.1", - spec: "Traffic Spec", - test_type: "Presence", - desc: "Assert that HTTPRouteGroup CRD exists", + test_no: 'TSC - 1.1.1', + spec: 'Traffic Spec', + test_type: 'Presence', + desc: 'Assert that HTTPRouteGroup CRD exists' }, { - test_no: "TSC - 1.1.2", - spec: "Traffic Spec", - test_type: "Presence", - desc: "Create Service Account for each service", + test_no: 'TSC - 1.1.2', + spec: 'Traffic Spec', + test_type: 'Presence', + desc: 'Create Service Account for each service' }, { - test_no: "TSC - 1.2.3", - spec: "Traffic Spec", - test_type: "Target Spec 1", - desc: "Configure HTTPRouteGroup such that traffic from `service-a` to only `service-b:PORT/metrics` (all HTTP methods) is allowed and all other requests are denied", + test_no: 'TSC - 1.2.3', + spec: 'Traffic Spec', + test_type: 'Target Spec 1', + desc: 'Configure HTTPRouteGroup such that traffic from `service-a` to only `service-b:PORT/metrics` (all HTTP methods) is allowed and all other requests are denied' }, { - test_no: "TSC - 1.2.4", - spec: "Traffic Spec", - test_type: "Assertion", - desc: "Assert that traffic is is only allowed in ‘service-b:PORT/metrics’ port", + test_no: 'TSC - 1.2.4', + spec: 'Traffic Spec', + test_type: 'Assertion', + desc: 'Assert that traffic is is only allowed in ‘service-b:PORT/metrics’ port' }, { - test_no: "TSC - 1.2.5", - spec: "Traffic Spec", - test_type: "Target Spec 2", - desc: "Configures the above created HTTPRouteGroup such that traffic from `service-a` to `service-b:PORT/*` (only GET HTTP Method) is allowed and all other requests are denied", + test_no: 'TSC - 1.2.5', + spec: 'Traffic Spec', + test_type: 'Target Spec 2', + desc: 'Configures the above created HTTPRouteGroup such that traffic from `service-a` to `service-b:PORT/*` (only GET HTTP Method) is allowed and all other requests are denied' }, { - test_no: "TSC - 1.2.6", - spec: "Traffic Spec", - test_type: "Assertion", - desc: "Assert that traffic with only GET HTTP Method is allowed from `service-a` to `service-b:PORT/*`", - }, - ], + test_no: 'TSC - 1.2.6', + spec: 'Traffic Spec', + test_type: 'Assertion', + desc: 'Assert that traffic with only GET HTTP Method is allowed from `service-a` to `service-b:PORT/*`' + } + ] } }; export default data; diff --git a/src/sections/Projects/SMI/index.js b/src/sections/Projects/SMI/index.js index 169d3f177416..81069ee13632 100644 --- a/src/sections/Projects/SMI/index.js +++ b/src/sections/Projects/SMI/index.js @@ -1,18 +1,16 @@ -import React from "react"; +import React from 'react'; +import SMIWrapper from './smi.style'; +import { Row, Col, Container } from '../../../reusecore/Layout'; +import Button from '../../../reusecore/Button'; +import MeshMapCTA from '../../meshmap-cta'; - -import SMIWrapper from "./smi.style"; -import { Row, Col, Container } from "../../../reusecore/Layout"; -import Button from "../../../reusecore/Button"; -import MeshMapCTA from "../../meshmap-cta"; - -import data from "./data"; -import c_icon from "./c-icon.svg"; -import logo from "../../../assets/images/service-mesh-icons/service-mesh-interface/icon/black/grey-logo.svg"; -import smi from "../../../assets/images/service-mesh-icons/service-mesh-interface/smi-table.svg"; -import smiLogo from "../../../assets/images/service-mesh-icons/service-mesh-interface/icon/color/servicemeshinterface-icon-color.svg"; -import TestsTable from "./testsTable"; +import data from './data'; +import c_icon from './c-icon.svg'; +import logo from '../../../assets/images/service-mesh-icons/service-mesh-interface/icon/black/grey-logo.svg'; +import smi from '../../../assets/images/service-mesh-icons/service-mesh-interface/smi-table.svg'; +import smiLogo from '../../../assets/images/service-mesh-icons/service-mesh-interface/icon/color/servicemeshinterface-icon-color.svg'; +import TestsTable from './testsTable'; const SMIPage = () => { return ( @@ -25,12 +23,20 @@ const SMIPage = () => {

    Conformance and Diagnostics

    Service Mesh Interface

    - Integrate and wrap your operational processes around a service mesh without fear of lock-in. SMI provides a standard interface for service meshes on Kubernetes and a basic feature set for the most common service mesh use cases. + Integrate and wrap your operational processes around a service mesh without fear of + lock-in. SMI provides a standard interface for service meshes on Kubernetes and a + basic feature set for the most common service mesh use cases.

    - Meshery is the official SMI Conformance Validator. Use Meshery's diagnostic tool to verify that your service mesh's behavior in an accessible and non-destructive manner. + Meshery is the official SMI Conformance Validator. Use Meshery's + diagnostic tool to verify that your service mesh's behavior in an accessible and + non-destructive manner.

    -
    @@ -41,7 +47,11 @@ const SMIPage = () => {

    Purpose and Overview

    -

    The scope of this initiative includes all service mesh projects participating in the Service Mesh Interface specification. It’s important to acknowledge that conformance consists of both capabilities and compliance status.

    +

    + The scope of this initiative includes all service mesh projects participating in the + Service Mesh Interface specification. It’s important to acknowledge that conformance + consists of both capabilities and compliance status. +

    @@ -55,8 +65,12 @@ const SMIPage = () => { {feature.services.map((service, index) => (
    + + + + +

    - Further the state of distributed
    - performance management. + Further the state of distributed
    + performance management.

    - Enable standards-based, distributed performance management through compatibility with the Service Mesh Performance (SMP) specification. + Enable standards-based, distributed performance management through + compatibility with the Service Mesh Performance (SMP) specification.
    + + + + + -

    - Facilitate Nighthawk adoption. -

    - Deliver trusted, certified builds, distributed via the most popular package managers: apt, yum, Homebrew, and platforms: Docker and Meshery. - Bridge Nighthawk’s C++ with the lingua franca of Cloud Native: Golang. +

    Facilitate Nighthawk adoption.

    + Deliver trusted, certified builds, distributed via the most popular package + managers: apt, yum, Homebrew, and platforms: Docker and Meshery. Bridge + Nighthawk’s C++ with the lingua franca of Cloud Native: Golang.
    + + + + +

    - Deliver easy-to-use, repeatable
    - tooling. + Deliver easy-to-use, repeatable
    + tooling.

    - To leverage Nighthawk as the performance characterization tool as used in the 30 patterns in the Service Mesh Patterns book. + To leverage Nighthawk as the performance characterization tool as used in + the 30 patterns in the Service Mesh Patterns book.
    + + + + + -

    - Educate the ecosystem -

    - Educate the ecosystem through the CNCF Service Mesh Working Group. +

    Educate the ecosystem

    + Educate the ecosystem through the CNCF Service Mesh Working Group.
    - - + +

    {service.content}

    		 + + +

    {service.content}

    +
    ))} @@ -73,17 +87,19 @@ const SMIPage = () => {

    - Conformance to SMI specifications will be done through - use of a service mesh’s workload. A sample application - is used as the workload to test. To facilitate a common - set of tests, a sample application has been developed - for purposes of providing a consistent workload to apply - SMI specs against. A deployment of the Learn Layer5 - sample application being fitted to each service mesh. + Conformance to SMI specifications will be done through use of a service mesh’s + workload. A sample application is used as the workload to test. To facilitate a + common set of tests, a sample application has been developed for purposes of + providing a consistent workload to apply SMI specs against. A deployment of the + Learn Layer5 sample application being fitted to each service mesh.

    - +
    @@ -93,19 +109,18 @@ const SMIPage = () => {

    for service mesh interoperability


    - +
    - Service Mesh Landscape + Service Mesh Landscape

    - Checkout the current status of the support for SMI Conformance Tests of all service meshes in our landscape page. + Checkout the current status of the support for SMI Conformance Tests of all service + meshes in our landscape page.

    @@ -116,4 +131,4 @@ const SMIPage = () => { ); }; -export default SMIPage; \ No newline at end of file +export default SMIPage; diff --git a/src/sections/Projects/SMI/smi.style.js b/src/sections/Projects/SMI/smi.style.js index 5fa68f69c2ea..cdaeaf11f6c1 100644 --- a/src/sections/Projects/SMI/smi.style.js +++ b/src/sections/Projects/SMI/smi.style.js @@ -1,318 +1,321 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const SMIWrapper = styled.section` - .description{ - margin: 6.5rem auto 4rem; - h4{ - color: ${props => props.theme.tertiaryColor};; - font-weight: ; - border: 1px solid gray; - padding: 0 0.625rem 0 0.625rem; - width: fit-content; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - h1{ - margin-bottom: 1.56rem; - } - p{ - color: ${props => props.theme.text}; - opacity: 70%; - margin-bottom: 1.875rem; - font-weight: 400; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - .desc-p{ - width: 80%; - } - .section-title{ - text-align: center; - margin: auto; - width: 80%; - margin-bottom: 2.5rem; - p{ - font-size: 21px; - color: ${props => props.theme.text}; - opacity: 70%; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - } - .logo{ - position: absolute; - top: -6.25rem; - filter: invert(${props => props.theme.meshInterfaceLogoFilter}); - left: -7.5rem; + .description { + margin: 6.5rem auto 4rem; + h4 { + color: ${(props) => props.theme.tertiaryColor}; + font-weight:; + border: 1px solid gray; + padding: 0 0.625rem 0 0.625rem; + width: fit-content; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + h1 { + margin-bottom: 1.56rem; + } + p { + color: ${(props) => props.theme.text}; + opacity: 70%; + margin-bottom: 1.875rem; + font-weight: 400; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .desc-p { + width: 80%; + } + .section-title { + text-align: center; + margin: auto; + width: 80%; + margin-bottom: 2.5rem; + p { + font-size: 21px; + color: ${(props) => props.theme.text}; + opacity: 70%; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + } + .logo { + position: absolute; + top: -6.25rem; + filter: invert(${(props) => props.theme.meshInterfaceLogoFilter}); + left: -7.5rem; + } + .feature { + margin: 4rem auto; + } + @media screen and (max-width: 1550px) and (min-width: 992px) { + .hero_img_col { + position: absolute; + right: 0; + // overflow: hidden; + } + .description { + margin: 6.5rem auto 15rem; } .feature { - margin: 4rem auto; - } - @media screen and (max-width: 1550px) and (min-width: 992px) { - .hero_img_col { - position: absolute; - right: 0; - // overflow: hidden; - } - .description { - margin: 6.5rem auto 15rem; - } - .feature { - margin: 4rem auto; - } - } - .hero-img{ - max-width: 100%; - } - .feature-table{ - margin: 0 5rem 1.875rem 5rem; + margin: 4rem auto; + } + } + .hero-img { + max-width: 100%; + } + .feature-table { + margin: 0 5rem 1.875rem 5rem; - @media screen and (max-width: 992px) and (min-width: 768px) { - margin: auto; - } - } - .feature-block{ - padding: 2.5rem 1.875rem 2.8rem 1.875rem; - border-radius: 20px; - box-shadow: 0 0 ${props => props.theme.projectPageShadowsize} 5px ${props => props.theme.green00D3A9ToGreyE6E6E6}; - position: relative; - background-color: ${props => props.theme.grey212121ToWhite}; - z-index: 999; - height: 100%; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + @media screen and (max-width: 992px) and (min-width: 768px) { + margin: auto; + } + } + .feature-block { + padding: 2.5rem 1.875rem 2.8rem 1.875rem; + border-radius: 20px; + box-shadow: 0 0 ${(props) => props.theme.projectPageShadowsize} 5px + ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; + position: relative; + background-color: ${(props) => props.theme.grey212121ToWhite}; + z-index: 999; + height: 100%; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - &:hover{ - border-color: ${props => props.theme.green00D3A9ToGreyE6E6E6}; - .thumb-block{ - border-color: ${props => props.theme.primaryColor}; - } - } - } - .feature-title{ - margin: 0 0 0.3rem 0; - h2{ - font-size: 34px; - font-weight: 700; - margin: 0 0 3.125rem 0.625rem; - color: ${props => props.theme.text}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - .section-3{ - background-color: ${props => props.theme.grey1D1D1DToGreyFAFAFA}; - width: 100%; - padding:7rem 0rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + &:hover { + border-color: ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; + .thumb-block { + border-color: ${(props) => props.theme.primaryColor}; + } } - .bg{ - height: 20rem; - width: 90%; - max-width: 73.75rem; - margin: 20rem auto 0 auto; - background-color: ${props => props.theme.grey141714ToGreenEBFCF8}; - position: absolute; - z-index: 1; - left: 0; - right: 0; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .feature-title { + margin: 0 0 0.3rem 0; + h2 { + font-size: 34px; + font-weight: 700; + margin: 0 0 3.125rem 0.625rem; + color: ${(props) => props.theme.text}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } + } + .section-3 { + background-color: ${(props) => props.theme.grey1D1D1DToGreyFAFAFA}; + width: 100%; + padding: 7rem 0rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .bg { + height: 20rem; + width: 90%; + max-width: 73.75rem; + margin: 20rem auto 0 auto; + background-color: ${(props) => props.theme.grey141714ToGreenEBFCF8}; + position: absolute; + z-index: 1; + left: 0; + right: 0; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } - @media screen and (max-width: 1200px) { - .bg { - height: 28rem; - } + @media screen and (max-width: 1200px) { + .bg { + height: 28rem; } + } - @media screen and (max-width: 767px) { - .feature { - margin: 4rem auto 1rem; - } - .feature-table { - margin: 0 2rem 1rem; - .col { - margin-bottom: 2rem; - } - } - .bg { - height: 42rem; - } - } - @media screen and (max-width: 600px) { - .bg { - height: 46rem; - margin: 25rem auto 0 auto; - } - } - @media screen and (max-width: 480px) { - .feature-table { - margin: 0 0rem 1rem; - } - .bg { - width: 100%; - height: 16%; - margin: 28rem auto 0 auto; - } - } - .card{ - background-color: ${props => props.theme.grey212121ToWhite}; - width: 70%; - max-width: 62.5rem; - margin: auto; - padding: 2.5rem 4.7rem 2rem 4.7rem; - border: 1px white; - border-radius: 20px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + @media screen and (max-width: 767px) { + .feature { + margin: 4rem auto 1rem; + } + .feature-table { + margin: 0 2rem 1rem; + .col { + margin-bottom: 2rem; + } + } + .bg { + height: 42rem; + } + } + @media screen and (max-width: 600px) { + .bg { + height: 46rem; + margin: 25rem auto 0 auto; + } + } + @media screen and (max-width: 480px) { + .feature-table { + margin: 0 0rem 1rem; + } + .bg { + width: 100%; + height: 16%; + margin: 28rem auto 0 auto; + } + } + .card { + background-color: ${(props) => props.theme.grey212121ToWhite}; + width: 70%; + max-width: 62.5rem; + margin: auto; + padding: 2.5rem 4.7rem 2rem 4.7rem; + border: 1px white; + border-radius: 20px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - h2{ - margin-bottom: 1.875rem; - } - } - .details-block{ - .table{ - color: ${props => props.theme.black}; - p { - width: 90%; - margin: 0 0 1rem 1.75rem; - font-size: 17px; - line-height: 25px; - } - td{ - vertical-align: top; - } - .icon{ - height: 2rem; - width: 2rem; - object-fit: cover; - } - } - } - .test-block{ - margin: 1.875rem 5rem 1.875rem 5rem; - h3 { text-align: center;} - h2,p { - text-align: center; - padding: 1rem; - } - .table { - margin: auto; - max-width: 62.5rem; - } + h2 { + margin-bottom: 1.875rem; + } + } + .details-block { + .table { + color: ${(props) => props.theme.black}; + p { + width: 90%; + margin: 0 0 1rem 1.75rem; + font-size: 17px; + line-height: 25px; + } + td { + vertical-align: top; + } + .icon { + height: 2rem; + width: 2rem; + object-fit: cover; + } + } + } + .test-block { + margin: 1.875rem 5rem 1.875rem 5rem; + h3 { + text-align: center; + } + h2, + p { + text-align: center; + padding: 1rem; + } + .table { + margin: auto; + max-width: 62.5rem; + } + } + @media screen and (max-width: 600px) { + .test-block { + margin: 2rem 0.5rem; + } + } + .react-tabs__tab { + bottom: 0px; + padding: 1.25rem; + &:hover { + background-color: #1e2117; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; } - @media screen and (max-width: 600px) { - .test-block { - margin: 2rem 0.5rem; - } - } - - .react-tabs__tab { - bottom: 0px; - padding: 1.25rem; - &:hover { - background-color: #1e2117; - border-top-left-radius: .5rem; - border-top-right-radius: .5rem; - } - } - .react-tabs__tab:focus:after{ - content: none; - } - .react-tabs__tab-list { - margin: 0px; - padding: 0px; - font-size: 1.25rem; - font-weight: 500; - border-bottom: none; - border-top-left-radius: .5rem; - border-top-right-radius: .5rem; - color: #ffffff; - background: #00B39F; - } - .react-tabs__tab--selected { - background: #1e2117; - border-color: #1e2117; - color: white; - font-weight: 600; - } - .conformance-table { - width: 100%; - margin-bottom: 2rem; - box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.2); - border-top-left-radius: .5rem; - border-top-right-radius: .5rem; + } + .react-tabs__tab:focus:after { + content: none; + } + .react-tabs__tab-list { + margin: 0px; + padding: 0px; + font-size: 1.25rem; + font-weight: 500; + border-bottom: none; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + color: #ffffff; + background: #00b39f; + } + .react-tabs__tab--selected { + background: #1e2117; + border-color: #1e2117; + color: white; + font-weight: 600; + } + .conformance-table { + width: 100%; + margin-bottom: 2rem; + box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.2); + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + + a { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - a { - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - &:hover { - color: ${props => props.theme.secondaryColor}; - } - } - } + &:hover { + color: ${(props) => props.theme.secondaryColor}; + } + } + } - .smiResults { - display: flex; - padding: 2.5rem; - text-align: center; - margin: auto; - margin-top: 4rem; - margin-bottom: 4rem; - max-width: 70%; + .smiResults { + display: flex; + padding: 2.5rem; + text-align: center; + margin: auto; + margin-top: 4rem; + margin-bottom: 4rem; + max-width: 70%; + + .text-gray { + margin-top: 2rem; + color: gray; + font-style: italic; + } + img { + height: 10rem; + margin-right: 2rem; + } + @media screen and (max-width: 767px) { + display: block; - .text-gray { - margin-top: 2rem; - color: gray; - font-style: italic; - } - img { - height: 10rem; - margin-right: 2rem; - } - @media screen and (max-width:767px) { - display: block; - - img { - margin: 0 auto 0.25rem; - } - } - } - @media only screen and (max-width: 992px) { - .hero-img{ - width: 95%; - margin: 1.875rem auto 0; - } - .card { - padding: 2rem; - } - } - @media only screen and (max-width: 480px) { - text-align: center; - .logo{ - margin-top: 3.125rem; - } - .description{ - h4 { - width: auto; - } - .desc-p{ - width: 100%; - } - } - .hero-img{ - width: 95%; - margin-top: 1.875rem; - } - .pricing-block{ - margin: 0 0.94rem 1.875rem 0.94rem; - padding: 2.5rem 0.94rem 2.2rem 0.94rem; - } - .card{ - width: 90%; - padding: 1.5rem; - } - .test-block{ - margin: 0 0 0.625rem 0; - } + img { + margin: 0 auto 0.25rem; + } + } + } + @media only screen and (max-width: 992px) { + .hero-img { + width: 95%; + margin: 1.875rem auto 0; + } + .card { + padding: 2rem; + } + } + @media only screen and (max-width: 480px) { + text-align: center; + .logo { + margin-top: 3.125rem; + } + .description { + h4 { + width: auto; + } + .desc-p { + width: 100%; + } + } + .hero-img { + width: 95%; + margin-top: 1.875rem; + } + .pricing-block { + margin: 0 0.94rem 1.875rem 0.94rem; + padding: 2.5rem 0.94rem 2.2rem 0.94rem; + } + .card { + width: 90%; + padding: 1.5rem; + } + .test-block { + margin: 0 0 0.625rem 0; } + } `; -export default SMIWrapper; \ No newline at end of file +export default SMIWrapper; diff --git a/src/sections/Projects/SMI/testsTable.js b/src/sections/Projects/SMI/testsTable.js index 4848d71c8cd0..1e71e20d1a1c 100644 --- a/src/sections/Projects/SMI/testsTable.js +++ b/src/sections/Projects/SMI/testsTable.js @@ -1,29 +1,28 @@ -import React from "react"; -import data from "./data"; -import Table from "../../../components/ConformanceTest-Table"; -import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; -import "react-tabs/style/react-tabs.css"; +import React from 'react'; +import data from './data'; +import Table from '../../../components/ConformanceTest-Table'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; +import 'react-tabs/style/react-tabs.css'; function TestsTable() { - const columns = React.useMemo( () => [ { - Header: "Test #", - accessor: "test_no", + Header: 'Test #', + accessor: 'test_no' }, { - Header: "Spec", - accessor: "spec", + Header: 'Spec', + accessor: 'spec' }, { - Header: "Test Type", - accessor: "test_type", + Header: 'Test Type', + accessor: 'test_type' }, { - Header: "Test Description", - accessor: "desc", - }, + Header: 'Test Description', + accessor: 'desc' + } ], [] ); @@ -36,14 +35,10 @@ function TestsTable() { Spec v0.6.0 - +
    ); } export default TestsTable; - diff --git a/src/sections/Projects/SMP/index.js b/src/sections/Projects/SMP/index.js index ac272f4032c6..55043b78c267 100644 --- a/src/sections/Projects/SMP/index.js +++ b/src/sections/Projects/SMP/index.js @@ -1,43 +1,32 @@ -import React from "react"; -import { StaticImage } from "gatsby-plugin-image"; -import { graphql, useStaticQuery } from "gatsby"; -import { getImage } from "gatsby-plugin-image"; -import { BgImage } from "gbimage-bridge"; +import React from 'react'; +import { StaticImage } from 'gatsby-plugin-image'; +import { graphql, useStaticQuery } from 'gatsby'; +import { getImage } from 'gatsby-plugin-image'; +import { BgImage } from 'gbimage-bridge'; +import SMPWrapper from './smp.style'; +import { Row, Col, Container } from '../../../reusecore/Layout'; +import Button from '../../../reusecore/Button'; +import MeshMapCTA from '../../meshmap-cta'; -import SMPWrapper from "./smp.style"; -import { Row, Col, Container } from "../../../reusecore/Layout"; -import Button from "../../../reusecore/Button"; -import MeshMapCTA from "../../meshmap-cta"; +import example from '../../../assets/images/smp-page/service-mesh-performance-specification-example.gif'; +import smp from '../../../assets/images/smp-page/smp-white.svg'; +import useHasMounted from '../../../utils/useHasMounted'; -import example from "../../../assets/images/smp-page/service-mesh-performance-specification-example.gif"; -import smp from "../../../assets/images/smp-page/smp-white.svg"; -import useHasMounted from "../../../utils/useHasMounted"; - - -const latency = "../../../assets/images/smp-page/latency-at-scale.webp"; -const wasm_capacity = "../../../assets/images/smp-page/native-and-wasm-at-capacity-100rps.webp"; -const client_capacity = "../../../assets/images/smp-page/client-capacity.webp"; +const latency = '../../../assets/images/smp-page/latency-at-scale.webp'; +const wasm_capacity = '../../../assets/images/smp-page/native-and-wasm-at-capacity-100rps.webp'; +const client_capacity = '../../../assets/images/smp-page/client-capacity.webp'; const SMPPage = () => { - - const { backgroundImage123 } = useStaticQuery( - graphql` - query { - backgroundImage123: file( - relativePath: { eq: "smp-page/smp-hero.webp" } - ) { - childImageSharp { - gatsbyImageData( - width: 2000 - quality: 50 - webpOptions: { quality: 80 } - ) - } + const { backgroundImage123 } = useStaticQuery(graphql` + query { + backgroundImage123: file(relativePath: { eq: "smp-page/smp-hero.webp" }) { + childImageSharp { + gatsbyImageData(width: 2000, quality: 50, webpOptions: { quality: 80 }) } } - ` - ); + } + `); const hasMounted = useHasMounted(); @@ -51,12 +40,17 @@ const SMPPage = () => {
    -
    + smp-logo - +

    Cloud Native Performance

    -

    Donated by Layer5, Intel, Red Hat, and HashiCorp, Cloud Native Performance is a CNCF-hosted project. MeshMark provides a universal performance index to gauge your infrastructure's efficiency against deployments in other organizations' environments.

    +

    + Donated by Layer5, Intel, Red Hat, and HashiCorp, Cloud Native Performance is + a CNCF-hosted project. MeshMark provides a universal performance index to + gauge your infrastructure's efficiency against deployments in other + organizations' environments. +

    @@ -66,7 +60,10 @@ const SMPPage = () => {

    Standardizing Cloud Native Value Measurement

    -

    SMP is a collaborative effort of Layer5, UT Austin, Intel, Red Hat, HashiCorp, Google and The Linux Foundation.

    +

    + SMP is a collaborative effort of Layer5, UT Austin, Intel, Red Hat, HashiCorp, Google + and The Linux Foundation. +

    example: smp in action @@ -75,19 +72,87 @@ const SMPPage = () => {

    SMP accounts for details of:

    - + - + - + - +
    + + + + + Environment and infrastructure details
    + + + + + Cloud Native infrastructure and its configuration
    + + + + + Service (workload) details
    + + + + + Statistical analysis of performance results
    @@ -98,7 +163,11 @@ const SMPPage = () => {

    Performance of Envoy Filters

    -

    The following analysis compares native Envoy filter performance to WebAssembly (WASM) filter performance using Rust.

    +

    + {' '} + The following analysis compares native Envoy filter performance to WebAssembly + (WASM) filter performance using Rust.{' '} +

    @@ -107,8 +176,22 @@ const SMPPage = () => {

    Native WASM at Capacity

    -

    When every request goes via the rate-limit check and then the actual program logic, we see that the latency incurred for the WASM code is higher than the Native client. This is expected since the native client has processing for rate-limiting locally in a process whereas the rust module is invoked as an additional thread to do the processing and the communication involved with the module incurs an overhead. This is prominent in the minimum response time case which represents latency just due to rate-limiting logic where every other part of the request is already "warm".
    - As we move towards average latency, the overhead gets slightly amortized but is still above the native rate-limiting case. Our max latency is slightly lower than native, but we attribute it to various other system effects like TLS handshake and network latencies that usually contribute to the maximum tail latency.

    +

    + {' '} + When every request goes via the rate-limit check and then the actual program + logic, we see that the latency incurred for the WASM code is higher than the + Native client. This is expected since the native client has processing for + rate-limiting locally in a process whereas the rust module is invoked as an + additional thread to do the processing and the communication involved with the + module incurs an overhead. This is prominent in the minimum response time case + which represents latency just due to rate-limiting logic where every other part + of the request is already "warm".
    + As we move towards average latency, the overhead gets slightly amortized but is + still above the native rate-limiting case. Our max latency is slightly lower + than native, but we attribute it to various other system effects like TLS + handshake and network latencies that usually contribute to the maximum tail + latency.{' '} +

    @@ -116,7 +199,17 @@ const SMPPage = () => {

    Latency at scale

    -

    When we go beyond the application capacity (100 in our example), we start noticing the power of a in-line ight wasm module which starts terminating requests at the side-car and the core application logic is never invoked/loaded. We notice that even the minimum response time for a terminated request is about 15-20% faster than invoking of application logic since the wasm is a dynamic module in the sidecar and we start to avoid complex network redirection and invocation of a new container/instance. We also notice that the average latency of requests is lower than in the case of native client.

    +

    + {' '} + When we go beyond the application capacity (100 in our example), we start + noticing the power of a in-line ight wasm module which starts terminating + requests at the side-car and the core application logic is never invoked/loaded. + We notice that even the minimum response time for a terminated request is about + 15-20% faster than invoking of application logic since the wasm is a dynamic + module in the sidecar and we start to avoid complex network redirection and + invocation of a new container/instance. We also notice that the average latency + of requests is lower than in the case of native client. +

    @@ -130,7 +223,13 @@ const SMPPage = () => {

    Client Capacity

    -

    Client Capacity figure also shows us that we are able to handle more requests than in the native case, although this infometric needs to be taken with a grain of salt, i.e. the difference might reduce if our application capacity was significantly larger than 100.

    +

    + {' '} + Client Capacity figure also shows us that we are able to handle more requests + than in the native case, although this infometric needs to be taken with a grain + of salt, i.e. the difference might reduce if our application capacity was + significantly larger than 100.{' '} +

    @@ -140,19 +239,39 @@ const SMPPage = () => {

    Discreetly Studying the Effects of Individual Traffic Control Functions

    -

    The group is also working in collaboration with the Envoy project to create easy-to-use tooling around distributed performance management (distributed load generation and analysis) in context of Istio, Consul, Tanzu Service Mesh, Network Service Mesh, App Mesh, Linkerd, and so on.

    +

    + {' '} + The group is also working in collaboration with the Envoy project to create + easy-to-use tooling around distributed performance management (distributed load + generation and analysis) in context of Istio, Consul, Tanzu Service Mesh, Network + Service Mesh, App Mesh, Linkerd, and so on.{' '} +

    - - - + + +
    @@ -166,4 +285,4 @@ const SMPPage = () => { ); }; -export default SMPPage; \ No newline at end of file +export default SMPPage; diff --git a/src/sections/Projects/SMP/smp.style.js b/src/sections/Projects/SMP/smp.style.js index 740e7d84e5e4..70f7170355b3 100644 --- a/src/sections/Projects/SMP/smp.style.js +++ b/src/sections/Projects/SMP/smp.style.js @@ -1,242 +1,243 @@ -import styled from "styled-components"; -import cncf from "../../../assets/images/smp-page/cncf-icon.webp"; +import styled from 'styled-components'; +import cncf from '../../../assets/images/smp-page/cncf-icon.webp'; const SMPWrapper = styled.section` - margin-bottom: 3.25rem; - .smp-hero{ - height: 34.4rem; - .hero-text{ - padding: 9.375rem 0 6.25rem 0; - h1{ - color: ${props => props.theme.white}; - margin-bottom: 1.875rem; - } - p{ - color: ${props => props.theme.white}; - } - .logo-img{ - height: 240px; - width: auto; - marginRight: 100px; - } - } + margin-bottom: 3.25rem; + .smp-hero { + height: 34.4rem; + .hero-text { + padding: 9.375rem 0 6.25rem 0; + h1 { + color: ${(props) => props.theme.white}; + margin-bottom: 1.875rem; + } + p { + color: ${(props) => props.theme.white}; + } + .logo-img { + height: 240px; + width: auto; + marginright: 100px; + } } - .smp-details{ - vertical-align: middle; - margin: 6.25rem auto; - h2{ - margin: auto; - text-align: center; - width: 80%; - margin-bottom: 1.25rem; - } - h3 { - margin-bottom: 4.25rem; - } - h1{ - margin-bottom: 1.875rem; - } - - .features{ - padding-left: 3.125rem; - table{ - margin-bottom: 1.875rem; - } - .icon{ - object-fit: cover; - padding-right: 1.25rem; - padding-bottom: 10px; - } - .feature{ - font-size: 21px; - padding-bottom: 1.25rem; - padding-right: 1.875rem; - } - } - .smp-example{ - width: 100%; - } + } + .smp-details { + vertical-align: middle; + margin: 6.25rem auto; + h2 { + margin: auto; + text-align: center; + width: 80%; + margin-bottom: 1.25rem; } - .use-cases{ - margin-top: 9.375rem; - .use-case-title{ - width: 90%; - margin: 3.125rem auto 6.25rem auto; - text-align: center; - h1{ - margin-bottom: 1.25rem; - } - } - .use-case-data{ - margin-bottom: 3.125rem; - h1{ - margin-bottom: 1.875rem; - } - img{ - max-height: 31.25rem; - } - p{ - padding-right: 1.875rem; - } - .use-case-box{ - display: flex; - justify-content: center; - align-items: center; - } - } + h3 { + margin-bottom: 4.25rem; } - - .smp-effects{ - background-image: url("${cncf}"); - background-repeat: no-repeat; - background-position:right top; - padding-top:3rem; - background-size:435px; - .effects-title{ - margin: 3.25rem auto 3.25rem auto; - text-align: center; - h1{ - margin-bottom: 1.25rem; - } - } - .iframes{ - padding: 0 3rem; - .iframe{ - width: 33.3%; - height: 20rem; - } - } + h1 { + margin-bottom: 1.875rem; } - .cncf-callout{ - margin: 8rem auto; - text-align: center; - h1, h4{ - margin-bottom: 1.875rem; - } + + .features { + padding-left: 3.125rem; + table { + margin-bottom: 1.875rem; + } + .icon { + object-fit: cover; + padding-right: 1.25rem; + padding-bottom: 10px; + } + .feature { + font-size: 21px; + padding-bottom: 1.25rem; + padding-right: 1.875rem; + } } - .join-community{ - width: 100%; - margin-bottom: 0; - display: flex; - justify-content: center; - align-content: center; + .smp-example { + width: 100%; } - .join-community_text-and_button{ - width:100%; + } + .use-cases { + margin-top: 9.375rem; + .use-case-title { + width: 90%; + margin: 3.125rem auto 6.25rem auto; + text-align: center; + h1 { + margin-bottom: 1.25rem; + } + } + .use-case-data { + margin-bottom: 3.125rem; + h1 { + margin-bottom: 1.875rem; + } + img { + max-height: 31.25rem; + } + p { + padding-right: 1.875rem; + } + .use-case-box { display: flex; justify-content: center; - align-items:center; - flex-direction:column; - top: 6.5rem; - h1{ - color: white; - } - p{ - margin: unset; - max-width: 20rem; - color: white; - } - button{ - margin-top: 1.5rem; - } + align-items: center; + } } - rect { - fill: ${props => props.theme.grey313131ToYellowFFF7D8}; - } - @media only screen and (max-width: 1024px) { - .smp-hero{ - .hero-text{ - padding: 4rem 0; - .logo-img{ - height: 150px; - } - } - } - .smp-effects{ - background-image: url("${cncf}"); - background-repeat: no-repeat; - background-position:right top; - padding-top:1rem; - background-size:325px; - .effects-title{ - margin: 3.25rem auto; - } - .iframes{ - padding: 0 1rem; - .iframe{ - width: 50%; - height: 18.75rem; - } - } + } + + .smp-effects { + background-image: url('${cncf}'); + background-repeat: no-repeat; + background-position: right top; + padding-top: 3rem; + background-size: 435px; + .effects-title { + margin: 3.25rem auto 3.25rem auto; + text-align: center; + h1 { + margin-bottom: 1.25rem; + } + } + .iframes { + padding: 0 3rem; + .iframe { + width: 33.3%; + height: 20rem; + } + } + } + .cncf-callout { + margin: 8rem auto; + text-align: center; + h1, + h4 { + margin-bottom: 1.875rem; + } + } + .join-community { + width: 100%; + margin-bottom: 0; + display: flex; + justify-content: center; + align-content: center; + } + .join-community_text-and_button { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + top: 6.5rem; + h1 { + color: white; + } + p { + margin: unset; + max-width: 20rem; + color: white; + } + button { + margin-top: 1.5rem; + } + } + rect { + fill: ${(props) => props.theme.grey313131ToYellowFFF7D8}; + } + @media only screen and (max-width: 1024px) { + .smp-hero { + .hero-text { + padding: 4rem 0; + .logo-img { + height: 150px; } + } } - @media only screen and (min-width: 993px) and (max-width: 1024px) { - .smp-effects{ - background-image: url("${cncf}"); - background-repeat: no-repeat; - background-position:right top; - padding-top:1rem; - background-size:385px; + .smp-effects { + background-image: url('${cncf}'); + background-repeat: no-repeat; + background-position: right top; + padding-top: 1rem; + background-size: 325px; + .effects-title { + margin: 3.25rem auto; + } + .iframes { + padding: 0 1rem; + .iframe { + width: 50%; + height: 18.75rem; } + } + } + } + @media only screen and (min-width: 993px) and (max-width: 1024px) { + .smp-effects { + background-image: url('${cncf}'); + background-repeat: no-repeat; + background-position: right top; + padding-top: 1rem; + background-size: 385px; } - @media only screen and (max-width: 768px) { - .smp-effects{ - background-image: unset; - padding-top:0; + } + @media only screen and (max-width: 768px) { + .smp-effects { + background-image: unset; + padding-top: 0; + } + } + @media only screen and (max-width: 480px) { + .smp-hero { + .hero-text { + padding: 3.125rem 0; + .logo-img { + height: 120px; } + } } - @media only screen and (max-width: 480px) { - .smp-hero{ - .hero-text{ - padding: 3.125rem 0; - .logo-img{ - height: 120px; - } - } + .smp-details { + margin: 3.125rem auto; + h2 { + width: 100%; + margin-bottom: 1.875rem; + } + .features { + padding: 1.25rem 0 0 1.875rem; + .icon { + height: 3.75rem; + width: 3.75rem; + } + .feature { + padding-right: 0; } - .smp-details{ - margin: 3.125rem auto; - h2{ - width: 100%; - margin-bottom: 1.875rem; - } - .features{ - padding: 1.25rem 0 0 1.875rem; - .icon{ - height: 3.75rem; - width: 3.75rem; - } - .feature{ - padding-right: 0; - } - } + } + } + .use-cases { + margin-top: 3.75rem; + .use-case-title { + margin: 3.125rem auto 3.125rem auto; + } + .use-case-data { + p { + padding-right: 0; } - .use-cases{ - margin-top: 3.75rem; - .use-case-title{ - margin: 3.125rem auto 3.125rem auto; - } - .use-case-data{ - p{ - padding-right: 0; - } - img{ - max-height: 18.75rem; - } - } + img { + max-height: 18.75rem; } - .smp-effects{ - .effects-title{ - margin: 3.125rem auto 1.875rem auto; - } - .iframes{ - padding: 0 0.5rem; - .iframe{ - width: 100%; - } - } + } + } + .smp-effects { + .effects-title { + margin: 3.125rem auto 1.875rem auto; + } + .iframes { + padding: 0 0.5rem; + .iframe { + width: 100%; } + } } + } `; -export default SMPWrapper; \ No newline at end of file +export default SMPWrapper; diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js index 084d7ab18389..6aed5197d182 100644 --- a/src/sections/Projects/Sistent/about.js +++ b/src/sections/Projects/Sistent/about.js @@ -1,19 +1,19 @@ -import React from "react"; -import { Container } from "../../../reusecore/Layout"; -import SistentWrapper from "./sistent.style"; -import TOC from "../../../components/SistentNavigation"; -import IntraPage from "../../../components/handbook-navigation/intra-page"; -import SistentPagination from "../../../components/SistentNavigation/pagination"; +import React from 'react'; +import { Container } from '../../../reusecore/Layout'; +import SistentWrapper from './sistent.style'; +import TOC from '../../../components/SistentNavigation'; +import IntraPage from '../../../components/handbook-navigation/intra-page'; +import SistentPagination from '../../../components/SistentNavigation/pagination'; -import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "./components/button/code-block"; -import { SistentThemeProvider } from "@layer5/sistent"; -import { Button } from "@layer5/sistent"; +import { useStyledDarkMode } from '../../../theme/app/useStyledDarkMode'; +import { CodeBlock } from './components/button/code-block'; +import { SistentThemeProvider } from '@layer5/sistent'; +import { Button } from '@layer5/sistent'; -const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }]; +const contents = [{ id: 0, link: '#About Sistent', text: 'About Sistent' }]; const codes = [ - "npm i @layer5/sistent", + 'npm i @layer5/sistent', ` import { SistentThemeProvider } from "@layer5/sistent"; import { Button } from "@layer5/sistent"; @@ -21,7 +21,7 @@ const codes = [ - `, + ` ]; const SistentAbout = () => { @@ -40,41 +40,35 @@ const SistentAbout = () => {

    About Sistent

    - Sistent is the Layer5 Design System - an open source design system - that offers building blocks to create consistent, accessible, and - user-friendly interfaces. It's aimed at developers who want to - design applications aligned with the same brand and ensure a - uniform user experience across different products. + Sistent is the Layer5 Design System - an open source design system that offers + building blocks to create consistent, accessible, and user-friendly interfaces. It's + aimed at developers who want to design applications aligned with the same brand and + ensure a uniform user experience across different products.

    - Sistent leverages Material UI libraries and provides a custom - theme on top of it for a consistent look and feel. It includes - components, icons, and design tokens that developers can readily - integrate into their applications. By using Sistent, developers - can save time and effort while maintaining a high-quality user - experience throughout Layer5 products. + Sistent leverages Material UI libraries and provides a custom theme on top of it for a + consistent look and feel. It includes components, icons, and design tokens that + developers can readily integrate into their applications. By using Sistent, developers + can save time and effort while maintaining a high-quality user experience throughout + Layer5 products.

    - Sistent provides a consistent user experience across Layer5 - projects and any frontend software projects that choose to use - Sistent, too. + Sistent provides a consistent user experience across Layer5 projects and any + frontend software projects that choose to use Sistent, too.

    - 'Sistent' is a play on words to ensure that we have a{" "} - consistent theme, components, design tokens, etc across all - of the apps that will be using this library. Sistent is a design - system that uses the MUI v5 components and a{" "} - custom theme provider instead of using the default theme - from MUI v5. + 'Sistent' is a play on words to ensure that we have a consistent theme, + components, design tokens, etc across all of the apps that will be using this library. + Sistent is a design system that uses the MUI v5 components and a{' '} + custom theme provider instead of using the default theme from MUI v5.

    - Sistent is built with Typescript and Reactjs and contains - components and a large collection of icons that can be reused - across projects. If you’re interested in joining the project - (please do!), let us know, and we will help you get started on + Sistent is built with Typescript and Reactjs and contains components and a large + collection of icons that can be reused across projects. If you’re interested in + joining the project (please do!), let us know, and we will help you get started on contributing.

    @@ -85,14 +79,13 @@ const SistentAbout = () => {

    - After installation, you can import Sistent theme and any Sistent - component from "@layer5/sistent". The component needs to be - included inside "SistentThemeProvider". + After installation, you can import Sistent theme and any Sistent component from + "@layer5/sistent". The component needs to be included inside "SistentThemeProvider".

    Taking button as an example:

    - + diff --git a/src/sections/Projects/Sistent/components/button/code-block.js b/src/sections/Projects/Sistent/components/button/code-block.js index 6851f07e56b9..1591a0f16954 100644 --- a/src/sections/Projects/Sistent/components/button/code-block.js +++ b/src/sections/Projects/Sistent/components/button/code-block.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState } from 'react'; export const CodeBlock = ({ name, code }) => { const [showCode, setShowCode] = useState(false); diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js index a7d2b1f2e733..fe009ad48f9e 100644 --- a/src/sections/Projects/Sistent/components/button/code.js +++ b/src/sections/Projects/Sistent/components/button/code.js @@ -1,14 +1,14 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { Button, SistentThemeProvider } from "@layer5/sistent"; -import { CodeBlock } from "./code-block"; -import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; -import { SistentLayout } from "../../sistent-layout"; +import { Button, SistentThemeProvider } from '@layer5/sistent'; +import { CodeBlock } from './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"; +import TabButton from '../../../../../reusecore/Button'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; const codes = [ ` @@ -32,7 +32,7 @@ const codes = [ > Next - `, + ` ]; export const ButtonCode = () => { @@ -46,46 +46,34 @@ export const ButtonCode = () => {

    Button

    - A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. + A button is an interactive element that triggers a specific action, takes users where they + need to go, and points out what happens next in a given flow.

    navigate("/projects/sistent/components/button")} + className={location.pathname === '/projects/sistent/components/button' ? 'active' : ''} + onClick={() => navigate('/projects/sistent/components/button')} title="Overview" /> - navigate("/projects/sistent/components/button/guidance") + location.pathname === '/projects/sistent/components/button/guidance' ? 'active' : '' } + onClick={() => navigate('/projects/sistent/components/button/guidance')} title="Guidance" /> navigate("/projects/sistent/identity/color/code")} + onClick={() => navigate('/projects/sistent/identity/color/code')} title="Code" />

    - Buttons communicate actions to users and they can be placed at - several places throughout the user interface. + Buttons communicate actions to users and they can be placed at several places throughout + the user interface.

    Basic Button

    @@ -93,25 +81,22 @@ export const ButtonCode = () => {

    The button comes in three types: Filled, Outlined, and Text.

    Filled Button

    - Mostly used for high-emphasis actions and are primarily - distinguished by their fill. They are used to represent actions that - are primary to the solution. + Mostly used for high-emphasis actions and are primarily distinguished by their fill. + They are used to represent actions that are primary to the solution.

    - +

    Outlined Button

    -

    - Can be used for both medium and sometimes high-emphasis actions. -

    +

    Can be used for both medium and sometimes high-emphasis actions.

    - +
    @@ -119,12 +104,12 @@ export const ButtonCode = () => {

    Text Button

    - Mostly used for less pronounced and very low emphasis actions. Can - also be used for text links as well. + Mostly used for less pronounced and very low emphasis actions. Can also be used for text + links as well.

    - +
    @@ -133,13 +118,10 @@ export const ButtonCode = () => {

    Sizes

     -

    - For now, two different sizes of buttons exist: 56px height and 48px - height. -

    +

    For now, two different sizes of buttons exist: 56px height and 48px height.

    - + @@ -154,18 +136,13 @@ export const ButtonCode = () => {

    Adding Icons

    - Icons are mostly added to filled and outlined buttons and they are - used to better describe the information being passed across by the - button’s label. + Icons are mostly added to filled and outlined buttons and they are used to better + describe the information being passed across by the button’s label.

    - - diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js index 47bf0b367e03..d79fffb82d78 100644 --- a/src/sections/Projects/Sistent/components/button/guidance.js +++ b/src/sections/Projects/Sistent/components/button/guidance.js @@ -1,12 +1,12 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { Button, SistentThemeProvider } from "@layer5/sistent"; -import { SistentLayout } from "../../sistent-layout"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; +import { Row } from '../../../../../reusecore/Layout'; +import { Button, SistentThemeProvider } from '@layer5/sistent'; +import { SistentLayout } from '../../sistent-layout'; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import TabButton from '../../../../../reusecore/Button'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; export const ButtonGuidance = () => { const location = useLocation(); @@ -19,135 +19,104 @@ export const ButtonGuidance = () => {

    Button

    - A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. + A button is an interactive element that triggers a specific action, takes users where they + need to go, and points out what happens next in a given flow.

    navigate("/projects/sistent/components/button")} + className={location.pathname === '/projects/sistent/components/button' ? 'active' : ''} + onClick={() => navigate('/projects/sistent/components/button')} title="Overview" /> - navigate("/projects/sistent/components/button/guidance") + location.pathname === '/projects/sistent/components/button/guidance' ? 'active' : '' } + onClick={() => navigate('/projects/sistent/components/button/guidance')} title="Guidance" /> navigate("/projects/sistent/components/button/code")} + onClick={() => navigate('/projects/sistent/components/button/code')} title="Code" />

    - For proper application, these buttons can be used for different - purposes to enable easier and consistent combination when guiding - users across digital experiences. + For proper application, these buttons can be used for different purposes to enable + easier and consistent combination when guiding users across digital experiences.

    Function

    - The function of different buttons is what determines its usage and - how well suited it is to be applied in a given scenario to solve an - existing problem or complete a pending task. Functions or roles that - can be assigned to buttons in a particular design include: + The function of different buttons is what determines its usage and how well suited it is + to be applied in a given scenario to solve an existing problem or complete a pending + task. Functions or roles that can be assigned to buttons in a particular design include:

    Primary Button

    - Primary buttons are used for the most important actions on a page. - It should be the key button that helps the user navigate in a given - flow or while trying to perform a specific action. This could apply - in cases like when the user needs to submit a from, proceed to a new - page, or complete an action. The filled button serves as the primary + Primary buttons are used for the most important actions on a page. It should be the key + button that helps the user navigate in a given flow or while trying to perform a + specific action. This could apply in cases like when the user needs to submit a from, + proceed to a new page, or complete an action. The filled button serves as the primary button.

    - -
    diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js index e93b0bda000d..a0890e37c541 100644 --- a/src/sections/Projects/Sistent/components/button/index.js +++ b/src/sections/Projects/Sistent/components/button/index.js @@ -1,12 +1,12 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { SistentThemeProvider, Button } from "@layer5/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentThemeProvider, Button } from '@layer5/sistent'; +import TabButton from '../../../../../reusecore/Button'; +import { SistentLayout } from '../../sistent-layout'; +import { Col, Row } from '../../../../../reusecore/Layout'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; const SistentButton = () => { const location = useLocation(); @@ -19,94 +19,77 @@ const SistentButton = () => {

    Button

    - A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. + A button is an interactive element that triggers a specific action, takes users where they + need to go, and points out what happens next in a given flow.

    navigate("/projects/sistent/components/button")} + className={location.pathname === '/projects/sistent/components/button' ? 'active' : ''} + onClick={() => navigate('/projects/sistent/components/button')} title="Overview" /> - navigate("/projects/sistent/components/button/guidance") + location.pathname === '/projects/sistent/components/button/guidance' ? 'active' : '' } + onClick={() => navigate('/projects/sistent/components/button/guidance')} title="Guidance" /> navigate("/projects/sistent/components/button/code")} + onClick={() => navigate('/projects/sistent/components/button/code')} title="Code" />

    - Buttons are crucial and integral elements in an interface. They are - mostly used to trigger actions and in so doing, take users to where - they need to be in any step of a flow. Buttons can be used in tandem - with other elements to piece designs together and convey digital - experiences. + Buttons are crucial and integral elements in an interface. They are mostly used to + trigger actions and in so doing, take users to where they need to be in any step of a + flow. Buttons can be used in tandem with other elements to piece designs together and + convey digital experiences.

    Types

    - In order to establish hierarchy, prominence and flexibility, - multiple types of buttons exist that can assist users to achieve - different aims. With the different styling on these buttons, it - makes it easier for users to navigate and arrive at their solutions + In order to establish hierarchy, prominence and flexibility, multiple types of buttons + exist that can assist users to achieve different aims. With the different styling on + these buttons, it makes it easier for users to navigate and arrive at their solutions faster.

    Filled

    - Filled buttons are buttons that consist a background color fill and - a text in it. Depending on the theme or intended action, the color - fill can range from a primary brand color to any other applicable - color in a brand’s color palette. + Filled buttons are buttons that consist a background color fill and a text in it. + Depending on the theme or intended action, the color fill can range from a primary brand + color to any other applicable color in a brand’s color palette.

    - +
    diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index ce9cb2768f06..bcf39e1c1843 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -1,44 +1,44 @@ -import React, { useState } from "react"; -import { Container } from "../../../../reusecore/Layout"; -import SistentWrapper from "../sistent.style"; -import TOC from "../../../../components/SistentNavigation"; +import React, { useState } from 'react'; +import { Container } from '../../../../reusecore/Layout'; +import SistentWrapper from '../sistent.style'; +import TOC from '../../../../components/SistentNavigation'; // import SistentPagination from "../../../../components/SistentNavigation/pagination"; -import SearchBox from "../../../../reusecore/Search"; -import useDataList from "../../../../utils/usedataList"; -import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; +import SearchBox from '../../../../reusecore/Search'; +import useDataList from '../../../../utils/usedataList'; +import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight'; const componentsData = [ { id: 1, - name: "Button", + name: 'Button', description: - "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", - url: "/projects/sistent/components/button", + 'A button is an interactive element that triggers a specific action and also lets users know what will happen next.', + url: '/projects/sistent/components/button' }, { id: 2, - name: "Text Input", + name: 'Text Input', description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", - url: "/projects/sistent/components/text-input", + 'A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.', + url: '/projects/sistent/components/text-input' }, { id: 3, - name: "Modal", + name: 'Modal', description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", - url: "/projects/sistent/components/modal", - }, + 'A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.', + url: '/projects/sistent/components/modal' + } ]; const SistentComponents = () => { - const [searchQuery, setSearchQuery] = useState(""); + const [searchQuery, setSearchQuery] = useState(''); const { queryResults, searchData } = useDataList( componentsData, setSearchQuery, searchQuery, - ["name"], - "id" + ['name'], + 'id' ); return ( @@ -54,10 +54,9 @@ const SistentComponents = () => {

    Components

    - Components are reusable elements that serve as the building blocks - of the design system. They are curated using the established - identity principles and can be combined to form various elements, - patterns, and templates that can be used to design user + Components are reusable elements that serve as the building blocks of the design + system. They are curated using the established identity principles and can be combined + to form various elements, patterns, and templates that can be used to design user interfaces.

    diff --git a/src/sections/Projects/Sistent/components/modal/code.js b/src/sections/Projects/Sistent/components/modal/code.js index b71e2b8962bb..f9628f413c65 100644 --- a/src/sections/Projects/Sistent/components/modal/code.js +++ b/src/sections/Projects/Sistent/components/modal/code.js @@ -1,6 +1,6 @@ -import React from "react"; -import { SistentLayout } from "../../sistent-layout"; -import { useState } from "react"; +import React from 'react'; +import { SistentLayout } from '../../sistent-layout'; +import { useState } from 'react'; import { Box, Button, @@ -12,17 +12,17 @@ import { ModalFooter, SistentThemeProvider, TextField, - Typography, -} from "@layer5/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { useLocation } from "@reach/router"; -import { navigate } from "gatsby"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../button/code-block"; -import { ActionBox } from "../../sistent.style"; + Typography +} from '@layer5/sistent'; +import TabButton from '../../../../../reusecore/Button'; +import { useLocation } from '@reach/router'; +import { navigate } from 'gatsby'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; +import { CodeBlock } from '../button/code-block'; +import { ActionBox } from '../../sistent.style'; const CustomInput = ({ label, text, style }) => ( - + {label} @@ -30,7 +30,7 @@ const CustomInput = ({ label, text, style }) => ( label={text} variant="outlined" style={{ - width: "100%" + width: '100%' }} /> @@ -77,7 +77,7 @@ const codes = [ Save - `, + ` ]; export const ModalCode = () => { @@ -109,18 +109,13 @@ export const ModalCode = () => {

    Modal

    - A modal is a dialog box or popup, displayed over the current page. - Modals are used to grab the user's attention and provide important - information. + A modal is a dialog box or popup, displayed over the current page. Modals are used to grab + the user's attention and provide important information.

    navigate("/projects/sistent/components/modal")} + className={location.pathname === '/projects/sistent/components/modal' ? 'active' : ''} + onClick={() => navigate('/projects/sistent/components/modal')} title="Overview" /> {/* { /> */} navigate("/projects/sistent/identity/color/code")} + onClick={() => navigate('/projects/sistent/identity/color/code')} title="Code" />
    - +

    - Buttons communicate actions to users and they can be placed at - several places throughout the user interface. + Buttons communicate actions to users and they can be placed at several places + throughout the user interface.

    Confirmation Modal

    @@ -162,18 +155,13 @@ export const ModalCode = () => {
    - This action is irreversible! Are you sure you want to - delete this team? + This action is irreversible! Are you sure you want to delete this team?
    - - Cancel - - - Delete - + Cancel + Delete     @@ -182,39 +170,31 @@ export const ModalCode = () => {

    Action Modal

    - Action modals help users carry out specific tasks. These would - naturally involve more steps than just confirming or rejecting an - action. They may include forms, links, and feature specific - elements that ensure that users complete crucial tasks along their - given flow. They will usually have an icon at the top left corner - of the modal to signify what the purpose of this modal is in - relation to the given flow as well as help users familiarize with - said custom icons for easy identification across our solutions - however, this might not be applicable in all cases. + Action modals help users carry out specific tasks. These would naturally involve more + steps than just confirming or rejecting an action. They may include forms, links, and + feature specific elements that ensure that users complete crucial tasks along their + given flow. They will usually have an icon at the top left corner of the modal to + signify what the purpose of this modal is in relation to the given flow as well as + help users familiarize with said custom icons for easy identification across our + solutions however, this might not be applicable in all cases.

    - - + + - + Cancel - - Save - + Save diff --git a/src/sections/Projects/Sistent/components/modal/guidance.js b/src/sections/Projects/Sistent/components/modal/guidance.js index 99dba2bd4dd7..4cb2a6f41417 100644 --- a/src/sections/Projects/Sistent/components/modal/guidance.js +++ b/src/sections/Projects/Sistent/components/modal/guidance.js @@ -1,8 +1,8 @@ -import React from "react"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { SistentLayout } from '../../sistent-layout'; +import TabButton from '../../../../../reusecore/Button'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; export const ModalGuidance = () => { const location = useLocation(); @@ -10,19 +10,14 @@ export const ModalGuidance = () => {

    - A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in a - given flow. + A button is an interactive element that triggers a specific action, takes users where they + need to go, and points out what happens next in a given flow.

    navigate("/projects/sistent/components/modal")} + className={location.pathname === '/projects/sistent/components/modal' ? 'active' : ''} + onClick={() => navigate('/projects/sistent/components/modal')} title="Overview" /> {/* { /> */} navigate("/projects/sistent/identity/color/code")} + onClick={() => navigate('/projects/sistent/identity/color/code')} title="Code" />
    diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js index b62eccfcc11b..fc336a096718 100644 --- a/src/sections/Projects/Sistent/components/modal/index.js +++ b/src/sections/Projects/Sistent/components/modal/index.js @@ -1,12 +1,12 @@ -import React from "react"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import ConfirmationBg from "../../../../../assets/images/app/projects/sistent/confirmation.png"; -import ConfirmationDarkBg from "../../../../../assets/images/app/projects/sistent/confirmation-dark.png"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import React from 'react'; +import { SistentLayout } from '../../sistent-layout'; +import TabButton from '../../../../../reusecore/Button'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; +import ConfirmationBg from '../../../../../assets/images/app/projects/sistent/confirmation.png'; +import ConfirmationDarkBg from '../../../../../assets/images/app/projects/sistent/confirmation-dark.png'; +import { Col, Row } from '../../../../../reusecore/Layout'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; export const SistentModal = () => { const location = useLocation(); @@ -18,19 +18,14 @@ export const SistentModal = () => {

    Modal

    - A modal is a container that appears in front of the main content on a - page, providing important information or an actionable piece of - content for users to execute. + A modal is a container that appears in front of the main content on a page, providing + important information or an actionable piece of content for users to execute.

    navigate("/projects/sistent/components/modal")} + className={location.pathname === '/projects/sistent/components/modal' ? 'active' : ''} + onClick={() => navigate('/projects/sistent/components/modal')} title="Overview" /> {/* { /> */} navigate("/projects/sistent/components/modal/code")} + onClick={() => navigate('/projects/sistent/components/modal/code')} title="Code" />

    - A modal is an interface element that assists users by providing - added information in the form of a message or prompting an action as - users interact with and navigate a solution. + A modal is an interface element that assists users by providing added information in the + form of a message or prompting an action as users interact with and navigate a solution.

    Types

    - Modals can be used for various purposes. From conveying information - that does not require much action to having a series of other - components embedded in them to ensure that users are able to begin - tasks and successfully complete them, modals can provide versatility - to interfaces while ensuring a simple, intuitive, and efficient - design. + Modals can be used for various purposes. From conveying information that does not + require much action to having a series of other components embedded in them to ensure + that users are able to begin tasks and successfully complete them, modals can provide + versatility to interfaces while ensuring a simple, intuitive, and efficient design.

    Basic

    - The basic modal is one that helps users carry out common actions - while navigating our solutions. These modals help to pass across - important messages to the user, or assist them in completing common - actions that do not require intricate knowledge of the subject - matter. Some examples of basic modals can be share links, - confirmation messages, feedback prompts and other similarly common - actions. These type of modals can be easily identified by the lack - of an icon at the top left corner of the modal. They may sometimes - include form fields but mostly will just require users to either - confirm and cancel actions or make progress while carrying out a - particular task. + The basic modal is one that helps users carry out common actions while navigating our + solutions. These modals help to pass across important messages to the user, or assist + them in completing common actions that do not require intricate knowledge of the subject + matter. Some examples of basic modals can be share links, confirmation messages, + feedback prompts and other similarly common actions. These type of modals can be easily + identified by the lack of an icon at the top left corner of the modal. They may + sometimes include form fields but mostly will just require users to either confirm and + cancel actions or make progress while carrying out a particular task.

    @@ -97,15 +84,13 @@ export const SistentModal = () => {

    Action

    - Action modals help users carry out specific tasks. These would - naturally involve more steps than just confirming or rejecting an - action. They may include forms, links, and feature specific elements - that ensure that users complete crucial tasks along their given - flow. They will usually have an icon at the top left corner of the - modal to signify what the purpose of this modal is in relation to - the given flow as well as help users familiarize with said custom - icons for easy identification across our solutions however, this - might not be applicable in all cases. + Action modals help users carry out specific tasks. These would naturally involve more + steps than just confirming or rejecting an action. They may include forms, links, and + feature specific elements that ensure that users complete crucial tasks along their + given flow. They will usually have an icon at the top left corner of the modal to + signify what the purpose of this modal is in relation to the given flow as well as help + users familiarize with said custom icons for easy identification across our solutions + however, this might not be applicable in all cases.

    diff --git a/src/sections/Projects/Sistent/components/text-input/code.js b/src/sections/Projects/Sistent/components/text-input/code.js index 3d2c35a33d90..598d5c4dd4d3 100644 --- a/src/sections/Projects/Sistent/components/text-input/code.js +++ b/src/sections/Projects/Sistent/components/text-input/code.js @@ -1,9 +1,9 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; +import { SistentLayout } from '../../sistent-layout'; -import TabButton from "../../../../../reusecore/Button"; +import TabButton from '../../../../../reusecore/Button'; export const TextInputCode = () => { const location = useLocation(); @@ -15,44 +15,33 @@ export const TextInputCode = () => {

    Text Input

    - Text inputs are important elements that help users interact with an - experience by providing text commands that will in turn return - expected results. These commands can range from providing a free range - of personal information to entering a limited number of characters for - a use case. + Text inputs are important elements that help users interact with an experience by + providing text commands that will in turn return expected results. These commands can + range from providing a free range of personal information to entering a limited number of + characters for a use case.

    navigate("/projects/sistent/components/text-input")} + onClick={() => navigate('/projects/sistent/components/text-input')} title="Overview" /> - navigate("/projects/sistent/components/text-input/guidance") + location.pathname === '/projects/sistent/components/text-input/guidance' + ? 'active' + : '' } + onClick={() => navigate('/projects/sistent/components/text-input/guidance')} title="Guidance" /> - navigate("/projects/sistent/components/text-input/code") + location.pathname === '/projects/sistent/components/text-input/code' ? 'active' : '' } + onClick={() => navigate('/projects/sistent/components/text-input/code')} title="Code" />
    diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js index 765ab2ebe418..1d7329aa869a 100644 --- a/src/sections/Projects/Sistent/components/text-input/guidance.js +++ b/src/sections/Projects/Sistent/components/text-input/guidance.js @@ -1,13 +1,13 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { Row } from "../../../../../reusecore/Layout"; -import { SistentThemeProvider, Input } from "@layer5/sistent"; -import { SistentLayout } from "../../sistent-layout"; +import { Row } from '../../../../../reusecore/Layout'; +import { SistentThemeProvider, Input } from '@layer5/sistent'; +import { SistentLayout } from '../../sistent-layout'; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import TabButton from '../../../../../reusecore/Button'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; export const TextInputGuidance = () => { const location = useLocation(); const { isDark } = useStyledDarkMode(); @@ -19,52 +19,41 @@ export const TextInputGuidance = () => {

    Text Input

    - Text inputs are important elements that help users interact with an - experience by providing text commands that will in turn return - expected results. These commands can range from providing a free range - of personal information to entering a limited number of characters for - a use case. + Text inputs are important elements that help users interact with an experience by + providing text commands that will in turn return expected results. These commands can + range from providing a free range of personal information to entering a limited number of + characters for a use case.

    navigate("/projects/sistent/components/text-input")} + onClick={() => navigate('/projects/sistent/components/text-input')} title="Overview" /> - navigate("/projects/sistent/components/text-input/guidance") + location.pathname === '/projects/sistent/components/text-input/guidance' + ? 'active' + : '' } + onClick={() => navigate('/projects/sistent/components/text-input/guidance')} title="Guidance" /> - navigate("/projects/sistent/components/text-input/code") + location.pathname === '/projects/sistent/components/text-input/code' ? 'active' : '' } + onClick={() => navigate('/projects/sistent/components/text-input/code')} title="Code" />

    - Although we have only one type of text input to be used, there are - different roles that they can function in that ensure that these - inputs prove sufficient for multiple use cases. + Although we have only one type of text input to be used, there are different roles that + they can function in that ensure that these inputs prove sufficient for multiple use + cases.

    Function

    @@ -72,25 +61,24 @@ export const TextInputGuidance = () => {

    Default

    - Default text inputs are used for most of the input needs across an - interface. From filling up forms to entering text content in - provided form fields to complete an action or a task. this text - input is mostly utilized. Icons are not seldom required in this text - input, however, they can included when extremely necessary. + Default text inputs are used for most of the input needs across an interface. From + filling up forms to entering text content in provided form fields to complete an action + or a task. this text input is mostly utilized. Icons are not seldom required in this + text input, however, they can included when extremely necessary.

    - +

    Multiline

    - Multiline text input functions for input that requires more than one - line of text. This text input adjusts vertically based on the amount - of lines of text entered into the text field. + Multiline text input functions for input that requires more than one line of text. This + text input adjusts vertically based on the amount of lines of text entered into the text + field.

    - + @@ -98,28 +86,26 @@ export const TextInputGuidance = () => {

    Labelling

    - A couple of elements come together to support the input field - depending on the context in is being used. These elements either - provide added information or provide much needed support to ensure - users are able to complete intended tasks. + A couple of elements come together to support the input field depending on the context + in is being used. These elements either provide added information or provide much needed + support to ensure users are able to complete intended tasks.

    Label

    - The label is an optional feature that can accompany the text input. - It an be used to point out what is required in the input field. + The label is an optional feature that can accompany the text input. It an be used to + point out what is required in the input field.

    Required

    - This type of label that is usually applied in forms to inform users - of a compulsary information that is to be provided in order to - complete the form. It is represented by an asterisk mark (*) that - appears after the label text. + This type of label that is usually applied in forms to inform users of a compulsary + information that is to be provided in order to complete the form. It is represented by + an asterisk mark (*) that appears after the label text.

    Helper text

    - Helper text appears at the bottom of the input field and it is - primarily to serve as an alert for the user to inform them based on - the input they have entered but only where necessary. + Helper text appears at the bottom of the input field and it is primarily to serve as an + alert for the user to inform them based on the input they have entered but only where + necessary.

    diff --git a/src/sections/Projects/Sistent/components/text-input/index.js b/src/sections/Projects/Sistent/components/text-input/index.js index e3d099626f6d..84028d8975b0 100644 --- a/src/sections/Projects/Sistent/components/text-input/index.js +++ b/src/sections/Projects/Sistent/components/text-input/index.js @@ -1,13 +1,13 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { SistentThemeProvider, Input } from "@layer5/sistent"; +import { SistentThemeProvider, Input } from '@layer5/sistent'; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { Row } from '../../../../../reusecore/Layout'; +import TabButton from '../../../../../reusecore/Button'; +import { SistentLayout } from '../../sistent-layout'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; const SistentTextInput = () => { const location = useLocation(); @@ -20,67 +20,54 @@ const SistentTextInput = () => {

    Text Input

    - Text inputs are important elements that help users interact with an - experience by providing text commands that will in turn return - expected results. These commands can range from providing a free range - of personal information to entering a limited number of characters for - a use case. + Text inputs are important elements that help users interact with an experience by + providing text commands that will in turn return expected results. These commands can + range from providing a free range of personal information to entering a limited number of + characters for a use case.

    navigate("/projects/sistent/components/text-input")} + onClick={() => navigate('/projects/sistent/components/text-input')} title="Overview" /> - navigate("/projects/sistent/components/text-input/guidance") + location.pathname === '/projects/sistent/components/text-input/guidance' + ? 'active' + : '' } + onClick={() => navigate('/projects/sistent/components/text-input/guidance')} title="Guidance" /> - navigate("/projects/sistent/components/text-input/code") + location.pathname === '/projects/sistent/components/text-input/code' ? 'active' : '' } + onClick={() => navigate('/projects/sistent/components/text-input/code')} title="Code" />

    - Text inputs are important elements that help users interact with an - experience by providing text commands that will in turn return - expected results. These commands can range from providing a free - range of personal information to entering a limited number of - characters for a use case. + Text inputs are important elements that help users interact with an experience by + providing text commands that will in turn return expected results. These commands can + range from providing a free range of personal information to entering a limited number + of characters for a use case.

    Design

    - Instead of various types for use across designs, the text input has - just one type to ensure simplicity and efficiency. It is preferable - that inputs are as minimal as possible since the sole function that - they generally perform is to ensure that users are able to send in - data and receive corresponding information. + Instead of various types for use across designs, the text input has just one type to + ensure simplicity and efficiency. It is preferable that inputs are as minimal as + possible since the sole function that they generally perform is to ensure that users are + able to send in data and receive corresponding information.

    - + @@ -88,67 +75,55 @@ const SistentTextInput = () => {

    Sizes

    - Since input fields have a responsive width that adjusts depending on - the need and use case, size considerations are mostly directed at - the height of the field. This means that the size of text inputs - adjust only relative to the height of the text field. Because text - inputs are mostly used in tandem with buttons, to ensure design + Since input fields have a responsive width that adjusts depending on the need and use + case, size considerations are mostly directed at the height of the field. This means + that the size of text inputs adjust only relative to the height of the text field. + Because text inputs are mostly used in tandem with buttons, to ensure design consistency, text inputs and buttons have similar size requirements.

    56px / 3.5rem

    - The 56px text input is the first field size. It is the largest text - input available for use and it is available for both mobile and - desktop resolutions, but it serves in different capacities across - these different resolutions. + The 56px text input is the first field size. It is the largest text input available for + use and it is available for both mobile and desktop resolutions, but it serves in + different capacities across these different resolutions.

    - - + +

    48px / 3rem

    - The 48px text input is the second field size in use and it is - available from mobile to desktop resolutions, even though it serves - in different capacities across these screen sizes. + The 48px text input is the second field size in use and it is available from mobile to + desktop resolutions, even though it serves in different capacities across these screen + sizes.

    - - + +

    NOTE:

    - These sizes are being specified with numerical values because though - the same size is used across screen resolutions, they have different - roles. On desktop for instance, the 56px text input is a the default - size, and 48px the small size, while on mobile, 56px is large and - 48px is the default size. Preferred text input sizes (height) are - usually arrived at through exploration and proper consideration of - industry standards and best practices. + These sizes are being specified with numerical values because though the same size is + used across screen resolutions, they have different roles. On desktop for instance, the + 56px text input is a the default size, and 48px the small size, while on mobile, 56px is + large and 48px is the default size. Preferred text input sizes (height) are usually + arrived at through exploration and proper consideration of industry standards and best + practices.

    Adding Icons

    - Icons can be used often in text inputs to aid in understanding the - required parameters for a given field or to provide options that can - help to improve the experience as a user navigates a given set of - text inputs. Depending on the context, icons can be placed on the - left and right at different times or even at the same time. The - icons should be aligned to the left or right side of the input field - and not to the center, while text remains left aligned. + Icons can be used often in text inputs to aid in understanding the required parameters + for a given field or to provide options that can help to improve the experience as a + user navigates a given set of text inputs. Depending on the context, icons can be placed + on the left and right at different times or even at the same time. The icons should be + aligned to the left or right side of the input field and not to the center, while text + remains left aligned.

    diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index 070d0eab6e2a..fe015b2929d5 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -1,27 +1,27 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import BrandColors from "../../../../../assets/images/app/projects/sistent/brand-colors-table.png"; -import GreyscaleColors from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table.png"; -import BgColors from "../../../../../assets/images/app/projects/sistent/bg-colors-table.png"; -import FunctionColors from "../../../../../assets/images/app/projects/sistent/function-colors-table.png"; -import TextColors from "../../../../../assets/images/app/projects/sistent/text-colors-table.png"; -import BorderColors from "../../../../../assets/images/app/projects/sistent/border-colors-table.png"; -import ComponentColors from "../../../../../assets/images/app/projects/sistent/components-table.png"; +import BrandColors from '../../../../../assets/images/app/projects/sistent/brand-colors-table.png'; +import GreyscaleColors from '../../../../../assets/images/app/projects/sistent/greyscale-colors-table.png'; +import BgColors from '../../../../../assets/images/app/projects/sistent/bg-colors-table.png'; +import FunctionColors from '../../../../../assets/images/app/projects/sistent/function-colors-table.png'; +import TextColors from '../../../../../assets/images/app/projects/sistent/text-colors-table.png'; +import BorderColors from '../../../../../assets/images/app/projects/sistent/border-colors-table.png'; +import ComponentColors from '../../../../../assets/images/app/projects/sistent/components-table.png'; -import BrandColorsDark from "../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.png"; -import GreyscaleColorsDark from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.png"; -import BgColorsDark from "../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.png"; -import FunctionColorsDark from "../../../../../assets/images/app/projects/sistent/function-colors-table-dark.png"; -import TextColorsDark from "../../../../../assets/images/app/projects/sistent/text-colors-table-dark.png"; -import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.png"; -import ComponentColorsDark from "../../../../../assets/images/app/projects/sistent/components-table-dark.png"; +import BrandColorsDark from '../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.png'; +import GreyscaleColorsDark from '../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.png'; +import BgColorsDark from '../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.png'; +import FunctionColorsDark from '../../../../../assets/images/app/projects/sistent/function-colors-table-dark.png'; +import TextColorsDark from '../../../../../assets/images/app/projects/sistent/text-colors-table-dark.png'; +import BorderColorsDark from '../../../../../assets/images/app/projects/sistent/border-colors-table-dark.png'; +import ComponentColorsDark from '../../../../../assets/images/app/projects/sistent/components-table-dark.png'; -import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import Button from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentLayout } from '../../sistent-layout'; +import { Col, Row } from '../../../../../reusecore/Layout'; +import Button from '../../../../../reusecore/Button'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; const ColorCode = () => { const { isDark } = useStyledDarkMode(); @@ -34,68 +34,52 @@ const ColorCode = () => {

    - Colors when accurately applied can be a potent tool that enables - designers and developers to implement solutions with speed and - efficiency. Here are a couple of things to keep in mind. + Colors when accurately applied can be a potent tool that enables designers and developers + to implement solutions with speed and efficiency. Here are a couple of things to keep in + mind.

    - These colors have been structured into tokens that represent - specific values. These tokens will be arranged in a package to - enable referencing and importing it into editor files for use. The - tokens are grouped into categories to represent the ones that are - directly usable in designs and those that are to be aliased by - tokens used in designs. This makes for proper structure and - consistent usage of color across all proposed and implemented - designs. The only exception for usage of primitive tokens might be - when applying color to illustrations. + These colors have been structured into tokens that represent specific values. These + tokens will be arranged in a package to enable referencing and importing it into editor + files for use. The tokens are grouped into categories to represent the ones that are + directly usable in designs and those that are to be aliased by tokens used in designs. + This makes for proper structure and consistent usage of color across all proposed and + implemented designs. The only exception for usage of primitive tokens might be when + applying color to illustrations.

    Primitive Category

    - Since this category will not be used directly in designs, it does - not have any role descriptions. + Since this category will not be used directly in designs, it does not have any role + descriptions.

    Brand Colors

    - Brand colors + Brand colors

    Greyscale Colors

    @@ -122,28 +106,19 @@ const ColorCode = () => {

    Semantic Category

    - The semantic category has been sub-categorized into background, - text, brand, border, and functions. Possibility for a few more - categories exists as the need arises. + The semantic category has been sub-categorized into background, text, brand, border, and + functions. Possibility for a few more categories exists as the need arises.

    Background Colors

    - Background colors + Background colors

    Text Colors

    - Text colors + Text colors

    Border Colors

    @@ -158,8 +133,8 @@ const ColorCode = () => {

    Component Colors

    - Tokens here are component specific and must be used only for the - component that they are referencing. + Tokens here are component specific and must be used only for the component that they are + referencing.

    diff --git a/src/sections/Projects/Sistent/identity/color/guidance.js b/src/sections/Projects/Sistent/identity/color/guidance.js index cf45bfa217bb..9fd9052a0414 100644 --- a/src/sections/Projects/Sistent/identity/color/guidance.js +++ b/src/sections/Projects/Sistent/identity/color/guidance.js @@ -1,16 +1,16 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { Col, Row } from "../../../../../reusecore/Layout"; -import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.png"; -import TonalPalettesDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.png"; -import ContextVisuals5 from "../../../../../assets/images/app/projects/sistent/context-visuals-5.png"; -import ContextVisuals6 from "../../../../../assets/images/app/projects/sistent/context-visuals-6.png"; -import ContextVisuals6Dark from "../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.png"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { SistentLayout } from "../../sistent-layout"; -import Button from "../../../../../reusecore/Button"; +import { Col, Row } from '../../../../../reusecore/Layout'; +import TonalPalettes from '../../../../../assets/images/app/projects/sistent/tonal-palettes-full.png'; +import TonalPalettesDark from '../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.png'; +import ContextVisuals5 from '../../../../../assets/images/app/projects/sistent/context-visuals-5.png'; +import ContextVisuals6 from '../../../../../assets/images/app/projects/sistent/context-visuals-6.png'; +import ContextVisuals6Dark from '../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.png'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; +import { SistentLayout } from '../../sistent-layout'; +import Button from '../../../../../reusecore/Button'; const ColorGuidance = () => { const { isDark } = useStyledDarkMode(); @@ -23,143 +23,116 @@ const ColorGuidance = () => {

    Color

    - Colors when accurately applied can be a potent tool that enables - designers and developers to implement solutions with speed and - efficiency. Here are a couple of things to keep in mind. + Colors when accurately applied can be a potent tool that enables designers and developers + to implement solutions with speed and efficiency. Here are a couple of things to keep in + mind.

    - Having a color palette is one thing, and organizing it into usable - content for cross-functional teams is another. Suffice to say that - without proper structure, a good tonal palette can still be - unproductive if the target audience have no clue what to do with it. - We have organized color into a consumable form to ensure efficient - and accurate application in order to achieve desired results. + Having a color palette is one thing, and organizing it into usable content for + cross-functional teams is another. Suffice to say that without proper structure, a good + tonal palette can still be unproductive if the target audience have no clue what to do + with it. We have organized color into a consumable form to ensure efficient and accurate + application in order to achieve desired results.

    Tonal Palettes

    - To attain the desired level of variation across themes, we will have - to utilize more than just the hues on a brand’s color palette. It - therefore becomes necessary to employ the use of tonal pallets. - Tonal palettes are variations of a given hue comprising of the hue’s - tints and shades. Armed with this array of harmonious colors, it - becomes much easier to combine them to actualize different UI - elements or states, website pages and various products across any - desired number of themes. -

    -

    - These hues are organized into different levels of brightness and - arranged in ranges of 10-90 (total of nine) for neutrals and 10-70 - (total of seven) for brand colors, as well as all other hues in our - color system. This structure will enable cohesive combinations - across all implemented designs. With a base hue of ‘code-40’, tints - and shades are derived to complete the spectrum range.. These color - selections are further supported by alert colors that complement the - base Keppel Green. Blue, Green, Yellow, and Red hues were chosen for - this. + To attain the desired level of variation across themes, we will have to utilize more + than just the hues on a brand’s color palette. It therefore becomes necessary to employ + the use of tonal pallets. Tonal palettes are variations of a given hue comprising of the + hue’s tints and shades. Armed with this array of harmonious colors, it becomes much + easier to combine them to actualize different UI elements or states, website pages and + various products across any desired number of themes. +

    +

    + These hues are organized into different levels of brightness and arranged in ranges of + 10-90 (total of nine) for neutrals and 10-70 (total of seven) for brand colors, as well + as all other hues in our color system. This structure will enable cohesive combinations + across all implemented designs. With a base hue of ‘code-40’, tints and shades are + derived to complete the spectrum range.. These color selections are further supported by + alert colors that complement the base Keppel Green. Blue, Green, Yellow, and Red hues + were chosen for this.

    - Tonal Palettes + Tonal Palettes

    Basic Colors

    - We have also structured colors with relatable nomenclature to ensure - easy identification and deployment. These names also conveniently - double as one of the parameters used in identifying the color group - using color tokens. Any one of them must be included in token - creation because they specify what it is that is being named making - for easier identification. + We have also structured colors with relatable nomenclature to ensure easy identification + and deployment. These names also conveniently double as one of the parameters used in + identifying the color group using color tokens. Any one of them must be included in + token creation because they specify what it is that is being named making for easier + identification.

    Background Colors

    - Background colors serve as layer that can house text content, UI - elements, and other layers with background colors. It may include - but is not limited to specifications like default, hover, pressed, - selected, disabled, and brand. + Background colors serve as layer that can house text content, UI elements, and other + layers with background colors. It may include but is not limited to specifications like + default, hover, pressed, selected, disabled, and brand.

    Text Colors

    - Text color addresses color specifically for the purpose of text that - is added as content to the user interface. It is organized into - default, secondary, and tertiary sequence. There can also be text - color for brand color and other alert colors. + Text color addresses color specifically for the purpose of text that is added as content + to the user interface. It is organized into default, secondary, and tertiary sequence. + There can also be text color for brand color and other alert colors.

    Icon Colors

    - Icons as the name implies is color used to represent icons - throughout designs. Apart form the default and secondary icon - colors, they can also be organized with brand color as well as the - four alert colors. + Icons as the name implies is color used to represent icons throughout designs. Apart + form the default and secondary icon colors, they can also be organized with brand color + as well as the four alert colors.

    Border Colors

    - Border colors refer mostly to strokes, lines and outlines on an - outline button for instance that will need to have specific color to - complement designs. They are organized into default, strong, and - brand and may also include the alert colors as well. + Border colors refer mostly to strokes, lines and outlines on an outline button for + instance that will need to have specific color to complement designs. They are organized + into default, strong, and brand and may also include the alert colors as well.

    Token Specification

    - As highlighted earlier, tokens can serve as a bridge between design - and development and, as such, are key in order to ensure a seamless - workflow for all interested parties. While these token values can be - very specific, like what color to use on the background color of a - button, the text color in a given use case, or even a border color, - it is also a flexible yet precise and consistent way of carrying out - user interface tasks. + As highlighted earlier, tokens can serve as a bridge between design and development and, + as such, are key in order to ensure a seamless workflow for all interested parties. + While these token values can be very specific, like what color to use on the background + color of a button, the text color in a given use case, or even a border color, it is + also a flexible yet precise and consistent way of carrying out user interface tasks.

    Tokenized Colors

    - To make this work, we cannot rely on individual hex codes for every - use case throughout products and interfaces since it will create - much less friction going forward. + To make this work, we cannot rely on individual hex codes for every use case throughout + products and interfaces since it will create much less friction going forward.

    - To this end, we have suggested a set of color tokens that define a - color as well as how it may be used, which can also change - automatically based on context. + To this end, we have suggested a set of color tokens that define a color as well as how + it may be used, which can also change automatically based on context.

    @@ -168,42 +141,37 @@ const ColorGuidance = () => {

    The Role of Color Tokens

    - While the colors on the tonal palette can be referenced - individually, in order for a consistent system to be created, it is - crucial that only our top-level color tokens (e.g., text-default) - are used instead of base tokens from the palette (e.g., + While the colors on the tonal palette can be referenced individually, in order for a + consistent system to be created, it is crucial that only our top-level color tokens + (e.g., text-default) are used instead of base tokens from the palette (e.g., charcoal/code-90) in both code and designs.

    Color Schema

    - The color schema is a pattern where parameters are stringed together - in a particular order. Each of these parameters has predictable - names that describe a specific color. Individual parameters combine - to form a token system. This is the schema that we have used to - arrive at the various parameters: + The color schema is a pattern where parameters are stringed together in a particular + order. Each of these parameters has predictable names that describe a specific color. + Individual parameters combine to form a token system. This is the schema that we have + used to arrive at the various parameters:

    Type: - This is the only required parameter, and it specifies the thing that - color is being added to. The basic types we have identified are - background, text, icons, and border. + This is the only required parameter, and it specifies the thing that color is being + added to. The basic types we have identified are background, text, icons, and border.

    Color Role: - Since each color in a user interface has a specific meaning, it is - better to represent hues based on how they are used as opposed to a - value. For instance, a default accent color can have the parameter - -brand. However, this can represent different values of that brand - color if there is a shift in tones depending on the theme or for any - other related reason. + Since each color in a user interface has a specific meaning, it is better to represent + hues based on how they are used as opposed to a value. For instance, a default accent + color can have the parameter -brand. However, this can represent different values of + that brand color if there is a shift in tones depending on the theme or for any other + related reason.

    Prominence: - This serves to enhance the visual emphasis of UI elements used in - relation to each other. Some of the parameters in the type schema - support -secondary and -tertiary prominence parameters, while some - other parameters support -default, -strong, and the list could go - on. + This serves to enhance the visual emphasis of UI elements used in relation to each + other. Some of the parameters in the type schema support -secondary and -tertiary + prominence parameters, while some other parameters support -default, -strong, and the + list could go on.

    @@ -215,10 +183,9 @@ const ColorGuidance = () => {

    - More categorization can be added to the schema as the need arises. - However, it is crucial to ensure that there are sufficient use cases - to arrive at this conclusion in order to avoid dormant or idle - parameters being created. + More categorization can be added to the schema as the need arises. However, it is + crucial to ensure that there are sufficient use cases to arrive at this conclusion in + order to avoid dormant or idle parameters being created.

    diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index b226e78bd53c..4500b7241e01 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -1,16 +1,16 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { Row, Col } from "../../../../../reusecore/Layout"; -import { useLocation } from "@reach/router"; -import Button from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.png"; -import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.png"; -import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.png"; -import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; -import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; -import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { Row, Col } from '../../../../../reusecore/Layout'; +import { useLocation } from '@reach/router'; +import Button from '../../../../../reusecore/Button'; +import { SistentLayout } from '../../sistent-layout'; +import TonalPallete from '../../../../../assets/images/app/projects/sistent/tonal-palettes.png'; +import TonalPalleteDark from '../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.png'; +import ContextVisuals1 from '../../../../../assets/images/app/projects/sistent/context-visuals-1.png'; +import ContextVisuals2 from '../../../../../assets/images/app/projects/sistent/context-visuals-2.png'; +import ContextVisuals3 from '../../../../../assets/images/app/projects/sistent/context-visuals-3.png'; +import ContextVisuals4 from '../../../../../assets/images/app/projects/sistent/context-visuals-4.png'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; const SistentIdentityColor = () => { const location = useLocation(); @@ -23,157 +23,132 @@ const SistentIdentityColor = () => {

    Color

    - Colors when accurately applied can be a potent tool that enables - designers and developers to implement solutions with speed and - efficiency. Here are a couple of things to keep in mind. + Colors when accurately applied can be a potent tool that enables designers and developers + to implement solutions with speed and efficiency. Here are a couple of things to keep in + mind.

    - In order to achieve the aim of maintaining a consistent and engaging - digital interface across Layer5, whether it is in the form of - websites, applications, or experiences, a detailed explanation of - color application along with practical use cases is needed. To this - end, the following concepts help to shape a suitable identity as we - aim for balance throughout our User Interface. + In order to achieve the aim of maintaining a consistent and engaging digital interface + across Layer5, whether it is in the form of websites, applications, or experiences, a + detailed explanation of color application along with practical use cases is needed. To + this end, the following concepts help to shape a suitable identity as we aim for balance + throughout our User Interface.

    Introduction

    - When the color palette is accurately put to use, it ensures a - recognizable consistency in Layer5's array of digital interfaces and - products. This is made possible due to adherence to well defined - rules which though specific, are also flexible and give ample room - for professionals to curate appealing solutions across themes. + When the color palette is accurately put to use, it ensures a recognizable consistency + in Layer5's array of digital interfaces and products. This is made possible due to + adherence to well defined rules which though specific, are also flexible and give ample + room for professionals to curate appealing solutions across themes.

    The Basics

    - Let's start with a few of the common terms that we will come across - frequently, as understanding what they mean will inform us of - applicable use cases and proper procedures that should not be - overlooked. + Let's start with a few of the common terms that we will come across frequently, as + understanding what they mean will inform us of applicable use cases and proper + procedures that should not be overlooked.

    Theme

    - By definition, a theme is a cohesive and consistent look and feel - for a product. This consistent look can be achieved with the use of - harmonious color palettes, legible fonts and layout patterns. - Currently, sistent outlines specifications for light and dark + By definition, a theme is a cohesive and consistent look and feel for a product. This + consistent look can be achieved with the use of harmonious color palettes, legible fonts + and layout patterns. Currently, sistent outlines specifications for light and dark themes.

    Value

    - A value is the unique visual attribute assigned to a token through - the use of themes. This could range from hex codes to rgba values - which are used to highlight specific colors in any given instance. - We highly recommend that no exact values be referenced anywhere in - the design in order to avoid errors and ensure consistency. Instead, - tokens should be used to curate and implement the reusable values. - More on tokens next. + A value is the unique visual attribute assigned to a token through the use of themes. + This could range from hex codes to rgba values which are used to highlight specific + colors in any given instance. We highly recommend that no exact values be referenced + anywhere in the design in order to avoid errors and ensure consistency. Instead, tokens + should be used to curate and implement the reusable values. More on tokens next.

    Tokens

    - Tokens can be regarded as a shared language between design and - development for communicating detailed information about how to - build user interfaces. Generally, a rule of thumb is to represent - the context (background, text, component), role (success, warning, - brand, inverse), and modifier(s) (secondary, tertiary, hover) in a - string of text that will represent set values gotten from the colors - in the color palette. + Tokens can be regarded as a shared language between design and development for + communicating detailed information about how to build user interfaces. Generally, a rule + of thumb is to represent the context (background, text, component), role (success, + warning, brand, inverse), and modifier(s) (secondary, tertiary, hover) in a string of + text that will represent set values gotten from the colors in the color palette.

    Role

    - Roles are parameters that specify the context that colors are being - applied to and while different roles can share the same value, the - token structure means that they will have different use cases. These - values can be different though depending on the current theme. + Roles are parameters that specify the context that colors are being applied to and while + different roles can share the same value, the token structure means that they will have + different use cases. These values can be different though depending on the current + theme.

    Color Anatomy

    - Sistent's default themes are derived from Layer5's color palette of - which the Keppel Green color serves as the dominant primary action - color with subtle shifts in value to enable the required visual - accessibility as recommended in the WCAG (Web Content Accessibility - Guidelines) 2.1 compliance standards. It is also sometimes combined - with Saffron Yellow and Caribbean Green colors accentuate some other - parts of the user interface like CTA buttons as well as - illustrations and icons. + Sistent's default themes are derived from Layer5's color palette of which the Keppel + Green color serves as the dominant primary action color with subtle shifts in value to + enable the required visual accessibility as recommended in the WCAG (Web Content + Accessibility Guidelines) 2.1 compliance standards. It is also sometimes combined with + Saffron Yellow and Caribbean Green colors accentuate some other parts of the user + interface like CTA buttons as well as illustrations and icons.

    - The Charcoal color as well as another accent grey serve as neutrals - to complement these greens and create harmonious implementations. - These five colors combine to form a foundation for the color system. + The Charcoal color as well as another accent grey serve as neutrals to complement these + greens and create harmonious implementations. These five colors combine to form a + foundation for the color system.

    - Tonal Palette + Tonal Palette

    Layer Hirarchy

    - For backgrounds and surfaces, colors in the neutral palettes are - used cohesively to create depth and spatial associations. This - hierarchical pattern defines the logic of how colors stack on top of - each other in a UI when implementing Sistent themes. This logical - pattern goes beyond just themes but is also built across components - and accounted for in suggested color tokens as well. + For backgrounds and surfaces, colors in the neutral palettes are used cohesively to + create depth and spatial associations. This hierarchical pattern defines the logic of + how colors stack on top of each other in a UI when implementing Sistent themes. This + logical pattern goes beyond just themes but is also built across components and + accounted for in suggested color tokens as well.

    - There is an alternate relationship between the layer hierarchy in - both light and dark themes: + There is an alternate relationship between the layer hierarchy in both light and dark + themes:

    • - In the light theme, as layers are stacked towards the topmost - surface, they become progressively darker. + In the light theme, as layers are stacked towards the topmost surface, they become + progressively darker.
    • - In the dark theme, as layers are stacked towards the topmost - surface, they become progressively lighter. + In the dark theme, as layers are stacked towards the topmost surface, they become + progressively lighter.
    - This means, in effect, that while there is a fine blend of surfaces - on any given UI theme, there is also strict adherence to - accessibility guidelines and recommendations. + This means, in effect, that while there is a fine blend of surfaces on any given UI + theme, there is also strict adherence to accessibility guidelines and recommendations.

    @@ -181,23 +156,15 @@ const SistentIdentityColor = () => {

    - A similar hierarchy pattern as above is adopted for brilliantly - colored backgrounds like brand and alert colors when it comes to - interactive states. So as interactions progress from default to - hover to pressed, this same principle may apply. However, when - trying to establish prominence for other user interface needs, an - inverse relationship may be more suitable. Hence, for these - brilliant colors: + A similar hierarchy pattern as above is adopted for brilliantly colored backgrounds like + brand and alert colors when it comes to interactive states. So as interactions progress + from default to hover to pressed, this same principle may apply. However, when trying to + establish prominence for other user interface needs, an inverse relationship may be more + suitable. Hence, for these brilliant colors:

      -
    • - In the light theme, as prominence reduces, layers become - progressively lighter. -
      • -
    • - In the dark theme, as prominence reduces, layers become - progressively darker. -
      • +
    • In the light theme, as prominence reduces, layers become progressively lighter.
      • +
    • In the dark theme, as prominence reduces, layers become progressively darker.
    @@ -208,24 +175,22 @@ const SistentIdentityColor = () => {

    Green Color Accessbility

    - In the use of green, Sistent design system ensures compliance with - WCAG 2.1 standards for distinguishable text and color.{" "} + In the use of green, Sistent design system ensures compliance with WCAG 2.1 standards + for distinguishable text and color.{' '} (See criteria 1.4.1 and 1.4.3) - {" "} - Accessibility is a major consideration for Sistent, and as such, - accessibility research and guidelines are kept at the core of the - color selection process.There is further specification on how to - maintain compliance with these standards in both light and dark + {' '} + Accessibility is a major consideration for Sistent, and as such, accessibility research + and guidelines are kept at the core of the color selection process.There is further + specification on how to maintain compliance with these standards in both light and dark themes:

    Light Theme

    - In order to ensure the minimum contrast of the Keppel Green in the - the light theme, a variation of it is used in the light theme to - ensure proper contrast. + In order to ensure the minimum contrast of the Keppel Green in the the light theme, a + variation of it is used in the light theme to ensure proper contrast.

    @@ -234,9 +199,8 @@ const SistentIdentityColor = () => {

    Dark Theme

    - For the dark theme, the Keppel Green meets the contrast requirement - easily and as such can be used as the primary accent color for all - necessary use cases. + For the dark theme, the Keppel Green meets the contrast requirement easily and as such + can be used as the primary accent color for all necessary use cases.

    @@ -247,10 +211,9 @@ const SistentIdentityColor = () => { NOTE:

    - Take note that if the primary accent color in use meets - accessibility standards for both intended backgrounds in the light - and dark themes, there might be no need to have a variation of its - hue represent it, as is evident in the example above. + Take note that if the primary accent color in use meets accessibility standards for both + intended backgrounds in the light and dark themes, there might be no need to have a + variation of its hue represent it, as is evident in the example above.

    diff --git a/src/sections/Projects/Sistent/identity/spacing/code.js b/src/sections/Projects/Sistent/identity/spacing/code.js index 7e89db0dadc7..348fd08ee2c9 100644 --- a/src/sections/Projects/Sistent/identity/spacing/code.js +++ b/src/sections/Projects/Sistent/identity/spacing/code.js @@ -1,9 +1,9 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { SistentLayout } from "../../sistent-layout"; -import Button from "../../../../../reusecore/Button"; +import { SistentLayout } from '../../sistent-layout'; +import Button from '../../../../../reusecore/Button'; export const SpacingCode = () => { const location = useLocation(); @@ -15,39 +15,27 @@ export const SpacingCode = () => {

    Spacing

    - Space is the unseen component in designed solutions that enables - clear, concise, and consistent arrangement of interface elements - across a screen. + Space is the unseen component in designed solutions that enables clear, concise, and + consistent arrangement of interface elements across a screen.

    diff --git a/src/sections/Projects/Sistent/identity/spacing/guidance.js b/src/sections/Projects/Sistent/identity/spacing/guidance.js index 773d2b7008b8..cdbb0fc63e4d 100644 --- a/src/sections/Projects/Sistent/identity/spacing/guidance.js +++ b/src/sections/Projects/Sistent/identity/spacing/guidance.js @@ -1,17 +1,17 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import SpaceTokenTable2 from "../../../../../assets/images/app/projects/sistent/space-token-table-2-light.png"; -import SpaceTokenTable2Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-2-dark.png"; +import SpaceTokenTable2 from '../../../../../assets/images/app/projects/sistent/space-token-table-2-light.png'; +import SpaceTokenTable2Dark from '../../../../../assets/images/app/projects/sistent/space-token-table-2-dark.png'; -import SpaceTokenTable3 from "../../../../../assets/images/app/projects/sistent/space-token-table-3-light.png"; -import SpaceTokenTable3Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-3-dark.png"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { SistentLayout } from "../../sistent-layout"; +import SpaceTokenTable3 from '../../../../../assets/images/app/projects/sistent/space-token-table-3-light.png'; +import SpaceTokenTable3Dark from '../../../../../assets/images/app/projects/sistent/space-token-table-3-dark.png'; +import { Col, Row } from '../../../../../reusecore/Layout'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; +import { SistentLayout } from '../../sistent-layout'; -import Button from "../../../../../reusecore/Button"; +import Button from '../../../../../reusecore/Button'; export const SpacingGuidance = () => { const { isDark } = useStyledDarkMode(); @@ -24,176 +24,140 @@ export const SpacingGuidance = () => {

    Spacing

    - Space is the unseen component in designed solutions that enables - clear, concise, and consistent arrangement of interface elements - across a screen. + Space is the unseen component in designed solutions that enables clear, concise, and + consistent arrangement of interface elements across a screen.

    - Applying spatial values to designs is a much debated topic and can - prove to be quite difficult and very confusing especially when - trying to maintain consistency across all designs. To this end, a - few concepts have been pieced together in order to simplify the + Applying spatial values to designs is a much debated topic and can prove to be quite + difficult and very confusing especially when trying to maintain consistency across all + designs. To this end, a few concepts have been pieced together in order to simplify the understanding of spatial harmony and ensure a consistent execution.

    Spatial Organization

    - Mostly in an interface, the way space and spatial harmony is - achieved is by applying these space values to specific elements or - in specific use cases. This can range form the size of a given - element to the space between elements on a page. + Mostly in an interface, the way space and spatial harmony is achieved is by applying + these space values to specific elements or in specific use cases. This can range form + the size of a given element to the space between elements on a page.

    Gap

    - Gap can be used to represent the space between any two given - elements in an interface. This can be the inset values in a button - or a card, stack or inline spacing between blocks of text or a group - of elements in a section, and can also be applicable for margin - values in a grid system. Because this can be confusing to determine - a mode of application given that the spatial system consists of over - 10 different values, a set consisting of five to seven values can be - chosen to serve as all the values for the 'gap' spacing that will be - used in an interface. + Gap can be used to represent the space between any two given elements in an interface. + This can be the inset values in a button or a card, stack or inline spacing between + blocks of text or a group of elements in a section, and can also be applicable for + margin values in a grid system. Because this can be confusing to determine a mode of + application given that the spatial system consists of over 10 different values, a set + consisting of five to seven values can be chosen to serve as all the values for the + 'gap' spacing that will be used in an interface.

    - Arriving at these values, however is not arbitrary or random - selection from the spacing scale. Instead, a geometric progression - gotten by multiplying the base space value by a common ratio of two - and also dividing by the same ratio will provide the values needed - to populate the 'gap' category. This arrangement will ensure uniform - space across an interface that will greatly help to establish - element relationships and hierarchy. + Arriving at these values, however is not arbitrary or random selection from the spacing + scale. Instead, a geometric progression gotten by multiplying the base space value by a + common ratio of two and also dividing by the same ratio will provide the values needed + to populate the 'gap' category. This arrangement will ensure uniform space across an + interface that will greatly help to establish element relationships and hierarchy.

    - Space Token Table + Space Token Table

    - *The last spacing value of 80px that was included was added because - 80px is the value for the margin in the 12 column grid that is being - applied for desktop screens. + *The last spacing value of 80px that was included was added because 80px is the value + for the margin in the 12 column grid that is being applied for desktop screens.

    Radius

    - The radius value of elements in an interface help to define the - theme and density that it conveys. Little to no radius can describe - a more grotesque or brutal theme, while higher and more consistent - use of radiuses can describe a modern and minimal UI theme. Radius - values can be determined based on the use case and the needs of the - designs being curated. With Layer5, we have chosen five radius - values that can provide a the much needed variation that can help to - describe a minimal and consistent user interface. + The radius value of elements in an interface help to define the theme and density that + it conveys. Little to no radius can describe a more grotesque or brutal theme, while + higher and more consistent use of radiuses can describe a modern and minimal UI theme. + Radius values can be determined based on the use case and the needs of the designs being + curated. With Layer5, we have chosen five radius values that can provide a the much + needed variation that can help to describe a minimal and consistent user interface.

    - Space Token Table + Space Token Table

    - As is the case with most user interface decisions that are agreed - upon, these values should be subjected to proper scrutiny based on - the intended use case as well as appropriate exploration to ensure - the best possible application. + As is the case with most user interface decisions that are agreed upon, these values + should be subjected to proper scrutiny based on the intended use case as well as + appropriate exploration to ensure the best possible application.

    Size

    - Size refers to the amount of area that an atom or element of a - design takes up in the available space of the user interface. - Whether it’s that of an icon or the total size of an image, all of - that space can be described as size. While it is true that much - larger size values may not necessarily be strictly defined in the - spatial system, elements which are frequently used and require a - fixed size throughout a design can have specific values assigned to - them to ensure consistency. + Size refers to the amount of area that an atom or element of a design takes up in the + available space of the user interface. Whether it’s that of an icon or the total size of + an image, all of that space can be described as size. While it is true that much larger + size values may not necessarily be strictly defined in the spatial system, elements + which are frequently used and require a fixed size throughout a design can have specific + values assigned to them to ensure consistency.

    - Applicable scenarios can be in the case of buttons, text fields, - some cards, navigation menus, logos, and icons. While there are - exceptions to these elements, mostly, it is recommended that they - appear in a uniform size across an interface to improve the + Applicable scenarios can be in the case of buttons, text fields, some cards, navigation + menus, logos, and icons. While there are exceptions to these elements, mostly, it is + recommended that they appear in a uniform size across an interface to improve the consistency therein.

    Space Application Considerations

    - For spacing to be effectively employed in designs, a few - considerations are to be made to enable a simple, yet, uniform - application of space values across designs. One such principles is - that in a bounding box, the padding of the box should be the highest - spacing value. This simply means that for any container, (could be a - card, button, an entire page layout) both the horizontal and - vertical padding values must be more than any other space values - used inside of the container to separate its child elements. + For spacing to be effectively employed in designs, a few considerations are to be made + to enable a simple, yet, uniform application of space values across designs. One such + principles is that in a bounding box, the padding of the box should be the highest + spacing value. This simply means that for any container, (could be a card, button, an + entire page layout) both the horizontal and vertical padding values must be more than + any other space values used inside of the container to separate its child elements.

    - This is applicable whether the horizontal and vertical paddings have - the same or different values. To provide more, clarity, the inline - spacing in a container should not be more than its horizontal - padding, and the stack spacing value should not be more than the - container's vertical padding. This gradual decrease in the space - value as we go deeper into a container or an element helps to - enhance uniformity and consistency across designs. + This is applicable whether the horizontal and vertical paddings have the same or + different values. To provide more, clarity, the inline spacing in a container should not + be more than its horizontal padding, and the stack spacing value should not be more than + the container's vertical padding. This gradual decrease in the space value as we go + deeper into a container or an element helps to enhance uniformity and consistency across + designs.

    Exceptions

    - Of course, these suggestions are not set in stone, and as such, - exceptions should be made to accommodate the peculiar needs of a - design and its existing principles. One of the cases where - exceptions can apply is when proper separation needs to be - established among a group of elements. + Of course, these suggestions are not set in stone, and as such, exceptions should be + made to accommodate the peculiar needs of a design and its existing principles. One of + the cases where exceptions can apply is when proper separation needs to be established + among a group of elements.

    - Although most pages will have a horizontal padding value, they - seldom have a vertical padding value and since elements are mostly - arranged in a vertical stack in a digital interface, it becomes - necessary that proper separation is established in order to assist - users to easily identify sections and navigate through the content - of a page in the proper manner for better understanding. Varying - values of space can therefore be employed in this vertical stack to - improve users' clarity and minimize any confusion encountered. + Although most pages will have a horizontal padding value, they seldom have a vertical + padding value and since elements are mostly arranged in a vertical stack in a digital + interface, it becomes necessary that proper separation is established in order to assist + users to easily identify sections and navigate through the content of a page in the + proper manner for better understanding. Varying values of space can therefore be + employed in this vertical stack to improve users' clarity and minimize any confusion + encountered.

    diff --git a/src/sections/Projects/Sistent/identity/spacing/index.js b/src/sections/Projects/Sistent/identity/spacing/index.js index 29aad9b33bbf..81fbcc57a9a7 100644 --- a/src/sections/Projects/Sistent/identity/spacing/index.js +++ b/src/sections/Projects/Sistent/identity/spacing/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { Col, Row } from "../../../../../reusecore/Layout"; -import Button from "../../../../../reusecore/Button"; -import SpaceTokenTable1 from "../../../../../assets/images/app/projects/sistent/space-token-table-1-light.png"; -import SpaceTokenTable1Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-1-dark.png"; +import { Col, Row } from '../../../../../reusecore/Layout'; +import Button from '../../../../../reusecore/Button'; +import SpaceTokenTable1 from '../../../../../assets/images/app/projects/sistent/space-token-table-1-light.png'; +import SpaceTokenTable1Dark from '../../../../../assets/images/app/projects/sistent/space-token-table-1-dark.png'; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { SistentLayout } from "../../sistent-layout"; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; +import { SistentLayout } from '../../sistent-layout'; const SistentIdentitySpacing = () => { const location = useLocation(); @@ -21,136 +21,111 @@ const SistentIdentitySpacing = () => {

    Spacing

    - Space is the unseen component in designed solutions that enables - clear, concise, and consistent arrangement of interface elements - across a screen. + Space is the unseen component in designed solutions that enables clear, concise, and + consistent arrangement of interface elements across a screen.

    - Spacing is a foundational consideration in any design endeavor. From - intra component spacing to space between elements in a given layout, - intentional application of spacing across a digital experience - elevates its usability, improves its (or the) experience, and - eventually generates much needed website traffic which is a primary - goal for most digital solutions. + Spacing is a foundational consideration in any design endeavor. From intra component + spacing to space between elements in a given layout, intentional application of spacing + across a digital experience elevates its usability, improves its (or the) experience, + and eventually generates much needed website traffic which is a primary goal for most + digital solutions.

    The Basics

    - A few concepts can be handy to keep in mind as we consider spacing - and its application throughout designs to ensure clarity and proper - understanding. + A few concepts can be handy to keep in mind as we consider spacing and its application + throughout designs to ensure clarity and proper understanding.

    Inset

    - Inset describes the value of padding for any container in the - interface. The description of a container can range from full page - layouts, to page sections, all the way down to card containers and - even icon frames. Inset accounts for the values of both horizontal - and vertical padding. The horizontal and vertical paddings don’t - need to have the same value, however, it is recommended that the - values for the horizontal padding are equivalent. This principle - applies to the values for the vertical paddings as well. + Inset describes the value of padding for any container in the interface. The description + of a container can range from full page layouts, to page sections, all the way down to + card containers and even icon frames. Inset accounts for the values of both horizontal + and vertical padding. The horizontal and vertical paddings don’t need to have the same + value, however, it is recommended that the values for the horizontal padding are + equivalent. This principle applies to the values for the vertical paddings as well.

    Stack

    - Stack in spacing is used to describe the space between vertically - arranged content in a digital interface. Since most digital content - is read from top to bottom, It is only right that they are arranged - in such a way that accurately conveys hierarchy, relationship and - spatial harmony. + Stack in spacing is used to describe the space between vertically arranged content in a + digital interface. Since most digital content is read from top to bottom, It is only + right that they are arranged in such a way that accurately conveys hierarchy, + relationship and spatial harmony.

    Inline

    - This is the horizontal space consideration given to elements that - are being arranged in an interface. It can be the space between text - input, horizontally stacked elements like buttons and so on. + This is the horizontal space consideration given to elements that are being arranged in + an interface. It can be the space between text input, horizontally stacked elements like + buttons and so on.

    Scaling

    - To properly implement spacing, a set of values have to be generated - using a scale just like was done in the case of typography. This - avails us with a fixed range of values that provide the much needed - flexibility required by interfaces to be consistent. This range - could be derived from a base spacing value which follows a principle - like a linear scale from the base value, multiples of the base - value, the golden ratio, or a modular scale. + To properly implement spacing, a set of values have to be generated using a scale just + like was done in the case of typography. This avails us with a fixed range of values + that provide the much needed flexibility required by interfaces to be consistent. This + range could be derived from a base spacing value which follows a principle like a linear + scale from the base value, multiples of the base value, the golden ratio, or a modular + scale.

    - Most digital screen resolutions are divisible by 16 which is a - multiple of eight and so, this makes it a good reason to utilize - eight as our base spacing value. Our scale, therefore, has been - derived from multiples of eight with a half and quarter step of - eight included in the scale to account for much smaller space - considerations, for example, icon padding. The half and quarter - steps have values of two and four respectively. + Most digital screen resolutions are divisible by 16 which is a multiple of eight and so, + this makes it a good reason to utilize eight as our base spacing value. Our scale, + therefore, has been derived from multiples of eight with a half and quarter step of + eight included in the scale to account for much smaller space considerations, for + example, icon padding. The half and quarter steps have values of two and four + respectively.

    - Space Token Table + Space Token Table

    - From this scale of multiples of eight, space values for different - purposes can now be selected for use in an interface raging from gap - between elements on a page to size of elements, to corner radiuses - and other space considerations. + From this scale of multiples of eight, space values for different purposes can now be + selected for use in an interface raging from gap between elements on a page to size of + elements, to corner radiuses and other space considerations.

    Text and Spacing

    - One factor that should be accounted for when sorting out spacing and - other considerations for spatial harmony is text size. Mostly this - affects the stack spacing values and their arrangement. Having all - text sizes in a multiple of the base spacing value is a principle - that can help to avoid inconsistent looking text and space across an - interface. This should also be the same for the line height that - accompanies these text sizes. + One factor that should be accounted for when sorting out spacing and other + considerations for spatial harmony is text size. Mostly this affects the stack spacing + values and their arrangement. Having all text sizes in a multiple of the base spacing + value is a principle that can help to avoid inconsistent looking text and space across + an interface. This should also be the same for the line height that accompanies these + text sizes.

    - Mostly, the text is arranged in a pattern that takes into - consideration the line height of the different sizes of text used in - order to represent proper hierarchy and relationships between text - content in an interface. + Mostly, the text is arranged in a pattern that takes into consideration the line height + of the different sizes of text used in order to represent proper hierarchy and + relationships between text content in an interface.

    diff --git a/src/sections/Projects/Sistent/identity/typography/code.js b/src/sections/Projects/Sistent/identity/typography/code.js index 159daa3eeca8..4be1146a77ee 100644 --- a/src/sections/Projects/Sistent/identity/typography/code.js +++ b/src/sections/Projects/Sistent/identity/typography/code.js @@ -1,16 +1,16 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import TypeTable1 from "../../../../../assets/images/app/projects/sistent/type-table-1-light.png"; -import TypeTable1Dark from "../../../../../assets/images/app/projects/sistent/type-table-1-dark.png"; +import TypeTable1 from '../../../../../assets/images/app/projects/sistent/type-table-1-light.png'; +import TypeTable1Dark from '../../../../../assets/images/app/projects/sistent/type-table-1-dark.png'; -import TypeTable2 from "../../../../../assets/images/app/projects/sistent/type-table-2-light.png"; -import TypeTable2Dark from "../../../../../assets/images/app/projects/sistent/type-table-2-dark.png"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { SistentLayout } from "../../sistent-layout"; -import Button from "../../../../../reusecore/Button"; +import TypeTable2 from '../../../../../assets/images/app/projects/sistent/type-table-2-light.png'; +import TypeTable2Dark from '../../../../../assets/images/app/projects/sistent/type-table-2-dark.png'; +import { Col, Row } from '../../../../../reusecore/Layout'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; +import { SistentLayout } from '../../sistent-layout'; +import Button from '../../../../../reusecore/Button'; const TypographyCode = () => { const location = useLocation(); @@ -22,87 +22,65 @@ const TypographyCode = () => {

    Typography

    - Most of the information that is present in a user interface for the - purpose of passing information across is represented via typography. - Correct typography structure and appropriate application is important - in all interfaces. + Most of the information that is present in a user interface for the purpose of passing + information across is represented via typography. Correct typography structure and + appropriate application is important in all interfaces.

    - The different fonts are referenced using unique token names to - achieve uniform application of the texts in different use cases - across multiple platforms. These tokens, just like the color, are - split into primitive and semantic categories. + The different fonts are referenced using unique token names to achieve uniform + application of the texts in different use cases across multiple platforms. These tokens, + just like the color, are split into primitive and semantic categories.

    Primitive Category

    - This category refers to the seven sizes that were chosen as typesets - from the major third ratio. They form the foundation for all the - other fonts generated and used across the typography system. Since - these tokens lack complete styling however, they are should not be - used directly in designs and as such do not have any roles ascribed - to them. However, if a new role emerges and the need for a new token - arises, these typesets, serve as the reference size for any new font - to be created. + This category refers to the seven sizes that were chosen as typesets from the major + third ratio. They form the foundation for all the other fonts generated and used across + the typography system. Since these tokens lack complete styling however, they are should + not be used directly in designs and as such do not have any roles ascribed to them. + However, if a new role emerges and the need for a new token arises, these typesets, + serve as the reference size for any new font to be created.

    - Type Table + Type Table

    Semantic Category

    - The fonts in this category have specifications that make them - suitable for certain use cases either across all platforms or in any - given platform. + The fonts in this category have specifications that make them suitable for certain use + cases either across all platforms or in any given platform.

    - Type Table + Type Table
    diff --git a/src/sections/Projects/Sistent/identity/typography/guidance.js b/src/sections/Projects/Sistent/identity/typography/guidance.js index 931e8b392f3c..c57b9108ec58 100644 --- a/src/sections/Projects/Sistent/identity/typography/guidance.js +++ b/src/sections/Projects/Sistent/identity/typography/guidance.js @@ -1,17 +1,17 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; -import TypeScale2 from "../../../../../assets/images/app/projects/sistent/type-scale-2-light.png"; -import TypeScale2Dark from "../../../../../assets/images/app/projects/sistent/type-scale-2-dark.png"; -import TypeScale3 from "../../../../../assets/images/app/projects/sistent/type-scale-3-light.png"; -import TypeScale3Dark from "../../../../../assets/images/app/projects/sistent/type-scale-3-dark.png"; +import TypeScale2 from '../../../../../assets/images/app/projects/sistent/type-scale-2-light.png'; +import TypeScale2Dark from '../../../../../assets/images/app/projects/sistent/type-scale-2-dark.png'; +import TypeScale3 from '../../../../../assets/images/app/projects/sistent/type-scale-3-light.png'; +import TypeScale3Dark from '../../../../../assets/images/app/projects/sistent/type-scale-3-dark.png'; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { SistentLayout } from "../../sistent-layout"; -import Button from "../../../../../reusecore/Button"; +import { Col, Row } from '../../../../../reusecore/Layout'; +import { SistentLayout } from '../../sistent-layout'; +import Button from '../../../../../reusecore/Button'; const TypographyGuidance = () => { const location = useLocation(); @@ -23,209 +23,169 @@ const TypographyGuidance = () => {

    Typography

    - Most of the information that is present in a user interface for the - purpose of passing information across is represented via typography. - Correct typography structure and appropriate application is important - in all interfaces. + Most of the information that is present in a user interface for the purpose of passing + information across is represented via typography. Correct typography structure and + appropriate application is important in all interfaces.

    - After a suitable typeface has been chosen, it needs to be arranged - to form the various fonts that will be used to address different - text needs across designs. + After a suitable typeface has been chosen, it needs to be arranged to form the various + fonts that will be used to address different text needs across designs.

    Type Scale Customization

    - It is not compulsory that all of the sizes in a type scale be used. - However, when choosing a size from the scale, ensure to identify - possible use cases in proposed designs to ensure efficiency and - reduce any chances of having redundant text styles. Remember that - less is more and a particular font size can function in multiple - capacities. After making a selection of sizes, if there is - subsequent need for an additional size because of a recurring use - case, then a suitable corresponding size can be chosen from the - scale. This is a better practice. + It is not compulsory that all of the sizes in a type scale be used. However, when + choosing a size from the scale, ensure to identify possible use cases in proposed + designs to ensure efficiency and reduce any chances of having redundant text styles. + Remember that less is more and a particular font size can function in multiple + capacities. After making a selection of sizes, if there is subsequent need for an + additional size because of a recurring use case, then a suitable corresponding size can + be chosen from the scale. This is a better practice.

    - For Layer5, we utilized the major third ratio to generate a type - scale that we could work with. + For Layer5, we utilized the major third ratio to generate a type scale that we could + work with.

    - Type Scale + Type Scale

    - From this type scale, seven text sizes were selected to account for - various needs in our websites and products. These sizes were further - modified with suitable font specifications that will provide - accurate guidance for usage across implementations. + From this type scale, seven text sizes were selected to account for various needs in our + websites and products. These sizes were further modified with suitable font + specifications that will provide accurate guidance for usage across implementations.

    - Type Scale + Type Scale

    - To create even more consistent designs, it is important to consider - typography with spacing and spatial proportions in mind. As a rule - of thumb, it is advisable that values obtained from the modular - scale are rounded off to a multiple of the base space value being - used across a set of designs. So for instance, if a set of designs - has a base space value of 4px or 6px, then, the font sizes selected - are rounded off to be multiples of four or six respectively. + To create even more consistent designs, it is important to consider typography with + spacing and spatial proportions in mind. As a rule of thumb, it is advisable that values + obtained from the modular scale are rounded off to a multiple of the base space value + being used across a set of designs. So for instance, if a set of designs has a base + space value of 4px or 6px, then, the font sizes selected are rounded off to be multiples + of four or six respectively.

    - In keeping with this, the values of the above sizes are noticeably - distinct from the original type scale that it was derived from. This - is because our base space value is 8px and as such, all the text - sizes have been rounded off to a multiple of eight. This same - principle is applied to the accompanying line heights of these text - sizes as well. + In keeping with this, the values of the above sizes are noticeably distinct from the + original type scale that it was derived from. This is because our base space value is + 8px and as such, all the text sizes have been rounded off to a multiple of eight. This + same principle is applied to the accompanying line heights of these text sizes as well.

    Layout Considerations

    - For any digital product or website being created, one important - thing to be considered is the responsive nature of design, which - translates to what the said design will look like across different - screen sizes (desktop, tablet, and mobile). To this end, it is also - crucial that any of the text styles selected account for these - different layout sizes as well. As stated earlier, text styles can - be used for multiple needs across a given design. The important - thing is that there is proper documentation to point this out, - ensuring that hierarchy and prominence are duly established. + For any digital product or website being created, one important thing to be considered + is the responsive nature of design, which translates to what the said design will look + like across different screen sizes (desktop, tablet, and mobile). To this end, it is + also crucial that any of the text styles selected account for these different layout + sizes as well. As stated earlier, text styles can be used for multiple needs across a + given design. The important thing is that there is proper documentation to point this + out, ensuring that hierarchy and prominence are duly established.

    Establishing Hierarchy

    - Since the selected text sizes cannot all be used for the same - purpose, it is necessary to differentiate them from each other in - order to have a working typography system that applies to different - use cases and layout sizes. This will require exploration and - multiple tests of these text styles in the screen sizes they are - intended for and the possible use cases that they will account for - which may have already been identified in the early stages before - use. -

    -

    - With these seven different text sizes derived from the type scale, - we have come up with 13 fonts that can be applied in multiple use - cases and across multiple devices. This variation ensures that fonts - are not created randomly and utilized based on individual - discretion, eventually leading to multiple redundant fonts present - in our type system. These fonts must be considered first for - application in any use case. If the need arises for a new font to be - added to the type system, sufficient use cases have to be + Since the selected text sizes cannot all be used for the same purpose, it is necessary + to differentiate them from each other in order to have a working typography system that + applies to different use cases and layout sizes. This will require exploration and + multiple tests of these text styles in the screen sizes they are intended for and the + possible use cases that they will account for which may have already been identified in + the early stages before use. +

    +

    + With these seven different text sizes derived from the type scale, we have come up with + 13 fonts that can be applied in multiple use cases and across multiple devices. This + variation ensures that fonts are not created randomly and utilized based on individual + discretion, eventually leading to multiple redundant fonts present in our type system. + These fonts must be considered first for application in any use case. If the need arises + for a new font to be added to the type system, sufficient use cases have to be established to do so.

    NOTE:

    - A new font can be something as little as changing only the font - weight of an already existing font and having both variations - function in different capacities. Of course it can also include - replacing an already existing font or creating an entirely new one - to add to the type system. + A new font can be something as little as changing only the font weight of an already + existing font and having both variations function in different capacities. Of course it + can also include replacing an already existing font or creating an entirely new one to + add to the type system.

    Font Specification

    - Each font should not be a product of random choices just to have a - set of text to work with. They should be informed decisions based on - how they can assist to reinforce a brand, what they can be used to - achieve in designs, and to what extent they should be applied. For - more documentation, check out details on each font in the Code - section for `Typography`. + Each font should not be a product of random choices just to have a set of text to work + with. They should be informed decisions based on how they can assist to reinforce a + brand, what they can be used to achieve in designs, and to what extent they should be + applied. For more documentation, check out details on each font in the Code section for + `Typography`.

    Heading

    - Headings are usually the first thing a user sees when reading a - block of text. The idea is for them to be concise and provide a hint - of what readers can expect from the accompanying body of text or an - entire page. It should also capture attention and encourage further - exploration. They can range from large hero section headings to much - smaller subtitle and label headings. Whatever the case, headings at - different sizes can help to accurately indicate hierarchy and - provide guidance for any reader going through a group of text. + Headings are usually the first thing a user sees when reading a block of text. The idea + is for them to be concise and provide a hint of what readers can expect from the + accompanying body of text or an entire page. It should also capture attention and + encourage further exploration. They can range from large hero section headings to much + smaller subtitle and label headings. Whatever the case, headings at different sizes can + help to accurately indicate hierarchy and provide guidance for any reader going through + a group of text.

    - Of Layer5’s ten fonts, seven of them can function as heading text - and ensure hierarchy for different context. For text that needs to - be prominent in a group of text (especially at the beginning), any - one of these fonts will suffice. + Of Layer5’s ten fonts, seven of them can function as heading text and ensure hierarchy + for different context. For text that needs to be prominent in a group of text + (especially at the beginning), any one of these fonts will suffice.

    Body

    - A bulk of text content is written in body or paragraph fonts. These - are less prominent (larger) fonts that provide more context to what - brief ideas any available headings may have outlined. It can also be - used for short text in components and when creating other interface - elements due to its higher legibility when compared to heading or - subtitle texts. Three font sizes have been earmarked to function in - this capacity for the text needs in Layer5 and across all of its - products. + A bulk of text content is written in body or paragraph fonts. These are less prominent + (larger) fonts that provide more context to what brief ideas any available headings may + have outlined. It can also be used for short text in components and when creating other + interface elements due to its higher legibility when compared to heading or subtitle + texts. Three font sizes have been earmarked to function in this capacity for the text + needs in Layer5 and across all of its products.

    Label

    - To highlight supplementary information for interface elements, label - texts can suffice. They provide extra information for users as they - navigate a solution. Label texts ideally do not need to be too - prominent hence their smaller size compared to the body text - category. There are two label texts available in the Sistent type - system. + To highlight supplementary information for interface elements, label texts can suffice. + They provide extra information for users as they navigate a solution. Label texts + ideally do not need to be too prominent hence their smaller size compared to the body + text category. There are two label texts available in the Sistent type system.

    Code

    - This fonts are curated specifically for the purpose of writing code - across our websites and solutions. They can be used to highlight - code related text in designs like token values, code snippets for - components and any other code related application. Two fonts have - been made available for this purpose. + This fonts are curated specifically for the purpose of writing code across our websites + and solutions. They can be used to highlight code related text in designs like token + values, code snippets for components and any other code related application. Two fonts + have been made available for this purpose.

    diff --git a/src/sections/Projects/Sistent/identity/typography/index.js b/src/sections/Projects/Sistent/identity/typography/index.js index fe8fcec67acd..98cfecdde595 100644 --- a/src/sections/Projects/Sistent/identity/typography/index.js +++ b/src/sections/Projects/Sistent/identity/typography/index.js @@ -1,16 +1,16 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; +import React from 'react'; +import { navigate } from 'gatsby'; +import { useLocation } from '@reach/router'; -import Button from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row, Col } from "../../../../../reusecore/Layout"; +import Button from '../../../../../reusecore/Button'; +import { SistentLayout } from '../../sistent-layout'; +import { Row, Col } from '../../../../../reusecore/Layout'; -import TypeScale1 from "../../../../../assets/images/app/projects/sistent/type-scale-1-light.png"; -import TypeScale1Dark from "../../../../../assets/images/app/projects/sistent/type-scale-1-dark.png"; -import FontPair from "../../../../../assets/images/app/projects/sistent/font-pair-light.png"; -import FontPairDark from "../../../../../assets/images/app/projects/sistent/font-pair-dark.png"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import TypeScale1 from '../../../../../assets/images/app/projects/sistent/type-scale-1-light.png'; +import TypeScale1Dark from '../../../../../assets/images/app/projects/sistent/type-scale-1-dark.png'; +import FontPair from '../../../../../assets/images/app/projects/sistent/font-pair-light.png'; +import FontPairDark from '../../../../../assets/images/app/projects/sistent/font-pair-dark.png'; +import { useStyledDarkMode } from '../../../../../theme/app/useStyledDarkMode'; const SistentTypography = () => { const location = useLocation(); @@ -23,49 +23,37 @@ const SistentTypography = () => {

    Typography

    - Most of the information that is present in a user interface for the - purpose of passing information across is represented via typography. - Correct typography structure and appropriate application is important - in all interfaces. + Most of the information that is present in a user interface for the purpose of passing + information across is represented via typography. Correct typography structure and + appropriate application is important in all interfaces.

    - There are a couple of things to consider when preparing to apply - typography to any interface. + There are a couple of things to consider when preparing to apply typography to any + interface.

    The Basics

    @@ -73,90 +61,76 @@ const SistentTypography = () => {

    Typeface

    - A typeface is a set of letters, numbers, and accessories that have - common design features. These characters are usually grouped into - families and used in relation to each other to ensure uniform text - representation in designs and forms of text that are relative to - each other. Qanelas Soft, Times New Roman, Merriweather, and Roboto - are all examples of typefaces. + A typeface is a set of letters, numbers, and accessories that have common design + features. These characters are usually grouped into families and used in relation to + each other to ensure uniform text representation in designs and forms of text that are + relative to each other. Qanelas Soft, Times New Roman, Merriweather, and Roboto are all + examples of typefaces.

    Font

    - Often wrongly used interchangeably with typeface, a font refers to - variations of a typeface. So this includes the weight, size, line - height, tracking (letter spacing), and any other features that are - added to a typeface for it to function in a certain capacity. A key - relationship between a typeface and a font is that characters in a + Often wrongly used interchangeably with typeface, a font refers to variations of a + typeface. So this includes the weight, size, line height, tracking (letter spacing), and + any other features that are added to a typeface for it to function in a certain + capacity. A key relationship between a typeface and a font is that characters in a typeface can be modified to form different fonts.

    Line Height

    - Line height is mostly used to refer to the distance between lines of - text. WCAG standards for line height recommend a line height that is - at least 1.5 times the chosen font size, especially for small text - sizes. For larger fonts, however, evidence has shown that anything - between 1.2 and 1.5 times the font size might also be appropriate, - especially considering the fact that most large fonts used for - headings and subheadings tend not to exceed a single line of text. + Line height is mostly used to refer to the distance between lines of text. WCAG + standards for line height recommend a line height that is at least 1.5 times the chosen + font size, especially for small text sizes. For larger fonts, however, evidence has + shown that anything between 1.2 and 1.5 times the font size might also be appropriate, + especially considering the fact that most large fonts used for headings and subheadings + tend not to exceed a single line of text.

    Type Scale

    - Type scale with respect to typography points to the set of - incremental steps or rations that dictate how font sizes increase or - decrease as you move up or down a given hierarchy. This increase or - decrease is usually originated from a base size that serves as the - defining font within the scale. These steps create a systemic - progression of font sizes that maintain harmony and visual balance - within a system because of the relationship they share with the base - font. + Type scale with respect to typography points to the set of incremental steps or rations + that dictate how font sizes increase or decrease as you move up or down a given + hierarchy. This increase or decrease is usually originated from a base size that serves + as the defining font within the scale. These steps create a systemic progression of font + sizes that maintain harmony and visual balance within a system because of the + relationship they share with the base font.

    - The base size used to generate a type scale is determined by the - principles governing size, typography, and other brand specific - contexts. As a design best practice, a text size of 16px is - generally accepted as very legible for responsive design. It is also - a multiple of eight which is our base space value and this is - further elaborated on in + The base size used to generate a type scale is determined by the principles governing + size, typography, and other brand specific contexts. As a design best practice, a text + size of 16px is generally accepted as very legible for responsive design. It is also a + multiple of eight which is our base space value and this is further elaborated on in Spacing - . Reasons like these influence its use as a base size for our type - scale. A modular type scale can be generated using harmonious values - like the golden ratio, the major third, the perfect fifth, and so - on. + . Reasons like these influence its use as a base size for our type scale. A modular type + scale can be generated using harmonious values like the golden ratio, the major third, + the perfect fifth, and so on.

    - Type Scale + Type Scale

    - Because of the progressive increase or decrease that governs the - content of a type scale, it makes it easier to obtain consistent, - related, and harmonious font sizes that can each be used for - specific needs when curating digital interfaces. + Because of the progressive increase or decrease that governs the content of a type + scale, it makes it easier to obtain consistent, related, and harmonious font sizes that + can each be used for specific needs when curating digital interfaces.

    Font Pairing

    - Sometimes, it might be necessary to make use of more than one - typeface. In such a case, an applicable principle is that one of the - typefaces is used mostly for headings and subheadings, while the - other is used for most paragraphs and body text needs across the - same design. Detailed research on typefaces and their compatibility - will help to make informed decisions when it comes to choosing a - typeface for font pairing. + Sometimes, it might be necessary to make use of more than one typeface. In such a case, + an applicable principle is that one of the typefaces is used mostly for headings and + subheadings, while the other is used for most paragraphs and body text needs across the + same design. Detailed research on typefaces and their compatibility will help to make + informed decisions when it comes to choosing a typeface for font pairing.

    - Layer5 has successfully been able to implement a font pairing of - Qanelas Soft for all heading and subheading text and Open Sans for - all body, paragraph, and content text needs. + Layer5 has successfully been able to implement a font pairing of Qanelas Soft for all + heading and subheading text and Open Sans for all body, paragraph, and content text + needs.

    diff --git a/src/sections/Projects/Sistent/index.js b/src/sections/Projects/Sistent/index.js index 9c9684df1960..19ad972cc355 100644 --- a/src/sections/Projects/Sistent/index.js +++ b/src/sections/Projects/Sistent/index.js @@ -1,6 +1,6 @@ -import React from "react"; -import SistentWrapper from "./sistent.style"; -import HandbookCard from "../../../components/HandbookCard"; +import React from 'react'; +import SistentWrapper from './sistent.style'; +import HandbookCard from '../../../components/HandbookCard'; const SistentHome = () => { return ( diff --git a/src/sections/Projects/Sistent/sistent-layout.js b/src/sections/Projects/Sistent/sistent-layout.js index 1ed147cd0bbb..c492acf8bda9 100644 --- a/src/sections/Projects/Sistent/sistent-layout.js +++ b/src/sections/Projects/Sistent/sistent-layout.js @@ -1,9 +1,9 @@ -import React from "react"; -import SistentWrapper from "./sistent.style"; -import TOC from "../../../components/SistentNavigation"; -import { Container } from "../../../reusecore/Layout"; -import SistentPagination from "../../../components/SistentNavigation/pagination"; -import IntraPage from "../../../components/SistentNavigation/intra-page"; +import React from 'react'; +import SistentWrapper from './sistent.style'; +import TOC from '../../../components/SistentNavigation'; +import { Container } from '../../../reusecore/Layout'; +import SistentPagination from '../../../components/SistentNavigation/pagination'; +import IntraPage from '../../../components/SistentNavigation/intra-page'; export const SistentLayout = ({ title, children }) => { return ( diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 15606def6b34..7f75cca882b5 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -1,11 +1,11 @@ -import { Box } from "@layer5/sistent"; -import styled from "styled-components"; +import { Box } from '@layer5/sistent'; +import styled from 'styled-components'; export const ActionBox = styled(Box)(() => ({ - display: "flex", - justifyContent: "end", - width: "100%", - gap: "1rem" + display: 'flex', + justifyContent: 'end', + width: '100%', + gap: '1rem' })); const SistentWrapper = styled.div` @@ -188,18 +188,18 @@ const SistentWrapper = styled.div` margin-top: 15px; } - input[type="checkbox"] + label { + input[type='checkbox'] + label { display: block; margin: 0.2em; cursor: pointer; padding: 0.2em; } - input[type="checkbox"] { + input[type='checkbox'] { display: none; } - input[type="checkbox"] + label:before { + input[type='checkbox'] + label:before { content: url('data:image/svg+xml; utf8, '); border: 0.1em solid #000; border-radius: 0.2em; @@ -216,7 +216,7 @@ const SistentWrapper = styled.div` background-color: white; } - input[type="checkbox"] + label:active:before { + input[type='checkbox'] + label:active:before { transform: scale(0); } rect { @@ -228,9 +228,9 @@ const SistentWrapper = styled.div` transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } svg { - color: "red"; + color: 'red'; } - input[type="checkbox"]:checked + label:before { + input[type='checkbox']:checked + label:before { content: url('data:image/svg+xml; utf8, '); background-color: ${(props) => props.theme.keppelColor}; @@ -239,12 +239,12 @@ const SistentWrapper = styled.div` transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } - input[type="checkbox"]:disabled + label:before { + input[type='checkbox']:disabled + label:before { transform: scale(1); border-color: #aaa; } - input[type="checkbox"]:checked:disabled + label:before { + input[type='checkbox']:checked:disabled + label:before { transform: scale(1); background-color: ${(props) => props.theme.secondaryLightColor}; border-color: ${(props) => props.theme.secondaryLightColor}; @@ -269,7 +269,7 @@ const SistentWrapper = styled.div` } .project-title-icon { - margin-left: "10%"; + margin-left: '10%'; width: 4%; transform: translate(0, 28%); } @@ -553,7 +553,7 @@ const SistentWrapper = styled.div` position: relative; } .item::before { - content: ""; + content: ''; position: absolute; width: 20px; height: 20px; diff --git a/src/sections/Projects/index.js b/src/sections/Projects/index.js index e95ad5841c51..f447c97bc667 100644 --- a/src/sections/Projects/index.js +++ b/src/sections/Projects/index.js @@ -1,18 +1,18 @@ -import React from "react"; -import { Link } from "gatsby"; +import React from 'react'; +import { Link } from 'gatsby'; -import { Container, Row, Col } from "../../reusecore/Layout"; -import SectionTitle from "../../reusecore/SectionTitle"; -import Button from "../../reusecore/Button"; -import VintageBox from "../../reusecore/VintageBox"; +import { Container, Row, Col } from '../../reusecore/Layout'; +import SectionTitle from '../../reusecore/SectionTitle'; +import Button from '../../reusecore/Button'; +import VintageBox from '../../reusecore/VintageBox'; -import projectImage1 from "../../assets/images/app/projects/landscape.webp"; -import projectImage2 from "../../assets/images/app/projects/smp.webp"; -import projectImage3 from "../../assets/images/app/projects/meshery-logo-light.webp"; -import projectImage4 from "../../assets/images/app/projects/meshery-logo-light.webp"; -import Icon from "../../assets/images/app/projects/arrow.svg"; +import projectImage1 from '../../assets/images/app/projects/landscape.webp'; +import projectImage2 from '../../assets/images/app/projects/smp.webp'; +import projectImage3 from '../../assets/images/app/projects/meshery-logo-light.webp'; +import projectImage4 from '../../assets/images/app/projects/meshery-logo-light.webp'; +import Icon from '../../assets/images/app/projects/arrow.svg'; -import ProjectItemWrapper from "./projectSection.style"; +import ProjectItemWrapper from './projectSection.style'; const Projects = () => { return ( @@ -60,11 +60,7 @@ const Projects = () => {
    - +

    Projects

    @@ -72,13 +68,11 @@ const Projects = () => {

    - Layer5 projects establish industry standards and enable service developers, owners, and operators with repeatable patterns and best practices for managing all aspects of distributed services. + Layer5 projects establish industry standards and enable service developers, owners, + and operators with repeatable patterns and best practices for managing all aspects of + distributed services.

    - + - ) : - ( - - )} + ) : ( + + )}
    -

    +

    Filters - + Clear Filters - {expandFilter ? ( - Clear Filters - ) : ""} + {expandFilter ? ( + + Clear Filters + + ) : ( + '' + )}

    -
    -
    -

    Type

    +
    +
    +

    + Type +

    {expandType ? ( - + ) : ( - + )}
    -
      +
        {typeOptions[0].subdata.map((x) => (
        • ))}
    -
    -

    Product

    +
    +

    + Product +

    {expandProduct ? ( - + ) : ( - + )}
    -
      +
        {productOptions[0].subdata.map((x) => (
        • ))}
    -
    -

    Technology

    +
    +

    + Technology +

    {expandTech ? ( - + ) : ( - + )}
    -
      +
        {techOptions[0].subdata.map((x) => (
        • ))}
    -
    -

    Service Mesh

    +
    +

    + Service Mesh +

    {expandMesh ? ( - + ) : ( - + )}
    -
      +
        {meshOptions[0].subdata.map((x) => (
        • ))}
    - -
    - ); }; diff --git a/src/sections/Resources/Resources-grid/filters.style.js b/src/sections/Resources/Resources-grid/filters.style.js index 7e79b802dd55..df0a234bcaad 100644 --- a/src/sections/Resources/Resources-grid/filters.style.js +++ b/src/sections/Resources/Resources-grid/filters.style.js @@ -1,228 +1,226 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const ResourceNavigationWrapper = styled.div` - - .heading{ - margin-bottom:1rem; + .heading { + margin-bottom: 1rem; font-size: 1.5rem; border-bottom: 2px solid rgba(153, 151, 151, 0.2); - span{ + span { float: right; font-size: 0.9rem; color: ${(props) => props.theme.primaryColor}; cursor: pointer; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - .clear-icon{ + .clear-icon { vertical-align: middle; - width: 1rem; - height: 1rem; + width: 1rem; + height: 1rem; } } } - .heading-name{ + .heading-name { margin: 0 0 0.3rem 0; } - .heading-name>span:hover{ + .heading-name > span:hover { color: ${(props) => props.theme.secondaryColor}; } - .heading-name>strong{ + .heading-name > strong { font-size: 1.5rem; } - .mob-view{ + .mob-view { display: none; } - .clear-disabled{ + .clear-disabled { display: none; } - .filter-icon{ - width: 1.2rem; - height: 1.2rem; + .filter-icon { + width: 1.2rem; + height: 1.2rem; cursor: pointer; - margin : 0.2rem; + margin: 0.2rem; } - .filter-menu-icon{ - display : none; + .filter-menu-icon { + display: none; } - .filter-btn{ + .filter-btn { display: flex; justify-content: space-between; align-items: center; background-color: ${(props) => props.theme.secondaryColor}; - color: #FFF; + color: #fff; font-weight: 500; padding: 0.5rem; border: none; border-radius: 5px; - span{ + span { padding-left: 0.5rem; float: right; - color: #FFF; + color: #fff; font-size: 1.2rem; cursor: pointer; } } -label { - display: block; - padding-left: 15px; - margin-top: 1px; - vertical-align: bottom; - text-indent: -15px; - } -input { - width: 22px; - height: 22px; - padding: 0; - margin: 0 1rem 1rem 0; - display: inline; - vertical-align: middle; - position: relative; - top: -1px; - } -input[type="checkbox"] { - margin: 0; - &:hover{ - cursor: pointer; - } - } - - ul{ - display:flex; - flex-direction:column; - white-space: nowrap; - } - - .ul{ - display: flex; - flex-direction: column; - margin-top: 1rem; - list-style: none; - } - - .total{ - float: right; - color: ${props => props.theme.grey737373ToGreyB3B3B3}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - &:hover{ - color: ${props => props.theme.secondaryColor}; - border-color: ${props => props.theme.secondaryColor}; - cursor: pointer; - } - } - .ul-open{ - display: flex; - flex-direction: column; - margin-top: 1rem; - padding-left:0; - list-style: none; - height:auto !important; - opacity:1 !important; - margin-bottom: 2rem; - transition:all .4s !important; - } - - .menu-icon{ - width: 1.5rem; - height: 1.5rem; - cursor: pointer; - float: right; - vertical-align: bottom; - } - .toggle-btn{ - p{ - display:inline; - } - cursor: pointer; - } - - .ul{ - opacity:0; - height:0; - transition:none; - visibility:hidden; - } - - .ul-open{ - visibility:visible; - } - - @media only screen and (max-width: 991px) { - margin-left: 1.5rem; - .filter-menu-icon{ - display: flex; - } - .filter-menu-icon>span{ - font-size: 1.2rem; - font-weight: 600; - margin : 0 1rem; - } - .filter-close{ - width: 1.2rem; - height: 1.2rem; - } - .filters-boxes{ - display: none; - } - .heading{ - display: flex; - justify-content: space-between; - border: none; - } - .heading-name>strong{ - display : none; - } - .desk-view{ - display:none; - } - .mob-view{ - display:block; - } - .clear-disable{ - display: none; - } - #filters-boxes{ - display : block - } + label { + display: block; + padding-left: 15px; + margin-top: 1px; + vertical-align: bottom; + text-indent: -15px; + } + input { + width: 22px; + height: 22px; + padding: 0; + margin: 0 1rem 1rem 0; + display: inline; + vertical-align: middle; + position: relative; + top: -1px; + } + input[type='checkbox'] { + margin: 0; + &:hover { + cursor: pointer; } - @media only screen and (max-width: 575px) { - margin-left: 0rem; - .heading{ - margin-left: 0; - margin-bottom: 1.5rem - } + } + + ul { + display: flex; + flex-direction: column; + white-space: nowrap; + } + + .ul { + display: flex; + flex-direction: column; + margin-top: 1rem; + list-style: none; + } + + .total { + float: right; + color: ${(props) => props.theme.grey737373ToGreyB3B3B3}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + + &:hover { + color: ${(props) => props.theme.secondaryColor}; + border-color: ${(props) => props.theme.secondaryColor}; + cursor: pointer; } - @media only screen and (max-width: 430px){ - .filter{ - font-size: 1rem; - } - .filter-btn>span{ - font-size: 1rem; - font-weight: bold; - padding-left: 0.6rem; - } - .filter-icon{ - width: 1rem; - height: 1rem; - } + } + .ul-open { + display: flex; + flex-direction: column; + margin-top: 1rem; + padding-left: 0; + list-style: none; + height: auto !important; + opacity: 1 !important; + margin-bottom: 2rem; + transition: all 0.4s !important; + } - .clear-enabled{ - font-size: 0.5rem; - } - - .filter-close{ - width: 1.2rem; - height: 1.2rem; - } - } - + .menu-icon { + width: 1.5rem; + height: 1.5rem; + cursor: pointer; + float: right; + vertical-align: bottom; + } + .toggle-btn { + p { + display: inline; + } + cursor: pointer; + } + + .ul { + opacity: 0; + height: 0; + transition: none; + visibility: hidden; + } + + .ul-open { + visibility: visible; + } + + @media only screen and (max-width: 991px) { + margin-left: 1.5rem; + .filter-menu-icon { + display: flex; + } + .filter-menu-icon > span { + font-size: 1.2rem; + font-weight: 600; + margin: 0 1rem; + } + .filter-close { + width: 1.2rem; + height: 1.2rem; + } + .filters-boxes { + display: none; + } + .heading { + display: flex; + justify-content: space-between; + border: none; + } + .heading-name > strong { + display: none; + } + .desk-view { + display: none; + } + .mob-view { + display: block; + } + .clear-disable { + display: none; + } + #filters-boxes { + display: block; + } + } + @media only screen and (max-width: 575px) { + margin-left: 0rem; + .heading { + margin-left: 0; + margin-bottom: 1.5rem; + } + } + @media only screen and (max-width: 430px) { + .filter { + font-size: 1rem; + } + .filter-btn > span { + font-size: 1rem; + font-weight: bold; + padding-left: 0.6rem; + } + .filter-icon { + width: 1rem; + height: 1rem; + } + + .clear-enabled { + font-size: 0.5rem; + } + + .filter-close { + width: 1.2rem; + height: 1.2rem; + } + } `; -export default ResourceNavigationWrapper; \ No newline at end of file +export default ResourceNavigationWrapper; diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js index d03967bab866..3da699dcd7e8 100644 --- a/src/sections/Resources/Resources-grid/index.js +++ b/src/sections/Resources/Resources-grid/index.js @@ -1,29 +1,26 @@ -import React from "react"; -import Card from "../../../components/Card"; -import { Row, Col } from "../../../reusecore/Layout"; -import Pagination from "./paginate"; -import SearchBox from "../../../reusecore/Search"; -import EmptyResources from "../Resources-error/emptyStateTemplate"; +import React from 'react'; +import Card from '../../../components/Card'; +import { Row, Col } from '../../../reusecore/Layout'; +import Pagination from './paginate'; +import SearchBox from '../../../reusecore/Search'; +import EmptyResources from '../Resources-error/emptyStateTemplate'; -import { ResourcePageWrapper } from "./resourceGrid.style"; +import { ResourcePageWrapper } from './resourceGrid.style'; const ResourceGrid = (props) => { // Get current posts const indexOfLastPost = props.currentPage * props.postsPerPage; const indexOfFirstPost = indexOfLastPost - props.postsPerPage; const searchedResource = - props.postsPerPage > 0 - ? props.data.slice(indexOfFirstPost, indexOfLastPost) - : props.data; + props.postsPerPage > 0 ? props.data.slice(indexOfFirstPost, indexOfLastPost) : props.data; const paginate = (pageNumber) => { props.setCurrentPage(pageNumber); window.scrollTo({ top: 200, left: 100, - behavior: "smooth", + behavior: 'smooth' }); - }; return ( @@ -41,14 +38,16 @@ const ResourceGrid = (props) => {
    - {props.data.length < 1 && } + {props.data.length < 1 && ( + + )} {searchedResource.map(({ id, frontmatter, fields }) => ( - + ))} diff --git a/src/sections/Resources/Resources-grid/options.js b/src/sections/Resources/Resources-grid/options.js index 2718213e4d95..93f0658f61c4 100644 --- a/src/sections/Resources/Resources-grid/options.js +++ b/src/sections/Resources/Resources-grid/options.js @@ -1,49 +1,53 @@ -export const options = [ +export const options = [ { - category: "Type", + category: 'Type', subdata: [ - { id: 0, value: "Article", label: "Article" }, - { id: 1, value: "Blog", label: "Blog" }, - { id: 2, value: "News", label: "News" }, - { id: 3, value: "Workshop", label: "Workshop" }, - { id: 4, value: "Recorded Webinar", label: "Recorded Webinar" }, - { id: 5, value: "Event", label: "Event" }, - { id: 6, value: "Tutorial", label: "Tutorial" }, - { id: 7, value: "Case Study", label: "Case Study" }, - { id: 8, value: "Infographic", label: "Infographic" }, - { id: 9, value: "Guide", label: "Guide" }, - { id: 10, value: "FAQ", label: "FAQ" }, - { id: 11, value: "Interview", label: "Interview" }] + { id: 0, value: 'Article', label: 'Article' }, + { id: 1, value: 'Blog', label: 'Blog' }, + { id: 2, value: 'News', label: 'News' }, + { id: 3, value: 'Workshop', label: 'Workshop' }, + { id: 4, value: 'Recorded Webinar', label: 'Recorded Webinar' }, + { id: 5, value: 'Event', label: 'Event' }, + { id: 6, value: 'Tutorial', label: 'Tutorial' }, + { id: 7, value: 'Case Study', label: 'Case Study' }, + { id: 8, value: 'Infographic', label: 'Infographic' }, + { id: 9, value: 'Guide', label: 'Guide' }, + { id: 10, value: 'FAQ', label: 'FAQ' }, + { id: 11, value: 'Interview', label: 'Interview' } + ] }, { - category: "Product", + category: 'Product', subdata: [ - { id: 0, value: "Meshery", label: "Meshery" }, - { id: 1, value: "MeshMap", label: "MeshMap" }, - { id: 2, value: "Docker Extension", label: "Docker Extension" }, - { id: 3, value: "Service Mesh Performance", label: "SMP" }, - { id: 4, value: "Service Mesh Landscape", label: "Service Mesh Landscape" }, - { id: 5, value: "Nighthawk", label: "Nighthawk" }] + { id: 0, value: 'Meshery', label: 'Meshery' }, + { id: 1, value: 'MeshMap', label: 'MeshMap' }, + { id: 2, value: 'Docker Extension', label: 'Docker Extension' }, + { id: 3, value: 'Service Mesh Performance', label: 'SMP' }, + { id: 4, value: 'Service Mesh Landscape', label: 'Service Mesh Landscape' }, + { id: 5, value: 'Nighthawk', label: 'Nighthawk' } + ] }, { - category: "Technology", + category: 'Technology', subdata: [ - { id: 0, value: "API", label: "API" }, - { id: 1, value: "Cloud", label: "Cloud" }, - { id: 2, value: "Docker", label: "Docker" }, - { id: 3, value: "JWT", label: "JWT" }, - { id: 4, value: "Kubernetes", label: "Kubernetes" }, - { id: 5, value: "WebAssembly", label: "WebAssembly" }] + { id: 0, value: 'API', label: 'API' }, + { id: 1, value: 'Cloud', label: 'Cloud' }, + { id: 2, value: 'Docker', label: 'Docker' }, + { id: 3, value: 'JWT', label: 'JWT' }, + { id: 4, value: 'Kubernetes', label: 'Kubernetes' }, + { id: 5, value: 'WebAssembly', label: 'WebAssembly' } + ] }, { - category: "Service Mesh", + category: 'Service Mesh', subdata: [ - { id: 0, value: "Consul", label: "Consul" }, - { id: 1, value: "Linkerd", label: "Linkerd" }, - { id: 2, value: "Istio", label: "Istio" }, - { id: 3, value: "Open Service Mesh", label: "Open Service Mesh" }, - { id: 4, value: "Kuma", label: "Kuma" }, - { id: 5, value: "Network Service Mesh", label: "Network Service Mesh" }, - { id: 6, value: "Traefik Mesh", label: "Traefik Mesh" }] - }, + { id: 0, value: 'Consul', label: 'Consul' }, + { id: 1, value: 'Linkerd', label: 'Linkerd' }, + { id: 2, value: 'Istio', label: 'Istio' }, + { id: 3, value: 'Open Service Mesh', label: 'Open Service Mesh' }, + { id: 4, value: 'Kuma', label: 'Kuma' }, + { id: 5, value: 'Network Service Mesh', label: 'Network Service Mesh' }, + { id: 6, value: 'Traefik Mesh', label: 'Traefik Mesh' } + ] + } ]; diff --git a/src/sections/Resources/Resources-grid/paginate.js b/src/sections/Resources/Resources-grid/paginate.js index 05621d7629d8..c3ae687da35e 100644 --- a/src/sections/Resources/Resources-grid/paginate.js +++ b/src/sections/Resources/Resources-grid/paginate.js @@ -1,5 +1,5 @@ -import React from "react"; -import { ResourcePageWrapper } from "./resourceGrid.style"; +import React from 'react'; +import { ResourcePageWrapper } from './resourceGrid.style'; const Pagination = ({ postsPerPage, totalPosts, paginate, currentPage }) => { const pageNumbers = []; @@ -11,8 +11,12 @@ const Pagination = ({ postsPerPage, totalPosts, paginate, currentPage }) => { return (
    - {pageNumbers.map(number => ( - ))} @@ -21,4 +25,4 @@ const Pagination = ({ postsPerPage, totalPosts, paginate, currentPage }) => { ); }; -export default Pagination; \ No newline at end of file +export default Pagination; diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js index 5669cfb0b920..42c4b596cc53 100644 --- a/src/sections/Resources/Resources-grid/resourceGrid.style.js +++ b/src/sections/Resources/Resources-grid/resourceGrid.style.js @@ -1,99 +1,95 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const ResourcePageWrapper = styled.div` + .resource-grid-wrapper { + margin: 0.8rem 0 1.5rem 1.5rem; + } - .resource-grid-wrapper{ - margin: 0.8rem 0 1.5rem 1.5rem; - } + .search { + display: flex; + justify-content: flex-end; + width: 100%; - .search{ - display:flex; - justify-content:flex-end; - width:100%; - - margin-bottom: 0.8rem; - .searchBox{ - flex:0 0 50%; - @media only screen and (max-width:990px){ - - flex:0 0 100%; - max-width:100%; - - } - } - - } - .post-content-block{ - height: 7rem; + margin-bottom: 0.8rem; + .searchBox { + flex: 0 0 50%; + @media only screen and (max-width: 990px) { + flex: 0 0 100%; + max-width: 100%; + } } - .post-thumb-block{ - height: 10.5rem; + } + .post-content-block { + height: 7rem; + } + .post-thumb-block { + height: 10.5rem; + } + .post-meta-block { + p { + margin: 0; } - .post-meta-block{ - p{ - margin:0; - } + } + .btn-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: 0 auto 2rem; + } + .btn { + width: 2rem; + height: 2rem; + border-radius: 5px; + cursor: pointer; + margin: 0.5rem; + transition: all 0.3s linear; + :hover { + box-shadow: 0px 1px 5px 1px rgba(0, 179, 159, 0.5); } - .btn-container { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin: 0 auto 2rem; - } - .btn { - width: 2rem; - height: 2rem; - border-radius: 5px; - cursor: pointer; - margin: 0.5rem; - transition: all 0.3s linear; - :hover { - box-shadow: 0px 1px 5px 1px rgba(0, 179, 159, 0.5); - } - } - .page-btn { - background: ${props => props.theme.white}; - border: solid 2px; - border-color: ${props => props.theme.secondaryColor}; - } - .active-btn { - background: ${props => props.theme.secondaryColor}; - border-color: transparent; - color: #fff; - } + } + .page-btn { + background: ${(props) => props.theme.white}; + border: solid 2px; + border-color: ${(props) => props.theme.secondaryColor}; + } + .active-btn { + background: ${(props) => props.theme.secondaryColor}; + border-color: transparent; + color: #fff; + } - @media only screen and (max-width: 575px) { - .resource-grid-wrapper{ - margin: 0 auto 5rem; - } + @media only screen and (max-width: 575px) { + .resource-grid-wrapper { + margin: 0 auto 5rem; } + } - .no-resources-page{ + .no-resources-page { padding: 1rem 1rem 4rem; margin: 1rem; - + box-shadow: 0px 3px 10px 1px rgba(0, 179, 159, 0.5); .errorMessage { - font-size: 2rem; - line-height: 2rem; + font-size: 2rem; + line-height: 2rem; } - .error-text{ - margin-top: 5rem; + .error-text { + margin-top: 5rem; } - .errorSubtitle { - font-weight: 400; - font-size: 1.5rem; - color: gray; - font-style: italic; - margin-top: 2.5rem; + .errorSubtitle { + font-weight: 400; + font-size: 1.5rem; + color: gray; + font-style: italic; + margin-top: 2.5rem; } - img{ - display: block; - margin:auto; - margin-top: 3.125rem; - width: 14rem; - @media only screen and (max-width:700px){ - max-width: 100%; - } - } + img { + display: block; + margin: auto; + margin-top: 3.125rem; + width: 14rem; + @media only screen and (max-width: 700px) { + max-width: 100%; + } } + } `; diff --git a/src/sections/SeeYou/index.js b/src/sections/SeeYou/index.js index 0130d8df640d..9557b3e19bc4 100644 --- a/src/sections/SeeYou/index.js +++ b/src/sections/SeeYou/index.js @@ -1,43 +1,53 @@ -import React from "react"; -import SeeYouWrapper from "./seeYou.style"; -import { Container } from "../../reusecore/Layout"; -import square from "../../assets/images/whiteboard/square.svg"; -import pentagon from "../../assets/images/whiteboard/pentagon.svg"; -import hexagon from "../../assets/images/whiteboard/hexagon.svg"; -import octagon from "../../assets/images/whiteboard/octagon.svg"; -import cursor_1 from "../../assets/images/whiteboard/cursor-1.svg"; -import cursor_2 from "../../assets/images/whiteboard/cursor-2.svg"; -import Button from "../../reusecore/Button"; +import React from 'react'; +import SeeYouWrapper from './seeYou.style'; +import { Container } from '../../reusecore/Layout'; +import square from '../../assets/images/whiteboard/square.svg'; +import pentagon from '../../assets/images/whiteboard/pentagon.svg'; +import hexagon from '../../assets/images/whiteboard/hexagon.svg'; +import octagon from '../../assets/images/whiteboard/octagon.svg'; +import cursor_1 from '../../assets/images/whiteboard/cursor-1.svg'; +import cursor_2 from '../../assets/images/whiteboard/cursor-2.svg'; +import Button from '../../reusecore/Button'; const SeeYou = () => { return ( - -
    -

    See you in Meshery

     - Take the work out of teamwork. + +
    + +

    + See you in Meshery +

    +     + Take the work out of teamwork.
    -
    - {""}/ +
    + {''}
    -
    - {""}/ +
    + {''}
    -
    - {""}/ +
    + {''}
    -
    - {""}/ +
    + {''}
    -
    - {""}/ +
    + {''}
    -
    - {""}/ +
    + {''}
    -
    {/*
    */} @@ -45,4 +55,4 @@ const SeeYou = () => { ); }; -export default SeeYou; \ No newline at end of file +export default SeeYou; diff --git a/src/sections/SeeYou/seeYou.style.js b/src/sections/SeeYou/seeYou.style.js index 4d5bdc6b0527..9258234dfc4c 100644 --- a/src/sections/SeeYou/seeYou.style.js +++ b/src/sections/SeeYou/seeYou.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const SeeYouWrapper = styled.div` .see-you { @@ -29,7 +29,6 @@ const SeeYouWrapper = styled.div` } .pentagon { - animation-duration: 4s; top: 0; right: 30%; @@ -41,16 +40,13 @@ const SeeYouWrapper = styled.div` bottom: 20%; right: 10%; height: 75px; - } .heptagon { - animation-duration: 2s; bottom: -37.5px; left: 30%; height: 75px; - } .cursor_1 { @@ -58,7 +54,6 @@ const SeeYouWrapper = styled.div` bottom: 14%; right: 15%; height: 50px; - } .cursor_2 { @@ -66,13 +61,11 @@ const SeeYouWrapper = styled.div` bottom: 5%; left: 40%; height: 50px; - } .playground-button { margin: 70px 0 5px 0; } - } @keyframes floating { @@ -92,7 +85,6 @@ const SeeYouWrapper = styled.div` visibility: hidden; } } - `; -export default SeeYouWrapper; \ No newline at end of file +export default SeeYouWrapper; diff --git a/src/sections/SolutionHero/featureHero.style.js b/src/sections/SolutionHero/featureHero.style.js index b764dc5c8f6e..51c61e55775b 100644 --- a/src/sections/SolutionHero/featureHero.style.js +++ b/src/sections/SolutionHero/featureHero.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const FeatureHeroWrapper = styled.div` .heading-container { @@ -14,10 +14,10 @@ const FeatureHeroWrapper = styled.div` align-items: center; } - .whiteboard-image{ + .whiteboard-image { perspective: 1000px; padding: 0 1rem; - &>img { + & > img { width: 100%; margin: 2rem auto; } @@ -30,7 +30,7 @@ const FeatureHeroWrapper = styled.div` } .whiteboard-heading { - color: ${props => props.theme.whiteToBlack} !important; + color: ${(props) => props.theme.whiteToBlack} !important; text-align: center; font-size: 4rem; font-weight: 600; @@ -42,7 +42,6 @@ const FeatureHeroWrapper = styled.div` .heading-image { margin: 0 auto; } - } .heading-container::before { @@ -50,7 +49,7 @@ const FeatureHeroWrapper = styled.div` width: 15rem; height: 15rem; border-radius: 50%; - background: #00B39F; + background: #00b39f; filter: blur(150px); position: absolute; left: 50%; @@ -60,17 +59,17 @@ const FeatureHeroWrapper = styled.div` } .whiteboard-text { - color: ${props => props.theme.greyA0AAAAToGrey666666}; + color: ${(props) => props.theme.greyA0AAAAToGrey666666}; text-align: center; font-size: 1.75rem; line-height: 2.4rem; max-width: 965px; margin: 1rem auto; - padding: 0 1rem + padding: 0 1rem; } @media (max-width: 768px) { - .whiteboard-heading{ + .whiteboard-heading { font-size: 2.75rem !important; } .whiteboard-text { @@ -85,7 +84,7 @@ const FeatureHeroWrapper = styled.div` text-align: center !important; } - .whiteboard-heading{ + .whiteboard-heading { font-size: 2.5rem !important; } @@ -94,7 +93,6 @@ const FeatureHeroWrapper = styled.div` line-height: 1.2rem; } } - `; -export default FeatureHeroWrapper; \ No newline at end of file +export default FeatureHeroWrapper; diff --git a/src/sections/SolutionHero/index.js b/src/sections/SolutionHero/index.js index 2c3baa3b9a75..77270ced4dbb 100644 --- a/src/sections/SolutionHero/index.js +++ b/src/sections/SolutionHero/index.js @@ -1,11 +1,11 @@ -import React, { useEffect } from "react"; -import FeatureHeroWrapper from "./featureHero.style"; -import { Container } from "../../reusecore/Layout"; -import Button from "../../reusecore/Button"; -import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud"; +import React, { useEffect } from 'react'; +import FeatureHeroWrapper from './featureHero.style'; +import { Container } from '../../reusecore/Layout'; +import Button from '../../reusecore/Button'; +import { FiDownloadCloud } from '@react-icons/all-files/fi/FiDownloadCloud'; const FeatureHero = (props) => { useEffect(() => { - const scrollingImage = document.getElementById("whiteboard-svg"); + const scrollingImage = document.getElementById('whiteboard-svg'); const handleScroll = () => { const imageRect = scrollingImage.getBoundingClientRect(); @@ -20,20 +20,20 @@ const FeatureHero = (props) => { } }; - window.addEventListener("scroll", handleScroll); + window.addEventListener('scroll', handleScroll); // Cleanup the event listener on component unmount return () => { - window.removeEventListener("scroll", handleScroll); + window.removeEventListener('scroll', handleScroll); }; }, []); return ( - -
    -

    {props.data.heading}

    -

    {props.data.sub_heading}

    + +
    +

    {props.data.heading}

    +

    {props.data.sub_heading}

    -
    - {""} +
    + {''}
    diff --git a/src/sections/Testimonial/index.js b/src/sections/Testimonial/index.js index d09e810f431b..d9a068a1c297 100644 --- a/src/sections/Testimonial/index.js +++ b/src/sections/Testimonial/index.js @@ -1,15 +1,15 @@ -import React from "react"; +import React from 'react'; -import { Container, Row, Col } from "../../reusecore/Layout"; -import SectionTitle from "../../reusecore/SectionTitle"; -import { SlickSlider, SliderItem } from "../../reusecore/SlickSlider"; +import { Container, Row, Col } from '../../reusecore/Layout'; +import SectionTitle from '../../reusecore/SectionTitle'; +import { SlickSlider, SliderItem } from '../../reusecore/SlickSlider'; -import { FaQuoteLeft } from "@react-icons/all-files/fa/FaQuoteLeft"; -import { IoIosArrowRoundBack } from "@react-icons/all-files/io/IoIosArrowRoundBack"; -import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward"; -import data from "../../assets/data/testimonial"; +import { FaQuoteLeft } from '@react-icons/all-files/fa/FaQuoteLeft'; +import { IoIosArrowRoundBack } from '@react-icons/all-files/io/IoIosArrowRoundBack'; +import { IoIosArrowRoundForward } from '@react-icons/all-files/io/IoIosArrowRoundForward'; +import data from '../../assets/data/testimonial'; -import TestimonialWrapper from "./testimonial.style"; +import TestimonialWrapper from './testimonial.style'; const Testimonial = () => { const ArrowLeft = ({ ...props }) => ( @@ -23,7 +23,7 @@ const Testimonial = () => { ); const settings = { - customPaging: function(i) { + customPaging: function (i) { return ( img @@ -31,7 +31,7 @@ const Testimonial = () => { ); }, dots: true, - dotsClass: "slick-dots testimonial__thumb", + dotsClass: 'slick-dots testimonial__thumb', autoplay: true, infinite: true, speed: 1500, diff --git a/src/sections/Testimonial/testimonial.style.js b/src/sections/Testimonial/testimonial.style.js index e522563b0f91..27ff3de5212c 100644 --- a/src/sections/Testimonial/testimonial.style.js +++ b/src/sections/Testimonial/testimonial.style.js @@ -1,5 +1,5 @@ -import styled from "styled-components"; -import TestimonialNavBG from "../../assets/images/app/testimonial/vintage.webp"; +import styled from 'styled-components'; +import TestimonialNavBG from '../../assets/images/app/testimonial/vintage.webp'; const TestimonialWrapper = styled.section` padding: 110px 0 120px 0; @@ -115,7 +115,7 @@ const TestimonialWrapper = styled.section` } &:hover { svg { - fill: ${props => props.theme.secondaryColor}; + fill: ${(props) => props.theme.secondaryColor}; } } } @@ -128,7 +128,7 @@ const TestimonialWrapper = styled.section` h6 { font-size: 20px; - font-weight: 400; + font-weight: 400; } p { margin: 0; @@ -147,28 +147,28 @@ const TestimonialWrapper = styled.section` @media only screen and (max-width: 912px) { padding: 80px 0 120px 0; .testimonial__thumb li { - &:nth-child(2) { - left: 60%; - } - &:nth-child(3) { - top: 40%; - left: 17%; - } - &:nth-child(4) { - top: 76%; - right: 0%; - } - &:nth-child(5) { - bottom: -5%; - left: auto; - right: 43%; - } - &:nth-child(6) { - right: 0px; - top: 42%; - } - } - } + &:nth-child(2) { + left: 60%; + } + &:nth-child(3) { + top: 40%; + left: 17%; + } + &:nth-child(4) { + top: 76%; + right: 0%; + } + &:nth-child(5) { + bottom: -5%; + left: auto; + right: 43%; + } + &:nth-child(6) { + right: 0px; + top: 42%; + } + } + } @media only screen and (max-width: 760px) { .testmonial__heading { @@ -177,39 +177,39 @@ const TestimonialWrapper = styled.section` } } .testimonial__thumb li { - height: 115px; - width: 115px; - &.slick-active{ - img{ - transform: scale(1.2); - } - } - &:nth-child(1) { - top: -6%; - } - &:nth-child(2) { - left: 60%; - top: -7%; - } - &:nth-child(3) { - top: 49%; - left: 12%; - } - &:nth-child(4) { - top: 90%; - right: 4%; - } - &:nth-child(5) { - bottom: -45%; - left: auto; - right: 50%; - } - &:nth-child(6) { - right: 7px; - top: 41%; + height: 115px; + width: 115px; + &.slick-active { + img { + transform: scale(1.2); } + } + &:nth-child(1) { + top: -6%; + } + &:nth-child(2) { + left: 60%; + top: -7%; + } + &:nth-child(3) { + top: 49%; + left: 12%; + } + &:nth-child(4) { + top: 90%; + right: 4%; + } + &:nth-child(5) { + bottom: -45%; + left: auto; + right: 50%; + } + &:nth-child(6) { + right: 7px; + top: 41%; + } } - + .testmonial__heading { position: relative; width: 100%; @@ -225,18 +225,17 @@ const TestimonialWrapper = styled.section` } @media only screen and (max-width: 568px) { padding: 80px 0 30px 0; - - .testmonial__heading{ - text-align: center; - } - .testimonial__slider{ - display: block; + + .testmonial__heading { + text-align: center; + } + .testimonial__slider { + display: block; } - .testimonial__thumb{ - display: none !important; + .testimonial__thumb { + display: none !important; } } - `; export default TestimonialWrapper; diff --git a/src/sections/app.style.js b/src/sections/app.style.js index 12cec3163611..a6b8c225020b 100644 --- a/src/sections/app.style.js +++ b/src/sections/app.style.js @@ -1,4 +1,4 @@ -import { createGlobalStyle } from "styled-components"; +import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` diff --git a/src/sections/gitops/PerformanceManagementPage.js b/src/sections/gitops/PerformanceManagementPage.js index bec431b1c251..0f11b06c94e3 100644 --- a/src/sections/gitops/PerformanceManagementPage.js +++ b/src/sections/gitops/PerformanceManagementPage.js @@ -1,20 +1,25 @@ -import React from "react"; -import { PageWrapper,ContentContainerWrapper,HeroContentContainerWrapper, Heading, Description } from "./snapshot.style"; -import Cone from "../../assets/images/gitops/conelight.svg"; -import SMPconfig from "../../assets/images/gitops/SMPconfig.png"; -import SMPTestconfig from "../../assets/images/gitops/SMPTestConfig.png"; +import React from 'react'; +import { + PageWrapper, + ContentContainerWrapper, + HeroContentContainerWrapper, + Heading, + Description +} from './snapshot.style'; +import Cone from '../../assets/images/gitops/conelight.svg'; +import SMPconfig from '../../assets/images/gitops/SMPconfig.png'; +import SMPTestconfig from '../../assets/images/gitops/SMPTestConfig.png'; -import Button from "../../reusecore/Button"; -import SquarePoint from "./SquarePoint"; -import Reviews from "../Pricing/review-slider"; -import { ColumnContainer, ContentRow, TextColumn } from "./common"; -import { ReactComponent as SmpLogo } from "../../assets/images/service-mesh-performance/stacked/smp-light-text.svg"; -import { ReactComponent as GithubLogo } from "../../collections/integrations/github/icons/color/github-color.svg"; +import Button from '../../reusecore/Button'; +import SquarePoint from './SquarePoint'; +import Reviews from '../Pricing/review-slider'; +import { ColumnContainer, ContentRow, TextColumn } from './common'; +import { ReactComponent as SmpLogo } from '../../assets/images/service-mesh-performance/stacked/smp-light-text.svg'; +import { ReactComponent as GithubLogo } from '../../collections/integrations/github/icons/color/github-color.svg'; const PerformanceManagementPage = () => { return ( -
    @@ -23,9 +28,15 @@ const PerformanceManagementPage = () => { Performance regressions begone - Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification + Test your Kubernetes cluster and service mesh implementation for conformance with the + SMI specification -
    - -
    + +
    @@ -95,18 +105,38 @@ const GitOpsPage = () => {
    - +

    Red light performance regressions

    - Baselin and track the performance of your services. Put your application service efficient to the test - Meshery is the canonical implementation of the Cloud Native Performance specification - Define your performance profiles upfront. See statistcal analysis with microservice latency and throughput quartiles - Meshery includes your choice of load generator, so that you can meausure your way -
    -
    - -
    + +
    @@ -114,10 +144,9 @@ const GitOpsPage = () => {
    -
    - +
    +
    - ); }; diff --git a/src/sections/gitops/snapshot.style.js b/src/sections/gitops/snapshot.style.js index 6d627da9ec7f..c11e18cbf9e6 100644 --- a/src/sections/gitops/snapshot.style.js +++ b/src/sections/gitops/snapshot.style.js @@ -1,6 +1,5 @@ -import styled,{ keyframes } from "styled-components"; -import { Row, Col } from "../../reusecore/Layout"; - +import styled, { keyframes } from 'styled-components'; +import { Row, Col } from '../../reusecore/Layout'; const floatAnim = keyframes` 0% { transform: translate(0px,0px); } @@ -9,173 +8,168 @@ const floatAnim = keyframes` `; export const PageWrapper = styled.section` - position: relative; - z-index: 1; - font-size: 12px; - - .gradient-wrapper { - background: linear-gradient(245.08deg, rgba(0, 0, 0, 0.06) 49.26%, rgba(0, 211, 169, 0.5) 100%); - width: 100%; - height: 50rem; - position: absolute; - filter: blur(100px); - - @media only screen and (min-width: 768px) { - height: 65rem; - } - - @media only screen and (min-width: 1024px) { - height: 50rem; - } - } + position: relative; + z-index: 1; + font-size: 12px; + + .gradient-wrapper { + background: linear-gradient(245.08deg, rgba(0, 0, 0, 0.06) 49.26%, rgba(0, 211, 169, 0.5) 100%); + width: 100%; + height: 50rem; + position: absolute; + filter: blur(100px); - .gradient-wrapper-2 { - background: linear-gradient(300deg, rgba(0, 0, 0, 0.06) 49.26%, rgba(0, 211, 169, 0.50) 100.00%); - filter: blur(100px); - width: 100%; - height: 50rem; - position: absolute; - top: 50rem; - - @media only screen and (min-width: 768px) { - height: 25rem; - top: 65rem; - } - - @media only screen and (min-width: 1024px) { - height: 30rem; - top: 50rem; - } + @media only screen and (min-width: 768px) { + height: 65rem; } - .reviews-container{ - display: flex; - align-items: center; - justify-content: center; + @media only screen and (min-width: 1024px) { + height: 50rem; } + } + + .gradient-wrapper-2 { + background: linear-gradient(300deg, rgba(0, 0, 0, 0.06) 49.26%, rgba(0, 211, 169, 0.5) 100%); + filter: blur(100px); + width: 100%; + height: 50rem; + position: absolute; + top: 50rem; @media only screen and (min-width: 768px) { - font-size: 16px; + height: 25rem; + top: 65rem; } -`; - -export const ContentContainerWrapper = styled.div` - position: relative; - overflow: hidden; - display: block; - padding-bottom: 4rem; - padding-left: 1.25rem; - padding-right: 1.25rem; @media only screen and (min-width: 1024px) { - padding-left: 6rem; - padding-right: 6rem; - padding-bottom: 13rem; + height: 30rem; + top: 50rem; } + } + + .reviews-container { + display: flex; + align-items: center; + justify-content: center; + } + + @media only screen and (min-width: 768px) { + font-size: 16px; + } +`; + +export const ContentContainerWrapper = styled.div` + position: relative; + overflow: hidden; + display: block; + padding-bottom: 4rem; + padding-left: 1.25rem; + padding-right: 1.25rem; + + @media only screen and (min-width: 1024px) { + padding-left: 6rem; + padding-right: 6rem; + padding-bottom: 13rem; + } `; export const HeroContentContainerWrapper = styled(ContentContainerWrapper)` - padding-top: 0rem; + padding-top: 0rem; - @media only screen and (min-width: 460px) { - padding-top: 8rem; - } + @media only screen and (min-width: 460px) { + padding-top: 8rem; + } `; - export const ContentRowWrapper = styled(Row)` - display: flex; - align-items: center; - justify-content: space-between; - - - .desc-text-container { - padding: 1.5rem; - .learn-more-btn{ - font-weight: 400; - font-size: 1.375em; - width: 100%; - text-transform: capitalize; - - @media only screen and (min-width: 420px) { - width: auto; - } - } - } + display: flex; + align-items: center; + justify-content: space-between; + + .desc-text-container { + padding: 1.5rem; + .learn-more-btn { + font-weight: 400; + font-size: 1.375em; + width: 100%; + text-transform: capitalize; + + @media only screen and (min-width: 420px) { + width: auto; + } + } + } `; - export const Heading = styled.h1` - font-weight: 600; - font-size: 3em; + font-weight: 600; + font-size: 3em; - @media only screen and (min-width: 768px) { - font-size: 2.5em; - } + @media only screen and (min-width: 768px) { + font-size: 2.5em; + } - @media only screen and (min-width: 1024px) { - font-size: 3.125em; - } + @media only screen and (min-width: 1024px) { + font-size: 3.125em; + } `; - export const Description = styled.p` - font-size: 1.25em; - font-weight: 400; - margin: 0.5rem 0 0.5rem 0; + font-size: 1.25em; + font-weight: 400; + margin: 0.5rem 0 0.5rem 0; - @media screen and (min-width: 640px) { - margin: 1.875rem 0 2.5rem 0; - } + @media screen and (min-width: 640px) { + margin: 1.875rem 0 2.5rem 0; + } `; export const ColumnWrapper = styled(Col)` - display:flex; - align-items: center; - justify-content: center; - position: relative; - - .stack-logo { - position: absolute; - height: 120px; - fill: ${props => props.theme.primaryColor}; - animation: ${floatAnim} 3.5s ease-in-out infinite; - - .meshmap-light-stacked_svg__cls-1, .smp-light-text_svg__cls-6 { - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - fill: ${props => props.theme.primaryColor}; - } - - @media screen and (min-width: 768px) { - height: 200px; - } - } - - .meshmap-stack-cone{ - height: 300px; - - @media screen and (min-width: 768px) { - height: 400px; - } - } - - .screenshot { - height:200px; - - @media screen and (min-width: 768px) { - width: 530px; - height: 375px; - } - - } - - .code-screenshot { - height:300px; - - @media screen and (min-width: 768px) { - width: 605px; - height: 700px; - } - } -`; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .stack-logo { + position: absolute; + height: 120px; + fill: ${(props) => props.theme.primaryColor}; + animation: ${floatAnim} 3.5s ease-in-out infinite; + + .meshmap-light-stacked_svg__cls-1, + .smp-light-text_svg__cls-6 { + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + fill: ${(props) => props.theme.primaryColor}; + } + + @media screen and (min-width: 768px) { + height: 200px; + } + } + .meshmap-stack-cone { + height: 300px; + + @media screen and (min-width: 768px) { + height: 400px; + } + } + + .screenshot { + height: 200px; + + @media screen and (min-width: 768px) { + width: 530px; + height: 375px; + } + } + + .code-screenshot { + height: 300px; + + @media screen and (min-width: 768px) { + width: 605px; + height: 700px; + } + } +`; diff --git a/src/sections/kubernetes-multi-cluster/features.js b/src/sections/kubernetes-multi-cluster/features.js index dd07032e73f2..5cae644db695 100644 --- a/src/sections/kubernetes-multi-cluster/features.js +++ b/src/sections/kubernetes-multi-cluster/features.js @@ -1,11 +1,11 @@ -import React from "react"; -import styled from "styled-components"; -import { StaticImage } from "gatsby-plugin-image"; -import { Link } from "gatsby"; -const docker_ext = "../../assets/images/docker-extension/docker-extension-meshery.webp"; -import meshery_operator from "../../assets/images/meshery-operator/meshery-operator-dark.svg"; -import meshsync from "./images/meshsync.svg"; -import { Container, Row, Col } from "../../reusecore/Layout"; +import React from 'react'; +import styled from 'styled-components'; +import { StaticImage } from 'gatsby-plugin-image'; +import { Link } from 'gatsby'; +const docker_ext = '../../assets/images/docker-extension/docker-extension-meshery.webp'; +import meshery_operator from '../../assets/images/meshery-operator/meshery-operator-dark.svg'; +import meshsync from './images/meshsync.svg'; +import { Container, Row, Col } from '../../reusecore/Layout'; const FeatureWrapper = styled.div` min-height: fit-content; @@ -125,8 +125,6 @@ const FeatureWrapper = styled.div` `; const Feature = () => { - - return ( @@ -134,26 +132,35 @@ const Feature = () => {
    {/* */} - +

    Docker Extension for Meshery

    - From the convenience of your Docker Desktop interface, connect Meshery with your Kubernetes cluster. Watch as MeshSync discovers all of your Kuberentes clusters. + From the convenience of your Docker Desktop interface, connect Meshery with your + Kubernetes cluster. Watch as MeshSync discovers all of your Kuberentes clusters.

    - Learn more → + + Learn more → + -

    - Meshery Operator -

    +

    Meshery Operator

    - The Kubernetes operator for Meshery, supports discovery and eventing of greenfield and brownfield of your workloads, services, deployments, replicasets, pods, containers, services, persistent volumes and all of your Kubernetes-based infrastructure. + The Kubernetes operator for Meshery, supports discovery and eventing of greenfield and + brownfield of your workloads, services, deployments, replicasets, pods, containers, + services, persistent volumes and all of your Kubernetes-based infrastructure.

    - Learn more → + + Learn more → +
    @@ -170,7 +177,9 @@ const Feature = () => {

    MeshSync

    - MeshSync was designed from the ground up to perform tiered discovery of your Kubernetes enviroment. MeshSync's working snapshot of the state of each cluster is stored in-memory and continuously refreshed. + MeshSync was designed from the ground up to perform tiered discovery of your + Kubernetes enviroment. MeshSync's working snapshot of the state of each cluster is + stored in-memory and continuously refreshed.

    diff --git a/src/sections/kubernetes-multi-cluster/index.js b/src/sections/kubernetes-multi-cluster/index.js index 72ea5e882937..7368f1fc488a 100644 --- a/src/sections/kubernetes-multi-cluster/index.js +++ b/src/sections/kubernetes-multi-cluster/index.js @@ -1,64 +1,60 @@ -import React from "react"; -import SolutionHero from "../SolutionHero"; -import cluster_img from "./images/cluster.png"; -import deploy_img from "./images/deploy.png"; -import config_img from "./images/config.png"; -import { Container } from "../../reusecore/Layout"; -import FeatureUseCard from "../../components/FeatureUseCard"; -import MultiClusterWrapper from "./kube.style"; -import Feature from "./features"; -import Reviews from "../Pricing/review-slider"; +import React from 'react'; +import SolutionHero from '../SolutionHero'; +import cluster_img from './images/cluster.png'; +import deploy_img from './images/deploy.png'; +import config_img from './images/config.png'; +import { Container } from '../../reusecore/Layout'; +import FeatureUseCard from '../../components/FeatureUseCard'; +import MultiClusterWrapper from './kube.style'; +import Feature from './features'; +import Reviews from '../Pricing/review-slider'; const KubernetesMultiCluster = () => { let data = { - heading: "Kubernetes Multi-cluster Operation", + heading: 'Kubernetes Multi-cluster Operation', sub_heading: - "Manage all of your Kubernetes clusters with the cloud native management plane, Meshery.", - image: cluster_img, + 'Manage all of your Kubernetes clusters with the cloud native management plane, Meshery.', + image: cluster_img }; let card_data = [ { - heading: "Streamlined Multi-Cluster Operations", + heading: 'Streamlined Multi-Cluster Operations', subtitle: "Empower your workflow with Meshery's multi-context feature, enabling seamless deployment and operations across clusters while simplifying visualization for efficient management.", - image: deploy_img, + image: deploy_img }, { - heading: "Uniform Cluster Management Made Easy", + heading: 'Uniform Cluster Management Made Easy', subtitle: "Meshery's intuitive context switcher allows swift selection and execution of tasks, enhancing productivity in cluster management.", - image: cluster_img, + image: cluster_img }, { - heading: "Seamless Meshery Configuration", + heading: 'Seamless Meshery Configuration', subtitle: "Effortlessly manage Meshery across multiple clusters through the Settings page. Add, remove, or modify clusters with ease, and fine-tune configurations to tailor Meshery's awareness to your infrastructure needs.", - image: config_img, - }, + image: config_img + } ]; return ( - + -
    +
    -

    - {" "} - Wrangling your services one cluster at-a-time {" "} -

    +

    Wrangling your services one cluster at-a-time

    -
    +
    {card_data.map((x) => ( ))}
    - + ); }; export default KubernetesMultiCluster; - diff --git a/src/sections/kubernetes-multi-cluster/kube.style.js b/src/sections/kubernetes-multi-cluster/kube.style.js index c8854f149907..0dcf692009a0 100644 --- a/src/sections/kubernetes-multi-cluster/kube.style.js +++ b/src/sections/kubernetes-multi-cluster/kube.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const CommentsWrapper = styled.div` height: 100%; @@ -23,7 +23,7 @@ const CommentsWrapper = styled.div` .use-heading { - color: ${props => props.theme.whiteToBlack}; + color: ${(props) => props.theme.whiteToBlack}; font-size: 2rem; text-align: center; margin-bottom: 2.5rem; @@ -32,11 +32,11 @@ const CommentsWrapper = styled.div` color: white; padding: 0 0.5rem; border-radius: 0.5rem; - background: ${props => props.theme.green009A89ToGreen00B39F}; + background: ${(props) => props.theme.green009A89ToGreen00B39F}; font-weight: bold; } `; -export default CommentsWrapper; \ No newline at end of file +export default CommentsWrapper; diff --git a/src/sections/meshmap-cta/index.js b/src/sections/meshmap-cta/index.js index 8949f1cfc8ec..ea30548f18ee 100644 --- a/src/sections/meshmap-cta/index.js +++ b/src/sections/meshmap-cta/index.js @@ -1,93 +1,92 @@ -import React from "react"; -import styled from "styled-components"; +import React from 'react'; +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"; +import { Container } from '../../reusecore/Layout'; +import Locator from './locator.svg'; +import MesherySurface from './meshery-surface.svg'; +import Button from '../../reusecore/Button'; const MeshMapCTAWrapper = styled.div` -.CTAbody { - background: - linear-gradient(180deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 100%); - border-radius: 2rem; - display: flex; - padding: 2rem; - text-align: center; - 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; */ - transition: all .3s; - display: block; - margin: 1rem auto; - height: 15rem; - } - @keyframes coin-rotate { - from { - transform: translateY(5%); - } - to { - transform: translateY(-5%); } - } - .button { - margin: 1rem auto; - } - .text{ - display: block; - margin: auto; - } - .subtext { - color: ${props => props.theme.white}; - font-size: 1.5rem; - font-weight: 300; - margin: 1rem 0rem; - } - h2 { - padding: 0; - color: ${props => props.theme.white}; - span { - font-size: 6rem; - } - } + .CTAbody { + background: linear-gradient(180deg, rgba(71, 126, 150, 1) 0%, rgba(0, 179, 159, 1) 100%); + border-radius: 2rem; + display: flex; + padding: 2rem; + text-align: center; + margin: 2rem auto; + align-items: center; - @media screen and (max-width:767px) { - display: block; .surface { - width: 30%; + width: 60%; + min-width: 160px; } .rotate { - margin: 0 auto 0.25rem; - height: 12rem; + animation: coin-rotate 4s ease-in-out infinite alternate; + /* animation-fill-mode: both; */ + transition: all 0.3s; + display: block; + margin: 1rem auto; + height: 15rem; } - h2 { - margin: 1rem 0rem; - span{ - font-size: 3rem; - + @keyframes coin-rotate { + from { + transform: translateY(5%); + } + to { + transform: translateY(-5%); } } - .subtext{ - font-size: 1rem; + .button { + margin: 1rem auto; } - .button-text{ - display: none;; + .text { + display: block; + margin: auto; } - } - @media screen and (max-width:340px) { - h2{ - span{ - font-size: 2rem; + .subtext { + color: ${(props) => props.theme.white}; + font-size: 1.5rem; + font-weight: 300; + margin: 1rem 0rem; + } + h2 { + padding: 0; + color: ${(props) => props.theme.white}; + span { + font-size: 6rem; + } + } + + @media screen and (max-width: 767px) { + display: block; + .surface { + width: 30%; + } + .rotate { + margin: 0 auto 0.25rem; + height: 12rem; + } + h2 { + margin: 1rem 0rem; + span { + font-size: 3rem; + } + } + .subtext { + font-size: 1rem; + } + .button-text { + display: none; + } + } + @media screen and (max-width: 340px) { + h2 { + span { + font-size: 2rem; + } } } } -} `; const MeshMapCTA = () => { @@ -100,19 +99,18 @@ const MeshMapCTA = () => {
    -

    MeshMap is here!

    +

    + MeshMap is here! +

    Discover a catalog of best practice cloud native patterns.

    -
    -     ); }; export default MeshMapCTA; - diff --git a/src/sections/subscribe/SubscribeLearnPath.js b/src/sections/subscribe/SubscribeLearnPath.js index 9717ca95f466..e986d7b31bb6 100644 --- a/src/sections/subscribe/SubscribeLearnPath.js +++ b/src/sections/subscribe/SubscribeLearnPath.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react'; -import Button from "../../reusecore/Button"; -import SubscribeLearnWrapper from "./subscribeLearn.style"; +import Button from '../../reusecore/Button'; +import SubscribeLearnWrapper from './subscribeLearn.style'; const SubscribeLearnPath = () => { return ( @@ -17,8 +17,8 @@ const SubscribeLearnPath = () => {

    Join the Layer5 community

    - Subscribe to our newsletter to receive updates on new learning - paths, courses, and more. + Subscribe to our newsletter to receive updates on new learning paths, courses, and + more.

    @@ -30,8 +30,8 @@ const SubscribeLearnPath = () => { name="EMAIL" id="mce-EMAIL" required - onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} - onInput={e => e.target.setCustomValidity("")} + onInvalid={(e) => e.target.setCustomValidity('Please fill-in this field')} + onInput={(e) => e.target.setCustomValidity('')} />
    diff --git a/src/sections/subscribe/subscribe.js b/src/sections/subscribe/subscribe.js index a07f32a52828..3658ab2d50ce 100644 --- a/src/sections/subscribe/subscribe.js +++ b/src/sections/subscribe/subscribe.js @@ -1,24 +1,39 @@ -import React from "react"; -import { Row, Col } from "../../reusecore/Layout"; -import SectionTitle from "../../reusecore/SectionTitle"; -import Button from "../../reusecore/Button"; -import SubscribeWrapper from "./subscribe.style"; +import React from 'react'; +import { Row, Col } from '../../reusecore/Layout'; +import SectionTitle from '../../reusecore/SectionTitle'; +import Button from '../../reusecore/Button'; +import SubscribeWrapper from './subscribe.style'; -const subscribe = ({ msg = "Layer5" }) => { +const subscribe = ({ msg = 'Layer5' }) => { return (
    -
    + -

    Join the {msg} community. Subscribe.

    +

    + Join the {msg} community. Subscribe. +

    - - e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} /> + + e.target.setCustomValidity('Please fill-in this field')} + onInput={(e) => e.target.setCustomValidity('')} + />

    - Lorem ipsum dolor sit amet consectetur sed do eiusmod tempor - incididunt. ut labore et dolore magna aliqua enim + Lorem ipsum dolor sit amet consectetur sed do eiusmod tempor incididunt. ut labore + et dolore magna aliqua enim

    @@ -44,8 +44,8 @@ const AboutClassic = () => {

    - Lorem ipsum dolor sit amet consectetur sed do eiusmod tempor - incididunt. ut labore et dolore magna aliqua enim + Lorem ipsum dolor sit amet consectetur sed do eiusmod tempor incididunt. ut labore + et dolore magna aliqua enim

    @@ -59,8 +59,8 @@ const AboutClassic = () => {

    - Lorem ipsum dolor sit amet consectetur sed do eiusmod tempor - incididunt. ut labore et dolore magna aliqua enim + Lorem ipsum dolor sit amet consectetur sed do eiusmod tempor incididunt. ut labore + et dolore magna aliqua enim

    diff --git a/src/sections/z_other/About-classic/index.test.js b/src/sections/z_other/About-classic/index.test.js index b9205b8087ba..880634b0b2a3 100644 --- a/src/sections/z_other/About-classic/index.test.js +++ b/src/sections/z_other/About-classic/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import AboutClassic from './index'; it('About-Classic renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/About-hosting/about.style.js b/src/sections/z_other/About-hosting/about.style.js index a616fbf0e83f..0c56ab2671ca 100644 --- a/src/sections/z_other/About-hosting/about.style.js +++ b/src/sections/z_other/About-hosting/about.style.js @@ -1,101 +1,99 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const AboutSectionWrapper = styled.div` - padding: 120px 0; - position: relative; - background: #fbfbfb; - .section__particle{ - position: absolute; - &.one{ - right: 9%; - top: 19%; - height: 34px; - width: 40px; - transform: rotate(-45deg); - } - &.two{ - width: 150px; - top: auto; - bottom: 80px; - left: -22px; - } + padding: 120px 0; + position: relative; + background: #fbfbfb; + .section__particle { + position: absolute; + &.one { + right: 9%; + top: 19%; + height: 34px; + width: 40px; + transform: rotate(-45deg); } - - .about-thumb{ - width: 100%; - transform: translateX(-80px); - display: inline-block; + &.two { + width: 150px; + top: auto; + bottom: 80px; + left: -22px; } - .about-text.text-one{ - font-weight: 300; - margin-bottom: 28px; + } + + .about-thumb { + width: 100%; + transform: translateX(-80px); + display: inline-block; + } + .about-text.text-one { + font-weight: 300; + margin-bottom: 28px; + } + + .about-text.text-two { + color: ${(props) => props.theme.headingColor}; + font-weight: 400; + margin-bottom: 80px; + } + .section-title { + h2 { + margin-bottom: 38px; } - - .about-text.text-two{ - color: ${props => props.theme.headingColor}; - font-weight: 400; - margin-bottom: 80px; + } + + @media only screen and (max-width: 1400px) { + .about-thumb { + transform: translateX(0px); } - .section-title{ - h2{ - margin-bottom: 38px; - } + .section__particle { + &.one { + top: 9%; + } + &.two { + bottom: -92px; + left: -38px; + } } - - @media only screen and (max-width: 1400px) { - .about-thumb{ - transform: translateX(0px); - } - .section__particle{ - &.one{ - top: 9%; - } - &.two{ - bottom: -92px; - left: -38px; - } - } - } - @media only screen and (max-width: 1024px) { - .section__particle{ - &.one { - top: 0%; - } - } + } + @media only screen and (max-width: 1024px) { + .section__particle { + &.one { + top: 0%; + } } - @media only screen and (max-width: 912px) { - padding: 100px 0 60px 0; - .section-title h2{ - margin-bottom: 20px; - } - .about-text.text-two{ - margin-bottom: 30px; - } + } + @media only screen and (max-width: 912px) { + padding: 100px 0 60px 0; + .section-title h2 { + margin-bottom: 20px; } - @media only screen and (max-width: 760px) { - padding: 60px 0 60px 0; - .about-thumb{ - margin-bottom: 70px; - } + .about-text.text-two { + margin-bottom: 30px; } - @media only screen and (max-width: 568px) { - .section-title, - .about-content-wrap{ - text-align: center; - } - .section-title{ - img{ - display: none; - } - h4{ - width: 100%; - } - } - - } - @media only screen and (max-width: 480px) { - padding: 40px 0 60px 0; + } + @media only screen and (max-width: 760px) { + padding: 60px 0 60px 0; + .about-thumb { + margin-bottom: 70px; } - + } + @media only screen and (max-width: 568px) { + .section-title, + .about-content-wrap { + text-align: center; + } + .section-title { + img { + display: none; + } + h4 { + width: 100%; + } + } + } + @media only screen and (max-width: 480px) { + padding: 40px 0 60px 0; + } `; -export default AboutSectionWrapper; \ No newline at end of file +export default AboutSectionWrapper; diff --git a/src/sections/z_other/About-hosting/index.js b/src/sections/z_other/About-hosting/index.js index e524ba6548f7..7e16279105c2 100644 --- a/src/sections/z_other/About-hosting/index.js +++ b/src/sections/z_other/About-hosting/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import SectionTitle from "../../../reusecore/SectionTitle"; -import Button from "../../../reusecore/Button"; -import VintageBox from "../../../reusecore/VintageBox"; +import React from 'react'; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import SectionTitle from '../../../reusecore/SectionTitle'; +import Button from '../../../reusecore/Button'; +import VintageBox from '../../../reusecore/VintageBox'; -import imgAbout from "../../../assets/images/hosting/hosting/about.webp"; -import particle1 from "../../../assets/images/app/particle/05.webp"; -import particle2 from "../../../assets/images/app/particle/06.webp"; +import imgAbout from '../../../assets/images/hosting/hosting/about.webp'; +import particle1 from '../../../assets/images/app/particle/05.webp'; +import particle2 from '../../../assets/images/app/particle/06.webp'; -import AboutSectionWrapper from "./about.style"; +import AboutSectionWrapper from './about.style'; const About = () => { return ( @@ -18,37 +18,25 @@ const About = () => { - This is about UNI-Prime + This is about UNI-Prime - +

    About us

    Starting with appion is easier than anything.

    - One differences leaders, management-science so, best treat. Still - problems upper and anger devoting out. With hiding their boss - phase drops. A strenuous in ticket get write it by proposal. + One differences leaders, management-science so, best treat. Still problems upper and + anger devoting out. With hiding their boss phase drops. A strenuous in ticket get + write it by proposal.

    - Thought. Road, clearly, and software the shreds sisters contract, - luxury and fully here + Thought. Road, clearly, and software the shreds sisters contract, luxury and fully + here

    - +     +
    - - .com - - - .org - - - .net - - - .dev - - - .xyz - + .com + .org + .net + .dev + .xyz
    diff --git a/src/sections/z_other/Banner-hosting/index.test.js b/src/sections/z_other/Banner-hosting/index.test.js index 7362f7bc9fc2..f70d7743f5fa 100644 --- a/src/sections/z_other/Banner-hosting/index.test.js +++ b/src/sections/z_other/Banner-hosting/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import BannerModern from './index'; it('Banner-modern renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/Banner-modern/banner.style.js b/src/sections/z_other/Banner-modern/banner.style.js index 3cd47604d2b0..b4caf16b4d81 100644 --- a/src/sections/z_other/Banner-modern/banner.style.js +++ b/src/sections/z_other/Banner-modern/banner.style.js @@ -1,154 +1,151 @@ -import styled from "styled-components"; +import styled from 'styled-components'; -import imgHero from "../../../assets/images/app/hero/hero-two.webp"; +import imgHero from '../../../assets/images/app/hero/hero-two.webp'; const BannerSectionWrapper = styled.section` - padding: 120px 0 0 0; - background: url(${imgHero}) no-repeat; - background-size: 56% 82%; - background-position: top right; + padding: 120px 0 0 0; + background: url(${imgHero}) no-repeat; + background-size: 56% 82%; + background-position: top right; - @keyframes bounce { - from { - transform: translateY(0px); - } - to { - transform: translateY(-20px); - } - } - @-webkit-keyframes bounce { - from { - transform: translateY(0px); - } - to { - transform: translateY(-20px); - } - } - .hero-img{ - animation: bounce 1s infinite alternate; - -webkit-animation: bounce 1s infinite alternate; - } - - p{ - font-size: 16px; - font-weight: 300; - color: #000000; - margin: 0 0 70px 0; - } - h4{ - margin-bottom: 8px; - font-size: 18px; - color: #FEBFB3; - text-transform: uppercase; - } - .section-title{ - h1{ - font-weight: 300; - font-size: 60px; - line-height: 75px; - margin: 0 0 38px 0; - color: #2C0075; - span{ - font-weight: 600; - } - } - - } - .banner-btn.one{ - background: #8A57DE; - color: #fff; - &:hover{ - background: #EEE6FA; - color: #8A57DE; - } - } - .banner-btn.two{ - background: #FFEBEC; - color: #FB7B81; - &:hover{ - background: #FB7B81; - color: #fff; - } - } - .banner-btn+.banner-btn{ - margin-left: 30px; - } - - @media only screen and (max-width: 912px) { - margin: 30px 0 0 0; - background-size: 57%; - padding: 120px 0 60px 0; - .section-title{ - h1{ - font-size: 32px; - line-height: 42px; - margin: 0 0 25px 0; - } - } - p{ - margin: 0 0 30px 0; - } - .banner-btn{ - min-width: 150px; - font-size: 14px; - } - .banner-btn+.banner-btn{ - margin-left: 15px; - } - } - @media only screen and (max-width: 760px) { - padding: 130px 0 60px 0; - } - @media only screen and (max-width: 568px) { - background: none; - .hero-img{ - display: none; - } - } - @media only screen and (max-width: 480px) { - padding: 120px 0 100px 0; - .section-title{ - h1{ - font-size: 35px; - line-height: 50px; - } - } - .vintage-box{ - &:before{ - content: none; - } - } - } - @media only screen and (max-width: 380px) { - - .section-title{ - h1{ - font-size: 30px; - line-height: 46px; - margin: 0 0 30px 0; - } - h4{ - font-size: 15px; - } - } - .banner-btn{ - font-size: 14px; - min-width: 127px; - padding: 14px 12px; - } - .banner-btn+.banner-btn{ - margin-left: 15px; - } - } - @media only screen and (max-width: 330px) { - .section-title{ - h1{ - font-size: 23px; - line-height: 35px; - } - } - } - + @keyframes bounce { + from { + transform: translateY(0px); + } + to { + transform: translateY(-20px); + } + } + @-webkit-keyframes bounce { + from { + transform: translateY(0px); + } + to { + transform: translateY(-20px); + } + } + .hero-img { + animation: bounce 1s infinite alternate; + -webkit-animation: bounce 1s infinite alternate; + } + + p { + font-size: 16px; + font-weight: 300; + color: #000000; + margin: 0 0 70px 0; + } + h4 { + margin-bottom: 8px; + font-size: 18px; + color: #febfb3; + text-transform: uppercase; + } + .section-title { + h1 { + font-weight: 300; + font-size: 60px; + line-height: 75px; + margin: 0 0 38px 0; + color: #2c0075; + span { + font-weight: 600; + } + } + } + .banner-btn.one { + background: #8a57de; + color: #fff; + &:hover { + background: #eee6fa; + color: #8a57de; + } + } + .banner-btn.two { + background: #ffebec; + color: #fb7b81; + &:hover { + background: #fb7b81; + color: #fff; + } + } + .banner-btn + .banner-btn { + margin-left: 30px; + } + + @media only screen and (max-width: 912px) { + margin: 30px 0 0 0; + background-size: 57%; + padding: 120px 0 60px 0; + .section-title { + h1 { + font-size: 32px; + line-height: 42px; + margin: 0 0 25px 0; + } + } + p { + margin: 0 0 30px 0; + } + .banner-btn { + min-width: 150px; + font-size: 14px; + } + .banner-btn + .banner-btn { + margin-left: 15px; + } + } + @media only screen and (max-width: 760px) { + padding: 130px 0 60px 0; + } + @media only screen and (max-width: 568px) { + background: none; + .hero-img { + display: none; + } + } + @media only screen and (max-width: 480px) { + padding: 120px 0 100px 0; + .section-title { + h1 { + font-size: 35px; + line-height: 50px; + } + } + .vintage-box { + &:before { + content: none; + } + } + } + @media only screen and (max-width: 380px) { + .section-title { + h1 { + font-size: 30px; + line-height: 46px; + margin: 0 0 30px 0; + } + h4 { + font-size: 15px; + } + } + .banner-btn { + font-size: 14px; + min-width: 127px; + padding: 14px 12px; + } + .banner-btn + .banner-btn { + margin-left: 15px; + } + } + @media only screen and (max-width: 330px) { + .section-title { + h1 { + font-size: 23px; + line-height: 35px; + } + } + } `; export default BannerSectionWrapper; diff --git a/src/sections/z_other/Banner-modern/index.js b/src/sections/z_other/Banner-modern/index.js index ec0609477e15..4786099e5008 100644 --- a/src/sections/z_other/Banner-modern/index.js +++ b/src/sections/z_other/Banner-modern/index.js @@ -1,15 +1,15 @@ -import React from "react"; +import React from 'react'; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import SectionTitle from "../../../reusecore/SectionTitle"; -import Button from "../../../reusecore/Button"; -import VintageBox from "../../../reusecore/VintageBox"; -import ParticleComponent from "../../../reusecore/Particle"; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import SectionTitle from '../../../reusecore/SectionTitle'; +import Button from '../../../reusecore/Button'; +import VintageBox from '../../../reusecore/VintageBox'; +import ParticleComponent from '../../../reusecore/Particle'; // import { FaPlay, FaDownload } from "react-icons/fa"; -import BannerSectionWrapper from "./banner.style"; -import imgHero from "../../../assets/images/app/hero/mobile-screen.webp"; +import BannerSectionWrapper from './banner.style'; +import imgHero from '../../../assets/images/app/hero/mobile-screen.webp'; const BannerModern = () => { return ( @@ -17,20 +17,16 @@ const BannerModern = () => { - +

    30% off for new users for 1 month

    Drive Customers Passing Your Appslife With Appion

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad - minim veniam quis nostrud exercitation. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud + exercitation.

    - +

    Solution

    Easy and perfect solution for this app @@ -53,12 +49,8 @@ const Faq = () => {
    {faq.title}
    - - {/* */} - - - {/* */} - + {/* */} + {/* */}     @@ -67,11 +59,7 @@ const Faq = () => { ))} - +

    Business Opurtunity

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -41,8 +41,8 @@ const FeaturesClassic = () => {

    Data Analysis

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -53,8 +53,8 @@ const FeaturesClassic = () => {

    Engaging Content

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -65,8 +65,8 @@ const FeaturesClassic = () => {

    Web Expertise

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -77,8 +77,8 @@ const FeaturesClassic = () => {

    App Development

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -89,8 +89,8 @@ const FeaturesClassic = () => {

    Easy Customized

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    diff --git a/src/sections/z_other/Features-classic/index.test.js b/src/sections/z_other/Features-classic/index.test.js index ed05ccb73a4a..2add9c98ef3f 100644 --- a/src/sections/z_other/Features-classic/index.test.js +++ b/src/sections/z_other/Features-classic/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import FeaturesClassic from './index'; it('Features-classic renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/Features-hosting/fetures.style.js b/src/sections/z_other/Features-hosting/fetures.style.js index b56dc46f5636..e9dfa7351aa0 100644 --- a/src/sections/z_other/Features-hosting/fetures.style.js +++ b/src/sections/z_other/Features-hosting/fetures.style.js @@ -1,89 +1,117 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const FeturesSectionWrapper = styled.div` - padding: 120px 0; - position: relative; - background: #fbfbfb; - .section-title{ - h2{ - font-weight: 600; - } - } - - .fetures-block{ - padding: 15px; - display: flex; - align-items: center; - border-radius: 5px; - transition: all 0.3s ease-in; - &:hover{ - box-shadow: 0 0 40px rgba(0,0,0,0.15); - .fetures-icon-block{ - background: rgb(224,215,222); /* Old browsers */ - background: -moz-linear-gradient(45deg, rgba(224,215,222,1) 1%, rgba(162,155,254,1) 48%, rgba(162,155,254,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(45deg, rgba(224,215,222,1) 1%,rgba(162,155,254,1) 48%,rgba(162,155,254,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(45deg, rgba(224,215,222,1) 1%,rgba(162,155,254,1) 48%,rgba(162,155,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d7de', endColorstr='#a29bfe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - } - } + padding: 120px 0; + position: relative; + background: #fbfbfb; + .section-title { + h2 { + font-weight: 600; } - .fetures-icon-block{ - height: 95px; - width: 95px; - line-height: 130px; - border-radius: 50%; - text-align: center; - transition: all 0.3s ease-in; - background: rgb(162,155,254); /* Old browsers */ - background: -moz-linear-gradient(45deg, rgba(162,155,254,1) 0%, rgba(162,155,254,1) 57%, rgba(224,215,222,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(45deg, rgba(162,155,254,1) 0%,rgba(162,155,254,1) 57%,rgba(224,215,222,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(45deg, rgba(162,155,254,1) 0%,rgba(162,155,254,1) 57%,rgba(224,215,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29bfe', endColorstr='#e0d7de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - img{ - margin: 0 auto; - width: 45px; - } - + } + + .fetures-block { + padding: 15px; + display: flex; + align-items: center; + border-radius: 5px; + transition: all 0.3s ease-in; + &:hover { + box-shadow: 0 0 40px rgba(0, 0, 0, 0.15); + .fetures-icon-block { + background: rgb(224, 215, 222); /* Old browsers */ + background: -moz-linear-gradient( + 45deg, + rgba(224, 215, 222, 1) 1%, + rgba(162, 155, 254, 1) 48%, + rgba(162, 155, 254, 1) 100% + ); /* FF3.6-15 */ + background: -webkit-linear-gradient( + 45deg, + rgba(224, 215, 222, 1) 1%, + rgba(162, 155, 254, 1) 48%, + rgba(162, 155, 254, 1) 100% + ); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient( + 45deg, + rgba(224, 215, 222, 1) 1%, + rgba(162, 155, 254, 1) 48%, + rgba(162, 155, 254, 1) 100% + ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d7de', endColorstr='#a29bfe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + } + } + } + .fetures-icon-block { + height: 95px; + width: 95px; + line-height: 130px; + border-radius: 50%; + text-align: center; + transition: all 0.3s ease-in; + background: rgb(162, 155, 254); /* Old browsers */ + background: -moz-linear-gradient( + 45deg, + rgba(162, 155, 254, 1) 0%, + rgba(162, 155, 254, 1) 57%, + rgba(224, 215, 222, 1) 100% + ); /* FF3.6-15 */ + background: -webkit-linear-gradient( + 45deg, + rgba(162, 155, 254, 1) 0%, + rgba(162, 155, 254, 1) 57%, + rgba(224, 215, 222, 1) 100% + ); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient( + 45deg, + rgba(162, 155, 254, 1) 0%, + rgba(162, 155, 254, 1) 57%, + rgba(224, 215, 222, 1) 100% + ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29bfe', endColorstr='#e0d7de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + img { + margin: 0 auto; + width: 45px; + } + } + .fetures-content-block { + flex-basis: 68%; + margin-left: 20px; + h3 { + font-size: 28px; + font-weight: 400; + margin-bottom: 7px; } - .fetures-content-block{ - flex-basis: 68%; - margin-left: 20px; - h3{ - font-size: 28px; - font-weight: 400; - margin-bottom: 7px; - } - p{ - font-weight: 300; - } + p { + font-weight: 300; + } + } + + @media only screen and (max-width: 1024px) { + .fetures-block { + display: block; } - - @media only screen and (max-width: 1024px) { - .fetures-block{ - display: block; - } - .fetures-icon-block{ - margin-bottom: 30px; - } - .fetures-content-block{ - margin-left: 0; - } + .fetures-icon-block { + margin-bottom: 30px; } - @media only screen and (max-width: 912px) { - padding: 80px 0 0px 0; + .fetures-content-block { + margin-left: 0; } - @media only screen and (max-width: 760px) { - padding: 80px 0 50px 0; + } + @media only screen and (max-width: 912px) { + padding: 80px 0 0px 0; + } + @media only screen and (max-width: 760px) { + padding: 80px 0 50px 0; + } + @media only screen and (max-width: 568px) { + .fetures-icon-block { + margin: 0 auto 30px auto; } - @media only screen and (max-width: 568px) { - .fetures-icon-block{ - margin: 0 auto 30px auto; - } - .fetures-content-block{ - text-align: center; - } + .fetures-content-block { + text-align: center; } - + } `; -export default FeturesSectionWrapper; \ No newline at end of file +export default FeturesSectionWrapper; diff --git a/src/sections/z_other/Features-hosting/index.js b/src/sections/z_other/Features-hosting/index.js index 86d59709fdb8..7c9d256b873a 100644 --- a/src/sections/z_other/Features-hosting/index.js +++ b/src/sections/z_other/Features-hosting/index.js @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react'; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import SectionTitle from "../../../reusecore/SectionTitle"; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import SectionTitle from '../../../reusecore/SectionTitle'; -import Icon1 from "../../../assets/images/hosting/hosting/features/01.svg"; -import Icon2 from "../../../assets/images/hosting/hosting/features/02.svg"; -import Icon3 from "../../../assets/images/hosting/hosting/features/03.svg"; +import Icon1 from '../../../assets/images/hosting/hosting/features/01.svg'; +import Icon2 from '../../../assets/images/hosting/hosting/features/02.svg'; +import Icon3 from '../../../assets/images/hosting/hosting/features/03.svg'; -import FeturesSectionWrapper from "./fetures.style"; +import FeturesSectionWrapper from './fetures.style'; const Features = () => { return ( @@ -15,9 +15,7 @@ const Features = () => {

    service

    -

    - The Service We Provide -

    +

    The Service We Provide

     @@ -28,8 +26,8 @@ const Features = () => {

    Mail server

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -42,8 +40,8 @@ const Features = () => {

    FTP server

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -56,8 +54,8 @@ const Features = () => {

    Cloud server

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    diff --git a/src/sections/z_other/Features-hosting/index.test.js b/src/sections/z_other/Features-hosting/index.test.js index 0da236c6ca53..787f3a5c4164 100644 --- a/src/sections/z_other/Features-hosting/index.test.js +++ b/src/sections/z_other/Features-hosting/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import Features from './index'; it('Features renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/Features/features.style.js b/src/sections/z_other/Features/features.style.js index 6aaeb7eb5f78..b252596d66c3 100644 --- a/src/sections/z_other/Features/features.style.js +++ b/src/sections/z_other/Features/features.style.js @@ -1,105 +1,101 @@ -import styled from "styled-components"; +import styled from 'styled-components'; -import Bg1 from "../../assets/images/app/features/bg-1.webp"; -import Bg2 from "../../assets/images/app/features/bg-2.webp"; +import Bg1 from '../../assets/images/app/features/bg-1.webp'; +import Bg2 from '../../assets/images/app/features/bg-2.webp'; -import Vintage1 from "../../assets/images/app/features/vintage-1.webp"; -import MeshSyncLogo from "./img/meshsync.svg"; +import Vintage1 from '../../assets/images/app/features/vintage-1.webp'; +import MeshSyncLogo from './img/meshsync.svg'; const FeturesSectionWrapper = styled.section` - padding: 95px 0 50px 0; - - .section-title{ - h4{ - text-transform: uppercase; - color: ${props => props.theme.primaryLightColor}; - } + padding: 95px 0 50px 0; + + .section-title { + h4 { + text-transform: uppercase; + color: ${(props) => props.theme.primaryLightColor}; } + } + + .features-icon-block { + height: 70px; + width: 70px; + display: flex; + align-items: center; + margin-bottom: 25px; + position: relative; - .features-icon-block{ + img { + display: block; + margin: 0 auto; + } + } + .features-block { + .features-icon-block { + &:before { + position: absolute; + display: inline-block; + top: -3px; + right: 0px; height: 70px; width: 70px; - display: flex; - align-items: center; - margin-bottom: 25px; - position: relative; - - img{ - display: block; - margin: 0 auto; - } - - } - .features-block{ - - .features-icon-block{ - &:before{ - position: absolute; - display: inline-block; - top: -3px; - right: 0px; - height: 70px; - width: 70px; - content: ''; - border-radius: 50%; - z-index: -1; - opacity: 0; - transition: all 0.3s linear; - } - } - &:hover{ - .features-icon-block{ - &:before{ - opacity: .3; - right: -10px; - } - } + content: ''; + border-radius: 50%; + z-index: -1; + opacity: 0; + transition: all 0.3s linear; + } + } + &:hover { + .features-icon-block { + &:before { + opacity: 0.3; + right: -10px; } - &.v1{ - .features-icon-block{ - // background: url(${Bg1}) no-repeat; - background-size: contain; - &:before{ - background: url(${Vintage1}); - } - } + } + } + &.v1 { + .features-icon-block { + // background: url(${Bg1}) no-repeat; + background-size: contain; + &:before { + background: url(${Vintage1}); } - &.v2{ - .features-icon-block{ - // background: url(${Bg2}) no-repeat; - background-size: contain; - &:before{ - background: url(${MeshSyncLogo}); - } - } + } + } + &.v2 { + .features-icon-block { + // background: url(${Bg2}) no-repeat; + background-size: contain; + &:before { + background: url(${MeshSyncLogo}); } + } + } - - h3{ - font-size: 22px; - margin-bottom: 15px; - font-weight: 600; - line-height: 30px; - } - p{ - margin: 0 0 50px 0; - font-weight: 300; - } + h3 { + font-size: 22px; + margin-bottom: 15px; + font-weight: 600; + line-height: 30px; } - @media only screen and (max-width: 912px) { - padding: 80px 0 0px 0; + p { + margin: 0 0 50px 0; + font-weight: 300; } - @media only screen and (max-width: 760px) { - padding: 80px 0 50px 0; + } + @media only screen and (max-width: 912px) { + padding: 80px 0 0px 0; + } + @media only screen and (max-width: 760px) { + padding: 80px 0 50px 0; + } + @media only screen and (max-width: 568px) { + .features-block { + text-align: center; } - @media only screen and (max-width: 568px) { - .features-block{ - text-align: center; - } - .features-icon-block{ - margin: 0 auto 25px auto; - } + .features-icon-block { + margin: 0 auto 25px auto; } - + } `; export default FeturesSectionWrapper; diff --git a/src/sections/z_other/Features/index.js b/src/sections/z_other/Features/index.js index 137bbc42d8da..23e763cbcd8e 100644 --- a/src/sections/z_other/Features/index.js +++ b/src/sections/z_other/Features/index.js @@ -1,21 +1,21 @@ -import React from "react"; +import React from 'react'; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import SectionTitle from "../../../reusecore/SectionTitle"; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import SectionTitle from '../../../reusecore/SectionTitle'; -import Icon1 from "../../assets/images/app/features/01.svg"; +import Icon1 from '../../assets/images/app/features/01.svg'; // import Icon2 from "../../assets/images/app/features/02.svg"; // import Icon3 from "../../assets/images/app/features/03.svg"; // import Icon4 from "../../assets/images/app/features/04.svg"; // import Icon5 from "../../assets/images/app/features/05.svg"; -import mesheryOperatorDark from "./img/meshery-operator_dark.svg"; -import policyEngineGreen from "./img/policy-engine_green.svg"; -import distributedPerformance from "./img/distributed-performance_green.svg"; -import visualToplogy from "./img/visual-topology.svg"; -import performanceManagement from "./img/performance-management.svg"; -import { Link } from "gatsby"; +import mesheryOperatorDark from './img/meshery-operator_dark.svg'; +import policyEngineGreen from './img/policy-engine_green.svg'; +import distributedPerformance from './img/distributed-performance_green.svg'; +import visualToplogy from './img/visual-topology.svg'; +import performanceManagement from './img/performance-management.svg'; +import { Link } from 'gatsby'; -import FeaturesSectionWrapper from "./features.style"; +import FeaturesSectionWrapper from './features.style'; const Features = () => { return ( @@ -24,7 +24,8 @@ const Features = () => {

    Cloud Native Management

    - Manage your cloud native infra and apps with features you won't find anywhere else. + Manage your cloud native infra and apps with features + you won't find anywhere else.

    @@ -35,8 +36,8 @@ const Features = () => {

    Lifecycle Management

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -47,8 +48,8 @@ const Features = () => {

    Performance Management

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -59,8 +60,8 @@ const Features = () => {

    Configuration Management

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt.

    @@ -71,7 +72,9 @@ const Features = () => {

    Data Plane Intelligence

    - Harness the power of WebAssembly filters to implement application and offload your service development teams from lengthy engineering cycles. Expect and receive more from your infrastructure. + Harness the power of WebAssembly filters to implement application and offload your + service development teams from lengthy engineering cycles. Expect and receive more + from your infrastructure.

    @@ -82,7 +85,12 @@ const Features = () => {

    Visual Topology

    - Use MeshMap to quickly understand how your service mesh is functioning and to intuitively reconfigure and tune your mesh in accordance with the needs of your workloads. + Use{' '} + + MeshMap + {' '} + to quickly understand how your service mesh is functioning and to intuitively + reconfigure and tune your mesh in accordance with the needs of your workloads.

    @@ -93,7 +101,12 @@ const Features = () => {

    Automated Operation

    - Meshery Operator + + Meshery Operator +

    diff --git a/src/sections/z_other/Features/index.test.js b/src/sections/z_other/Features/index.test.js index 0da236c6ca53..787f3a5c4164 100644 --- a/src/sections/z_other/Features/index.test.js +++ b/src/sections/z_other/Features/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import Features from './index'; it('Features renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/Footer-classic/footer.style.js b/src/sections/z_other/Footer-classic/footer.style.js index 72ecef31463e..1bd5628218e4 100644 --- a/src/sections/z_other/Footer-classic/footer.style.js +++ b/src/sections/z_other/Footer-classic/footer.style.js @@ -1,36 +1,36 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const FooterWrapper = styled.section` - padding-top: 195px; - padding-bottom: 45px; - overflow: hidden; - background: #f7f7f7; - position: relative; - .section__particle{ - position: absolute; - &.one{ - bottom: -20%; - right: -80%; - } + padding-top: 195px; + padding-bottom: 45px; + overflow: hidden; + background: #f7f7f7; + position: relative; + .section__particle { + position: absolute; + &.one { + bottom: -20%; + right: -80%; + } } - ul{ + ul { padding: 0; list-style: none; - margin: 0; + margin: 0; } - p{ + p { font-size: 18px; line-height: 38px; - color: ${props => props.theme.headingColor ? props.theme.headingColor : "#1D316C"}; + color: ${(props) => (props.theme.headingColor ? props.theme.headingColor : '#1D316C')}; } - .copyright-text{ - margin-top: 30px; - font-size: 16px; + .copyright-text { + margin-top: 30px; + font-size: 16px; } - a{ - transition: 450ms all; + a { + transition: 450ms all; &:hover { - color: ${props => props.theme.secondaryColor ? props.theme.secondaryColor : "#FB7B81"}; + color: ${(props) => (props.theme.secondaryColor ? props.theme.secondaryColor : '#FB7B81')}; } } .footer-logo { @@ -43,39 +43,40 @@ const FooterWrapper = styled.section` } } .subscribe-form { - position: relative; - display: flex; - margin-top: 30px; - input{ - background: transparent; - flex-basis: 100%; - padding: 15px; - border-radius: 5px; - border: 1px solid ${props => props.theme.headingColor ? props.theme.headingColor : "#1D316C"}; - } - button { - position: absolute; - right: 0px; - top: 0; - height: 100%; - min-width: 20px; - border-radius: 5px; - background: transparent; - color: ${props => props.theme.headingColor}; - svg{ - color: ${props => props.theme.headingColor ? props.theme.headingColor : "#1D316C"}; - font-size: 22px; - line-height: 100%; - } - } + position: relative; + display: flex; + margin-top: 30px; + input { + background: transparent; + flex-basis: 100%; + padding: 15px; + border-radius: 5px; + border: 1px solid + ${(props) => (props.theme.headingColor ? props.theme.headingColor : '#1D316C')}; } + button { + position: absolute; + right: 0px; + top: 0; + height: 100%; + min-width: 20px; + border-radius: 5px; + background: transparent; + color: ${(props) => props.theme.headingColor}; + svg { + color: ${(props) => (props.theme.headingColor ? props.theme.headingColor : '#1D316C')}; + font-size: 22px; + line-height: 100%; + } + } + } .footer-widgets { - .widget-title { + .widget-title { font-size: 24px; margin-bottom: 35px; } - - .social{ + + .social { li { display: inline-block; a { @@ -84,12 +85,15 @@ const FooterWrapper = styled.section` width: 30px; line-height: 33px; border-radius: 50%; - border: 1px solid ${props => props.theme.headingColor ? props.theme.headingColor : "#1D316C"}; + border: 1px solid + ${(props) => (props.theme.headingColor ? props.theme.headingColor : '#1D316C')}; text-align: center; transition: 450ms all; &:hover { - color: ${props => props.theme.secondaryColor ? props.theme.secondaryColor : "#FB7B81"}; - border-color: ${props => props.theme.secondaryColor ? props.theme.secondaryColor : "#FB7B81"}; + color: ${(props) => + props.theme.secondaryColor ? props.theme.secondaryColor : '#FB7B81'}; + border-color: ${(props) => + props.theme.secondaryColor ? props.theme.secondaryColor : '#FB7B81'}; } } } @@ -109,7 +113,7 @@ const FooterWrapper = styled.section` } } } - + @media only screen and (max-width: 1280px) { .footer-widgets { .social { @@ -123,11 +127,11 @@ const FooterWrapper = styled.section` .footer-widgets { margin-bottom: 70px; } - .section__particle{ - &.one{ - bottom: 0; - right: -58%; - } + .section__particle { + &.one { + bottom: 0; + right: -58%; + } } } @media only screen and (max-width: 568px) { @@ -142,7 +146,6 @@ const FooterWrapper = styled.section` } } @media only screen and (max-width: 375px) { - } `; diff --git a/src/sections/z_other/Footer-classic/index.js b/src/sections/z_other/Footer-classic/index.js index 105fcd3e7961..28927943df1c 100644 --- a/src/sections/z_other/Footer-classic/index.js +++ b/src/sections/z_other/Footer-classic/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { Link } from "gatsby"; +import React from 'react'; +import { Link } from 'gatsby'; // import { // FaFacebookF, @@ -10,15 +10,15 @@ import { Link } from "gatsby"; // FaInstagram // } from "react-icons/fa"; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import Button from "../../../reusecore/Button"; -import ParticleComponent from "../../../reusecore/Particle"; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import Button from '../../../reusecore/Button'; +import ParticleComponent from '../../../reusecore/Particle'; -import logo from "../../Footer/images/footer-logo-two.svg"; +import logo from '../../Footer/images/footer-logo-two.svg'; -import FooterBGTwo from "../../Footer/images/footer-particle-two.webp"; +import FooterBGTwo from '../../Footer/images/footer-particle-two.webp'; -import FooterWrapper from "./footer.style"; +import FooterWrapper from './footer.style'; const FooterClassic = () => { return ( @@ -34,9 +34,7 @@ const FooterClassic = () => { - + @@ -83,29 +81,19 @@ const FooterClassic = () => {

    Follow US

    • - - {/* */} - + {/* */}
    • - - {/* */} - + {/* */}
    • - - {/* */} - + {/* */}
    • - - {/* */} - + {/* */}
    • - - {/* */} - + {/* */}

    diff --git a/src/sections/z_other/Footer-classic/index.test.js b/src/sections/z_other/Footer-classic/index.test.js index dc0ed6dcb2e2..8d309cb5190c 100644 --- a/src/sections/z_other/Footer-classic/index.test.js +++ b/src/sections/z_other/Footer-classic/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import FooterClassic from './index'; it('Footer-classic renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/Getapp/getAppSection.style.js b/src/sections/z_other/Getapp/getAppSection.style.js index 72ef336c6144..3ab37f6957f0 100644 --- a/src/sections/z_other/Getapp/getAppSection.style.js +++ b/src/sections/z_other/Getapp/getAppSection.style.js @@ -1,225 +1,224 @@ -import styled from "styled-components"; +import styled from 'styled-components'; -import AppSecreenBG from "../../../assets/images/app/get-app/get-app-bg.webp"; +import AppSecreenBG from '../../../assets/images/app/get-app/get-app-bg.webp'; const GetAppSectionWrap = styled.section` - padding: 100px 0 90px 0; - background: url(${AppSecreenBG}); - background-repeat: no-repeat; - background-size: contain; - background-position: center center; - position: relative; - .section__particle{ - position: absolute; - &.one{ - width: 70px; - left: 7%; - top: 28px; - } - - &.two{ - width: 60px; - bottom: 60px; - right: 45%; - } - &.three{ - width: 114px; - top: 200px; - right: 17%; - } - &.four{ - width: 95px; - bottom: 80px; - right: 25%; - } + padding: 100px 0 90px 0; + background: url(${AppSecreenBG}); + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + position: relative; + .section__particle { + position: absolute; + &.one { + width: 70px; + left: 7%; + top: 28px; } - .getapp-block{ - h3{ - font-size: 40px; - font-weight: 500; - line-height: 50px; - margin-bottom: 40px; - } - p{ - font-weight: 300; - margin: 0 auto 60px auto; - } + + &.two { + width: 60px; + bottom: 60px; + right: 45%; } - .btn-block{ - display: flex; - justify-content: space-between; + &.three { + width: 114px; + top: 200px; + right: 17%; } - .getapp-btn{ - display: flex; - align-items: center; - height: 90px; - min-width: 260px; - border-radius: 5px; - padding: 0 12px; - - border: 1px solid rgba(122,132,142,.5); - -webkit-transition: 450ms all; - transition: 450ms all; - p{ - margin-bottom: 0; - color: ${props => props.theme.primaryColor}; - } - span{ - display: block; - font-size: 20px; - font-weight: 500; - color: ${props => props.theme.textColor}; - } - svg{ - font-size: 35px; - color: ${props => props.theme.textColor}; - } - &:hover{ - color: ${props => props.theme.primaryColor}; - background: ${props => props.theme.white}; - border-color: transparent; - span,svg{ - color: ${props => props.theme.primaryColor}; - } - } + &.four { + width: 95px; + bottom: 80px; + right: 25%; } - .apl-btn{ - p{ - color: ${props => props.theme.secondaryColor}; - } - svg{ - font-size: 45px; - color: ${props => props.theme.textColor} - } - &:hover{ - color: ${props => props.theme.secondaryColor}; - span,svg{ - color: ${props => props.theme.secondaryColor}; - } - } + } + .getapp-block { + h3 { + font-size: 40px; + font-weight: 500; + line-height: 50px; + margin-bottom: 40px; } - .getapp-thumb{ - margin: 0 auto; - text-align: center; - img{ - margin-top: -80px; - box-shadow: 0 0 40px ${props => props.theme.shadowColor}; - } + p { + font-weight: 300; + margin: 0 auto 60px auto; } - @media only screen and (max-width: 1280px) { - background-size: cover; - .getapp-btn{ - min-width: auto; - width: 48%; - p{ - font-size: 12px; - } - span{ - font-size: 17px; - } - } - .section__particle{ - &.four{ - display: none; - } - } + } + .btn-block { + display: flex; + justify-content: space-between; + } + .getapp-btn { + display: flex; + align-items: center; + height: 90px; + min-width: 260px; + border-radius: 5px; + padding: 0 12px; + + border: 1px solid rgba(122, 132, 142, 0.5); + -webkit-transition: 450ms all; + transition: 450ms all; + p { + margin-bottom: 0; + color: ${(props) => props.theme.primaryColor}; } - @media only screen and (max-width: 912px) { - background-size: cover; - .getapp-block{ - h3{ - font-size: 30px; - margin-bottom: 8px; - } - } - .btn-block{ - display: block - } - .getapp-btn{ - min-width: auto; - width: 100%; - p{ - font-size: 16px; - } - span{ - font-size: 19px; - } - } - .getapp-btn+.getapp-btn{ - margin-top: 30px; - } + span { + display: block; + font-size: 20px; + font-weight: 500; + color: ${(props) => props.theme.textColor}; } - @media only screen and (max-width: 760px) { - padding: 100px 0 50px 0; - .section__particle{ - &.two{ - bottom: auto; - top: 0; - right: auto; - left: 10%; - } - &.one, - &.three{ - display: none; - } - } - .getapp-btn{ - justify-content: center; - } - .getapp-btn{ - p{ - margin: 0 26px 0px 26px; - } - } - } - - @media only screen and (max-width: 568px) { - text-align: center; - .getapp-block { - .btn-block{ - display: flex; - } - .getapp-btn{ - width: 260px; - span{ - font-size: 17px; - } - p{ - font-size: 13px; - margin: 0 15px 0px 15px; - } - } - .getapp-btn+.getapp-btn{ - margin-top: 0; - } - - } - .getapp-thumb{ - display: none; - } + svg { + font-size: 35px; + color: ${(props) => props.theme.textColor}; } - @media only screen and (max-width: 480px) { - .getapp-block { - .btn-block{ - display: block; - } - .getapp-btn{ - width: 100%; - span{ - font-size: 23px; - } - p{ - font-size: 16px; - margin: 0 15px 0px 15px; - } - } - .getapp-btn+.getapp-btn{ - margin-top: 30px; - } - - } + &:hover { + color: ${(props) => props.theme.primaryColor}; + background: ${(props) => props.theme.white}; + border-color: transparent; + span, + svg { + color: ${(props) => props.theme.primaryColor}; + } + } + } + .apl-btn { + p { + color: ${(props) => props.theme.secondaryColor}; + } + svg { + font-size: 45px; + color: ${(props) => props.theme.textColor}; + } + &:hover { + color: ${(props) => props.theme.secondaryColor}; + span, + svg { + color: ${(props) => props.theme.secondaryColor}; + } + } + } + .getapp-thumb { + margin: 0 auto; + text-align: center; + img { + margin-top: -80px; + box-shadow: 0 0 40px ${(props) => props.theme.shadowColor}; + } + } + @media only screen and (max-width: 1280px) { + background-size: cover; + .getapp-btn { + min-width: auto; + width: 48%; + p { + font-size: 12px; + } + span { + font-size: 17px; + } + } + .section__particle { + &.four { + display: none; + } + } + } + @media only screen and (max-width: 912px) { + background-size: cover; + .getapp-block { + h3 { + font-size: 30px; + margin-bottom: 8px; + } + } + .btn-block { + display: block; } + .getapp-btn { + min-width: auto; + width: 100%; + p { + font-size: 16px; + } + span { + font-size: 19px; + } + } + .getapp-btn + .getapp-btn { + margin-top: 30px; + } + } + @media only screen and (max-width: 760px) { + padding: 100px 0 50px 0; + .section__particle { + &.two { + bottom: auto; + top: 0; + right: auto; + left: 10%; + } + &.one, + &.three { + display: none; + } + } + .getapp-btn { + justify-content: center; + } + .getapp-btn { + p { + margin: 0 26px 0px 26px; + } + } + } + + @media only screen and (max-width: 568px) { + text-align: center; + .getapp-block { + .btn-block { + display: flex; + } + .getapp-btn { + width: 260px; + span { + font-size: 17px; + } + p { + font-size: 13px; + margin: 0 15px 0px 15px; + } + } + .getapp-btn + .getapp-btn { + margin-top: 0; + } + } + .getapp-thumb { + display: none; + } + } + @media only screen and (max-width: 480px) { + .getapp-block { + .btn-block { + display: block; + } + .getapp-btn { + width: 100%; + span { + font-size: 23px; + } + p { + font-size: 16px; + margin: 0 15px 0px 15px; + } + } + .getapp-btn + .getapp-btn { + margin-top: 30px; + } + } + } `; export default GetAppSectionWrap; - diff --git a/src/sections/z_other/Getapp/index.js b/src/sections/z_other/Getapp/index.js index 88d8206522ec..aea2ffa51da5 100644 --- a/src/sections/z_other/Getapp/index.js +++ b/src/sections/z_other/Getapp/index.js @@ -1,17 +1,17 @@ -import React from "react"; -import { Link } from "gatsby"; +import React from 'react'; +import { Link } from 'gatsby'; -import { Container, Row, Col } from "../../../reusecore/Layout"; +import { Container, Row, Col } from '../../../reusecore/Layout'; // import { DiAppstore } from "react-icons/di"; // import { FaGooglePlay } from "react-icons/fa"; -import AppSecreenImage from "../../../assets/images/app/get-app/get-app-screen.webp"; -import particle1 from "../../../assets/images/app/particle/09.webp"; -import particle2 from "../../../assets/images/app/particle/10.webp"; -import particle3 from "../../../assets/images/app/particle/11.webp"; -import particle4 from "../../../assets/images/app/particle/13.webp"; +import AppSecreenImage from '../../../assets/images/app/get-app/get-app-screen.webp'; +import particle1 from '../../../assets/images/app/particle/09.webp'; +import particle2 from '../../../assets/images/app/particle/10.webp'; +import particle3 from '../../../assets/images/app/particle/11.webp'; +import particle4 from '../../../assets/images/app/particle/13.webp'; -import GetAppSectionWrap from "./getAppSection.style"; +import GetAppSectionWrap from './getAppSection.style'; const GetApp = () => { return ( @@ -26,9 +26,9 @@ const GetApp = () => {

    Get the app now!

    - Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua enim - ad minim veniam quis nostrud exercitation. + Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud + exercitation.

    diff --git a/src/sections/z_other/Getapp/index.test.js b/src/sections/z_other/Getapp/index.test.js index 3ac531159dcf..4a6edacf5e11 100644 --- a/src/sections/z_other/Getapp/index.test.js +++ b/src/sections/z_other/Getapp/index.test.js @@ -1,7 +1,6 @@ - import React from 'react'; import { shallow } from 'enzyme'; import GetApp from './index'; it('GetApp renders without crashing', () => { shallow(); -}); \ No newline at end of file +}); diff --git a/src/sections/z_other/Integrations/index.js b/src/sections/z_other/Integrations/index.js index 5ed81a290d6c..2472a3ea41b4 100644 --- a/src/sections/z_other/Integrations/index.js +++ b/src/sections/z_other/Integrations/index.js @@ -1,18 +1,18 @@ -import React from "react"; -import { Link } from "gatsby"; +import React from 'react'; +import { Link } from 'gatsby'; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import SectionTitle from "../../../reusecore/SectionTitle"; -import Button from "../../../reusecore/Button"; -import VintageBox from "../../../reusecore/VintageBox"; +import { Container, Row, Col } from '../../../reusecore/Layout'; +import SectionTitle from '../../../reusecore/SectionTitle'; +import Button from '../../../reusecore/Button'; +import VintageBox from '../../../reusecore/VintageBox'; -import integrationImage1 from "../../../assets/images/app/integrations/integration-1.webp"; -import integrationImage2 from "../../../assets/images/app/integrations/integration-2.webp"; -import integrationImage3 from "../../../assets/images/app/integrations/integration-3.webp"; -import integrationImage4 from "../../../assets/images/app/integrations/integration-4.webp"; -import Icon from "../../../assets/images/app/integrations/arrow.webp"; +import integrationImage1 from '../../../assets/images/app/integrations/integration-1.webp'; +import integrationImage2 from '../../../assets/images/app/integrations/integration-2.webp'; +import integrationImage3 from '../../../assets/images/app/integrations/integration-3.webp'; +import integrationImage4 from '../../../assets/images/app/integrations/integration-4.webp'; +import Icon from '../../../assets/images/app/integrations/arrow.webp'; -import IntegrationItemWrapper from "./integrationSection.style"; +import IntegrationItemWrapper from './integrationSection.style'; const Integrations = () => { return ( @@ -60,11 +60,7 @@ const Integrations = () => {
    - +

    Integration

    @@ -72,15 +68,11 @@ const Integrations = () => {

    - One differences leaders, management-science so, best treat. Still - problems upper and anger devoting out. With hiding their boss - phase drops. A strenuous in ticket get write it by proposal. + One differences leaders, management-science so, best treat. Still problems upper and + anger devoting out. With hiding their boss phase drops. A strenuous in ticket get + write it by proposal.

    - +