import React, { useEffect } from 'react'
import App from 'next/app'
import type { AppProps, AppContext } from 'next/app'
import Head from 'next/head'
import { useTheme, ThemeProvider } from '@primer/react'
import { SSRProvider } from '@react-aria/ssr'
import { defaultComponentThemeProps, getThemeProps } from 'components/lib/getThemeProps'
import '../stylesheets/index.scss'
import events from 'components/lib/events'
import experiment from 'components/lib/experiment'
import { LanguagesContext, LanguagesContextT } from 'components/context/LanguagesContext'
type MyAppProps = AppProps & {
csrfToken: string
themeProps: typeof defaultComponentThemeProps
languagesContext: LanguagesContextT
}
const MyApp = ({ Component, pageProps, csrfToken, themeProps, languagesContext }: MyAppProps) => {
useEffect(() => {
events()
experiment()
}, [])
return (
<>
GitHub Documentation
{/* The value in these "/cb-xxxxx" prefixes aren't important. They
just need to be present. They help the CDN cache the asset
for infinity.
Just remember, if you edit these images on disk, remember to
change these numbers
*/}
)
}
MyApp.getInitialProps = async (appContext: AppContext) => {
const { ctx } = appContext
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext)
const req: any = ctx.req
return {
...appProps,
themeProps: getThemeProps(req),
csrfToken: req?.csrfToken?.() || '',
languagesContext: { languages: req.context.languages },
}
}
const SetTheme = ({ themeProps }: { themeProps: typeof defaultComponentThemeProps }) => {
// Cause primer/components to re-evaluate the 'auto' color mode on client side render
const { setColorMode } = useTheme()
useEffect(() => {
setTimeout(() => {
setColorMode(themeProps.colorMode as any)
})
}, [])
return null
}
export default MyApp