Add Layout component with sticky header (#88)

* imported Layout component

* removed container from index file

* updated headerSticky prop to true in docs

* Fix the build

* removed unnecessary div

* removed unnecessary div

Co-authored-by: Benoît Rouleau <[email protected]>

Author: alexandriaroberts

components/Container.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/EditPageLink.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/Heading.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/NavTree.tsx

@@ -1,6 +1,5 @@
 export * from './Blockquote'
 export * from './Code'
-export * from './Container'
 export * from './Difficulty'
 export * from './EditPageLink'
 export * from './Heading'

components/index.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/DocumentContext.ts

@@ -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/Layout.tsx

@@ -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/MDXLayout.tsx

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