From 769a9538796729b54b07ad68cac7ff0ee442a9b2 Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Wed, 16 Mar 2022 12:12:21 +0800
Subject: [PATCH 1/6] imported Layout component

---
 components/Container.tsx | 23 ------------------
 layout/Layout.tsx        | 50 ----------------------------------------
 layout/index.ts          |  1 -
 pages/_app.tsx           | 43 ++++++++++++++++++++++++++++++----
 4 files changed, 39 insertions(+), 78 deletions(-)
 delete mode 100644 components/Container.tsx
 delete mode 100644 layout/Layout.tsx

diff --git a/components/Container.tsx b/components/Container.tsx
deleted file mode 100644
index 4b222fc2f2af..000000000000
--- a/components/Container.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { HTMLAttributes } from 'react'
-
-// TODO: Move to `@edgeandnode/components`
-
-// TODO: Add `maxWidth` and `padding` props
-export type ContainerProps = HTMLAttributes<HTMLElement>
-
-export const Container = ({ children, ...props }: ContainerProps) => {
-  return (
-    <div
-      sx={{
-        '--container-max-width': '1280px',
-        '--container-padding': ['20px', null, '32px'],
-        mx: 'auto',
-        maxWidth: 'calc(var(--container-max-width) + 2 * var(--container-padding))',
-        px: 'var(--container-padding)',
-      }}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/layout/Layout.tsx b/layout/Layout.tsx
deleted file mode 100644
index 90dc9c6f3aba..000000000000
--- a/layout/Layout.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { PropsWithChildren, useMemo } from 'react'
-import NextLink from 'next/link'
-import { NavigationMarketing, Footer, LocaleSwitcher, Flex } from '@edgeandnode/components'
-
-import { Container } from '@/components'
-
-export const Layout = ({ children }: PropsWithChildren<{}>) => {
-  const localeSwitcher = useMemo(() => <LocaleSwitcher key="localeSwitcher" />, [])
-
-  return (
-    <div>
-      <div
-        sx={{
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          top: 0,
-          minHeight: '768px',
-          backgroundImage: `url('${process.env.BASE_PATH}/img/page-background.png')`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center top',
-          '@media (min-width: 1440px)': {
-            aspectRatio: '1440/768',
-          },
-        }}
-      />
-      <Flex.Column
-        sx={{
-          minHeight: '100vh',
-        }}
-      >
-        <div sx={{ flexShrink: 0 }}>
-          <Container sx={{ '--container-padding': '32px' }}>
-            <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />
-          </Container>
-        </div>
-        <main sx={{ flexGrow: 1 }}>
-          <Container>{children}</Container>
-        </main>
-        <div sx={{ flexShrink: 0 }}>
-          <Container>
-            <div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
-              <Footer localeSwitcher={localeSwitcher} />
-            </div>
-          </Container>
-        </div>
-      </Flex.Column>
-    </div>
-  )
-}
diff --git a/layout/index.ts b/layout/index.ts
index 1d8d8016780c..5c3df2deb58d 100644
--- a/layout/index.ts
+++ b/layout/index.ts
@@ -1,4 +1,3 @@
-export * from './Layout'
 export * from './MDXLayout'
 export * from './MDXLayoutNav'
 export * from './MDXLayoutPagination'
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6186e62334dc..a35b81c28d65 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,11 +1,21 @@
 import { useMemo, useCallback, useEffect } from 'react'
 import { AppProps } from 'next/app'
+import NextLink from 'next/link'
 import { DefaultSeo, DefaultSeoProps } from 'next-seo'
 import { useRouter } from 'next/router'
-import { Locale, defaultLocale, extractLocaleFromPath, I18nProvider, ThemeProvider } from '@edgeandnode/components'
+import {
+  Layout,
+  NavigationMarketing,
+  Footer,
+  Locale,
+  defaultLocale,
+  extractLocaleFromPath,
+  I18nProvider,
+  ThemeProvider,
+  LocaleSwitcher,
+} from '@edgeandnode/components'
 import '@edgeandnode/components/build/components.css'
 
-import { Layout } from '@/layout'
 import { supportedLocales, translations } from '@/i18n'
 
 const seo: DefaultSeoProps = {
@@ -54,6 +64,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
   seo.openGraph!.locale = locale
 
+  const localeSwitcher = useMemo(() => <LocaleSwitcher key="localeSwitcher" />, [])
+
   return (
     <I18nProvider
       supportedLocales={supportedLocales}
@@ -64,8 +76,31 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
     >
       <ThemeProvider>
         <DefaultSeo {...seo} />
-        <Layout>
-          <Component {...pageProps} />
+        <div
+          sx={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            minHeight: '768px',
+            backgroundImage: `url('${process.env.BASE_PATH}/img/page-background.png')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center top',
+            '@media (min-width: 1440px)': {
+              aspectRatio: '1440/768',
+            },
+          }}
+        />
+        <Layout
+          mainContainer
+          headerContent={
+            <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />
+          }
+          footerContent={<Footer localeSwitcher={localeSwitcher} />}
+        >
+          <div>
+            <Component {...pageProps} />
+          </div>
         </Layout>
       </ThemeProvider>
     </I18nProvider>

From 411a6f6c7dd003dc7377a6a94b98c8d6ee4a9003 Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Wed, 16 Mar 2022 12:15:20 +0800
Subject: [PATCH 2/6] removed container from index file

---
 components/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/index.ts b/components/index.ts
index 163cbc4ac700..6bde6d2e5356 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,6 +1,5 @@
 export * from './Blockquote'
 export * from './Code'
-export * from './Container'
 export * from './Difficulty'
 export * from './EditPageLink'
 export * from './Heading'

From 18261eca78e24551cf41ed5643a59a146d0fbbeb Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Tue, 22 Mar 2022 05:00:28 +0800
Subject: [PATCH 3/6] updated headerSticky prop to true in docs

---
 pages/_app.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index a35b81c28d65..cc86194420ba 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -92,6 +92,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
           }}
         />
         <Layout
+          headerSticky
           mainContainer
           headerContent={
             <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />

From a3abf91fe8e13586904e9c210713a09dbd430fc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= <benoit.rouleau@icloud.com>
Date: Mon, 21 Mar 2022 21:03:51 -0400
Subject: [PATCH 4/6] Fix the build

---
 components/EditPageLink.tsx |  2 +-
 components/Heading.tsx      |  2 +-
 components/NavTree.tsx      | 12 +++++------
 layout/DocumentContext.ts   | 20 ++++++++++++++++++
 layout/MDXLayout.tsx        | 41 ++++++++-----------------------------
 layout/NavContext.ts        | 14 +++++++++++++
 layout/index.ts             |  2 ++
 pages/_app.tsx              |  3 ++-
 8 files changed, 55 insertions(+), 41 deletions(-)
 create mode 100644 layout/DocumentContext.ts
 create mode 100644 layout/NavContext.ts

diff --git a/components/EditPageLink.tsx b/components/EditPageLink.tsx
index a5f677c30e9f..2ee511282011 100644
--- a/components/EditPageLink.tsx
+++ b/components/EditPageLink.tsx
@@ -11,7 +11,7 @@ import {
   useUniqueId,
 } from '@edgeandnode/components'
 
-import { NavContext } from '@/layout'
+import { NavContext } from '@/layout/NavContext'
 import { Link } from '@/components'
 import { useI18n } from '@/i18n'
 
diff --git a/components/Heading.tsx b/components/Heading.tsx
index 397782cfd81b..47234a2b853a 100644
--- a/components/Heading.tsx
+++ b/components/Heading.tsx
@@ -4,7 +4,7 @@ import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { useInView } from 'react-intersection-observer'
 import { useDebounce } from 'react-use'
 
-import { DocumentContext } from '@/layout'
+import { DocumentContext } from '@/layout/DocumentContext'
 import { LinkInline } from '@/components'
 import { useI18n } from '@/i18n'
 
diff --git a/components/NavTree.tsx b/components/NavTree.tsx
index ad9f58697fb2..adb578249005 100644
--- a/components/NavTree.tsx
+++ b/components/NavTree.tsx
@@ -101,10 +101,10 @@ const NavTreeItem = ({
   )
 }
 
-export const NavTreeGroupContext = createContext(null) as Context<{
-  active: boolean
-  open: boolean
-} | null>
+export const NavTreeGroupContext = createContext({
+  active: false,
+  open: false,
+})
 
 const NavTreeGroup = ({ active = false, children, ...props }: NavTreeGroupProps) => {
   const [open, setOpen] = useState(active)
@@ -121,7 +121,7 @@ const NavTreeGroup = ({ active = false, children, ...props }: NavTreeGroupProps)
 
 const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGroupHeadingProps) => {
   const { sx: buttonSx, ...buttonOtherProps } = buttonProps
-  const context = useContext(NavTreeGroupContext)!
+  const context = useContext(NavTreeGroupContext)
   const { t } = useI18n()
 
   return (
@@ -160,7 +160,7 @@ const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGr
 }
 
 const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) => {
-  const context = useContext(NavTreeGroupContext)!
+  const context = useContext(NavTreeGroupContext)
   return (
     <Collapsible.Content
       sx={{
diff --git a/layout/DocumentContext.ts b/layout/DocumentContext.ts
new file mode 100644
index 000000000000..43edadb95fb1
--- /dev/null
+++ b/layout/DocumentContext.ts
@@ -0,0 +1,20 @@
+import { createContext, Context } from 'react'
+
+export type Frontmatter = {
+  title?: string
+}
+
+export type OutlineItem = {
+  id: string
+  title: string
+  level: 1 | 2 | 3 | 4 | 5 | 6
+}
+
+export type DocumentContextProps = {
+  frontmatter?: Frontmatter
+  outline: OutlineItem[]
+  markOutlineItem: (id: string, inOrAboveView: boolean) => void
+  highlightedOutlineItemId: string | null
+}
+
+export const DocumentContext = createContext(null) as Context<DocumentContextProps | null>
diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
index 8eb36aa714c8..ba975d1d330f 100644
--- a/layout/MDXLayout.tsx
+++ b/layout/MDXLayout.tsx
@@ -5,8 +5,15 @@ import { ThemeUIStyleObject } from 'theme-ui'
 import { NewGDSDivider, NewGDSDividerProps, Spacing, Flex } from '@edgeandnode/components'
 import { useSet } from 'react-use'
 
-import { NavItem, NavItemPage } from '@/navigation'
-import { MDXLayoutNav, MDXLayoutPagination, MDXLayoutOutline } from '@/layout'
+import {
+  NavContext,
+  NavContextProps,
+  DocumentContext,
+  DocumentContextProps,
+  MDXLayoutNav,
+  MDXLayoutPagination,
+  MDXLayoutOutline,
+} from '@/layout'
 import {
   Blockquote,
   CodeBlock,
@@ -60,36 +67,6 @@ const mdxStyles = {
   },
 } as ThemeUIStyleObject
 
-export type NavContextProps = {
-  pagePath: string
-  navItems: NavItem[]
-  pageNavItems: NavItemPage[]
-  previousPage: NavItemPage | null
-  currentPage: NavItemPage | null
-  nextPage: NavItemPage | null
-}
-
-export const NavContext = createContext(null) as Context<NavContextProps | null>
-
-export type Frontmatter = {
-  title?: string
-}
-
-export type OutlineItem = {
-  id: string
-  title: string
-  level: 1 | 2 | 3 | 4 | 5 | 6
-}
-
-export type DocumentContextProps = {
-  frontmatter?: Frontmatter
-  outline: OutlineItem[]
-  markOutlineItem: (id: string, inOrAboveView: boolean) => void
-  highlightedOutlineItemId: string | null
-}
-
-export const DocumentContext = createContext(null) as Context<DocumentContextProps | null>
-
 export type MDXLayoutProps = PropsWithChildren<
   Pick<NavContextProps, 'pagePath' | 'navItems'> & Pick<DocumentContextProps, 'frontmatter' | 'outline'>
 >
diff --git a/layout/NavContext.ts b/layout/NavContext.ts
new file mode 100644
index 000000000000..118088f10e24
--- /dev/null
+++ b/layout/NavContext.ts
@@ -0,0 +1,14 @@
+import { createContext, Context } from 'react'
+
+import { NavItem, NavItemPage } from '@/navigation'
+
+export type NavContextProps = {
+  pagePath: string
+  navItems: NavItem[]
+  pageNavItems: NavItemPage[]
+  previousPage: NavItemPage | null
+  currentPage: NavItemPage | null
+  nextPage: NavItemPage | null
+}
+
+export const NavContext = createContext(null) as Context<NavContextProps | null>
diff --git a/layout/index.ts b/layout/index.ts
index 5c3df2deb58d..c70570151076 100644
--- a/layout/index.ts
+++ b/layout/index.ts
@@ -1,3 +1,5 @@
+export * from './DocumentContext'
+export * from './NavContext'
 export * from './MDXLayout'
 export * from './MDXLayoutNav'
 export * from './MDXLayoutPagination'
diff --git a/pages/_app.tsx b/pages/_app.tsx
index dd3016bd5eed..d462e54dd9af 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -103,10 +103,11 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             }}
           />
           <Layout
-            mainContainer
+            headerSticky
             headerContent={
               <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />
             }
+            mainContainer
             footerContent={<Footer localeSwitcher={localeSwitcher} />}
           >
             <div>

From 3d82e5c0fd1300097f532fdfc445d8a2980915fb Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Tue, 22 Mar 2022 11:45:38 +0800
Subject: [PATCH 5/6] removed unnecessary div

---
 pages/_app.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index cc86194420ba..d33aa89c0a11 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -99,9 +99,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
           }
           footerContent={<Footer localeSwitcher={localeSwitcher} />}
         >
-          <div>
-            <Component {...pageProps} />
-          </div>
+          <Component {...pageProps} />
         </Layout>
       </ThemeProvider>
     </I18nProvider>

From c21db6c6e6b0cafc3bb142362b308d06e178104d Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Tue, 22 Mar 2022 11:53:53 +0800
Subject: [PATCH 6/6] removed unnecessary div

---
 pages/_app.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index d462e54dd9af..b620bb85ac4b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -110,9 +110,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             mainContainer
             footerContent={<Footer localeSwitcher={localeSwitcher} />}
           >
-            <div>
-              <Component {...pageProps} />
-            </div>
+            <Component {...pageProps} />
           </Layout>
         </ThemeProvider>
       </I18nProvider>