Skip to content

Commit b5215fd

Browse files
aliosoalioso
authored
Marketing site header (linode#21)
* updating footer structure and content to match new marketing site * removing events display from homepage * removing all events and gql query for events * addressing PR feedback * refactoring menus * styling and markup for reg pages * more styling and api version * styling fix * add missing link * fix post rebase footer * configuring and light styling primary links * configuring and light styling utility links * styling sub menus * more styling sub menus * products menus and megamenu clicks * drop down behavior * adjust padding * add sub menus icons and descriptions * typography updates * submenus refactoring and architecture * wrap products menu and stles adjustments * add community menus * better accessibility * better accessibility * change names * change names * style updates * update styles and markup for consistency * coordinate styles with docs * post rebase fixes * fix rebase regressions * new logo and adjusting padding * adjusting styles to match * mobile menus switches * add mobile menus * mobile menu scripts and styling * adjustements bc of community * header spacing adjustemnt * styles update * mobile menus updates * mobile menus updates part 2 * add all producst links and more styling * add mobile sign up button * cherry picking footer changes from other branch * small chabge to logo wrapper * updating links, removing old links * post rebase fixes * fix dropdowns * update logo * update mobile styles * update mobile styles part 2 * correct height * regression fixes * regression fixes part 2 * adjustments to footer content & styles * adding mobile styles * slight modif to mid breakpoint primary nav * update logo * update home link * update logo again * removing tailwind refs and adding as regular css instead * whoops missing rem * fix @screen ref * style updates * style changes * updaing paths to us prod API * update footer and search links to point to prod * remove target blank from footer menus links
1 parent 22eb004 commit b5215fd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+2555
-1159
lines changed

‎gatsby-config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module.exports = {
22
siteMetadata: {
33
title: `Linode Developer Tools`,
44
description: `Linode API Documentation, Guides, and Tools`,
5-
menuLinks: [
5+
dlcLinks: [
66
{
77
name: "API Documentation",
88
link: "/api/v4"
@@ -95,7 +95,9 @@ module.exports = {
9595
options: {
9696
tailwind: true,
9797
whitelist: [
98+
"mobile",
9899
"mobile-nav",
100+
"sign-up",
99101
"active",
100102
"active-item",
101103
"error",

‎gatsby-node.js

Lines changed: 137 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const JsonSchemaRefParser = require("json-schema-ref-parser");
22
const path = require("path");
33
const _ = require("lodash");
44
const fs = require("fs");
5+
const axios = require("axios");
56

67
const specs = require("./static/api/docs/v4/spec.json");
78
const crypto = require("crypto");
@@ -13,6 +14,7 @@ exports.sourceNodes = async ({ actions }) => {
1314
const { createNode, createTypes } = actions;
1415
const res = await parser.dereference(specs);
1516

17+
// CREATING NODES FROM API SPECS
1618
const typeDefs = `
1719
type MarkdownRemark implements Node {
1820
frontmatter: Frontmatter!
@@ -26,55 +28,146 @@ exports.sourceNodes = async ({ actions }) => {
2628

2729
createTypes(typeDefs);
2830

29-
// map into these results and create nodes
30-
Object.keys(res.paths).map((path, i) => {
31-
// Create your node object
32-
const modes = {
33-
get: "get",
34-
post: "post",
35-
put: "put",
36-
delete: "delete"
37-
};
38-
const pathNode = {
39-
// Required fields
40-
id: `${i}`,
41-
parent: `__SOURCE__`,
42-
internal: {
43-
type: `Paths` // name of the graphQL query --> allRandomUser {}
44-
// contentDigest will be added just after
45-
// but it is required
46-
},
47-
children: [],
31+
const allSpecs =
32+
// map into these results and create nodes
33+
Object.keys(res.paths).map(async (path, i) => {
34+
// Create your node object
35+
const pathNode = {
36+
// Required fields
37+
id: `${i}`,
38+
parent: `__SOURCE__`,
39+
internal: {
40+
type: `Paths` // name of the graphQL query --> allRandomUser {}
41+
},
42+
children: [],
4843

49-
// Other fields that you want to query with graphQl
50-
name: path,
51-
get: res.paths[path].get,
52-
post: res.paths[path].post,
53-
put: res.paths[path].put,
54-
delete: res.paths[path].delete,
55-
responses: res.paths[path].responses,
56-
requestBody: res.paths[path].requestBody,
57-
parameters: res.paths[path].parameters,
58-
tagGroup:
59-
(res.paths[path]["get"] && res.paths[path]["get"].tags) ||
60-
(res.paths[path]["put"] && res.paths[path]["put"].tags) ||
61-
(res.paths[path]["post"] && res.paths[path]["post"].tags) ||
62-
(res.paths[path]["delete"] && res.paths[path]["delete"].tags)
63-
};
44+
// Other fields that you want to query with graphQl
45+
name: path,
46+
get: res.paths[path].get,
47+
post: res.paths[path].post,
48+
put: res.paths[path].put,
49+
delete: res.paths[path].delete,
50+
responses: res.paths[path].responses,
51+
requestBody: res.paths[path].requestBody,
52+
parameters: res.paths[path].parameters,
53+
tagGroup:
54+
(res.paths[path]["get"] && res.paths[path]["get"].tags) ||
55+
(res.paths[path]["put"] && res.paths[path]["put"].tags) ||
56+
(res.paths[path]["post"] && res.paths[path]["post"].tags) ||
57+
(res.paths[path]["delete"] && res.paths[path]["delete"].tags)
58+
};
6459

65-
// Get content digest of node. (Required field)
66-
const contentDigest = crypto
67-
.createHash(`md5`)
68-
.update(JSON.stringify(pathNode))
69-
.digest(`hex`);
70-
// add it to userNode
71-
pathNode.internal.contentDigest = contentDigest;
60+
// Get content digest of node. (Required field)
61+
const contentDigest = crypto
62+
.createHash(`md5`)
63+
.update(JSON.stringify(pathNode))
64+
.digest(`hex`);
65+
// add it to userNode
66+
pathNode.internal.contentDigest = contentDigest;
7267

73-
// Create node with the gatsby createNode() API
74-
createNode(pathNode);
68+
// Create node with the gatsby createNode() API
69+
createNode(pathNode);
70+
});
71+
72+
const baseUrl =
73+
"https://linode.com/wp-json/menus/v1/menus";
74+
75+
// CREATING MENU NODES FROM WP API
76+
const wpMenus = [
77+
{
78+
path: `${baseUrl}/header-utility`,
79+
name: "HeaderUtility"
80+
},
81+
{
82+
path: `${baseUrl}/header-primary`,
83+
name: "HeaderPrimary"
84+
},
85+
{
86+
path: `${baseUrl}/submenu-why-linode-primary`,
87+
name: "WhyPrimary"
88+
},
89+
{
90+
path: `${baseUrl}/submenu-why-linode-services`,
91+
name: "WhyServices"
92+
},
93+
{
94+
path: `${baseUrl}/submenu-products-featured`,
95+
name: "ProductsFeatured"
96+
},
97+
{
98+
path: `${baseUrl}/submenu-products-compute`,
99+
name: "ProductsCompute"
100+
},
101+
{
102+
path: `${baseUrl}/submenu-products-storage`,
103+
name: "ProductsStorage"
104+
},
105+
{
106+
path: `${baseUrl}/submenu-products-services`,
107+
name: "ProductsServices"
108+
},
109+
{
110+
path: `${baseUrl}/submenu-products-networking`,
111+
name: "ProductsNetworking"
112+
},
113+
{
114+
path: `${baseUrl}/submenu-products-developer-tools`,
115+
name: "ProductsDevTools"
116+
},
117+
{
118+
path: `${baseUrl}/submenu-community-primary`,
119+
name: "CommunityPrimary"
120+
},
121+
{
122+
path: `${baseUrl}/submenu-community-secondary`,
123+
name: "CommunityServices"
124+
},
125+
{
126+
path: `${baseUrl}/submenu-mobile-primary`,
127+
name: "PrimaryMobile"
128+
},
129+
{
130+
path: `${baseUrl}/submenu-mobile-utility`,
131+
name: "UtilityMobile"
132+
}
133+
];
134+
135+
const allMenus = wpMenus.map(async menu => {
136+
const endpoint = () => axios.get(menu.path);
137+
// await for results
138+
const list = await endpoint();
139+
140+
list.data.items.map((menuItem, i) => {
141+
// Create your node object
142+
const itemNode = {
143+
// Required fields
144+
id: `${i}`,
145+
parent: `__SOURCE__`,
146+
internal: {
147+
type: menu.name
148+
},
149+
children: [],
150+
title: menuItem.title,
151+
url: menuItem.url,
152+
switch_on: menuItem.switch_on ? menuItem.switch_on : undefined,
153+
description: menuItem.description ? menuItem.description : undefined,
154+
icon: menuItem.icon ? menuItem.icon : undefined
155+
};
156+
157+
// Get content digest of node. (Required field)
158+
const contentDigest = crypto
159+
.createHash(`md5`)
160+
.update(JSON.stringify(itemNode))
161+
.digest(`hex`);
162+
// add it to userNod e
163+
itemNode.internal.contentDigest = contentDigest;
164+
165+
// Create node with the gatsby createNode() API
166+
return createNode(itemNode);
167+
});
75168
});
76169

77-
return;
170+
return Promise.all(allMenus, allSpecs);
78171
};
79172

80173
exports.createPages = async ({ actions, graphql }) => {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"author": "Alban Bailly <[email protected]>",
77
"dependencies": {
88
"@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.2.1",
9-
"axios": "^0.18.0",
9+
"axios": "^0.19.0",
1010
"crypto": "^1.0.1",
1111
"gatsby": "^2.9.2",
1212
"gatsby-cli": "^2.7.50",

‎postcss.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const autoprefixer = require("autoprefixer");
55

66
class TailwindExtractor {
77
static extract(content) {
8-
return content.match(/[A-z0-9-:\/]+/g) || [];
8+
return content.match(/[A-z0-9-__:\/]+/g) || [];
99
}
1010
}
1111

‎src/components/2_molecules/DLCMenu.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from "react";
2+
import { StaticQuery, graphql, Link } from "gatsby";
3+
4+
const isPartiallyActive = ({ isPartiallyCurrent }) =>
5+
isPartiallyCurrent
6+
? {
7+
className:
8+
"dlc-nav__link text-BaseNavGrey hover:text-white relative active mx-4"
9+
}
10+
: null;
11+
12+
const DLCMenu = ({ data }) => {
13+
const { dlcLinks } = data.site.siteMetadata;
14+
return (
15+
<>
16+
<nav
17+
id="main-menu"
18+
role="menu"
19+
className="dlc-nav bg-white"
20+
aria-expanded="false"
21+
>
22+
<div className="max-w-3xl mx-auto px-4 py-4">
23+
{dlcLinks.map(link => (
24+
<Link
25+
key={link.name}
26+
to={link.link}
27+
className="dlc-nav__link relative mx-4"
28+
role="menuitem"
29+
activeClassName="active"
30+
getProps={link === "/" ? undefined : isPartiallyActive}
31+
>
32+
{link.name}
33+
</Link>
34+
))}
35+
</div>
36+
</nav>
37+
</>
38+
);
39+
};
40+
41+
export default props => (
42+
<StaticQuery
43+
query={graphql`
44+
query HeaderMenus {
45+
site {
46+
siteMetadata {
47+
dlcLinks {
48+
name
49+
link
50+
}
51+
}
52+
}
53+
}
54+
`}
55+
render={data => <DLCMenu data={data} {...props} />}
56+
/>
57+
);

‎src/components/2_molecules/menu.js

Lines changed: 0 additions & 72 deletions
This file was deleted.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
3+
const Col = props => (
4+
<div className="nav__wrapper">
5+
<ul
6+
role="menu"
7+
className={`
8+
sub-menu__item
9+
sub-menu__item--reg
10+
${props.name}-nav
11+
`}
12+
aria-expanded="false"
13+
>
14+
<h6 className="sub-menu__header">{props.header}</h6>
15+
{props.children}
16+
</ul>
17+
</div>
18+
);
19+
20+
export default Col;

0 commit comments

Comments
 (0)