Add Layout component with sticky header

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'
 

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'
 

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={{

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'

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>

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'>
 >

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>

layout/index.ts

@@ -1,4 +1,5 @@
-export * from './Layout'
+export * from './DocumentContext'
+export * from './NavContext'
 export * from './MDXLayout'
 export * from './MDXLayoutNav'
 export * from './MDXLayoutPagination'

pages/_app.tsx

@@ -2,11 +2,21 @@ import { useMemo, useCallback, useEffect } from 'react'
 import { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
+import NextLink from 'next/link'
 import { DefaultSeo, DefaultSeoProps } from 'next-seo'
-import { Locale, defaultLocale, extractLocaleFromPath, I18nProvider, ThemeProvider } from '@edgeandnode/components'
+import {
+  I18nProvider,
+  ThemeProvider,
+  Layout,
+  NavigationMarketing,
+  Footer,
+  Locale,
+  LocaleSwitcher,
+  defaultLocale,
+  extractLocaleFromPath,
+} from '@edgeandnode/components'
 import '@edgeandnode/components/build/components.css'
 
-import { Layout } from '@/layout'
 import { supportedLocales, translations } from '@/i18n'
 
 const seo: DefaultSeoProps = {
@@ -55,6 +65,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
   seo.openGraph!.locale = locale
 
+  const localeSwitcher = useMemo(() => <LocaleSwitcher key="localeSwitcher" />, [])
+
   // Disable smooth scrolling while switching routes
   const disableSmoothScrolling = useCallback(
     (disableFn) => {
@@ -75,7 +87,29 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
         pathWithoutLocale={pathWithoutLocale}
       >
         <ThemeProvider disableSmoothScrolling={disableSmoothScrolling} headComponent={Head}>
-          <Layout>
+          <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
+            headerSticky
+            headerContent={
+              <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />
+            }
+            mainContainer
+            footerContent={<Footer localeSwitcher={localeSwitcher} />}
+          >
             <Component {...pageProps} />
           </Layout>
         </ThemeProvider>