From e535fd7706ed390b31299ec4140a2705f73824fc Mon Sep 17 00:00:00 2001 From: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com> Date: Sun, 28 Jan 2024 22:50:03 +0530 Subject: [PATCH 1/3] initialise-use-cases-collections Signed-off-by: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com> --- gatsby-config.js | 7 + .../aws-diagramming/aws-diagramming.mdx | 7 + .../use-cases/aws-diagramming/aws-light.svg | 292 ++++++++++++++++ .../use-cases/aws-diagramming/aws.svg | 292 ++++++++++++++++ .../gcp-diagramming/gcp-diagram-dark.svg | 314 ++++++++++++++++++ .../gcp-diagramming/gcp-diagram-light.svg | 314 ++++++++++++++++++ .../gcp-diagramming/gcp-diagramming.mdx | 7 + .../kubernetes-diagramming.mdx | 8 + .../kubernetes-light.svg | 281 ++++++++++++++++ .../kubernetes-diagramming/kubernetes.svg | 281 ++++++++++++++++ 10 files changed, 1803 insertions(+) create mode 100644 src/collections/use-cases/aws-diagramming/aws-diagramming.mdx create mode 100644 src/collections/use-cases/aws-diagramming/aws-light.svg create mode 100644 src/collections/use-cases/aws-diagramming/aws.svg create mode 100644 src/collections/use-cases/gcp-diagramming/gcp-diagram-dark.svg create mode 100644 src/collections/use-cases/gcp-diagramming/gcp-diagram-light.svg create mode 100644 src/collections/use-cases/gcp-diagramming/gcp-diagramming.mdx create mode 100644 src/collections/use-cases/kubernetes-diagramming/kubernetes-diagramming.mdx create mode 100644 src/collections/use-cases/kubernetes-diagramming/kubernetes-light.svg create mode 100644 src/collections/use-cases/kubernetes-diagramming/kubernetes.svg diff --git a/gatsby-config.js b/gatsby-config.js index d5e6823661b2..58ab065b017b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -506,6 +506,13 @@ module.exports = { name: "integrations", }, }, + { + resolve: "gatsby-source-filesystem", + options: { + path: `${__dirname}/src/collections/use-cases`, + name: "use-cases", + }, + }, { resolve: "gatsby-source-filesystem", options: { diff --git a/src/collections/use-cases/aws-diagramming/aws-diagramming.mdx b/src/collections/use-cases/aws-diagramming/aws-diagramming.mdx new file mode 100644 index 000000000000..74548971318a --- /dev/null +++ b/src/collections/use-cases/aws-diagramming/aws-diagramming.mdx @@ -0,0 +1,7 @@ +--- +title: AWS orchestration and architecture diagramming +redirectLink: /cloud-native-management/generate-aws-architecture-diagram +darkimgsrc: ./aws.svg +lightimgsrc: ./aws-light.svg +category: supportedplatform +--- diff --git a/src/collections/use-cases/aws-diagramming/aws-light.svg b/src/collections/use-cases/aws-diagramming/aws-light.svg new file mode 100644 index 000000000000..5338a4a46d10 --- /dev/null +++ b/src/collections/use-cases/aws-diagramming/aws-light.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/collections/use-cases/aws-diagramming/aws.svg b/src/collections/use-cases/aws-diagramming/aws.svg new file mode 100644 index 000000000000..748975ea4421 --- /dev/null +++ b/src/collections/use-cases/aws-diagramming/aws.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/collections/use-cases/gcp-diagramming/gcp-diagram-dark.svg b/src/collections/use-cases/gcp-diagramming/gcp-diagram-dark.svg new file mode 100644 index 000000000000..fcdd2b0b0f26 --- /dev/null +++ b/src/collections/use-cases/gcp-diagramming/gcp-diagram-dark.svg @@ -0,0 +1,314 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/collections/use-cases/gcp-diagramming/gcp-diagram-light.svg b/src/collections/use-cases/gcp-diagramming/gcp-diagram-light.svg new file mode 100644 index 000000000000..e6bfe521b712 --- /dev/null +++ b/src/collections/use-cases/gcp-diagramming/gcp-diagram-light.svg @@ -0,0 +1,314 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/collections/use-cases/gcp-diagramming/gcp-diagramming.mdx b/src/collections/use-cases/gcp-diagramming/gcp-diagramming.mdx new file mode 100644 index 000000000000..c4518fd19008 --- /dev/null +++ b/src/collections/use-cases/gcp-diagramming/gcp-diagramming.mdx @@ -0,0 +1,7 @@ +--- +title: GCP orchestration and architecture diagramming +redirectLink: /cloud-native-management/generate-gcp-architecture-diagram +darkimgsrc: ./gcp-diagram-dark.svg +lightimgsrc: ./gcp-diagram-light.svg +category: supportedplatform +--- \ No newline at end of file diff --git a/src/collections/use-cases/kubernetes-diagramming/kubernetes-diagramming.mdx b/src/collections/use-cases/kubernetes-diagramming/kubernetes-diagramming.mdx new file mode 100644 index 000000000000..15701fff5ee4 --- /dev/null +++ b/src/collections/use-cases/kubernetes-diagramming/kubernetes-diagramming.mdx @@ -0,0 +1,8 @@ +--- +title: Kubernetes orchestration and architecture diagramming +redirectLink: /cloud-native-management/generate-kubernetes-architecture-diagram +darkimgsrc: ./kubernetes.svg +lightimgsrc: ./kubernetes-light.svg +category: supportedplatform +--- + diff --git a/src/collections/use-cases/kubernetes-diagramming/kubernetes-light.svg b/src/collections/use-cases/kubernetes-diagramming/kubernetes-light.svg new file mode 100644 index 000000000000..1583d47b2963 --- /dev/null +++ b/src/collections/use-cases/kubernetes-diagramming/kubernetes-light.svg @@ -0,0 +1,281 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/collections/use-cases/kubernetes-diagramming/kubernetes.svg b/src/collections/use-cases/kubernetes-diagramming/kubernetes.svg new file mode 100644 index 000000000000..00aa05230263 --- /dev/null +++ b/src/collections/use-cases/kubernetes-diagramming/kubernetes.svg @@ -0,0 +1,281 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 5ce401055f0097598cb548185a9d82dd33d0382e Mon Sep 17 00:00:00 2001 From: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com> Date: Sun, 28 Jan 2024 22:53:54 +0530 Subject: [PATCH 2/3] remove-hardcoded-data-from-sections Signed-off-by: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com> --- src/sections/AWS-Diagram/diagram.js | 20 +------------ src/sections/ArchitectureDiagram/index.js | 30 +------------------ src/sections/GCP-Diagram/diagram.js | 22 ++------------ src/sections/Kubernetes-Diagram/diagram.js | 20 +------------ src/sections/OrchestrationManagement/index.js | 23 ++------------ 5 files changed, 7 insertions(+), 108 deletions(-) diff --git a/src/sections/AWS-Diagram/diagram.js b/src/sections/AWS-Diagram/diagram.js index 7f65c9fe9b4a..edd2462bafba 100644 --- a/src/sections/AWS-Diagram/diagram.js +++ b/src/sections/AWS-Diagram/diagram.js @@ -4,10 +4,6 @@ import { Container, Row, Col } from "../../reusecore/Layout"; import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; import TemplateDark from "../../assets/images/AWS-Diagram/templates-dark.svg"; import RelatedPicks from "../../components/RelatedPicks"; -import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg"; -import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg"; -import KubernetesDark from "../Kubernetes-Diagram/images/kubernetes.svg"; -import KubernetesLight from "../Kubernetes-Diagram/images/kubernetes-light.svg"; import ConfigGIF from "./images/config.gif"; import DeployGIF from "./images/deploy.gif"; import DragDropGIF from "./images/drag-drop.gif"; @@ -143,20 +139,6 @@ const DiagramWrapper = styled.div` const Aws = () => { const { isDark } = useStyledDarkMode(); - const content = [ - { - id: 1, - title: "GCP orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram", - imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight, - }, - { - id: 2, - title: "K8s orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-kubernetes-architecture-diagram", - imgSrc: isDark ? KubernetesDark : KubernetesLight, - } - ]; return ( @@ -228,7 +210,7 @@ const Aws = () => { Learn more → - + ); diff --git a/src/sections/ArchitectureDiagram/index.js b/src/sections/ArchitectureDiagram/index.js index ad06aa4dfb5f..e65560b67022 100644 --- a/src/sections/ArchitectureDiagram/index.js +++ b/src/sections/ArchitectureDiagram/index.js @@ -11,13 +11,6 @@ import optimizedGIF from "./images/optimized.gif"; import customizationGIF from "./images/customization.gif"; import shapesAndTemplatesGIF from "./images/shapes-and-templates.gif"; import RelatedPicks from "../../components/RelatedPicks"; -import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg"; -import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg"; -import AWSDiagramDark from "../Home/FeaturesContainer/images/aws.svg"; -import AWSDiagramLight from "../Home/FeaturesContainer/images/aws-light.svg"; -import KubernetesDark from "../Kubernetes-Diagram/images/kubernetes.svg"; -import KubernetesLight from "../Kubernetes-Diagram/images/kubernetes-light.svg"; -import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; let data = { heading: "Design Architecture Diagram Online", sub_heading: "Effortlessly create software architectures, application architectures and system architectures in minutes.", @@ -50,27 +43,6 @@ let card_data = [ const ArchitectureDiagram = () => { - const { isDark } = useStyledDarkMode(); - const content = [ - { - id: 1, - title: "GCP orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram", - imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight, - }, - { - id: 2, - title: "AWS orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-aws-architecture-diagram", - imgSrc: isDark ? AWSDiagramDark : AWSDiagramLight, - }, - { - id: 3, - title: "K8s orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-kubernetes-architecture-diagram", - imgSrc: isDark ? KubernetesDark : KubernetesLight, - } - ]; return ( @@ -95,7 +67,7 @@ const ArchitectureDiagram = () => { - + diff --git a/src/sections/GCP-Diagram/diagram.js b/src/sections/GCP-Diagram/diagram.js index 6162cc79b2d8..5e4a01714c40 100644 --- a/src/sections/GCP-Diagram/diagram.js +++ b/src/sections/GCP-Diagram/diagram.js @@ -5,10 +5,6 @@ import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; // import GCPIconsDark from "./images/gcp-icons-dark.svg"; import GCPCatalogDark from "./images/gcp-catalog-dark.svg"; import RelatedPicks from "../../components/RelatedPicks"; -import AWSDiagramDark from "../Home/FeaturesContainer/images/aws.svg"; -import AWSDiagramLight from "../Home/FeaturesContainer/images/aws-light.svg"; -import KubernetesDark from "../Kubernetes-Diagram/images/kubernetes.svg"; -import KubernetesLight from "../Kubernetes-Diagram/images/kubernetes-light.svg"; // import DeployGIF from "./images/gcp-deploy.gif"; import DragNDropGIF from "./images/gcp-drag-drop.gif"; import IconsLibraryGIF from "./images/gcp-icon-library.gif"; @@ -134,21 +130,7 @@ const DiagramWrapper = styled.div` const Gcp = () => { - const { isDark } = useStyledDarkMode(); - const content = [ - { - id: 1, - title: "AWS orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-aws-architecture-diagram", - imgSrc: isDark ? AWSDiagramDark : AWSDiagramLight, - }, - { - id: 2, - title: "K8s orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-kubernetes-architecture-diagram", - imgSrc: isDark ? KubernetesDark : KubernetesLight, - } - ]; + return ( @@ -263,7 +245,7 @@ const Gcp = () => { */} - + ); diff --git a/src/sections/Kubernetes-Diagram/diagram.js b/src/sections/Kubernetes-Diagram/diagram.js index e6179eda4938..5763227e0235 100644 --- a/src/sections/Kubernetes-Diagram/diagram.js +++ b/src/sections/Kubernetes-Diagram/diagram.js @@ -4,10 +4,6 @@ import { Container, Row, Col } from "../../reusecore/Layout"; import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; import KubernetesCatalogDark from "./images/kubernetes-catalog-dark.svg"; import RelatedPicks from "../../components/RelatedPicks"; -import AWSDiagramDark from "../Home/FeaturesContainer/images/aws.svg"; -import AWSDiagramLight from "../Home/FeaturesContainer/images/aws-light.svg"; -import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg"; -import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg"; import ConfigGIF from "./images/config.gif"; import DeployGIF from "./images/deploy.gif"; import DragDropGIF from "./images/drag-drop.gif"; @@ -143,20 +139,6 @@ const DiagramWrapper = styled.div` const Kubernetes = () => { const { isDark } = useStyledDarkMode(); - const content = [ - { - id: 1, - title: "AWS orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-aws-architecture-diagram", - imgSrc: isDark ? AWSDiagramDark : AWSDiagramLight, - }, - { - id: 2, - title: "GCP orchestration and architecture diagramming", - redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram", - imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight, - } - ]; return ( @@ -227,7 +209,7 @@ const Kubernetes = () => { Learn more → - + ); diff --git a/src/sections/OrchestrationManagement/index.js b/src/sections/OrchestrationManagement/index.js index d2e3b8814e85..b34c75b687c9 100644 --- a/src/sections/OrchestrationManagement/index.js +++ b/src/sections/OrchestrationManagement/index.js @@ -46,26 +46,7 @@ const Orchestration = () => { image: isDark ? OrchestrationImgDark : OrchestrationImgLight }; - const content = [ - { - id: 1, - title: "AWS Orchestration and diagramming", - redirectLink: "/cloud-native-management/generate-aws-architecture-diagram", - imgSrc: isDark ? OrchestrationImgDark : OrchestrationImgLight, - }, - { - id: 2, - title: "GCP Orchestration and diagramming", - redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram", - imgSrc: isDark ? OrchestrationImgDark : OrchestrationImgLight, - }, - { - id: 3, - title: "K8s Orchestration and diagramming", - redirectLink: "/cloud-native-management/generate-kubernetes-architecture-diagram", - imgSrc: isDark ? OrchestrationImgDark : OrchestrationImgLight, - } - ]; + return ( @@ -82,7 +63,7 @@ const Orchestration = () => { - + From 577da3cb122e0e0951df5857c5826377bb6a3f1c Mon Sep 17 00:00:00 2001 From: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com> Date: Sun, 28 Jan 2024 22:59:05 +0530 Subject: [PATCH 3/3] enhance-component-to-dynamically-query-data-from-collections Signed-off-by: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com> --- .../use-cases/commenting/index.mdx | 8 ++++ .../use-cases/whiteboarding/index.mdx | 8 ++++ src/components/RelatedPicks/index.js | 44 +++++++++++++++++-- 3 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 src/collections/use-cases/commenting/index.mdx create mode 100644 src/collections/use-cases/whiteboarding/index.mdx diff --git a/src/collections/use-cases/commenting/index.mdx b/src/collections/use-cases/commenting/index.mdx new file mode 100644 index 000000000000..3b4a1b6388d5 --- /dev/null +++ b/src/collections/use-cases/commenting/index.mdx @@ -0,0 +1,8 @@ +--- +title: Brainstorm with commenting +abstract: "MeshMap's Designer Mode offers a powerful collaboration feature through comments." +thumbnail: ../../../assets/images/comments/comment.svg +eurl: https://layer5.io/cloud-native-management/meshmap/collaborate/peer-reviews +category: usecase +status: delivered +--- \ No newline at end of file diff --git a/src/collections/use-cases/whiteboarding/index.mdx b/src/collections/use-cases/whiteboarding/index.mdx new file mode 100644 index 000000000000..5fc7527fca5b --- /dev/null +++ b/src/collections/use-cases/whiteboarding/index.mdx @@ -0,0 +1,8 @@ +--- +title: Whiteboarding +abstract: "The Whiteboardingg and Freestyle Drawing feature introduces versatile drawing capabilities within MeshMap" +thumbnail: ../../../assets/images/whiteboard/whiteboard.svg +eurl: https://layer5.io/architecture-diagram/design-architecture-diagramm +category: usecase +status: delivered +--- \ No newline at end of file diff --git a/src/components/RelatedPicks/index.js b/src/components/RelatedPicks/index.js index 068788b759ce..ce4f0e644fe4 100644 --- a/src/components/RelatedPicks/index.js +++ b/src/components/RelatedPicks/index.js @@ -1,5 +1,7 @@ import React from "react"; +import { graphql, useStaticQuery } from "gatsby"; import { Container, Wrapper, CardWrapper, CardImageContainer, Image, CardTitle } from "./style"; +import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; import { Link } from "gatsby"; @@ -18,7 +20,39 @@ const Card = ({ title, imgSrc, redirectLink }) => { ); }; -const RelatedPicks = ({ content }) => { +const RelatedPicks = ({ heading }) => { + const { isDark } = useStyledDarkMode(); + + const data = useStaticQuery( + graphql `query allUseCases { + allMdx( + filter: {fields: {collection: {eq: "use-cases"}}, frontmatter: {category: {eq: "supportedplatform"}}} + ) { + nodes { + id + frontmatter { + title + redirectLink + darkimgsrc { + childImageSharp { + gatsbyImageData(layout: FULL_WIDTH) + } + extension + publicURL + } + lightimgsrc { + childImageSharp { + gatsbyImageData(layout: FULL_WIDTH) + } + extension + publicURL + } + category + } + } + } + }` + ); return ( <> @@ -26,9 +60,11 @@ const RelatedPicks = ({ content }) => {

Other Supported Platforms

{ - content.map(item => ( - - )) + data.allMdx.nodes + .filter(item => item.frontmatter.title.split(" ")[0].toLowerCase() !== heading) + .map(item => ( + + )) }