fetch-data-using-query

Signed-off-by: vishalvivekm <110674407+vishalvivekm@users.noreply.github.com>
layer5io · Jan 28, 2024 · 6aa5971 · 6aa5971
1 parent f111531
commit 6aa5971
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 60 deletions.
diff --git 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/commenting/index.mdx 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
+---
diff --git a/src/collections/use-cases/whiteboarding/index.mdx 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
+---
diff --git a/src/sections/UseCases/index.js b/src/sections/UseCases/index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
 import UseCasesWrapper from "./usecases.style";
 import { Container, Row, Col } from "../../reusecore/Layout";
 import WorkshopCard from "../../components/Workshop-Card";
@@ -8,69 +9,39 @@ import { FaRegWindowMaximize } from "@react-icons/all-files/fa/FaRegWindowMaximi
 // import use_case_1 from "../../assets/images/comments/use-case-1.png";
 // import use_case_2 from "../../assets/images/comments/use-case-2.png";
 
-const CARD_DATA = [
-  {
-    id: 1,
-    frontmatter: {
-      title: "Whiteboarding",
-      abstract: "The Whiteboarding and Freestyle Drawing feature introduces versatile drawing capabilities within MeshMap.",
-      thumbnail: {
-        childImageSharp: false,
-        extension: "png",
-        publicURL: "https://layer5.io/static/whiteboard-1e9f33293030bc98a01945af9740863f.png",
-      },
-      status: "delivered",
-    },
-    url: "https://layer5.io/whiteboard",
-  },
-  {
-    id: 2,
-    frontmatter: {
-      title: "Brainstorm with commenting",
-      abstract: "MeshMap's Designer Mode offers a powerful collaboration feature through comments.",
-      thumbnail: {
-        childImageSharp: false,
-        extension: "png",
-        publicURL: "https://layer5.io/static/comment.b77548b0.svg",
-      },
-      status: "delivered",
-    },
-    url: "https://layer5.io/comments",
-  },
-  {
-    id: 3,
-    frontmatter: {
-      title: "Whiteboarding",
-      abstract: "The Whiteboarding and Freestyle Drawing feature introduces versatile drawing capabilities within MeshMap.",
-      thumbnail: {
-        childImageSharp: false,
-        extension: "png",
-        publicURL: "https://layer5.io/static/whiteboard-1e9f33293030bc98a01945af9740863f.png",
-      },
-      status: "delivered",
-    },
-    url: "https://layer5.io/whiteboard",
-  },
-  {
-    id: 4,
-    frontmatter: {
-      title: "Brainstorm with commenting",
-      abstract: "MeshMap's Designer Mode offers a powerful collaboration feature through comments.",
-      thumbnail: {
-        childImageSharp: false,
-        extension: "png",
-        publicURL: "https://layer5.io/static/comment.b77548b0.svg",
-      },
-      status: "delivered",
-    },
-    url: "https://layer5.io/comments",
-  },
-];
 
 const UseCases = () => {
   const content = false;
   const ID = "";
 
+  const data = useStaticQuery(
+    graphql `query allUseCases {
+        allMdx(
+          filter: {fields: {collection: {eq: "use-cases"}}, frontmatter: {category: {eq: "usecase"}}}
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              abstract
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(layout: FULL_WIDTH)
+                }
+                extension
+                publicURL
+              }
+              eurl
+              category
+              status
+            }
+          }
+        }
+      }
+    `
+  );
+
+
   return (
     <UseCasesWrapper>
       <div className="use-cases-title" >
@@ -81,12 +52,12 @@ const UseCases = () => {
       <Container>
         <div className="workshop-grid-wrapper">
           <Row>
-            {CARD_DATA.map(({ id, frontmatter, url }) => (
+            {data.allMdx.nodes.map(({ id, frontmatter }) => (
               <Col {...content && ID === id ? { xs: 12, sm: 12, lg: 12 } : { xs: 12, sm: 6, lg: 4 } } key={id} className="workshop-grid-col">
                 <div className="workshop-grid-card">
                   <WorkshopCard frontmatter={frontmatter} content={content} ID={ID} id={id} />
                   <div className="externalLink">
-                    <a href={url} className="siteLink"><FaRegWindowMaximize style={{ height: "25px", width: "auto" }} /></a>
+                    <a href={frontmatter.eurl} className="siteLink"><FaRegWindowMaximize style={{ height: "25px", width: "auto" }} /></a>
                   </div>
                 </div>
               </Col>
@@ -101,4 +72,5 @@ const UseCases = () => {
   );
 };
 
+
 export default UseCases;