Marketing site header

gatsby-config.js

@@ -2,7 +2,7 @@ module.exports = {
   siteMetadata: {
     title: `Linode Developer Tools`,
     description: `Linode API Documentation, Guides, and Tools`,
-    menuLinks: [
+    dlcLinks: [
       {
         name: "API Documentation",
         link: "/api/v4"
@@ -95,7 +95,9 @@ module.exports = {
       options: {
         tailwind: true,
         whitelist: [
+          "mobile",
           "mobile-nav",
+          "sign-up",
           "active",
           "active-item",
           "error",

gatsby-node.js

@@ -2,6 +2,7 @@ const JsonSchemaRefParser = require("json-schema-ref-parser");
 const path = require("path");
 const _ = require("lodash");
 const fs = require("fs");
+const axios = require("axios");
 
 const specs = require("./static/api/docs/v4/spec.json");
 const crypto = require("crypto");
@@ -13,6 +14,7 @@ exports.sourceNodes = async ({ actions }) => {
   const { createNode, createTypes } = actions;
   const res = await parser.dereference(specs);
 
+  // CREATING NODES FROM API SPECS
   const typeDefs = `
     type MarkdownRemark implements Node {
       frontmatter: Frontmatter!
@@ -26,55 +28,146 @@ exports.sourceNodes = async ({ actions }) => {
 
   createTypes(typeDefs);
 
-  // map into these results and create nodes
-  Object.keys(res.paths).map((path, i) => {
-    // Create your node object
-    const modes = {
-      get: "get",
-      post: "post",
-      put: "put",
-      delete: "delete"
-    };
-    const pathNode = {
-      // Required fields
-      id: `${i}`,
-      parent: `__SOURCE__`,
-      internal: {
-        type: `Paths` // name of the graphQL query --> allRandomUser {}
-        // contentDigest will be added just after
-        // but it is required
-      },
-      children: [],
+  const allSpecs =
+    // map into these results and create nodes
+    Object.keys(res.paths).map(async (path, i) => {
+      // Create your node object
+      const pathNode = {
+        // Required fields
+        id: `${i}`,
+        parent: `__SOURCE__`,
+        internal: {
+          type: `Paths` // name of the graphQL query --> allRandomUser {}
+        },
+        children: [],
 
-      // Other fields that you want to query with graphQl
-      name: path,
-      get: res.paths[path].get,
-      post: res.paths[path].post,
-      put: res.paths[path].put,
-      delete: res.paths[path].delete,
-      responses: res.paths[path].responses,
-      requestBody: res.paths[path].requestBody,
-      parameters: res.paths[path].parameters,
-      tagGroup:
-        (res.paths[path]["get"] && res.paths[path]["get"].tags) ||
-        (res.paths[path]["put"] && res.paths[path]["put"].tags) ||
-        (res.paths[path]["post"] && res.paths[path]["post"].tags) ||
-        (res.paths[path]["delete"] && res.paths[path]["delete"].tags)
-    };
+        // Other fields that you want to query with graphQl
+        name: path,
+        get: res.paths[path].get,
+        post: res.paths[path].post,
+        put: res.paths[path].put,
+        delete: res.paths[path].delete,
+        responses: res.paths[path].responses,
+        requestBody: res.paths[path].requestBody,
+        parameters: res.paths[path].parameters,
+        tagGroup:
+          (res.paths[path]["get"] && res.paths[path]["get"].tags) ||
+          (res.paths[path]["put"] && res.paths[path]["put"].tags) ||
+          (res.paths[path]["post"] && res.paths[path]["post"].tags) ||
+          (res.paths[path]["delete"] && res.paths[path]["delete"].tags)
+      };
 
-    // Get content digest of node. (Required field)
-    const contentDigest = crypto
-      .createHash(`md5`)
-      .update(JSON.stringify(pathNode))
-      .digest(`hex`);
-    // add it to userNode
-    pathNode.internal.contentDigest = contentDigest;
+      // Get content digest of node. (Required field)
+      const contentDigest = crypto
+        .createHash(`md5`)
+        .update(JSON.stringify(pathNode))
+        .digest(`hex`);
+      // add it to userNode
+      pathNode.internal.contentDigest = contentDigest;
 
-    // Create node with the gatsby createNode() API
-    createNode(pathNode);
+      // Create node with the gatsby createNode() API
+      createNode(pathNode);
+    });
+
+  const baseUrl =
+    "https://linode.com/wp-json/menus/v1/menus";
+
+  // CREATING MENU NODES FROM WP API
+  const wpMenus = [
+    {
+      path: `${baseUrl}/header-utility`,
+      name: "HeaderUtility"
+    },
+    {
+      path: `${baseUrl}/header-primary`,
+      name: "HeaderPrimary"
+    },
+    {
+      path: `${baseUrl}/submenu-why-linode-primary`,
+      name: "WhyPrimary"
+    },
+    {
+      path: `${baseUrl}/submenu-why-linode-services`,
+      name: "WhyServices"
+    },
+    {
+      path: `${baseUrl}/submenu-products-featured`,
+      name: "ProductsFeatured"
+    },
+    {
+      path: `${baseUrl}/submenu-products-compute`,
+      name: "ProductsCompute"
+    },
+    {
+      path: `${baseUrl}/submenu-products-storage`,
+      name: "ProductsStorage"
+    },
+    {
+      path: `${baseUrl}/submenu-products-services`,
+      name: "ProductsServices"
+    },
+    {
+      path: `${baseUrl}/submenu-products-networking`,
+      name: "ProductsNetworking"
+    },
+    {
+      path: `${baseUrl}/submenu-products-developer-tools`,
+      name: "ProductsDevTools"
+    },
+    {
+      path: `${baseUrl}/submenu-community-primary`,
+      name: "CommunityPrimary"
+    },
+    {
+      path: `${baseUrl}/submenu-community-secondary`,
+      name: "CommunityServices"
+    },
+    {
+      path: `${baseUrl}/submenu-mobile-primary`,
+      name: "PrimaryMobile"
+    },
+    {
+      path: `${baseUrl}/submenu-mobile-utility`,
+      name: "UtilityMobile"
+    }
+  ];
+
+  const allMenus = wpMenus.map(async menu => {
+    const endpoint = () => axios.get(menu.path);
+    // await for results
+    const list = await endpoint();
+
+    list.data.items.map((menuItem, i) => {
+      // Create your node object
+      const itemNode = {
+        // Required fields
+        id: `${i}`,
+        parent: `__SOURCE__`,
+        internal: {
+          type: menu.name
+        },
+        children: [],
+        title: menuItem.title,
+        url: menuItem.url,
+        switch_on: menuItem.switch_on ? menuItem.switch_on : undefined,
+        description: menuItem.description ? menuItem.description : undefined,
+        icon: menuItem.icon ? menuItem.icon : undefined
+      };
+
+      // Get content digest of node. (Required field)
+      const contentDigest = crypto
+        .createHash(`md5`)
+        .update(JSON.stringify(itemNode))
+        .digest(`hex`);
+      // add it to userNod  e
+      itemNode.internal.contentDigest = contentDigest;
+
+      // Create node with the gatsby createNode() API
+      return createNode(itemNode);
+    });
   });
 
-  return;
+  return Promise.all(allMenus, allSpecs);
 };
 
 exports.createPages = async ({ actions, graphql }) => {

package.json

@@ -6,7 +6,7 @@
   "author": "Alban Bailly <abailly@linode.com>",
   "dependencies": {
     "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.2.1",
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
     "crypto": "^1.0.1",
     "gatsby": "^2.9.2",
     "gatsby-cli": "^2.7.50",

postcss.config.js

@@ -5,7 +5,7 @@ const autoprefixer = require("autoprefixer");
 
 class TailwindExtractor {
   static extract(content) {
-    return content.match(/[A-z0-9-:\/]+/g) || [];
+    return content.match(/[A-z0-9-__:\/]+/g) || [];
   }
 }
 

src/components/2_molecules/DLCMenu.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { StaticQuery, graphql, Link } from "gatsby";
+
+const isPartiallyActive = ({ isPartiallyCurrent }) =>
+  isPartiallyCurrent
+    ? {
+        className:
+          "dlc-nav__link text-BaseNavGrey hover:text-white relative active mx-4"
+      }
+    : null;
+
+const DLCMenu = ({ data }) => {
+  const { dlcLinks } = data.site.siteMetadata;
+  return (
+    <>
+      <nav
+        id="main-menu"
+        role="menu"
+        className="dlc-nav bg-white"
+        aria-expanded="false"
+      >
+        <div className="max-w-3xl mx-auto px-4 py-4">
+          {dlcLinks.map(link => (
+            <Link
+              key={link.name}
+              to={link.link}
+              className="dlc-nav__link relative mx-4"
+              role="menuitem"
+              activeClassName="active"
+              getProps={link === "/" ? undefined : isPartiallyActive}
+            >
+              {link.name}
+            </Link>
+          ))}
+        </div>
+      </nav>
+    </>
+  );
+};
+
+export default props => (
+  <StaticQuery
+    query={graphql`
+      query HeaderMenus {
+        site {
+          siteMetadata {
+            dlcLinks {
+              name
+              link
+            }
+          }
+        }
+      }
+    `}
+    render={data => <DLCMenu data={data} {...props} />}
+  />
+);

src/components/2_molecules/navigation/col.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Col = props => (
+  <div className="nav__wrapper">
+    <ul
+      role="menu"
+      className={`
+            sub-menu__item
+            sub-menu__item--reg
+            ${props.name}-nav
+          `}
+      aria-expanded="false"
+    >
+      <h6 className="sub-menu__header">{props.header}</h6>
+      {props.children}
+    </ul>
+  </div>
+);
+
+export default Col;