Merge branch 'master' into handbook-migration

Author: Rajesh-Nagarajan-11

gatsby-node.js

@@ -34,6 +34,7 @@ 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({
@@ -49,16 +50,52 @@ 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 } = 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) => {
+    const pageConfig = { ...props };
+    pageConfig.slices = { ...DEFAULT_SLICES, ...(pageConfig.slices || {}) };
+
     if (process.env.CI === "true") {
-      const { path, matchPath, ...rest } = props;
+      const { path, matchPath, ...rest } = pageConfig;
 
       createRedirect({
         fromPath: `/${path}/`,
@@ -73,7 +110,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         ...rest,
       });
     }
-    return createPage(props);
+    return createPage(pageConfig);
   };
 
   const blogPostTemplate = path.resolve("src/templates/blog-single.js");
@@ -540,7 +577,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   const components = componentsData.map((component) => component.src.replace("/", ""));
-  const createComponentPages = (createPage, components) => {
+  const createComponentPages = (envCreatePage, components) => {
     const pageTypes = [
       { suffix: "", file: "index.js" },
       { suffix: "/guidance", file: "guidance.js" },
@@ -553,7 +590,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`;
         if (fs.existsSync(path.resolve(componentPath))) {
           try {
-            createPage({
+            envCreatePage({
               path: pagePath,
               component: require.resolve(componentPath),
             });
@@ -567,7 +604,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   };
 
-  createComponentPages(createPage, components);
+  createComponentPages(envCreatePage, components);
 };
 
 // slug starts and ends with '/' so parts[0] and parts[-1] will be empty

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 }) => (