Merge pull request #7253 from layer5io/leecalcote/slices/revert

Temporary revert of the use of Slices

Author: leecalcote

gatsby-node.js

@@ -36,7 +36,6 @@ if (process.env.CI === "true") {
     if (page.path !== oldPage.path) {
       // Replace new page with old page
       deletePage(oldPage);
-      page.slices = { ...DEFAULT_SLICES, ...(page.slices || {}) };
       createPage(page);
 
       createRedirect({
@@ -52,58 +51,16 @@ if (process.env.CI === "true") {
 
 const { loadRedirects } = require("./src/utils/redirects.js");
 
-const DEFAULT_SLICES = {
-  "site-header": "site-header",
-  "site-footer": "site-footer",
-  "cta-bottom": "cta-bottom",
-  "cta-fullwidth": "cta-fullwidth",
-  "cta-imageonly": "cta-imageonly",
-};
-
 exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createRedirect, createSlice } = actions;
+  const { createRedirect } = 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) => {
-    const pageConfig = { ...props };
-
-    if (isDevelopment) {
-      pageConfig.defer = true;
-    } else if (isProduction) {
-      pageConfig.mode = "SSR";
-    }
-    pageConfig.slices = { ...DEFAULT_SLICES, ...(pageConfig.slices || {}) };
-
     if (process.env.CI === "true") {
-      const { path, matchPath, ...rest } = pageConfig;
+      const { path, matchPath, ...rest } = props;
 
       createRedirect({
         fromPath: `/${path}/`,
@@ -118,7 +75,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         ...rest,
       });
     }
-    return createPage(pageConfig);
+    return createPage(props);
   };
 
   const blogPostTemplate = path.resolve("src/templates/blog-single.js");
@@ -555,7 +512,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   const components = componentsData.map((component) => component.src.replace("/", ""));
-  const createComponentPages = (envCreatePage, components) => {
+  const createComponentPages = (createPage, components) => {
     const pageTypes = [
       { suffix: "", file: "index.js" },
       { suffix: "/guidance", file: "guidance.js" },
@@ -568,7 +525,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`;
         if (fs.existsSync(path.resolve(componentPath))) {
           try {
-            envCreatePage({
+            createPage({
               path: pagePath,
               component: require.resolve(componentPath),
             });
@@ -582,7 +539,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   };
 
-  createComponentPages(envCreatePage, components);
+  createComponentPages(createPage, components);
 };
 
 // slug starts and ends with '/' so parts[0] and parts[-1] will be empty

root-wrapper.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { MDXProvider } from "@mdx-js/react";
 import Code from "./src/components/CodeBlock";
-import { Slice } from "gatsby";
+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 { ContextWrapper } from "./context-wrapper";
 
 // Custom image component for better CLS scores
@@ -39,9 +41,9 @@ const components = {
     }
   },
   img: OptimizedImage,
-  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} />
+  CTA_ImageOnly,
+  CTA_FullWidth,
+  CTA_Bottom
 };
 
 export const wrapRootElement = ({ element }) => (

src/components/layout.js

@@ -9,21 +9,24 @@
 
 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 /> */}
-      <Slice alias="site-header" />
+      <Navigation/>
+      <CookieConsent />
       {children}
       <ScrollToTopBtn />
-      <Slice alias="site-footer" />
+      <Footer location={children.props.location} />
     </>
   );
 };

src/sections/General/Footer/index.js

@@ -7,9 +7,8 @@ import Button from "../../../reusecore/Button";
 import FooterWrapper from "./footer.style";
 import bubblesElement from "./images/bubbles-element.svg";
 
-const Footer = ({ location: locationProp }) => {
+const Footer = ({ location }) => {
   var currentYear = new Date().getFullYear();
-  const pathname = locationProp?.pathname || (typeof window !== "undefined" ? window.location.pathname : "/");
 
   const getUrl = (pathname) => {
     // remove ".html" that results in live production build
@@ -350,7 +349,7 @@ const Footer = ({ location: locationProp }) => {
             <ul className="misc-links">
               <li className="edit-page">
                 <a
-                  href={getUrl(pathname)}
+                  href={getUrl(location.pathname)}
                   target="_blank"
                   rel="noreferrer"
                 >

src/slices/cta-bottom.js

@@ -3,6 +3,7 @@ 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;