Merge pull request #7231 from layer5io/leecalcote/chore/move-static-assets

leecalcote/chore/move static assets

Author: leecalcote

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");
@@ -510,7 +547,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" },
@@ -523,7 +560,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),
             });
@@ -537,7 +574,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 }) => (

src/assets/brand/bookmarks.pdf

@@ -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/assets/brand/brand-guide.pdf

@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import Button from "../../../../reusecore/Button";
 import BrandGuideImg from "../../../../assets/images/Brand-Guide/brand-guide.webp";
-import BrandGuidePDF from "../../../../assets/brand/brand-guide.pdf";
 
 import { Row, Col } from "../../../../reusecore/Layout";
 import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud";
@@ -46,7 +45,7 @@ const BrandGuide = () => {
           <Row>
             <Col $xs={12}>
               <Row className="bookmarks">
-                <Link to={BrandGuidePDF}>
+                <Link to="/brand/brand-guide.pdf">
                   <img className="bookmarks" src={BrandGuideImg} alt="Layer5 Brand Guide" />
                 </Link>
               </Row>