Release 1.1.34

gatsby-node.js

@@ -119,6 +119,10 @@ exports.sourceNodes = async ({ actions }) => {
       path: `${baseUrl}/submenu-products-developer-tools`,
       name: "ProductsDevTools"
     },
+    {
+      path: `${baseUrl}/submenu-pricing-primary`,
+      name: "PricingPrimary"
+    },
     {
       path: `${baseUrl}/submenu-community-primary`,
       name: "CommunityPrimary"

package.json

@@ -9,7 +9,7 @@
     "axios": "^0.19.0",
     "crypto": "^1.0.1",
     "gatsby": "^2.9.2",
-    "gatsby-cli": "^2.7.50",
+    "gatsby-cli": "^2.12.77",
     "gatsby-image": "^2.0.29",
     "gatsby-plugin-catch-links": "^2.1.2",
     "gatsby-plugin-google-tagmanager": "^2.1.9",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "algoliasearch": "^3.33.0",
     "dotenv": "^8.0.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.19",
     "md5": "^2.2.1",
     "randomstring": "^1.1.5",
     "yamljs": "^0.3.0"

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+const styles = {
+  color: '#ffffff'
+};
+
+const CommunityFeaturedNav = () => (
+    <div className="o-layout__module">
+      <h6>Featured</h6>
+      <a
+        id="c-featured--community"
+        className="c-featured"
+        href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
+        style={styles}
+      >
+        <img
+          width="632"
+          height="418"
+          src="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png"
+          className="c-featured__background"
+          alt=""
+          srcSet="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png 632w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-416x275.png 416w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-768x508.png 768w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient.png 1000w"
+          sizes="(max-width: 632px) 100vw, 632px"
+        />
+        <img
+          width="416"
+          height="416"
+          src="https://www.linode.com/wp-content/uploads/2020/05/linode-nextcloud-white.svg"
+          className="c-featured__image"
+          alt=""
+          srcSet="https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 416w, https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 632w, https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 1064w"
+          sizes="(max-width: 416px) 100vw, 416px"
+        />
+        <div className="c-featured__text">
+          <div className="c-featured__headline">
+            New One Click App:<br/>
+            <b>Nextcloud</b>
+          </div>
+          <div className="c-featured__excerpt">Open source productivity and storage management platform.</div>
+          <span
+            className="c-featured__button"
+            href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
+          >
+            Deploy App
+          </span>
+        </div>
+      </a>
+    </div>
+);
+
+export default CommunityFeaturedNav;

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

@@ -1,19 +1,20 @@
 import React from "react";
 
+import CommunityFeatured from "./communityFeatured";
 import CommunityPrimary from "./communityPrimary";
 import CommunityServices from "./communityServices";
 
 const CommunityMenus = () => (
   <div className="o-layout__row c-sub-menu c-sub-menu--community" id="sub-menu--community">
     <div className="o-layout__colset">
       <div className="o-layout__col">
-        <CommunityPrimary />
+        <CommunityFeatured />
       </div>
       <div className="o-layout__col">
-        <CommunityServices />
+        <CommunityPrimary />
       </div>
       <div className="o-layout__col">
-
+        <CommunityServices />
       </div>
     </div>
   </div>

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

@@ -0,0 +1,43 @@
+import React from "react";
+const styles = {
+  borderWidth: 2,
+  borderColor: '#ededf4'
+};
+
+const PricingFeaturedNav = () => (
+    <div className="o-layout__module">
+      <h6>Featured</h6>
+        <a
+          id="c-featured--pricing"
+          className="c-featured"
+          href="https://www.linode.com/lp/tco-calculator/"
+          style={styles}
+        >
+          <img
+            width="416"
+            height="376"
+            src="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png"
+            className="c-featured__image"
+            alt=""
+            srcSet="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png 416w, https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2.png 620w"
+            sizes="(max-width: 416px) 100vw, 416px"
+          />
+          <div className="c-featured__text">
+            <div className="c-featured__headline">
+              Total Cost of Ownership Calculator
+            </div>
+            <div className="c-featured__excerpt">
+              Migrating from on-premises or between cloud providers for hosting, cloud storage, or cloud computing?
+            </div>
+            <span
+              className="c-featured__button"
+              href="https://www.linode.com/lp/tco-calculator/"
+            >
+              Launch Calculator
+            </span>
+          </div>
+        </a>
+    </div>
+);
+
+export default PricingFeaturedNav;

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

@@ -0,0 +1,19 @@
+import React from "react";
+
+import PricingFeatured from "./pricingFeatured";
+import PricingPrimary from "./pricingPrimary";
+
+const PricingMenus = () => (
+  <div className="o-layout__row c-sub-menu c-sub-menu--pricing" id="sub-menu--pricing">
+    <div className="o-layout__colset">
+      <div className="o-layout__col">
+        <PricingFeatured />
+      </div>
+      <div className="o-layout__col">
+        <PricingPrimary />
+      </div>
+    </div>
+  </div>
+);
+
+export default PricingMenus;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { StaticQuery, graphql } from "gatsby";
+import Col from "./col";
+
+const PricingPrimary = ({ data }) => {
+  return (
+    <Col name="pricing-primary" header="Pricing">
+      {data.allPricingPrimary.edges.map((link, i) => {
+        const node = link.node;
+        return (
+          <li className="o-menu__item" key={i}>
+            <a
+              key={node.id}
+              href={node.url ? node.url : null}
+              className="o-menu__link"
+              role="menuitem"
+            >
+              <span className="o-menu__title">
+                {node.title}
+              </span>
+            </a>
+          </li>
+        );
+      })}
+    </Col>
+  );
+};
+
+export default props => (
+  <StaticQuery
+    query={graphql`
+      query pricingPrimary {
+        allPricingPrimary {
+          edges {
+            node {
+              id
+              title
+              url
+            }
+          }
+        }
+      }
+    `}
+    render={data => <PricingPrimary data={data} {...props} />}
+  />
+);

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

@@ -123,9 +123,9 @@ class MainSiteNav extends React.Component {
                   </span>
                 </a>
               </li>
-              <li className="o-menu__item">
-                <a className="o-menu__link" href="https://linode.com/pricing">
-                  <span className="o-menu__title">
+              <li className="o-menu__item" data-submenu="sub-menu--pricing">
+                <a className="o-menu__link" href="#sub-menu--pricing" data-submenu="sub-menu--pricing">
+                  <span className="o-menu__title" data-submenu="sub-menu--pricing">
                     Pricing
                   </span>
                 </a>
@@ -144,13 +144,6 @@ class MainSiteNav extends React.Component {
                   </span>
                 </a>
               </li>
-              <li className="o-menu__item o-menu__item--search">
-                <a className="o-menu__link" href="https://linode.com/search">
-                  <span className="o-menu__title">
-                    Search
-                  </span>
-                </a>
-              </li>
               <li className="o-menu__item o-menu__item--mobile" data-submenu="sub-menu--mobile">
                 <a id="o-menu__link--mobile" className="o-menu__link" href="#sub-menu--mobile" data-submenu="sub-menu--mobile">
                   <span className="o-menu__title" data-submenu="sub-menu--mobile">
@@ -176,7 +169,6 @@ export default props => (
               id
               title
               url
-              switch_on
             }
           }
         }

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

@@ -1,65 +1,50 @@
 import React from "react";
-import { StaticQuery, graphql } from "gatsby";
-import Col from "./col";
-
-const _ = require("lodash");
-
-const ProductsFeaturedNav = ({ data }) => {
-  return (
-    <Col name="products-featured" header="Featured">
-      {data.allProductsFeatured.edges.map((link, i) => {
-        const node = link.node;
-        return (
-          <li className="sub-menu__li sub-menu__header-li" key={i}>
-            <a
-              key={node.id}
-              href={node.url ? node.url : null}
-              className={`
-                  header__link
-                  sub-menu__link
-                  sub-menu__header-link
-                  sub-menu__header-link--w-icon
-                  why-primary-nav__link
-                  ${_.kebabCase(node.title)}
-                `}
-              role="menuitem"
-            >
-              <img
-                src={node.icon}
-                className="sub-menu__icon"
-                alt={node.title}
-              />
-              <span className="sub-menu__body">
-                <span className="sub-menu__title">{node.title}</span>
-                <span className="sub-menu__description">
-                  {node.description}
-                </span>
-              </span>
-            </a>
-          </li>
-        );
-      })}
-    </Col>
-  );
+const styles1 = {
+  borderWidth: 2,
+  borderColor: '#ededf4'
+};
+const styles2 = {
+  alignSelf: 'flex-end',
+  marginBottom: -24,
+  marginLeft: -24,
+  marginRight: -24,
+  maxWidth: '50%'
 };
 
-export default props => (
-  <StaticQuery
-    query={graphql`
-      query productsFeatured {
-        allProductsFeatured {
-          edges {
-            node {
-              id
-              title
-              url
-              description
-              icon
-            }
-          }
-        }
-      }
-    `}
-    render={data => <ProductsFeaturedNav data={data} {...props} />}
-  />
+const ProductsFeaturedNav = () => (
+
+    <div className="o-layout__module">
+      <h6>Featured</h6>
+      <a
+        id="c-featured--products"
+        className="c-featured"
+        href="https://www.linode.com/products/gpu/"
+        style={styles1}
+      >
+        <img
+          width="400"
+          height="339"
+          src="https://www.linode.com/wp-content/uploads/2020/08/mum-fg.png"
+          className="c-featured__image"
+          alt=""
+          style={styles2}
+        />
+        <div className="c-featured__text">
+          <div className="c-featured__headline">
+            <b>GPUs have landed in Mumbai!</b>
+          </div>
+          <div className="c-featured__excerpt">
+            On-demand GPUs for machine learning, scientific computing, and video processing.
+          </div>
+          <span
+            className="c-featured__button"
+            href="https://www.linode.com/products/gpu/"
+          >
+            Try Today
+          </span>
+        </div>
+      </a>
+    </div>
 );
+
+export default ProductsFeaturedNav;