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..ba975d1d330f 100644 --- a/layout/MDXLayout.tsx +++ b/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 - -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 > diff --git a/layout/NavContext.ts b/layout/NavContext.ts new file mode 100644 index 000000000000..118088f10e24 --- /dev/null +++ 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 diff --git a/layout/index.ts b/layout/index.ts index 1d8d8016780c..c70570151076 100644 --- 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/pages/_app.tsx b/pages/_app.tsx index 6a07d16e14b4..b620bb85ac4b 100644 --- a/pages/_app.tsx +++ b/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(() => , []) + // Disable smooth scrolling while switching routes const disableSmoothScrolling = useCallback( (disableFn) => { @@ -75,7 +87,29 @@ const MyApp = ({ Component, pageProps }: AppProps) => { pathWithoutLocale={pathWithoutLocale} > - +
+ + } + mainContainer + footerContent={