dynamically-list-the-supported-platforms

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: {

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
+---

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
+---

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
+---

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
+---
+

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
+---

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,17 +20,51 @@ 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 (
     <>
       <Container>
         <h2>Other Supported Platforms</h2>
         <Wrapper>
           {
-            content.map(item => (
-              <Card key={item.id} title={item.title} imgSrc={item.imgSrc} redirectLink={item.redirectLink}/>
-            ))
+            data.allMdx.nodes
+              .filter(item => item.frontmatter.title.split(" ")[0].toLowerCase() !== heading)
+              .map(item => (
+                <Card key={item.id} title={item.frontmatter.title} imgSrc={ isDark ? item.frontmatter.darkimgsrc.publicURL : item.frontmatter.lightimgsrc.publicURL } redirectLink={item.frontmatter.redirectLink}/>
+              ))
           }
         </Wrapper>
       </Container>

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 (
     <DiagramWrapper>
@@ -228,7 +210,7 @@ const Aws = () => {
             <Link className="link" href="/cloud-native-management/catalog">Learn more &rarr;</Link>
           </Col>
         </Row>
-        <RelatedPicks content={content} />
+        <RelatedPicks heading="aws" />
       </Container>
     </DiagramWrapper>
   );

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 (
     <WhiteboardWrapper>
       <FeatureHero data={data} />
@@ -95,7 +67,7 @@ const ArchitectureDiagram = () => {
         </div>
       </Container>
 
-      <RelatedPicks content={content} />
+      <RelatedPicks heading="design" />
       <SeeYou />
       <Partners />
     </WhiteboardWrapper>

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 (
     <DiagramWrapper>
       <Container className="diagram-container">
@@ -263,7 +245,7 @@ const Gcp = () => {
             </div>
           </Col>
         </Row> */}
-        <RelatedPicks content={content} />
+        <RelatedPicks heading="gcp" />
       </Container>
     </DiagramWrapper>
   );

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 (
     <DiagramWrapper>
@@ -227,7 +209,7 @@ const Kubernetes = () => {
             <Link className="link" href="/cloud-native-management/catalog">Learn more &rarr;</Link>
           </Col>
         </Row>
-        <RelatedPicks content={content} />
+        <RelatedPicks heading="kubernetes" />
       </Container>
     </DiagramWrapper>
   );

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 (
     <OrchestrationWrapper>
       <FeatureHero data={data} />
@@ -82,7 +63,7 @@ const Orchestration = () => {
           </div>
         </div>
       </Container>
-      <RelatedPicks content={content}/>
+      <RelatedPicks heading="self" />
       <Partners />
       <SeeYou />
     </OrchestrationWrapper>