mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 01:01:38 +00:00
d1b7c5c7ee
* Upgrade react 18.0.0-rc.0 * Remove ts-node * Fix type error * Fix type errorRemove useless log
102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import {
|
|
ReactElement,
|
|
ReactNode,
|
|
useCallback,
|
|
useEffect,
|
|
useState,
|
|
} from 'react';
|
|
import type { NextPage } from 'next';
|
|
import type { AppProps } from 'next/app';
|
|
import Head from 'next/head';
|
|
import { useRouter } from 'next/router';
|
|
import { Chakra } from 'Chakra';
|
|
import { Progress } from '@chakra-ui/react';
|
|
import { Provider } from 'react-redux';
|
|
import { store } from 'app/store';
|
|
import 'styles/globals.css';
|
|
import 'styles/rua.css';
|
|
import { Text } from '@chakra-ui/react';
|
|
import { MDXProvider } from '@mdx-js/react';
|
|
import RuaH2 from 'components/mdx/RuaH2';
|
|
|
|
type NextPageWithLayout = NextPage & {
|
|
// eslint-disable-next-line no-unused-vars
|
|
getLayout?: (page: ReactElement) => ReactNode;
|
|
};
|
|
|
|
type AppPropsWithLayout = AppProps & {
|
|
Component: NextPageWithLayout;
|
|
};
|
|
|
|
// MDX components
|
|
const mdxCompoents = {
|
|
h2: RuaH2,
|
|
p: Text,
|
|
};
|
|
|
|
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
|
// Use the layout defined at the page level, if available
|
|
const getLayout = Component.getLayout ?? ((page) => page);
|
|
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleStart = useCallback(
|
|
(url: string) => {
|
|
url !== router.pathname ? setLoading(true) : setLoading(false);
|
|
},
|
|
[router.pathname]
|
|
);
|
|
|
|
const handleComplete = useCallback(() => {
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
router.events.on('routeChangeStart', handleStart);
|
|
router.events.on('routeChangeComplete', handleComplete);
|
|
router.events.on('routeChangeError', handleComplete);
|
|
|
|
// If the component is unmounted, unsubscribe
|
|
// from the event with the `off` method:
|
|
return () => {
|
|
router.events.off('routeChangeStart', handleStart);
|
|
router.events.off('routeChangeComplete', handleComplete);
|
|
router.events.off('routeChangeError', handleComplete);
|
|
};
|
|
}, [handleComplete, handleStart, router.events]);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<link rel="shortcut icon" href="/images/img/favicon.webp"></link>
|
|
<meta name="keywords" content="Blog RUA" />
|
|
<meta name="description" content="Personal blog." />
|
|
<meta name="author" content="Arthur,i@rua.plus" />
|
|
</Head>
|
|
|
|
<Provider store={store}>
|
|
<Chakra cookies={pageProps.cookies}>
|
|
{loading && (
|
|
<Progress
|
|
position="fixed"
|
|
top="0"
|
|
left="0"
|
|
right="0"
|
|
size="xs"
|
|
isIndeterminate
|
|
zIndex="1984"
|
|
/>
|
|
)}
|
|
<MDXProvider components={mdxCompoents}>
|
|
{getLayout(<Component {...pageProps} />)}
|
|
</MDXProvider>
|
|
</Chakra>
|
|
</Provider>
|
|
</>
|
|
);
|
|
}
|
|
export default MyApp;
|
|
|
|
export { getServerSideProps } from '../Chakra';
|