diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a4211f9a8dc6..16ace765f7dd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -351,6 +351,9 @@ Badges are a great way of highlighting the area of contribution by any given com #### Possible Badges: - Community +- Docker Extension +- Docs +- Meshery Catalog - Landscape - ImageHub - Meshery diff --git a/package-lock.json b/package-lock.json index 6dd08e9c1d54..8d9382bb242f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,8 @@ "babel-preset-gatsby": "^2.22.0", "caniuse-lite": "^1.0.30001435", "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.2.0", "dedent": "^0.7.0", "deepmerge": "^4.3.0", "formik": "^2.2.9", @@ -7918,6 +7920,14 @@ "node": ">= 0.10" } }, + "node_modules/cose-base": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz", + "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==", + "dependencies": { + "layout-base": "^2.0.0" + } + }, "node_modules/cosmiconfig": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", @@ -8803,6 +8813,41 @@ "node": ">=0.10" } }, + "node_modules/cytoscape-cose-bilkent": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz", + "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==", + "dependencies": { + "cose-base": "^1.0.0" + }, + "peerDependencies": { + "cytoscape": "^3.2.0" + } + }, + "node_modules/cytoscape-cose-bilkent/node_modules/cose-base": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz", + "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==", + "dependencies": { + "layout-base": "^1.0.0" + } + }, + "node_modules/cytoscape-cose-bilkent/node_modules/layout-base": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz", + "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==" + }, + "node_modules/cytoscape-fcose": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz", + "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==", + "dependencies": { + "cose-base": "^2.2.0" + }, + "peerDependencies": { + "cytoscape": "^3.2.0" + } + }, "node_modules/d": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", @@ -16390,6 +16435,11 @@ "node": ">=8" } }, + "node_modules/layout-base": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz", + "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -31292,6 +31342,14 @@ "vary": "^1" } }, + "cose-base": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz", + "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==", + "requires": { + "layout-base": "^2.0.0" + } + }, "cosmiconfig": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", @@ -31970,6 +32028,37 @@ "lodash": "^4.17.21" } }, + "cytoscape-cose-bilkent": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz", + "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==", + "requires": { + "cose-base": "^1.0.0" + }, + "dependencies": { + "cose-base": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz", + "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==", + "requires": { + "layout-base": "^1.0.0" + } + }, + "layout-base": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz", + "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==" + } + } + }, + "cytoscape-fcose": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz", + "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==", + "requires": { + "cose-base": "^2.2.0" + } + }, "d": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", @@ -37554,6 +37643,11 @@ "package-json": "^6.3.0" } }, + "layout-base": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz", + "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==" + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", diff --git a/package.json b/package.json index 6cbec64f61b6..bb0d2d669e81 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,8 @@ "babel-preset-gatsby": "^2.22.0", "caniuse-lite": "^1.0.30001435", "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.2.0", "dedent": "^0.7.0", "deepmerge": "^4.3.0", "formik": "^2.2.9", diff --git a/src/assets/images/catalog/catalog-dark.svg b/src/assets/images/catalog/catalog-dark.svg index 849680e3c7cf..dfa2bf82989d 100644 --- a/src/assets/images/catalog/catalog-dark.svg +++ b/src/assets/images/catalog/catalog-dark.svg @@ -1,893 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/images/catalog/catalog-light.svg b/src/assets/images/catalog/catalog-light.svg index 7c07526892b1..5504e26bc4a1 100644 --- a/src/assets/images/catalog/catalog-light.svg +++ b/src/assets/images/catalog/catalog-light.svg @@ -1,904 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/images/docs/docs.svg b/src/assets/images/docs/docs.svg new file mode 100644 index 000000000000..fb1da368655a --- /dev/null +++ b/src/assets/images/docs/docs.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/collections/integrations/docker/index.mdx b/src/collections/integrations/docker/index.mdx index 4c16b59dd1b5..3c4d71a3831e 100644 --- a/src/collections/integrations/docker/index.mdx +++ b/src/collections/integrations/docker/index.mdx @@ -11,10 +11,11 @@ featureList: ["Scan your kubeconfigs and select your current Kubernetes environm "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." ] workingSlides: [ + ../../../assets/images/docker-extension/docker-extension-meshery.webp, ../_images/meshmap-visualizer.webp, ../_images/meshmap-designer.webp] howItWorks: "Collaborative Infrastructure as Code" -howItWorksDetails: "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." +howItWorksDetails: "From the convenience of your Docker Desktop interface, connect Meshery with your Kubernetes cluster. Watch as MeshSync discovers all of your Kuberentes clusters. Visually design your Docker-based infrastructure. Choose from hundreds of ready-made design patterns using Meshery Catalog. Use our no-code designer, MeshMap, to collaboratively design and operate your infra." published: true ---

