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: Benoî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]>
graphprotocol · Mar 25, 2022 · 07dc479 · 07dc479
1 parent 1be083a
commit 07dc479
Show file tree

Hide file tree

Showing 18 changed files with 755 additions and 753 deletions.
diff --git a/components/Container.tsx b/components/Container.tsx
diff --git 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
@@ -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
@@ -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/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'

diff --git a/layout/DocumentContext.ts 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/Layout.tsx b/layout/Layout.tsx
diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
@@ -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={{

diff --git a/layout/MDXLayoutNav.tsx b/layout/MDXLayoutNav.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

diff --git a/layout/MDXLayoutOutline.tsx b/layout/MDXLayoutOutline.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) {

diff --git a/layout/MDXLayoutPagination.tsx b/layout/MDXLayoutPagination.tsx
@@ -10,9 +10,9 @@ export const MDXLayoutPagination = () => {
   const { t } = useI18n()
 
   return (
-    <div sx={{ overflow: 'hidden' }}>
+    <div>
       <NewGDSDivider diamonds />
-      <Flex.Row justify="space-between" sx={{ mt: Spacing.XL }}>
+      <Flex.Row justify="space-between" sx={{ mt: Spacing.XL, overflow: 'hidden' }}>
         <div>
           {previousPage && (
             <Link
@@ -30,7 +30,7 @@ export const MDXLayoutPagination = () => {
               <Flex.Column align="start" gap={Spacing.S} sx={{ textAlign: 'left' }}>
                 <Flex.Row align="center" gap={Spacing.S}>
                   <Icon.ArrowLeft title="" size="12px" />
-                  <Text.S10>{t('global.previous')}</Text.S10>
+                  <Text.C10>{t('global.previous')}</Text.C10>
                 </Flex.Row>
                 <Text
                   weight="Semibold"
@@ -67,7 +67,7 @@ export const MDXLayoutPagination = () => {
             >
               <Flex.Column align="end" gap={Spacing.S} sx={{ textAlign: 'right' }}>
                 <Flex.Row align="center" gap={Spacing.S}>
-                  <Text.S10>{t('global.next')}</Text.S10>
+                  <Text.C10>{t('global.next')}</Text.C10>
                   <Icon.ArrowRight title="" size="12px" />
                 </Flex.Row>
                 <Text

diff --git a/layout/NavContext.ts 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
@@ -1,4 +1,5 @@
-export * from './Layout'
+export * from './DocumentContext'
+export * from './NavContext'
 export * from './MDXLayout'
 export * from './MDXLayoutNav'
 export * from './MDXLayoutPagination'

diff --git a/nginx.conf b/nginx.conf
@@ -48,8 +48,6 @@ http {
         rewrite ^/docs/hostedservice/(.*)$                              $scheme://$http_host/docs/en/hosted-service/$1  permanent;
         rewrite ^/docs/(?!(?:[a-zA-Z][a-zA-Z]|_next|img)(?:/|$))(.*)$   $scheme://$http_host/docs/en/$1                 permanent; # Redirect to `/en` if no language in URL and not an asset URL
 
-        # TODO: Add support for new localized URLs
-
         location / {
             try_files $uri $uri.html $uri/index.html =404;
 

diff --git a/package.json b/package.json
@@ -1,33 +1,26 @@
 {
-  "name": "graph-docs",
+  "name": "@graphprotocol/docs",
   "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "rm -rf .next && next build",
-    "start": "next start",
+    "export": "rm -rf out && next export -o out/docs",
     "lint": "yarn lint:eslint && yarn lint:types",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:types",
     "lint:eslint": "next lint",
     "lint:types": "tsc --noEmit",
     "prettier": "prettier --write .",
-    "export": "rm -rf out && next export -o out/docs",
+    "prettier:check": "prettier --check .",
     "prepare": "husky install",
     "docker:build": "DOCKER_BUILDKIT=1 docker build . -t docs",
     "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs"
   },
-  "husky": {
-    "hooks": {
-      "pre-push": "yarn build"
-    }
-  },
   "dependencies": {
-    "@edgeandnode/components": "^21.0.3",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
-    "@mdx-js/loader": "^2.0.0",
-    "@mdx-js/mdx": "^2.0.0",
-    "@mdx-js/react": "^2.0.0",
+    "@edgeandnode/components": "^22.0.0",
+    "@emotion/react": "^11.8.2",
+    "@mdx-js/loader": "^2.1.0",
+    "@mdx-js/react": "^2.1.0",
     "@next/mdx": "^12.1.0",
     "@radix-ui/react-collapsible": "0.1.6",
     "@radix-ui/react-popover": "^0.1.6",
@@ -47,27 +40,23 @@
     "@svgr/webpack": "^6.2.1",
     "@types/color": "^3.0.3",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^16.11.24",
-    "@types/react": "^17.0.39",
+    "@types/node": "^16.11.26",
+    "@types/react": "^17.0.41",
     "acorn": "^8.7.0",
     "acorn-jsx": "^5.3.2",
-    "eslint": "^8.10.0",
+    "eslint": "^8.11.0",
     "eslint-config-next": "^12.1.0",
     "husky": "^7.0.4",
     "lodash-es": "^4.17.21",
     "path": "^0.12.7",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^1.1.1",
     "serialize-as-code": "^2.0.1",
-    "typescript": "4.5.5",
+    "typescript": "4.6.2",
     "unist-util-visit": "^4.1.0",
     "url": "^0.11.0"
   },
-  "resolutions": {
-    "@mdx-js/loader": "^2.0.0",
-    "@mdx-js/mdx": "^2.0.0"
-  },
   "engines": {
     "node": ">=16"
   }