Create Our APIs page

content/api/Demo_API_Portal_2.md

@@ -0,0 +1,9 @@
+---
+          title: "Demo API Portal 2"
+          link: /platform/hpe-ezmeral-container-platform/home/
+          description: Helps deploy and manage stateful applications on Kubernetes.
+          priority: 4
+          image: '/img/platforms/Aruba.svg'
+          Featured: true
+---
+

content/api/Demo_API_Portal_3.md

@@ -0,0 +1,9 @@
+---
+          title: "Demo API Portal 3"
+          link: /platform/hpe-ezmeral-container-platform/home/
+          description: Helps deploy and manage stateful applications on Kubernetes.
+          priority: 5
+          image: '/img/platforms/Aruba.svg'
+          Featured: true
+---
+

content/api/Demo_API_Portal_4.md

@@ -0,0 +1,9 @@
+---
+          title: "Demo API Portal 4"
+          link: /platform/hpe-ezmeral-container-platform/home/
+          description: Helps deploy and manage stateful applications on Kubernetes.
+          priority: 6
+          image: '/img/platforms/Aruba.svg'
+          Featured: true
+---
+

content/api/HPE_Greenlake_Cloud_Services_API_Portal.md

@@ -0,0 +1,9 @@
+---
+          title: "HPE GreenLake Cloud Services API Portal"
+          link: https://developer.greenlake.hpe.com/
+          description: Integrate with HPE GreenLake Cloud Services today!
+          priority: 1
+          image: '/img/platforms/Greenlake.svg'
+          Featured: true
+---
+

content/api/HPE_Redfish_API_Portal.md

@@ -0,0 +1,9 @@
+---
+          title: "HPE Redfish API Portal"
+          link: https://redfishdocsproto.redoc.ly/
+          description: Manage your datacenter with Redfish® today!
+          priority: 2
+          image: '/img/api/redfish.svg'
+          Featured: true
+---
+

content/api/Quote-to-Cash.md

@@ -0,0 +1,9 @@
+---
+          title: "Quote to Cash API Portal"
+          link: https://hpeqtc.redoc.ly/
+          description: Integrate with HPE’s Quote to Cash Application for Subscriptions and Traditional Sales!
+          priority: 3
+          image: '/img/api/quote_to_cache.svg'
+          Featured: true
+---
+

gatsby-config.js

@@ -170,6 +170,13 @@ module.exports = {
         name: 'contribute',
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        path: `${__dirname}/content/api`,
+        name: 'api',
+      },
+    },
     {
       resolve: 'gatsby-transformer-remark',
       options: {

src/components/Header/index.js

@@ -21,6 +21,7 @@ const TextAlignLeft = styled(Box)`
 function Header() {
   const size = useContext(ResponsiveContext);
   const navLinks = [
+    <ButtonLink key="api" label="Our APIs" to="/api" />,
     <ButtonLink key="os" label="Open Source" to="/opensource" />,
     <DropButton
       label="Our Platforms"

src/pages/api/index.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { graphql } from 'gatsby';
+import { Box, Paragraph } from 'grommet';
+import {
+  OpenSourceCard,
+  Layout,
+  SEO,
+  PageDescription,
+  ResponsiveGrid,
+  SectionHeader,
+} from '../../components';
+import { useSiteMetadata } from '../../hooks/use-site-metadata';
+
+const columns = {
+  small: ['auto'],
+  medium: ['auto', 'auto'],
+  large: ['auto', 'auto', 'auto'],
+  xlarge: ['auto', 'auto', 'auto'],
+};
+
+const rows = {
+  small: ['auto', 'auto', 'auto'],
+  medium: ['auto', 'auto'],
+  large: ['auto'],
+  xlarge: ['auto'],
+};
+
+function ApiPage({ data }) {
+  const projects = data.allMarkdownRemark.edges;
+  const siteMetadata = useSiteMetadata();
+  const siteTitle = siteMetadata.title;
+  return (
+    <Layout title={siteTitle}>
+      <SEO title="Browse APIs" />
+      <PageDescription
+        image="/img/api/ourapis.svg"
+        title="Browse APIs"
+        alignSelf="start"
+        alt="api logo"
+      >
+        <Box gap="small">
+          <Paragraph size="large">
+            Application programming interfaces simplify development by
+            facilitating communications between apps. Use our APIs to develop
+            innovative solutions that run on HPE Platforms.
+          </Paragraph>
+        </Box>
+      </PageDescription>
+      <SectionHeader color="green">
+        <ResponsiveGrid gap="large" rows={rows} columns={columns}>
+          {projects.map(({ node }) => (
+            <OpenSourceCard
+              key={node.id}
+              title={node.frontmatter.title}
+              description={node.frontmatter.description}
+              link={node.frontmatter.link}
+              image={node.frontmatter.image}
+              category={node.frontmatter.category}
+            />
+          ))}
+        </ResponsiveGrid>
+      </SectionHeader>
+    </Layout>
+  );
+}
+ApiPage.propTypes = {
+  data: PropTypes.shape({
+    allMarkdownRemark: PropTypes.shape({
+      edges: PropTypes.arrayOf(
+        PropTypes.shape({
+          node: PropTypes.shape({
+            id: PropTypes.string,
+            frontmatter: PropTypes.shape({
+              title: PropTypes.string.isRequired,
+              category: PropTypes.string.isRequired,
+              description: PropTypes.string.isRequired,
+              image: PropTypes.string,
+              priority: PropTypes.number,
+            }).isRequired,
+            excerpt: PropTypes.string.isRequired,
+            fields: PropTypes.shape({
+              sourceInstanceName: PropTypes.string.isRequired,
+            }),
+          }).isRequired,
+        }).isRequired,
+      ).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+export default ApiPage;
+export const pageQuery = graphql`
+  query {
+    allMarkdownRemark(
+      filter: { fields: { sourceInstanceName: { eq: "api" } } }
+      sort: { order: ASC, fields: [frontmatter___priority] }
+    ) {
+      edges {
+        node {
+          id
+          rawMarkdownBody
+          fields {
+            slug
+            sourceInstanceName
+          }
+          excerpt
+          frontmatter {
+            title
+            description
+            link
+            image
+            priority
+          }
+        }
+      }
+    }
+  }
+`;

static/admin/config.yml

@@ -217,4 +217,21 @@ collections:
         fields:
           - {label: Template Type, name: templateType, widget: string }
           - {label: Template Name, name: templateName, widget: string }
-          - {label: Template Link, name: link, widget: string }
+          - {label: Template Link, name: link, widget: string }
+# API collection: 
+  - name: 'api'
+    label: 'API'
+    folder: 'content/api'
+    extension: 'md'
+    create: true
+    publish: false
+    slug: '{{slug}}'
+    editor:
+      preview: true
+    fields:
+      - { label: 'Title', name: 'title', widget: 'string' }
+      - { label: 'Category', name: 'category', widget: 'string' }
+      - { label: 'Navigation Path', name: 'link', widget: 'string'}
+      - { label: 'Description', name: 'description', widget: 'string'}
+      - { label: 'Priority', name: 'priority', widget: 'number' }
+      - { label: 'Thumbnail Image', name: 'image', widget: 'image', media_folder: '/static/img', public_folder: '/img', hint: 'image to appear on opensource card' }