diff --git a/src/collections/integrations/nginx-service-mesh/icon/white/nginx-service-mesh-white.svg b/src/collections/integrations/nginx-service-mesh/icon/white/nginx-service-mesh-white.svg index 84997bd6d0de..d53545ae430d 100644 --- a/src/collections/integrations/nginx-service-mesh/icon/white/nginx-service-mesh-white.svg +++ b/src/collections/integrations/nginx-service-mesh/icon/white/nginx-service-mesh-white.svg @@ -1,18 +1,18 @@ + viewBox="0 0 26.3 27.4" style="enable-background:new 0 0 26.3 27.4;" xml:space="preserve"> + c0,0-0.1,0-0.1,0C19.6,11.7,19.2,11.4,18.9,11.1L18.9,11.1z"/> + c0.1,0.2,0.3,0.4,0.6,0.5l11.6,6.1c0.5,0.3,1.1,0.3,1.5,0l11.6-6.1c0.5-0.3,0.8-0.7,0.8-1.2V7.6C26.3,7.1,26,6.6,25.5,6.3L25.5,6.3z + M20.7,15.7c1.1,0.2,1.8,1.1,1.6,2.1c-0.2,1-1.2,1.6-2.3,1.5s-1.8-1.1-1.6-2.1c0-0.1,0.1-0.3,0.1-0.4l-3.7-1.9 + c-0.4,0.5-1,0.7-1.6,0.7c-0.6,0-1.2-0.3-1.6-0.7l-3.7,1.9c0.2,0.4,0.2,1,0,1.4l3.8,2.1c0.4-0.4,0.9-0.7,1.5-0.7c1.1,0,2,0.8,2,1.8 + c0,1-0.9,1.8-2,1.8s-2-0.8-2-1.8c0-0.3,0.1-0.5,0.2-0.7l-3.8-2.1c-0.4,0.4-1,0.7-1.5,0.7c-1.1,0-2-0.8-2-1.8c0-1,0.9-1.8,2-1.8 + c0.6,0,1.2,0.3,1.6,0.7l3.7-1.9c-0.1-0.2-0.1-0.4-0.1-0.7c0-0.9,0.7-1.7,1.7-1.8V7.8c-0.5-0.1-1-0.3-1.3-0.7L7.7,9.2 + c0.1,0.2,0.2,0.5,0.2,0.7c0,1-0.9,1.8-2,1.8s-2-0.8-2-1.8c0-1,0.9-1.8,2-1.8c0.6,0,1.2,0.3,1.6,0.7l3.9-2.1 + c-0.1-0.2-0.2-0.5-0.2-0.7c0-1,0.9-1.8,2-1.8c1.1,0,2,0.8,2,1.8c0,0.9-0.7,1.7-1.7,1.8V12c0.5,0.1,1,0.3,1.3,0.7l3.8-2.1 + c-0.2-0.3-0.2-0.7-0.1-1.1c0.2-1,1.2-1.6,2.3-1.4c1.1,0.2,1.8,1.1,1.6,2.1c-0.2,0.8-0.9,1.4-1.7,1.4L20.7,15.7 + C20.6,15.7,20.6,15.7,20.7,15.7z"/> diff --git a/src/collections/members/_member-profile-template/index.mdx b/src/collections/members/_member-profile-template/index.mdx index 0cabbd9e1336..7e6464375fd2 100644 --- a/src/collections/members/_member-profile-template/index.mdx +++ b/src/collections/members/_member-profile-template/index.mdx @@ -20,6 +20,9 @@ badges: # List of badges that this member carries. # - patterns # - ui-ux # - writing +# - docker-extension +# - meshery-catalog +# - docs blurb: # (Currently not used) Member's tagline, if they have one (a short quip or phrase) status: # [Active | Inactive] maintainer: # [no | yes] Designates whether this member is a project maintainer or not. diff --git a/src/collections/members/anita-ihuman/index.mdx b/src/collections/members/anita-ihuman/index.mdx index 7c9f62f8ecb2..a52a1f57d3a5 100644 --- a/src/collections/members/anita-ihuman/index.mdx +++ b/src/collections/members/anita-ihuman/index.mdx @@ -11,6 +11,7 @@ bio: I am a student of the university of port harcourt in Nigeria studying micro blurb: Mesh Head status: Active meshmate: yes +community_manager: yes badges: - community published: true diff --git a/src/collections/members/gaurav-chadha/index.mdx b/src/collections/members/gaurav-chadha/index.mdx index 7c38af1fab98..a71669f5c9ea 100644 --- a/src/collections/members/gaurav-chadha/index.mdx +++ b/src/collections/members/gaurav-chadha/index.mdx @@ -13,5 +13,6 @@ location: Delhi, India bio: "I am an undergraduate student at IP University majoring in Computer Science and Engineering. I am passionate about open-source, web development, software engineering, and UX/UI designing. My working principle is learning and sharing knowledge. Apart from coding, I love to cook Indian and Italian food as well. Yoga and workout are also in my daily routine." status: Active meshmate: yes +community_manager: yes published: true --- diff --git a/src/collections/members/savio-dias/index.mdx b/src/collections/members/savio-dias/index.mdx new file mode 100644 index 000000000000..8bacc69df983 --- /dev/null +++ b/src/collections/members/savio-dias/index.mdx @@ -0,0 +1,12 @@ +--- +name: Savio Dias +position: Contributor +image_path: ./saviodias.jpg +github: Savio629 +twitter: Savio_dias629 +linkedin: savio-dias-984b45198 +location: Navi-Mumbai, India +bio: Hey there! I'm Savio Dias, a tech enthusiast with a great curiosity for exploring the endless possibilities of technology. As a student at FCRIT, Vashi, I discovered the world of open-source during my sophomore year and I've been hooked ever since. With a keen interest in UI/UX and a good foundation in the MERN stack, I'm always eager to expand my knowledge and dive into the dynamic realms of cloud-native technologies and APIs.My commitment to open-source stems from my belief in the power of collaborative learning and community-driven growth. I'm ready to embark on a coding adventure together! Let's connect and let our journey begin with a resounding "Link start" into the realm of technology. +status: Active +published: true +--- \ No newline at end of file diff --git a/src/collections/members/savio-dias/saviodias.jpg b/src/collections/members/savio-dias/saviodias.jpg new file mode 100644 index 000000000000..8c99d2fd29a6 Binary files /dev/null and b/src/collections/members/savio-dias/saviodias.jpg differ diff --git a/src/collections/members/vivek-vishal/index.mdx b/src/collections/members/vivek-vishal/index.mdx index 17a4d55dc35e..6686087fd68e 100644 --- a/src/collections/members/vivek-vishal/index.mdx +++ b/src/collections/members/vivek-vishal/index.mdx @@ -10,5 +10,6 @@ bio: Vivek Vishal is a passionate CS undergrad from India who loves to explore n status: Active badges: - community +community_manager: yes published: true --- diff --git a/src/collections/service-mesh-books/Book.style.js b/src/collections/service-mesh-books/Book.style.js index c2da89097d12..9381f1554a90 100644 --- a/src/collections/service-mesh-books/Book.style.js +++ b/src/collections/service-mesh-books/Book.style.js @@ -24,7 +24,6 @@ export const BookWrapper = styled.div` .card{ position: relative; margin: 0.5rem 0 1rem 0; - background-color: #fff; -webkit-transition: -webkit-box-shadow .25s; transition: -webkit-box-shadow .25s; transition: box-shadow .25s; diff --git a/src/components/service-mesh-patterns-Table/table.style.js b/src/components/service-mesh-patterns-Table/table.style.js index 600b272a5728..f1cd1830dc7a 100644 --- a/src/components/service-mesh-patterns-Table/table.style.js +++ b/src/components/service-mesh-patterns-Table/table.style.js @@ -17,7 +17,7 @@ export const TableWrapper = styled.div` th{ - background:${(props) => props.theme.tertiaryColor}; + background:#1e2117; color:${(props) => props.theme.white}; padding:10px; border-collapse:collapse; @@ -52,7 +52,7 @@ export const TableWrapper = styled.div` .table-header { border-radius: 0 !important; - background-color: ${(props) => props.theme.primaryColor}; + background-color: #3c494f; } tbody{ diff --git a/src/pages/community/members.js b/src/pages/community/members.js index f66480cbbcde..a4b3fa2fd2fe 100644 --- a/src/pages/community/members.js +++ b/src/pages/community/members.js @@ -23,6 +23,9 @@ import inactiveIcon from "../../assets/images/status/inactive.webp"; import activeIcon from "../../assets/images/status/active.webp"; import patternsIcon from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg"; import uiuxrIcon from "../../assets/images/uiuxr/uiuxr.svg"; +import docsIcon from "../../assets/images/docs/docs.svg"; +import dockerExtensionIcon from "../../assets/images/docker-extension/docker-extension-meshery-logo.svg"; +import mesheryCatalogIcon from "../../assets/images/meshery/meshery-catalog.svg"; /** * Array containing a list of categories to be shown in the dropdown. * The map function in the end wraps the label property with a component. @@ -60,6 +63,14 @@ const options = [ icon: landscapeIcon, className: "allOptions", }, + { + label: "Docker Extension", + value: "docker-extension", + color: theme.linkColor, + isFixed: true, + icon: dockerExtensionIcon, + className: "allOptions", + }, { label: "Image Hub", value: "image-hub", @@ -68,6 +79,14 @@ const options = [ icon: hubIcon, className: "allOptions", }, + { + label: "Docs", + value: "docs", + color: theme.linkColor, + isFixed: true, + icon: docsIcon, + className: "allOptions", + }, { label: "Meshery", value: "meshery", @@ -76,6 +95,14 @@ const options = [ icon: mesheryIcon, className: "allOptions", }, + { + label: "Meshery Catalog", + value: "meshery-catalog", + color: theme.linkColor, + isFixed: true, + icon: mesheryCatalogIcon, + className: "allOptions", + }, { label: "Meshery Operator", value: "meshery-operator", diff --git a/src/sections/Community/Handbook/recognition.js b/src/sections/Community/Handbook/recognition.js index f195ad608d20..080d6c3e9d9c 100644 --- a/src/sections/Community/Handbook/recognition.js +++ b/src/sections/Community/Handbook/recognition.js @@ -17,7 +17,8 @@ import IntraPage from "../../../components/handbook-navigation/intra-page"; import uiuxrLogo from "../../../assets/images/uiuxr/uiuxr.svg"; import writersLogo from "../../../assets/images/writer-program/writer-program-badge.svg"; import meshmapLogo from "../../../assets/images/meshmap/icon-only/meshmap-icon.svg"; -import MesheryCatalog from "../../../assets/images/meshery/meshery-catalog.svg"; +import MesheryCatalogLogo from "../../../assets/images/meshery/meshery-catalog.svg"; +import DocsLogo from "../../../assets/images/docs/docs.svg"; const contents = [ { id: 0, link: "#Profile Bages", text: "Profile Bages" }, { id: 1, link: "#Membership", text: "Membership to GitHub" }, @@ -94,56 +95,59 @@ const RecognitionPage = () => {

