Update @edgeandnode/components from v21 to v22 (#92)

* Remove scroll animation after changing the language or clicking on a link

* Update dependencies

* 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]>

* Update dependencies

* SEO / locale fixes

* Fix bug where the top half of `NewGDSDivider` is clipped

Co-authored-by: Alexandria Roberts <[email protected]>

Author: benface

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

@@ -1,12 +1,19 @@
-import { PropsWithChildren, createContext, Context, useMemo, useCallback } from 'react'
-import Head from 'next/head'
+import { PropsWithChildren, useMemo, useCallback } from 'react'
+import { NextSeo } from 'next-seo'
 import { MDXProvider } from '@mdx-js/react'
 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'>
 >
@@ -154,9 +131,7 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children }
   return (
     <NavContext.Provider value={{ pagePath, navItems, pageNavItems, previousPage, currentPage, nextPage }}>
       <DocumentContext.Provider value={{ frontmatter, outline, markOutlineItem, highlightedOutlineItemId }}>
-        <Head>
-          <title>{frontmatter?.title ? `${frontmatter.title} - ` : ''}The Graph Docs</title>
-        </Head>
+        <NextSeo title={`${frontmatter?.title ? `${frontmatter.title} - ` : ''} The Graph Docs`} />
 
         <div
           sx={{

layout/Layout.tsx

@@ -69,7 +69,7 @@ const MobileWrapper = ({ title, children }: PropsWithChildren<{ title?: string }
           sx={{ px: Spacing.L_XL, py: '20px' }}
         >
           <Flex.Column as="span" gap={Spacing.S}>
-            <Text.S10 color="White64">Docs</Text.S10>
+            <Text.C10 color="White64">Docs</Text.C10>
             <Text size="16px">{title}</Text>
           </Flex.Column>
           <Flex.Column

layout/MDXLayout.tsx

@@ -30,9 +30,9 @@ export const MDXLayoutOutline = () => {
       </Flex.Row>
       <NewGDSDivider sx={{ my: Spacing.XL }} />
       <nav sx={{ pr: '16px' }}>
-        <Text.S10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
+        <Text.C10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
           {t('global.pageSections')}
-        </Text.S10>
+        </Text.C10>
         <Text as="ul" size="14px" color="White48">
           {outline.map((outlineItem, outlineItemIndex) => {
             if (outlineItem.level > 3) {