mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
Upgrade to React 18
This commit is contained in:
@ -1,8 +1,8 @@
|
||||
import { useTheme } from 'next-themes';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FiMoon, FiSun } from 'react-icons/fi';
|
||||
|
||||
const DarkModeBtn: FC = () => {
|
||||
const DarkModeBtn = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const { systemTheme, theme, setTheme } = useTheme();
|
||||
// When mounted on client, now we can show the UI
|
||||
|
@ -1,9 +1,8 @@
|
||||
import { FC } from 'react';
|
||||
import { FiGithub } from 'react-icons/fi';
|
||||
|
||||
const nowDay = new Date().getFullYear();
|
||||
|
||||
const Footer: FC = () => {
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<footer className="max-w-6xl px-4 mx-auto xl:px-0">
|
||||
|
@ -1,6 +1,6 @@
|
||||
import cn from 'classnames';
|
||||
import Link from 'next/link';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { FiMenu } from 'react-icons/fi';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { DocSearch } from '@docsearch/react';
|
||||
@ -31,7 +31,7 @@ const txtMenu = [
|
||||
},
|
||||
];
|
||||
|
||||
const HeadBar: FC = () => {
|
||||
const HeadBar = () => {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const handleClick = useCallback(() => {
|
||||
setShowMenu((showMenu) => !showMenu);
|
||||
|
@ -1,5 +1,4 @@
|
||||
import Link from 'next/link';
|
||||
import { FC } from 'react';
|
||||
import { Post } from 'types';
|
||||
import cn from 'classnames';
|
||||
|
||||
@ -7,7 +6,7 @@ interface Props {
|
||||
post: Post;
|
||||
}
|
||||
|
||||
const PostCard: FC<Props> = ({ post }) => {
|
||||
const PostCard = ({ post }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Link href={`/p/${post.slug}`} passHref>
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { FC } from 'react';
|
||||
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
|
||||
import '@codesandbox/sandpack-react/dist/index.css';
|
||||
import { useTheme } from 'next-themes';
|
||||
@ -6,7 +5,7 @@ import useInView from 'lib/hooks/useInView';
|
||||
|
||||
interface Props extends SandpackProps {}
|
||||
|
||||
const RUASandpack: FC<Props> = ({ ...rest }) => {
|
||||
const RUASandpack = ({ ...rest }: Props) => {
|
||||
const { systemTheme, theme } = useTheme();
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { FC } from 'react';
|
||||
import { Gist } from 'types';
|
||||
import { unified } from 'unified';
|
||||
import remarkParse from 'remark-parse';
|
||||
@ -12,7 +11,7 @@ interface Props {
|
||||
f: string;
|
||||
}
|
||||
|
||||
const GistsCode: FC<Props> = ({ gist, f }) => {
|
||||
const GistsCode = ({ gist, f }: Props) => {
|
||||
const file = gist.files;
|
||||
|
||||
const test = unified()
|
||||
|
@ -1,10 +1,9 @@
|
||||
import { FC } from 'react';
|
||||
import Giscus from '@giscus/react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import useInView from 'lib/hooks/useInView';
|
||||
import Image from 'next/image';
|
||||
|
||||
const PostComment: FC = () => {
|
||||
const PostComment = () => {
|
||||
const { systemTheme, theme } = useTheme();
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { FC } from 'react';
|
||||
import { getHeadings } from 'lib/utils';
|
||||
import Anchor from 'components/mdx/Anchor';
|
||||
|
||||
@ -6,7 +5,7 @@ interface Props {
|
||||
headings: ReturnType<typeof getHeadings>;
|
||||
}
|
||||
|
||||
const PostTOC: FC<Props> = ({ headings }) => {
|
||||
const PostTOC = ({ headings }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<h2>What's inside?</h2>
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { FC } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { MyMatters } from 'types';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
@ -11,9 +10,10 @@ const PostComment = dynamic(() => import('components/post/PostComment'));
|
||||
|
||||
interface Props extends MyMatters {
|
||||
showTOC?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const MainLayout: FC<Props> = ({ title, date, showTOC = true, children }) => {
|
||||
const MainLayout = ({ title, date, showTOC = true, children }: Props) => {
|
||||
const contentString = renderToString(children as any);
|
||||
const headings = getHeadings(contentString);
|
||||
|
||||
|
@ -1,10 +1,13 @@
|
||||
import { FC } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const Footer = dynamic(() => import('components/Footer'));
|
||||
const HeadBar = dynamic(() => import('components/NavBar'));
|
||||
|
||||
const MainLayout: FC = ({ children }) => {
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const MainLayout = ({ children }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<HeadBar />
|
||||
|
@ -23,7 +23,6 @@ const composedConfig = composePlugins([
|
||||
reactStrictMode: true,
|
||||
experimental: {
|
||||
runtime: 'nodejs',
|
||||
reactMode: 'concurrent',
|
||||
outputStandalone: true,
|
||||
},
|
||||
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||||
|
@ -14,7 +14,7 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"typeRoots": ["./types", "./node_modules/@types"],
|
||||
// "typeRoots": ["./types", "./node_modules/@types"],
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
|
Reference in New Issue
Block a user