diff --git a/src/sections/Community/Member-single/index.js b/src/sections/Community/Member-single/index.js index 9898dc42baa4..43706ee590cb 100644 --- a/src/sections/Community/Member-single/index.js +++ b/src/sections/Community/Member-single/index.js @@ -19,6 +19,9 @@ import imageHubLogo from "../../../assets/images/image-hub/layer5-image-hub.svg" import communityLogo from "../../../assets/images/community/community-green.svg"; import uiuxrLogo from "../../../assets/images/uiuxr/uiuxr.svg"; import writerIcon from "../../../assets/images/writer-program/writer-program-badge.svg"; +import docsLogo from "../../../assets/images/docs/docs.svg"; +import mesheryCatalogLogo from "../../../assets/images/meshery/meshery-catalog.svg"; +import dockerExtensionLogo from "../../../assets/images/docker-extension/docker-extension-meshery-logo.svg"; import Button from "../../../reusecore/Button"; const MemberSingle = ({ frontmatter }) => { @@ -125,6 +128,39 @@ const MemberSingle = ({ frontmatter }) => { )} + {badges.includes("docs") && ( +
  • + + Docs logo + +
    • + )} + {badges.includes("meshery-catalog") && ( +
  • + + Meshery Catalog logo + +
    • + )} + {badges.includes("docker-extension") && ( +
  • + + Docker Extension logo + +
    • + )} {badges.includes("nighthawk") && (
  • diff --git a/src/sections/Home/CloudNativeManagement/index.js b/src/sections/Home/CloudNativeManagement/index.js index 0a013214509e..d36dab8ff061 100644 --- a/src/sections/Home/CloudNativeManagement/index.js +++ b/src/sections/Home/CloudNativeManagement/index.js @@ -63,7 +63,7 @@ const BannerDefault = () => { height="100%" style={{ margin: "auto" }} className="vidHero" - /> + ><> diff --git a/src/sections/Meshmap/Meshmap-design/cytoscape-demo.style.js b/src/sections/Meshmap/Meshmap-design/cytoscape-demo.style.js index 47a00f4eb7ae..52fc48c148a8 100644 --- a/src/sections/Meshmap/Meshmap-design/cytoscape-demo.style.js +++ b/src/sections/Meshmap/Meshmap-design/cytoscape-demo.style.js @@ -4,7 +4,6 @@ const CytoscapeWrapper = styled.div` .simple-react-cytoscape { width: 40vw; height: 50vh; - border-style: dashed; @media only screen and (max-width: 1000px) { height: 40vh; diff --git a/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js b/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js new file mode 100644 index 000000000000..20e11d181471 --- /dev/null +++ b/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js @@ -0,0 +1,183 @@ +import React, { useEffect, useRef } from "react"; +import cytoscape from "cytoscape"; +import coseBilkent from "cytoscape-cose-bilkent"; +import CytoscapeWrapper from "./cytoscape-demo.style"; +import { k8sService, clusterRole, kubePrometheus, argoCD, NGINX } from "./images/cytoNodes"; + +cytoscape.use(coseBilkent); + +const CytoscapeCtx = () => { + const cyRef = useRef(null); + useEffect(() => { + const cy = cytoscape({ + container: cyRef.current, + + elements: { + nodes: [ + { data: { id: "a", parent: "b" }, position: { x: 300, y: 175 } }, + { data: { id: "b" } }, + { data: { id: "c", parent: "b" }, position: { x: 300, y: 85 } }, + { data: { id: "d" } }, + { data: { id: "e" } }, + { data: { id: "f", parent: "e" }, position: { x: 300, y: 175 } }, + { data: { id: "g", parent: "b" }, position: { x: 215, y: 85 } }, + ], + edges: [ + { data: { id: "ad", source: "a", target: "d" } }, + { data: { id: "eb", source: "e", target: "b" } } + + ] + }, + + style: [ + { + selector: "node", + style: { + "text-valign": "bottom", + "text-halign": "center", + "text-background-opacity": "0.7", + "text-background-shape": "round-rectangle", + "text-background-color": "#d2d4d2", + "font-family": "Qanelas Soft, sans-serif", + "font-size": "8px", + "font-weight": "300", + "text-background-padding": "2px", + color: "#000", + "z-index": "2", + "text-margin-y": "7px", + "text-max-width": "50px", + } + }, + { + selector: "node[id=\"a\"]", + style: { + "background-image": clusterRole().svg, + width: clusterRole().width, + shape: "round-rectangle", + "background-color": "#326CE5", + height: clusterRole().height, + "label": "cluster-role", + }, + }, + { + selector: "node[id=\"c\"]", + style: { + "background-image": argoCD().svg, + width: argoCD().width, + "background-color": "#fe733e", + height: argoCD().height, + "padding": "12px", + "label": "application-set", + }, + }, + { + selector: "node[id=\"d\"]", + style: { + "background-image": NGINX().svg, + width: NGINX().width, + "background-color": "#009639", + height: NGINX().height, + "padding": "12px", + "label": "nginx", + }, + }, + { + selector: "node[id=\"f\"]", + style: { + "background-image": k8sService().svg, + width: k8sService().width, + shape: "round-triangle", + "background-color": "#326CE5", + "padding": 3, + "background-fit": "none", + "background-position-y": 9, + height: k8sService().height, + "label": "service", + }, + }, + { + selector: "node[id=\"g\"]", + style: { + "background-image": kubePrometheus().svg, + width: kubePrometheus().width, + height: kubePrometheus().height, + "background-color": "#e75225", + "padding": "12px", + "label": "prometheus", + }, + }, + { + selector: "node[id=\"e\"]", + style: { + "border-width": "2px", + "border-color": "#326CE5", + "border-style": "dashed", + "backgroundColor": "#326CE5", + "label": "namespace", + "background-opacity": "0.5" + } + }, + { + selector: "node[id=\"b\"]", + style: { + "border-width": "2px", + "border-color": "gray", + "height": "30px", + "width": "20x", + "border-style": "solid", + "label": "default", + "backgroundColor": "gray", + "background-opacity": "0.5" + } + }, + { + selector: "edge", + style: { + "font-family": "Qanelas Soft, sans-serif", + "font-size": "6px", + "curve-style": "bezier", + "z-index-compare": "manual", + "z-index": "999", + label: "data(protocol)", + "line-style": "dotted", + "target-arrow-shape": "vee", + "text-events": "yes", + "text-outline-color": "rgb(255,255,255)", + "text-outline-width": "1px", + "text-wrap": "wrap", + width: "1.5px", + "length": "2px" + } + }, + ], + + layout: { + name: "cose-bilkent", + animate: true, + animationDuration: 1000, + animationEasing: "ease-out", + fit: true, + idealEdgeLength: 20, + spacingFactor: 1, + gravityRangeCompound: 1, + gravityCompound: 1, + }, + zoom: 3, + minZoom: 0.3, + maxZoom: 2, + // boundingBox: { x1: 0, y1: 0, w: "40vh", h: "50vh" }, + boxSelectionEnabled: false, + }); + + return () => { + cy.destroy(); + }; + }, []); + return ( + +
    + + ); +}; + +export default CytoscapeCtx; diff --git a/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js b/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js new file mode 100644 index 000000000000..dd3ed0069d3b --- /dev/null +++ b/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js @@ -0,0 +1,98 @@ +export const k8sService = () => { + const size = 60; + const width = size; + const height = size; + + const svg = ` + + + + + + `; + return { + svg: "data:image/svg+xml;base64," + btoa(svg), + width, + height + }; +}; + +export const clusterRole = () => { + const size = 60; + const width = size; + const height = size; + const svg = ` + + + + + + `; + return { + svg: "data:image/svg+xml;base64," + btoa(svg), + width, + height + }; +}; + +export const kubePrometheus = () => { + const size = 60; + const width = size; + const height = size; + const svg = ` `; + return { + svg: "data:image/svg+xml;base64," + btoa(svg), + width, + height + }; +}; + +export const NGINX = () => { + const size = 60; + const width = size; + const height = size; + const svg = ` + + + + + + `; + return { + svg: "data:image/svg+xml;base64," + btoa(svg), + width, + height + }; +}; + +export const argoCD = () => { + const size = 60; + const width = size; + const height = size; + const svg = ` + + `; + return { + svg: "data:image/svg+xml;base64," + btoa(svg), + width, + height + }; +}; diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js index edcacb43fb5c..94be465ecd2a 100644 --- a/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js +++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js @@ -2,6 +2,11 @@ import React from "react"; import styled from "styled-components"; import { ReactComponent as BannerImage } from "./images/banner-image-colorMode.svg"; import { ReactComponent as CytoscapeImg } from "./images/cytoscape-colorMode.svg"; +import CytoscapeDemo from "./cytoscape-demo"; +import CytoscapeCanvas from "./cytoscape-demo"; +import Graph from "./cytoscapeCanvas"; +import CytoscapeComponent from "./cytoscapeCanvas"; +import CytoscapeCtx from "./cytoscapeCanvas"; const DesignBannerWrapper = styled.div` @@ -155,8 +160,7 @@ const MeshmapDesignBanner = () => { {/*

    Drag-and-drop your cloud native infrastructure using a pallete of thousands of versioned Kubernetes components. Say goodbye to YAML configurations.

    */}
    - - {/* */} +
    Experience context-aware design