Skip to content

Commit 74a30a8

Browse files
bbiggerrbbiggerr
authored
Merge pull request linode#580 from alertmybanjos/header-footer-updates-2022-05-24
Header + Footer Updates - May 24, 2022
2 parents edefd60 + 0fb26a4 commit 74a30a8

File tree

13 files changed

+683
-830
lines changed

13 files changed

+683
-830
lines changed

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v12.20.2

‎gatsby-config.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,12 @@ module.exports = {
9090
resolve: `gatsby-plugin-purgecss`,
9191
options: {
9292
tailwind: true,
93-
whitelistPatternsChildren: [/consent_blackbar/],
93+
whitelistPatternsChildren: [
94+
/consent_blackbar/,
95+
/c-featured/,
96+
/c-notification/,
97+
/o-menu/
98+
],
9499
whitelist: [
95100
"mobile",
96101
"mobile-nav",

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

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,7 @@ const styles = {
77

88
const CommunityFeaturedNav = () => (
99
<div className="o-layout__module">
10-
<h6>Free eBook</h6>
11-
<a
12-
id="c-featured--community"
13-
className="c-featured"
14-
href="https://www.linode.com/content/try-infrastructure-as-code-ebook-series/"
15-
style={styles}
16-
onClick={()=>
17-
Event('Navigation','click','ebook-iac')
18-
}
19-
>
20-
<img
21-
width="632"
22-
height="217"
23-
src="https://www.linode.com/wp-content/uploads/2022/04/IaCeBook-CommunityPg-632x217"
24-
className="c-featured__background"
25-
alt="IAC eBook"
26-
loading="lazy"
27-
srcset="https://www.linode.com/wp-content/uploads/2022/04/IaCeBook-CommunityPg-632x217.jpg 632w, https://www.linode.com/wp-content/uploads/2022/04/IaCeBook-CommunityPg-1064x366.jpg 1064w, https://www.linode.com/wp-content/uploads/2022/04/IaCeBook-CommunityPg-1944x669.jpg 1944w, data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w" sizes="(max-width:991px) 1px, 632px"
28-
/>
29-
<div className="c-featured__text">
30-
<div className="c-featured__headline">
31-
Try IAC by Justin Mitchel
32-
</div>
33-
<div className="c-featured__excerpt">A step-by-step IAC guide for Terraform,<br/> Ansible, Puppet, Chef, and Salt</div>
34-
<span className="c-featured__button">
35-
Download
36-
</span>
37-
</div>
38-
</a>
10+
<div data-featured="community"></div>
3911
</div>
4012
);
4113

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

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,7 @@ const styles = {
88

99
const PricingFeaturedNav = () => (
1010
<div className="o-layout__module">
11-
<h6>Featured</h6>
12-
<a
13-
id="c-featured--pricing"
14-
className="c-featured"
15-
href="https://www.linode.com/cloud-pricing-calculator/"
16-
style={styles}
17-
onClick={()=>
18-
Event('Navigation','click','Calculator')
19-
}
20-
>
21-
<img
22-
width="416"
23-
height="376"
24-
src="https://www.linode.com/wp-content/uploads/2020/02/Cloud_Pricing_MockUp2-416x376.png"
25-
className="c-featured__image"
26-
alt="Cloud Pricing Calculator"
27-
loading="lazy"
28-
/>
29-
<div className="c-featured__text">
30-
<div className="c-featured__headline">
31-
Cloud Pricing Calculator
32-
</div>
33-
<div className="c-featured__excerpt">
34-
Estimate your cloud costs. Price and configure Linode features to match your needs.
35-
</div>
36-
<span className="c-featured__button">
37-
Launch Calculator
38-
</span>
39-
</div>
40-
</a>
11+
<div data-featured="pricing"></div>
4112
</div>
4213
);
4314

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

Lines changed: 18 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -24,111 +24,9 @@ class MainSiteNav extends React.Component {
2424

2525
// do this on initial page render/re-render
2626
componentDidMount() {
27-
const subMenus = document.getElementsByClassName("c-sub-menu");
28-
const header = document.getElementById("menu-header-primary");
29-
const mobileMenu = document.getElementById("o-menu__link--mobile");
3027

3128
initGA(['UA-177150-1', 'UA-177150-30']);
3229
PageView();
33-
34-
const hideAll = () => {
35-
Object.keys(subMenus).map(d => {
36-
const em = subMenus[d];
37-
return (
38-
em.classList.add("visually-hidden", "visibility-hidden") +
39-
document.body.classList.remove("active")
40-
);
41-
});
42-
};
43-
hideAll(); //hide all when page first loads
44-
45-
for (let i = 0; i < subMenus.length; i++) {
46-
const otherMenus = document.getElementsByClassName("c-sub-menu");
47-
const target = subMenus[i].getAttribute("data-submenu");
48-
const subMenuContainer = document.getElementById(target);
49-
50-
subMenus[i].addEventListener("click", target => {
51-
const hideSubMenus = () => {
52-
Object.keys(otherMenus).map(target => {
53-
const om = otherMenus[target];
54-
return (
55-
om !== subMenuContainer &&
56-
om.classList.add("visually-hidden", "visibility-hidden") +
57-
document.body.classList.remove("active")
58-
);
59-
});
60-
};
61-
62-
hideSubMenus();
63-
64-
if (subMenuContainer !== null) { // if this subcontainer exists
65-
if (!subMenuContainer.classList.contains("visually-hidden")) { // if this submenu is currently active
66-
subMenuContainer.classList.add("visually-hidden", "visibility-hidden");
67-
subMenuContainer.classList.remove("active");
68-
if (target === "sub-menu--mobile") {
69-
document.getElementById("o-menu__link--mobile").classList.remove("active");
70-
}
71-
} else { // if this submenu is not currently active
72-
subMenuContainer.classList.remove(
73-
"visually-hidden",
74-
"visibility-hidden"
75-
);
76-
77-
subMenuContainer.classList.add("active");
78-
if (target === "sub-menu--mobile") {
79-
document.getElementById("o-menu__link--mobile").classList.add("active");
80-
}
81-
}
82-
}
83-
});
84-
}
85-
86-
87-
header.addEventListener("click", e => {
88-
const otherMenus = document.getElementsByClassName("c-sub-menu");
89-
const target = e.target.getAttribute("data-submenu");
90-
const subMenuContainer = document.getElementById(target);
91-
92-
const hideSubMenus = () => {
93-
Object.keys(otherMenus).map(e => {
94-
const om = otherMenus[e];
95-
return (
96-
om !== subMenuContainer &&
97-
om.classList.add("visually-hidden", "visibility-hidden") +
98-
document.body.classList.remove("active")
99-
);
100-
});
101-
};
102-
103-
hideSubMenus();
104-
105-
if (subMenuContainer !== null) { // if this subcontainer exists
106-
if (!subMenuContainer.classList.contains("visually-hidden")) { // if this submenu is currently active
107-
subMenuContainer.classList.add("visually-hidden", "visibility-hidden");
108-
subMenuContainer.classList.remove("active");
109-
if (target === "sub-menu--mobile") {
110-
document.getElementById("o-menu__link--mobile").classList.remove("active");
111-
}
112-
} else { // if this submenu is not currently active
113-
subMenuContainer.classList.remove(
114-
"visually-hidden",
115-
"visibility-hidden"
116-
);
117-
118-
subMenuContainer.classList.add("active");
119-
if (target === "sub-menu--mobile") {
120-
document.getElementById("o-menu__link--mobile").classList.add("active");
121-
}
122-
}
123-
}
124-
});
125-
126-
document.onkeydown = function(evt) {
127-
evt = evt || window.event;
128-
if (evt.keyCode === 27) {
129-
hideAll();
130-
}
131-
};
13230
}
13331

13432
render() {
@@ -141,23 +39,23 @@ class MainSiteNav extends React.Component {
14139
aria-expanded="false"
14240
>
14341
<ul id="menu-header-primary" className="o-menu__list">
144-
<li className="o-menu__item" data-submenu="sub-menu--why-linode">
145-
<a className="o-menu__link" href="#sub-menu--why-linode" target="_self" data-submenu="sub-menu--why-linode">
146-
<span className="o-menu__title" data-submenu="sub-menu--why-linode">
42+
<li className="o-menu__item">
43+
<a className="o-menu__link" href="#sub-menu--why-linode" target="_self" data-submenu="#sub-menu--why-linode">
44+
<span className="o-menu__title">
14745
Why Linode
14846
</span>
14947
</a>
15048
</li>
151-
<li className="o-menu__item" data-submenu="sub-menu--products">
152-
<a className="o-menu__link" href="#sub-menu--products" data-submenu="sub-menu--products">
153-
<span className="o-menu__title" data-submenu="sub-menu--products">
49+
<li className="o-menu__item">
50+
<a className="o-menu__link" href="#sub-menu--products" data-submenu="#sub-menu--products">
51+
<span className="o-menu__title">
15452
Products
15553
</span>
15654
</a>
15755
</li>
158-
<li className="o-menu__item" data-submenu="sub-menu--solutions">
159-
<a className="o-menu__link" href="#sub-menu--solutions" data-submenu="sub-menu--solutions">
160-
<span className="o-menu__title" data-submenu="sub-menu--solutions">
56+
<li className="o-menu__item">
57+
<a className="o-menu__link" href="#sub-menu--solutions" data-submenu="#sub-menu--solutions">
58+
<span className="o-menu__title">
16159
Solutions
16260
</span>
16361
</a>
@@ -169,16 +67,16 @@ class MainSiteNav extends React.Component {
16967
</span>
17068
</a>
17169
</li>
172-
<li className="o-menu__item" data-submenu="sub-menu--pricing">
173-
<a className="o-menu__link" href="#sub-menu--pricing" data-submenu="sub-menu--pricing">
174-
<span className="o-menu__title" data-submenu="sub-menu--pricing">
70+
<li className="o-menu__item">
71+
<a className="o-menu__link" href="#sub-menu--pricing" data-submenu="#sub-menu--pricing">
72+
<span className="o-menu__title">
17573
Pricing
17674
</span>
17775
</a>
17876
</li>
179-
<li className="o-menu__item" data-submenu="sub-menu--community">
180-
<a className="o-menu__link" href="#sub-menu--community" data-submenu="sub-menu--community">
181-
<span className="o-menu__title" data-submenu="sub-menu--community">
77+
<li className="o-menu__item">
78+
<a className="o-menu__link" href="#sub-menu--community" data-submenu="#sub-menu--community">
79+
<span className="o-menu__title">
18280
Community
18381
</span>
18482
</a>
@@ -190,9 +88,9 @@ class MainSiteNav extends React.Component {
19088
</span>
19189
</a>
19290
</li>
193-
<li className="o-menu__item o-menu__item--mobile" data-submenu="sub-menu--mobile">
194-
<a id="o-menu__link--mobile" className="o-menu__link" href="#sub-menu--mobile" data-submenu="sub-menu--mobile">
195-
<span className="o-menu__title" data-submenu="sub-menu--mobile">
91+
<li className="o-menu__item o-menu__item--mobile">
92+
<a id="o-menu__link--mobile" className="o-menu__link" href="#sub-menu--mobile" data-submenu="#sub-menu--mobile">
93+
<span className="o-menu__title">
19694
Mobile
19795
</span>
19896
</a>

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

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,46 +10,7 @@ const styles = {
1010
const ProductsFeaturedNav = () => (
1111

1212
<div className="o-layout__module">
13-
<h6>Featured</h6>
14-
<a
15-
id="c-featured--products"
16-
className="c-featured"
17-
href="https://www.linode.com/free-bundled-services/"
18-
style={styles}
19-
onClick={()=>
20-
Event('Navigation','click','free-bundled-services')
21-
}
22-
>
23-
<img
24-
width="632"
25-
height="316"
26-
src="https://www.linode.com/wp-content/uploads/2021/10/benefits-bg-632x316.png"
27-
className="c-featured__background"
28-
alt="Free Services from Linode"
29-
loading="lazy"
30-
srcSet="https://www.linode.com/wp-content/uploads/2021/10/benefits-bg-632x316.png 632w, https://www.linode.com/wp-content/uploads/2021/10/benefits-bg-1064x532.png 1064w, https://www.linode.com/wp-content/uploads/2021/10/benefits-bg.png 1350w, data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w"
31-
sizes="(max-width:991px) 1px, 632px"
32-
/>
33-
<img
34-
width="416"
35-
height="410"
36-
src="https://www.linode.com/wp-content/uploads/2021/10/benefits-front-416x410.png"
37-
className="c-featured__image"
38-
alt="Free Bundled Services"
39-
loading="lazy"
40-
/>
41-
<div className="c-featured__text">
42-
<div className="c-featured__headline">
43-
<b>Free Bundled Services</b>
44-
</div>
45-
<div className="c-featured__excerpt">
46-
Discover our no-cost security, networking, maintenance, and monitoring solutions.
47-
</div>
48-
<span className="c-featured__button">
49-
Learn More
50-
</span>
51-
</div>
52-
</a>
13+
<div data-featured="products"></div>
5314
</div>
5415
);
5516

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

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,7 @@ const styles = {
99

1010
const SolutionsFeaturedNav = () => (
1111
<div className="o-layout__module">
12-
<h6>Featured</h6>
13-
<a
14-
id="c-featured--solutions"
15-
className="c-featured"
16-
href="https://www.linode.com/content/cloudways/"
17-
style={styles}
18-
onClick={()=>
19-
Event('Navigation','click','cloudways')
20-
}
21-
>
22-
<img
23-
width="632"
24-
height="235"
25-
src="https://www.linode.com/wp-content/uploads/2022/04/cloudways-2-632x235.jpg"
26-
className="c-featured__background"
27-
alt="Cloudways Customer Story"
28-
loading="lazy"
29-
srcSet="https://www.linode.com/wp-content/uploads/2022/04/cloudways-2-632x235.jpg 632w, https://www.linode.com/wp-content/uploads/2022/04/cloudways-2-1064x395.jpg 1064w, https://www.linode.com/wp-content/uploads/2022/04/cloudways-2.jpg 1215w, data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w"
30-
sizes="(max-width:991px) 1px, 632px"
31-
/>
32-
<div className="c-featured__text">
33-
<div className="c-featured__headline">
34-
Cloudways
35-
</div>
36-
<div className="c-featured__excerpt">
37-
Turning a Partnership into Profit
38-
</div>
39-
<span className="c-featured__button">
40-
Read Story
41-
</span>
42-
</div>
43-
</a>
12+
<div data-featured="solutions"></div>
4413
</div>
4514
);
4615

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,22 @@ const MainSiteGlobalMenu = ({ data }) => {
2525
</li>
2626
{data.allHeaderUtility.edges.map(link => {
2727
const node = link.node;
28-
return (
29-
<li className="o-menu__item" key={node.id}>
30-
<a
31-
key={node.id}
32-
href={node.url ? node.url : null}
33-
className="o-menu__link"
34-
role="menuitem"
35-
>
36-
<span className="o-menu__title">
37-
{node.title}
38-
</span>
39-
</a>
40-
</li>
41-
);
28+
if ( node.title !== 'Search' ) {
29+
return (
30+
<li className="o-menu__item" key={node.id}>
31+
<a
32+
key={node.id}
33+
href={node.url ? node.url : null}
34+
className="o-menu__link"
35+
role="menuitem"
36+
>
37+
<span className="o-menu__title">
38+
{node.title}
39+
</span>
40+
</a>
41+
</li>
42+
);
43+
}
4244
})}
4345
</ul>
4446
</div>

0 commit comments

Comments
 (0)