From 07dc479b7ab673408dec449ffc5b00d1cec5e94d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Rouleau?= Date: Fri, 25 Mar 2022 14:30:16 -0400 Subject: [PATCH] Update `@edgeandnode/components from` v21 to v22 (#92) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Update dependencies * SEO / locale fixes * Fix bug where the top half of `NewGDSDivider` is clipped Co-authored-by: Alexandria Roberts --- components/Container.tsx | 23 - components/EditPageLink.tsx | 2 +- components/Heading.tsx | 2 +- components/NavTree.tsx | 12 +- components/index.ts | 1 - layout/DocumentContext.ts | 20 + layout/Layout.tsx | 50 -- layout/MDXLayout.tsx | 49 +- layout/MDXLayoutNav.tsx | 2 +- layout/MDXLayoutOutline.tsx | 4 +- layout/MDXLayoutPagination.tsx | 8 +- layout/NavContext.ts | 14 + layout/index.ts | 3 +- nginx.conf | 2 - package.json | 35 +- pages/_app.tsx | 107 ++- pages/_document.tsx | 2 - yarn.lock | 1172 ++++++++++++++++---------------- 18 files changed, 755 insertions(+), 753 deletions(-) delete mode 100644 components/Container.tsx create mode 100644 layout/DocumentContext.ts delete mode 100644 layout/Layout.tsx create mode 100644 layout/NavContext.ts 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 - -export const Container = ({ children, ...props }: ContainerProps) => { - return ( -
- {children} -
- ) -} 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 ( void + highlightedOutlineItemId: string | null +} + +export const DocumentContext = createContext(null) as Context 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(() => , []) - - return ( -
-
- -
- - - -
-
- {children} -
-
- -
-
-
- -
- -
- ) -} diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx index 8eb36aa714c8..ff08c57eb73d 100644 --- 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 - -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 - export type MDXLayoutProps = PropsWithChildren< Pick & Pick > @@ -154,9 +131,7 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children } return ( - - {frontmatter?.title ? `${frontmatter.title} - ` : ''}The Graph Docs - +
- Docs + Docs {title} {