Merge pull request #133 from thisisobate/uche/training-page

Feat: Add new training page

content/trainings/LinuxFoundation/LFX.mdx

@@ -0,0 +1,9 @@
+---
+title: Certified GitOps Associate Certification (CGOA)
+description: "Become a professional by getting certified in GitOps"
+thumbnail: LFX-Gitops-certification-1.0.png
+site: https://training.linuxfoundation.org/certification/certified-gitops-associate-cgoa/
+---
+
+{/* Note: To generate "thumbnail_url", visit https://embed.ly/docs/explore/extract
+  and enter the link to the resource. Once you do that, select any thumbnail url of choice to use and download.*/}

content/trainings/codefresh-gitops-at-scale/gitops-at-scale.mdx

@@ -0,0 +1,9 @@
+---
+title: GitOps At Scale course by Codefresh
+description: "Become a professional by getting certified in GitOps"
+thumbnail: gitops-at-scale.png
+site: https://learning.codefresh.io/course/gitops-scale
+---
+
+{/* Note: To generate "thumbnail_url", visit https://embed.ly/docs/explore/extract
+  and enter the link to the resource. Once you do that, select any thumbnail url of choice to use and download.*/}

content/trainings/codefresh-gitops-fundamentals/codefresh.mdx

@@ -0,0 +1,9 @@
+---
+title: GitOps Fundamentals course by Codefresh
+description: "Become a professional by getting certified in GitOps"
+thumbnail: codefresh-gitops-fundamental.png
+site: https://learning.codefresh.io/course/gitops-fundamentals
+---
+
+{/* Note: To generate "thumbnail_url", visit https://embed.ly/docs/explore/extract
+  and enter the link to the resource. Once you do that, select any thumbnail url of choice to use and download.*/}

gatsby-config.js

@@ -21,6 +21,10 @@ module.exports = {
         title: "Community",
         url: "/community",
       },
+      {
+        title: "Training",
+        url: "/training",
+      },
       {
         title: "Get Involved",
         url: "/get-involved",
@@ -103,6 +107,14 @@ module.exports = {
       },
       __key: "principles",
     },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "trainings",
+        path: "./content/trainings",
+      },
+      __key: "trainings",
+    },
     {
       resolve: "gatsby-source-filesystem",
       options: {

src/pages/training.js

@@ -0,0 +1,72 @@
+import * as React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Layout from "../components/layout"
+import Seo from "../components/seo"
+import thumbnail from "../images/thumbnail-default.png"
+import { Container } from "../components/ui/grid"
+import { Grid } from "../components/ui/grid"
+import CardPost from "../components/ui/card-post"
+
+export default function TrainingPage({ location }) {
+  const query = useStaticQuery(
+    graphql`
+      query {
+        allMdx(
+          filter: { fileAbsolutePath: { regex: "/(content/trainings)/" } }
+          sort: { order: ASC, fields: frontmatter___title }
+          limit: 6
+        ) {
+          edges {
+            node {
+              frontmatter {
+                title
+                site
+                description
+                thumbnail {
+                  childImageSharp {
+                    gatsbyImageData(
+                      width: 400
+                      placeholder: BLURRED
+                      formats: [AUTO, WEBP, AVIF]
+                    )
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    `
+  )
+  return (
+    <Layout location={location}>
+      <Seo
+        title="training and certification"
+        description="Become a professional by getting certified in GitOps"
+        url={location.href}
+        image={thumbnail}
+      />
+      <Container className="pt-28 lg:pt-48">
+        <h1 className="mb-8 lg:mb-12 text-center lg:text-left">
+          Training & Certification
+        </h1>
+        <Grid md={2} lg={3}>
+          {query.allMdx.edges.map((item, index) => {
+            return (
+              <CardPost
+                key={index}
+                title={item.node.frontmatter.title}
+                date={item.node.frontmatter.date}
+                to={item.node.frontmatter.site}
+                img={
+                  item.node.frontmatter.thumbnail?.childImageSharp
+                    .gatsbyImageData
+                }
+              />
+            )
+          })}
+        </Grid>
+      </Container>
+    </Layout>
+  )
+}