import { MDXProvider } from '@mdx-js/react' ; import React , { createContext , useContext , ReactNode , ComponentType , useEffect , useMemo , } from 'react' ; import MDXComponents from './components/mdx' ; import { ColorModeProvider , Box , CSSReset , GlobalStyle , theme , ThemeProvider , } from '@chakra-ui/react' ; import { PrismTheme } from 'prism-react-renderer' ; import darkPrismTheme from 'prism-react-renderer/themes/oceanicNext' ; import { GithubLink , ColorModeSwitch } from './components/NavBar' ; import { Arrow , ArrowEmpty } from './components/icons' ; import { DokzTableOfContents } from './types' ; import NextHead from 'next/head' ; import { useRouter } from 'next/router' ; import { PropagatedThemeProvider } from './components/Wrapper' ; import { Faded } from 'baby-i-am-faded' ; export type DokzProviderProps = { children ? : any ; headerLogo ? : ReactNode ; animate ? : boolean ; fontSize ? : string | string [ ] ; fontWeight ? : string ; docsRootPath ? : string ; headTitlePrefix ? : string ; listItemIcon ? : React . ComponentType ; listItemIconEmpty ? : React . ComponentType ; headerItems ? : ReactNode [ ] | ReactNode ; footer ? : ReactNode ; mdxComponents ? : { [ k ] : ComponentType < any > ; } ; prismTheme ? : { dark : PrismTheme ; light : PrismTheme ; } ; maxPageWidth ? : string ; initialColorMode ? : 'dark' | 'light' ; bodyColor ? : { dark : string ; light : string ; } ; headingColor ? : { dark : string ; light : string ; } ; sidebarOrdering ? : SidebarOrdering ; fontFamily ? : string ; githubUrl ? : string ; branch ? : string ; } ; export type SidebarOrdering = { [ k ] : SidebarOrdering ; } | boolean ; const defaultDarkPrismTheme = { ... darkPrismTheme , plain : { ... darkPrismTheme . plain , backgroundColor : '#2D3748' , } , } ; export const defaultDokzContext = { initialColorMode : 'light' , headTitlePrefix : '' , animate : false , branch : 'master' , footer : null , headerLogo : ( < Box fontWeight = 'medium' fontSize = '32px' > Your Logo < / Box > ) , listItemIcon : Arrow , listItemIconEmpty : ArrowEmpty , headerItems : [ < ColorModeSwitch key = { 0 } />], prismTheme : { dark : defaultDarkPrismTheme , light : darkPrismTheme } , maxPageWidth : '1600px' , bodyColor : { light : '#222' , dark : 'rgba(255,255,255,.9)' } , headingColor : { light : '#111' , dark : 'rgba(255,255,255,1)' } , fontSize : '16px' , fontFamily : `-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"` , fontWeight : '400' , } ; const DokzContext = createContext ( defaultDokzContext ) ; export function useDokzConfig ( ) { const ctx = useContext ( DokzContext ) ; return ctx ; } export function useAnimationComponent ( ) { const { animate } = useDokzConfig ( ) ; const isFirstLoad = typeof window === 'undefined' || ! window [ 'DOKZ_ROUTE_CHANGED' ] ; const C = useMemo ( ( ) => { if ( ! isFirstLoad && animate ) { Faded . defaultProps = { damping : 0.18 } ; return Faded ; } return ( { cascade , damping , ... rest } ) => { return < div { ... rest } / > ; } ; } , [ animate , isFirstLoad ] ) ; return C ; } export function DokzProvider ( { children , ... rest } ) { const ctx = { ... defaultDokzContext , ... rest } ; const { mdxComponents : userMDXComponents = { } , initialColorMode } = ctx ; useRouterScroll ( ) ; const router = useRouter ( ) ; useEffect ( ( ) => { const handler = ( ) => { if ( typeof window !== 'undefined' ) { window [ 'DOKZ_ROUTE_CHANGED' ] = true ; } } ; router . events . on ( 'routeChangeStart' , handler ) ; return ( ) => { router . events . off ( 'routeChangeStart' , handler ) ; } ; } , [ ] ) ; return ( < DokzContext . Provider value = { ctx } > < MDXProvider components = { { ... MDXComponents , ... userMDXComponents } } > { children } < /MDXProvider> < /DokzContext.Provider>); } const defaultTableOfContents = { children : [ ] , depth : 0 , } ; export const TableOfContentsContext = createContext ( { tableOfContents : defaultTableOfContents , } ) ; function useRouterScroll ( { behavior = 'smooth' as ScrollBehavior , left = 0 , top = 0 , } = { } ) { const router = useRouter ( ) ; useEffect ( ( ) => { const handleRouteChangeComplete = ( ) => { if ( typeof document !== 'undefined' ) { document . body . scrollTop = document . documentElement . scrollTop = 0 ; } } ; router . events . on ( 'routeChangeComplete' , handleRouteChangeComplete ) ; return ( ) => { router . events . off ( 'routeChangeComplete' , handleRouteChangeComplete ) ; } ; } , [ behavior , left , top ] ) ; }