move footer tp layout, laytout to pageElementsWrap

Signed-off-by: Randy Lau <[email protected]>

context-wrapper.js

@@ -2,11 +2,13 @@ import React from "react";
 import { StyledThemeProvider } from "./src/theme/app/StyledThemeProvider";
 import { ThemeManagerProvider } from "./src/theme/app/ThemeManager";
 import lighttheme, { darktheme } from "./src/theme/app/themeStyles";
+import { GlobalStyle } from "./src/sections/app.style";
 
 export const ContextWrapper = ({ children }) => {
   return (
     <ThemeManagerProvider>
       <StyledThemeProvider lightTheme={lighttheme} darkTheme={darktheme}>
+        <GlobalStyle />
         {children}
       </StyledThemeProvider>
     </ThemeManagerProvider>

gatsby-browser.js

@@ -29,3 +29,4 @@ function initGTM() {
 }
 
 export { wrapRootElement } from "./root-wrapper";
+export { wrapPageElement } from "./page-wrapper";

gatsby-ssr.js

@@ -1,2 +1,3 @@
 export { onRenderBody } from "./onRenderBody";
 export { wrapRootElement } from "./root-wrapper";
+export { wrapPageElement } from "./page-wrapper";

page-wrapper.js

@@ -0,0 +1,8 @@
+import React from "react";
+import Layout from "./src/components/layout.js";
+
+export const wrapPageElement = ({ element }) => (
+  <Layout>
+    {element}
+  </Layout>
+);

src/components/layout.js

@@ -10,17 +10,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 import ScrollToTopBtn from "./Scrolltotop-button";
-import { GlobalStyle } from "../sections/app.style";
 import Navigation from "../sections/General/Navigation";
+import Footer from "../sections/General/Footer";
 
 const Layout = ({ children }) => {
 
   return (
     <>
-      <GlobalStyle />
       <Navigation/>
       {children}
       <ScrollToTopBtn />
+      <Footer />
     </>
   );
 };

src/pages/404.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../components/layout";
+
 import SEO from "../components/seo";
 import L404 from "../sections/404";
-import Footer from "../sections/General/Footer";
+
 const NotFoundPage = () => {
   return (
-    <Layout>
+    <>
       <L404 />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export const Head = () => {

src/pages/blog/index.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import Layout from "../../components/layout";
+
 import SEO from "../../components/seo";
 import BlogGrid from "../../sections/Blog/Blog-grid";
-import Footer from "../../sections/General/Footer";
+
 import { graphql } from "gatsby";
 import loadable from "@loadable/component";
 const BlogList = loadable(() => import ("../../sections/Blog/Blog-list"));
@@ -62,16 +62,16 @@ const Blog = (props) => {
     return <BlogGrid {...props} />;
   };
   return (
-    <Layout>
+    <>
       <BlogView
         isListView={isListView}
         setListView={setListView}
         setGridView={setGridView}
         pageContext={props.pageContext}
         data={props.data}
       />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default Blog;

src/pages/careers/index.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../components/layout";
+
 import SEO from "../../components/seo";
-import Footer from "../../sections/General/Footer";
+
 import CareersSection from "../../sections/Careers";
 const Careers = () => {
   return (
-    <Layout>
+    <>
       <CareersSection  />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default Careers;

src/pages/careers/internships.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../components/layout";
+
 import SEO from "../../components/seo";
-import Footer from "../../sections/General/Footer";
+
 import InternshipPage from "../../sections/Careers/Careers-Internship-grid";
 const Internships = () => {
   return (
-    <Layout>
+    <>
       <InternshipPage />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default Internships;

src/pages/careers/programs.js

@@ -1,16 +1,16 @@
 import React from "react";
-import Layout from "../../components/layout";
+
 import SEO from "../../components/seo";
-import Footer from "../../sections/General/Footer";
+
 import FAQ from "../../sections/General/Faq";
 import ProgramsGrid from "../../sections/Careers/Careers-Programs-grid";
 const CareerPrograms = () => {
   return (
-    <Layout>
+    <>
       <ProgramsGrid  />
       <FAQ category={["internships"]} />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default CareerPrograms;

src/pages/cloud-native-management/meshery/getting-started.js

@@ -1,21 +1,20 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
 import MesheryTerminal from "../../../sections/Meshery/Meshery-terminal";
 import loadable from "@loadable/component";
 const MesheryPlatforms = loadable(() => import ("../../../sections/Meshery/Meshery-platforms"));
 const MesheryManageMesh = loadable(() => import ("../../../sections/Meshery/Meshery-mange-mesh"));
 const MesheryQuotes = loadable(() => import ("../../../sections/Meshery/Meshery-quotes"));
-const Footer = loadable(() => import ("../../../sections/General/Footer"));
 const MesheryMainPage = () => {
   return (
-    <Layout>
+    <>
       <MesheryTerminal />
       <MesheryPlatforms />
       <MesheryManageMesh />
       <MesheryQuotes />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default MesheryMainPage;

src/pages/cloud-native-management/meshery/index.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
 import MesheryPage from "../../../sections/Meshery";
-import Footer from "../../../sections/General/Footer";
+
 const Meshery = () => {
   return (
-    <Layout>
+    <>
       <MesheryPage />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default Meshery;

src/pages/cloud-native-management/meshery/integrations.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
-import Footer from "../../../sections/General/Footer";
+
 import MesheryIntegration from "../../../sections/Meshery/Meshery-integrations";
 const Integrations = () => {
   return (
-    <Layout>
+    <>
       <MesheryIntegration />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default Integrations;

src/pages/cloud-native-management/meshery/meshery-operator.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
 import MesheryOperatorPage from "../../../sections/Meshery/meshery-operator";
-import Footer from "../../../sections/General/Footer";
+
 const MesheryOperator = () => {
   return (
-    <Layout>
+    <>
       <MesheryOperatorPage />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default MesheryOperator;

src/pages/cloud-native-management/meshery/operating-service-meshes.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
 import HowMesheryWorksHero from "../../../sections/Meshery/How-meshery-works/hero";
-import Footer from "../../../sections/General/Footer";
+
 import SMILogo from "../../../sections/Meshery/How-meshery-works/images/servicemeshinterface-icon-color.svg";
 import MesheryLogo from "../../../assets/images/meshery/icon-only/meshery-logo-light.svg";
 import VisualTopology from "../../../sections/Meshery/How-meshery-works/images/visual-topology.svg";
@@ -16,7 +16,7 @@ const HowMesheryWorks = loadable(() => import ("../../../sections/Meshery/How-me
 const HowMesheryWorksSpecs = loadable(() => import ("../../../sections/Meshery/How-meshery-works/specs"));
 const OperatingServiceMeshes = () => {
   return (
-    <Layout>
+    <>
       <HowMesheryWorksHero  />
       <HowMesheryWorks
         title="How Meshery Manages Cloud Native Infra"
@@ -104,8 +104,8 @@ const OperatingServiceMeshes = () => {
             },
           ]} />
       <HowMesheryWorksSpecs />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default OperatingServiceMeshes;

src/pages/cloud-native-management/meshmap/collaborate.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
-import Footer from "../../../sections/General/Footer";
+
 import MeshmapCollaborate from "../../../sections/Meshmap/Meshmap-collaborate";
 const MeshmapCollaboratePage = () => {
   return (
-    <Layout>
+    <>
       <MeshmapCollaborate  />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default MeshmapCollaboratePage;

src/pages/cloud-native-management/meshmap/design.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
-import Footer from "../../../sections/General/Footer";
+
 import MeshmapDesign from "../../../sections/Meshmap/Meshmap-design/index";
 const MeshmapDesignPage = () => {
   return (
-    <Layout>
+    <>
       <MeshmapDesign  />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default MeshmapDesignPage;

src/pages/cloud-native-management/meshmap/index.js

@@ -1,14 +1,14 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
-import Footer from "../../../sections/General/Footer";
+
 import Meshmap from "../../../sections/Meshmap/index";
 const MeshmapPage = () => {
   return (
-    <Layout>
+    <>
       <Meshmap  />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default MeshmapPage;

src/pages/cloud-native-management/meshmap/visualize.js

@@ -1,16 +1,16 @@
 import React from "react";
-import Layout from "../../../components/layout";
+
 import SEO from "../../../components/seo";
-import Footer from "../../../sections/General/Footer";
+
 import MeshmapVisualize from "../../../sections/Meshmap/Meshmap-visualize/index";
 
 const MeshmapVisualizePage = () => {
 
   return (
-    <Layout>
+    <>
       <MeshmapVisualize />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default MeshmapVisualizePage;

src/pages/community/calendar.js

@@ -1,7 +1,7 @@
 import React from "react";
 import SEO from "../../components/seo";
-import Footer from "../../sections/General/Footer";
-import Layout from "../../components/layout";
+
+
 import Loadable from "react-loadable";
 import Loader from "./Loader.style";
 import LoadingIcon from "../../assets/images/LoadingIcon";
@@ -49,10 +49,10 @@ const LoadableCalendar = Loadable({
 });
 const CalendarPage = () => {
   return (
-    <Layout>
+    <>
       <LoadableCalendar />
-      <Footer />
-    </Layout>
+
+    </>
   );
 };
 export default CalendarPage;