perf: persistent layout

public-convenience-ltd · Dec 7, 2021 · 451526a · 451526a
1 parent 75fc146
commit 451526a
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 239 deletions.
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -1,9 +1,6 @@
-import React from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
-
-import PageLayout from './PageLayout';
 import Container from './Container';
 import Button from './Button';
 import Text from './Text';
@@ -23,7 +20,7 @@ const ListItem = (props: BoxProps) => (
 const LoginPage = (props) => {
   const router = useRouter();
   return (
-    <PageLayout layoutMode="blog">
+    <Box my={5}>
       <Head>
         <title>{config.getTitle('Contributing')}</title>
       </Head>
@@ -92,7 +89,7 @@ const LoginPage = (props) => {
           .
         </p>
       </Container>
-    </PageLayout>
+    </Box>
   );
 };
 

diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
diff --git a/src/components/PageLoading.tsx b/src/components/PageLoading.tsx
@@ -1,31 +1,28 @@
 import React from 'react';
 
-import PageLayout from './PageLayout';
 import Box from './Box';
 import Spacer from './Spacer';
 import Text from './Text';
 import Logo from './Logo';
 
 const PageLoading = () => (
-  <PageLayout>
-    <Box
-      role="alert"
-      aria-live="assertive"
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      height="100%"
-      width="100%"
-      p={3}
-    >
-      <Logo />
-      <Spacer mt={3} />
-      <Text fontSize={20} fontWeight="bold" color="tertiary">
-        Please wait&hellip;
-      </Text>
-    </Box>
-  </PageLayout>
+  <Box
+    role="alert"
+    aria-live="assertive"
+    display="flex"
+    flexDirection="column"
+    justifyContent="center"
+    alignItems="center"
+    height="100%"
+    width="100%"
+    p={3}
+  >
+    <Logo />
+    <Spacer mt={3} />
+    <Text fontSize={20} fontWeight="bold" color="tertiary">
+      Please wait&hellip;
+    </Text>
+  </Box>
 );
 
 export default PageLoading;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,11 +1,10 @@
-import PageLayout from '../components/PageLayout';
 import Box from '../components/Box';
 import Spacer from '../components/Spacer';
 import Text from '../components/Text';
 import Button from '../components/Button';
 
 const NotFound = () => (
-  <PageLayout layoutMode="blog">
+  <Box my={5}>
     <Box
       display="flex"
       flexDirection="column"
@@ -34,7 +33,7 @@ const NotFound = () => (
         </Button>
       </div>
     </Box>
-  </PageLayout>
+  </Box>
 );
 
 export default NotFound;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -4,6 +4,13 @@ import 'resize-observer-polyfill';
 import { UserProvider } from '@auth0/nextjs-auth0';
 import { MapStateProvider } from '../components/MapState';
 import PlausibleProvider from 'next-plausible';
+import { ThemeProvider } from '@emotion/react';
+import Box from '../components/Box';
+import { MediaContextProvider, Media } from '../components/Media';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import globalStyles from '../globalStyles';
+import theme from '../theme';
 
 const App = ({ Component, pageProps }) => (
   <PlausibleProvider
@@ -12,7 +19,34 @@ const App = ({ Component, pageProps }) => (
   >
     <UserProvider>
       <MapStateProvider>
-        <Component {...pageProps} />
+        <ThemeProvider theme={theme}>
+          <MediaContextProvider>
+            {globalStyles}
+
+            <Box display="flex" flexDirection="column" height="100%">
+              <Header>
+                <Footer />
+              </Header>
+
+              <Box position="relative" display="flex" flexGrow={1}>
+                <Box
+                  as="main"
+                  flexGrow={1}
+                  // support screen readers in ie11
+                  role="main"
+                >
+                  <Component {...pageProps} />
+                </Box>
+              </Box>
+
+              <Box mt="auto">
+                <Media greaterThan="sm">
+                  <Footer />
+                </Media>
+              </Box>
+            </Box>
+          </MediaContextProvider>
+        </ThemeProvider>
       </MapStateProvider>
     </UserProvider>
   </PlausibleProvider>

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,8 +1,6 @@
 import Link from 'next/link';
 import Head from 'next/head';
 import styled from '@emotion/styled';
-
-import PageLayout from '../components/PageLayout';
 import Container from '../components/Container';
 import Button from '../components/Button';
 import Text, { TextProps } from '../components/Text';
@@ -31,7 +29,7 @@ const SubHeading = (props: TextProps) => (
 
 const AboutPage = () => {
   return (
-    <PageLayout layoutMode="blog">
+    <Box my={5}>
       <Head>
         <title>{config.getTitle('About')}</title>
       </Head>
@@ -145,7 +143,7 @@ const AboutPage = () => {
           across the country.
         </p>
       </Container>
-    </PageLayout>
+    </Box>
   );
 };
 

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -1,17 +1,15 @@
 import Head from 'next/head';
-
-import PageLayout from '../components/PageLayout';
 import Container from '../components/Container';
 import Button from '../components/Button';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
-
+import Box from '../components/Box';
 import config from '../config';
 import { NextPage } from 'next';
 
 const ContactPage = () => {
   return (
-    <PageLayout layoutMode="blog">
+    <Box my={5}>
       <Head>
         <title>{config.getTitle('Contact Us')}</title>
       </Head>
@@ -30,7 +28,7 @@ const ContactPage = () => {
           .
         </p>
       </Container>
-    </PageLayout>
+    </Box>
   );
 };
 

diff --git a/src/pages/explorer/voyager.tsx b/src/pages/explorer/voyager.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import PageLayout from '../../components/PageLayout';
+import Box from '../../components/Box';
 import Container from '../../components/Container';
 import config from '../../config';
 import 'graphql-voyager/dist/voyager.css';
@@ -19,7 +19,7 @@ function introspectionProvider(query) {
 }
 
 const Voyager = () => (
-  <PageLayout layoutMode="blog">
+  <Box my={5}>
     <Head>
       <title>{config.getTitle('Schema Visualisation')}</title>
     </Head>
@@ -30,7 +30,7 @@ const Voyager = () => (
         workerURI={'/voyager.worker.js'}
       />
     </Container>
-  </PageLayout>
+  </Box>
 );
 
 export default Voyager;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import Head from 'next/head';
-import PageLayout from '../components/PageLayout';
 import Box from '../components/Box';
 import Sidebar from '../components/Sidebar';
 import VisuallyHidden from '../components/VisuallyHidden';
@@ -16,7 +15,7 @@ const HomePage = () => {
   const pageTitle = config.getTitle('Home');
 
   return (
-    <PageLayout mapCenter={mapState.center}>
+    <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
@@ -47,7 +46,7 @@ const HomePage = () => {
           controlsOffset={0}
         />
       </Box>
-    </PageLayout>
+    </>
   );
 };