Add slices for site header, footer, and CTAs; refactor layout to use slices

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

gatsby-node.js

@@ -50,12 +50,37 @@ if (process.env.CI === "true") {
 const { loadRedirects } = require("./src/utils/redirects.js");
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createRedirect } = actions;
+  const { createRedirect, createSlice } = actions;
   const redirects = loadRedirects();
   redirects.forEach(redirect => createRedirect(redirect)); // Handles all hardcoded ones dynamically
   // Create Pages
   const { createPage } = actions;
 
+  createSlice({
+    id: "site-header",
+    component: path.resolve("./src/slices/site-header.js"),
+  });
+
+  createSlice({
+    id: "site-footer",
+    component: path.resolve("./src/slices/site-footer.js"),
+  });
+
+  createSlice({
+    id: "cta-bottom",
+    component: path.resolve("./src/slices/cta-bottom.js"),
+  });
+
+  createSlice({
+    id: "cta-fullwidth",
+    component: path.resolve("./src/slices/cta-fullwidth.js"),
+  });
+
+  createSlice({
+    id: "cta-imageonly",
+    component: path.resolve("./src/slices/cta-imageonly.js"),
+  });
+
   const envCreatePage = (props) => {
     if (process.env.CI === "true") {
       const { path, matchPath, ...rest } = props;

root-wrapper.js

@@ -1,9 +1,7 @@
 import React from "react";
 import { MDXProvider } from "@mdx-js/react";
 import Code from "./src/components/CodeBlock";
-import CTA_ImageOnly from "./src/components/Call-To-Actions/CTA_ImageOnly";
-import CTA_FullWidth from "./src/components/Call-To-Actions/CTA_FullWidth";
-import CTA_Bottom from "./src/components/Call-To-Actions/CTA_Bottom";
+import { Slice } from "gatsby";
 import { ContextWrapper } from "./context-wrapper";
 
 // Custom image component for better CLS scores
@@ -41,9 +39,9 @@ const components = {
     }
   },
   img: OptimizedImage,
-  CTA_ImageOnly,
-  CTA_FullWidth,
-  CTA_Bottom
+  CTA_ImageOnly: (props) => <Slice alias="cta-imageonly" sliceContext={props} />, // slice to avoid page rebuilds on CTA tweaks
+  CTA_FullWidth: (props) => <Slice alias="cta-fullwidth" sliceContext={props} />, // slice to avoid page rebuilds on CTA tweaks
+  CTA_Bottom: (props) => <Slice alias="cta-bottom" sliceContext={props} />
 };
 
 export const wrapRootElement = ({ element }) => (

src/components/layout.js

@@ -9,24 +9,21 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import { Slice } from "gatsby";
 import ScrollToTopBtn from "./Scrolltotop-button";
-import Navigation from "../sections/General/Navigation";
-import Footer from "../sections/General/Footer";
 // import TopPromotionalBanner from "./TopPromotionalBanner";
 import { GlobalStyle } from "../sections/app.style";
-import CookieConsent from "./CookieConsent";
 
 const Layout = ({ children }) => {
 
   return (
     <>
       <GlobalStyle />
       {/* <TopPromotionalBanner /> */}
-      <Navigation/>
-      <CookieConsent />
+      <Slice alias="site-header" />
       {children}
       <ScrollToTopBtn />
-      <Footer location={children.props.location} />
+      <Slice alias="site-footer" />
     </>
   );
 };

src/sections/General/Footer/index.js

@@ -1,14 +1,17 @@
 import React from "react";
 import { Link } from "gatsby";
 import { Container, Row, Col } from "../../../reusecore/Layout";
+import { useLocation } from "@reach/router";
 import logo from "../../../assets/images/layer5/layer5-only/svg/layer5-light-bg.svg";
 import SocialLinksColor from "../../../components/SocialLinks-Color";
 import Button from "../../../reusecore/Button";
 import FooterWrapper from "./footer.style";
 import bubblesElement from "./images/bubbles-element.svg";
 
-const Footer = ({ location }) => {
+const Footer = ({ location: locationProp }) => {
   var currentYear = new Date().getFullYear();
+  const routerLocation = useLocation();
+  const pathname = locationProp?.pathname || routerLocation?.pathname || "/";
 
   const getUrl = (pathname) => {
     // remove ".html" that results in live production build
@@ -349,7 +352,7 @@ const Footer = ({ location }) => {
             <ul className="misc-links">
               <li className="edit-page">
                 <a
-                  href={getUrl(location.pathname)}
+                  href={getUrl(pathname)}
                   target="_blank"
                   rel="noreferrer"
                 >

src/slices/cta-bottom.js

@@ -0,0 +1,6 @@
+import React from "react";
+import CTA_Bottom from "../components/Call-To-Actions/CTA_Bottom";
+
+const CTABottomSlice = ({ sliceContext = {} }) => <CTA_Bottom {...sliceContext} />;
+
+export default CTABottomSlice;

src/slices/cta-fullwidth.js

@@ -0,0 +1,6 @@
+import React from "react";
+import CTA_FullWidth from "../components/Call-To-Actions/CTA_FullWidth";
+
+const CTAFullWidthSlice = ({ sliceContext = {} }) => <CTA_FullWidth {...sliceContext} />;
+
+export default CTAFullWidthSlice;

src/slices/cta-imageonly.js

@@ -0,0 +1,6 @@
+import React from "react";
+import CTA_ImageOnly from "../components/Call-To-Actions/CTA_ImageOnly";
+
+const CTAImageOnlySlice = ({ sliceContext = {} }) => <CTA_ImageOnly {...sliceContext} />;
+
+export default CTAImageOnlySlice;

src/slices/site-footer.js

@@ -0,0 +1,6 @@
+import React from "react";
+import Footer from "../sections/General/Footer";
+
+const SiteFooterSlice = () => <Footer />;
+
+export default SiteFooterSlice;

src/slices/site-header.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Navigation from "../sections/General/Navigation";
+import CookieConsent from "../components/CookieConsent";
+
+const SiteHeaderSlice = () => (
+  <>
+    <Navigation />
+    <CookieConsent />
+  </>
+);
+
+export default SiteHeaderSlice;

src/templates/lite-placeholder.js

@@ -3,7 +3,6 @@ import SEO from "../components/seo";
 
 const LitePlaceholder = ({ pageContext, location }) => {
   const {
-    entity = "page",
     heading = "Content disabled in lite mode",
     description = "This route is intentionally skipped when BUILD_FULL_SITE=false.",
   } = pageContext;