xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update about page

Browse Source 
* update mdx
* remove useless css file
* add mdx layouts
* add custom mdx components
* rename loading components
This commit is contained in:
Defectink
2021-12-24 12:09:49 +08:00
parent 971962069e
commit 1d91f1ad4f
21 changed files with 114 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ArchiveCard.tsx
View File

@ -37,7 +37,12 @@ const ArchiveCard: FC<Props> = ({ post }) => {
return (
<>
<LinkBox as="article" borderBottom="1px" borderColor={borderColor}>
<LinkBox
as="article"
borderBottom="1px"
borderColor={borderColor}
_last={{ border: 'unset' }}
>
<Flex
p="1.25rem"
key={post.url}

12
components/NavBar.tsx
View File

@ -52,18 +52,6 @@ const menu: MenuItem[] = [
path: '/archive',
icon: FiArchive,
},
// {
// id: 2,
// name: '闲言',
// path: '/message',
// icon: FiMessageSquare,
// },
// {
// id: 3,
// name: '密语',
// path: '/pgp',
// icon: FiLock,
// },
{
id: 4,
name: '关于',

0
components/loading/ArchiveLoadingCard.tsx → components/loading/ArchiveCardLoading.tsx
View File

0
components/loading/PostLoadingTOC.tsx → components/loading/PostTOCLoading.tsx
View File

14
components/mdx/RuaH2.tsx Normal file
View File

@ -0,0 +1,14 @@
import { FC } from 'react';
import { Heading } from '@chakra-ui/react';
const RuaH2: FC = ({ children }) => {
return (
<>
<Heading my="0.5rem" fontSize="1.6rem" lineHeight="2rem" margin="1rem 0">
{children}
</Heading>
</>
);
};
export default RuaH2;

36
layouts/MDXLayout.tsx Normal file
View File

@ -0,0 +1,36 @@
import { FC } from 'react';
import Head from 'next/head';
import HomeLayout from 'layouts/HomeLayout';
import useGetColors from 'lib/hooks/useGetColors';
import { Box } from '@chakra-ui/react';
interface Props {
title: string;
}
const MDXLayout: FC<Props> = ({ title, children }) => {
const { boxBg } = useGetColors();
return (
<>
<Head>
<title>{title}</title>
</Head>
<HomeLayout>
<Box
as="article"
w={['full', 'full', '55rem']}
borderRadius="10px"
shadow="lg"
overflow="hidden"
bg={boxBg}
p={['1rem', '1rem', '1.5rem']}
>
{children}
</Box>
</HomeLayout>
</>
);
};
export default MDXLayout;

2
next.config.js
View File

@ -10,5 +10,5 @@ const withMDX = require('@next/mdx')({
module.exports = withMDX({
reactStrictMode: true,
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
});

1
package.json
View File

@ -54,6 +54,7 @@
"devDependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/mdx-js__react": "^1.5.5",
"@types/react": "17.0.31",
"@types/react-instantsearch-dom": "^6.12.0",
"@types/react-redux": "^7.1.20",

15
pages/_app.tsx
View File

@ -13,8 +13,11 @@ import { Chakra } from 'Chakra';
import { Progress } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import { store } from 'app/store';
import 'assets/css/rua.css';
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
@ -25,6 +28,12 @@ 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);
@ -83,7 +92,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
zIndex="1984"
/>
)}
{getLayout(<Component {...pageProps} />)}
<MDXProvider components={mdxCompoents}>
{getLayout(<Component {...pageProps} />)}
</MDXProvider>
</Chakra>
</Provider>
</>

32
pages/about.mdx Normal file
View File

@ -0,0 +1,32 @@
import { Link, Icon } from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';
import AboutMDXLayout from 'layouts/MDXLayout';
import { FiGithub } from 'react-icons/fi';
<AboutMDXLayout title="RUA - About">
## Hi, there 👋
这里是某条咸鱼利用业余时间构建的 Blog。🐟 它称不上完美，但也还算凑合，起码能显示文字。
## 关于我
无死角的咸鱼，爱玩游戏。
目前从事前端，站在巨人的肩膀上为自己获取微薄的收入。
## 找到我
<Link
href="https://github.com/DefectingCat"
isExternal
_focus={{ boxShadow: 'unset' }}
>
<Icon as={FiGithub} w="2rem" h="2rem" />
</Link>
## 还有什么吗？
对了，它是使用我最爱的 React Framework：<Link href="https://nextjs.org/" color="teal.500" isExternal>Next.js<ExternalLinkIcon mx="2px" /></Link>构建的。未来，这里会添加更多内容的。
</AboutMDXLayout>

5
pages/about.module.css
View File

@ -1,5 +0,0 @@
.wrapper h2 {
font-size: 1.6rem;
line-height: 2rem;
margin: 1rem 0;
}

51
pages/about.tsx
View File

@ -1,51 +0,0 @@
import { Box, Heading, Text, Link } from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';
import Head from 'next/head';
import { ReactElement } from 'react';
import HomeLayout from 'layouts/HomeLayout';
import useGetColors from 'lib/hooks/useGetColors';
import style from './about.module.css';
const about = () => {
const { boxBg } = useGetColors();
return (
<>
<Head>
<title>RUA - About</title>
</Head>
<Box
as="article"
w={['full', 'full', '55rem']}
borderRadius="10px"
shadow="lg"
overflow="hidden"
bg={boxBg}
p={['1rem', '1rem', '1.5rem']}
className={style.wrapper}
>
<Heading my="0.5rem">Hi, there 👋</Heading>
<Text>
这里是某条咸鱼利用业余时间构建的 Blog。🐟
它称不上完美，但也还算凑合，起码能显示文字。
</Text>
<Heading my="0.5rem">还有什么吗？</Heading>
<Text>
对了，它是使用我最爱的 React Framework：
<Link href="https://nextjs.org/" color="teal.500" isExternal>
Next.js
<ExternalLinkIcon mx="2px" />
</Link>
构建的。未来，这里会添加更多内容的。
</Text>
</Box>
</>
);
};
about.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout>{page}</HomeLayout>;
};
export default about;

3
pages/archive.module.css
View File

@ -1,3 +0,0 @@
.archive-wrapper article:last-child {
border: unset;
}

6
pages/archive.tsx
View File

@ -5,12 +5,11 @@ import dynamic from 'next/dynamic';
import { Box, Text, Flex } from '@chakra-ui/react';
import { getArchiveData, getSortedPostsData } from 'lib/posts';
import useGetColors from 'lib/hooks/useGetColors';
import style from './archive.module.css';
import HomeLayout from 'layouts/HomeLayout';
import ArchiveLoadingCard from 'components/loading/ArchiveLoadingCard';
import ArchiveCardLoading from 'components/loading/ArchiveCardLoading';
const ArchiveCard = dynamic(() => import('components/ArchiveCard'), {
loading: () => <ArchiveLoadingCard />,
loading: () => <ArchiveCardLoading />,
});
export const getStaticProps = async () => {
@ -47,7 +46,6 @@ const archive = ({
overflow="hidden"
boxShadow="card"
mt="0.5rem"
className={style['archive-wrapper']}
>
{archiveData[year].map((post) => (
<ArchiveCard post={post} key={post.id} />

5
pages/message.module.css
View File

@ -1,5 +0,0 @@
.wrapper h2 {
font-size: 1.6rem;
line-height: 2rem;
margin: 1rem 0;
}

37
pages/message.tsx
View File

@ -1,37 +0,0 @@
import { ReactElement } from 'react';
import Head from 'next/head';
import { Box, Heading } from '@chakra-ui/react';
import useGetColors from 'lib/hooks/useGetColors';
import HomeLayout from 'layouts/HomeLayout';
import style from './message.module.css';
const message = () => {
const { boxBg } = useGetColors();
return (
<>
<Head>
<title>RUA - Message</title>
</Head>
<Box
as="article"
w={['full', 'full', '55rem']}
borderRadius="10px"
shadow="lg"
overflow="hidden"
bg={boxBg}
p={['1rem', '1rem', '1.5rem']}
className={style.wrapper}
>
<Heading my="0.5rem">Hi, there 👋</Heading>
</Box>
</>
);
};
message.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout>{page}</HomeLayout>;
};
export default message;

4
pages/p/[slug].tsx
View File

@ -22,7 +22,7 @@ import { RootState } from 'app/store';
import { cleanFromPath } from 'features/router/routerSlice';
import useGetColors from 'lib/hooks/useGetColors';
import { useAppSelector, useAppDispatch } from 'app/hooks';
import PostLoadingTOC from 'components/loading/PostLoadingTOC';
import PostTOCLoading from 'components/loading/PostTOCLoading';
import PostHeadLoading from 'components/loading/PostHeadLoading';
import PostCommentLoading from 'components/loading/PostCommentLoading';
import useIntersection from 'lib/hooks/useIntersection';
@ -39,7 +39,7 @@ const PostHead = dynamic(() => import('components/post/PostHead'), {
loading: () => <PostHeadLoading />,
});
const PostTOC = dynamic(() => import('components/post/PostTOC'), {
loading: () => <PostLoadingTOC />,
loading: () => <PostTOCLoading />,
});
export async function getStaticPaths() {

5
pages/pgp.module.css
View File

@ -1,5 +0,0 @@
.wrapper h2 {
font-size: 1.6rem;
line-height: 2rem;
margin: 1rem 0;
}

37
pages/pgp.tsx
View File

@ -1,37 +0,0 @@
import { ReactElement } from 'react';
import useGetColors from 'lib/hooks/useGetColors';
import Head from 'next/head';
import { Box, Heading } from '@chakra-ui/react';
import style from './pgp.module.css';
import HomeLayout from 'layouts/HomeLayout';
const pgp = () => {
const { boxBg } = useGetColors();
return (
<>
<Head>
<title>RUA - Message</title>
</Head>
<Box
as="article"
w={['full', 'full', '55rem']}
borderRadius="10px"
shadow="lg"
overflow="hidden"
bg={boxBg}
p={['1rem', '1rem', '1.5rem']}
className={style.wrapper}
>
<Heading my="0.5rem">Hi, there 👋</Heading>
</Box>
</>
);
};
pgp.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout>{page}</HomeLayout>;
};
export default pgp;

0
assets/css/rua.css → styles/rua.css
View File

7
yarn.lock
View File

@ -1895,6 +1895,13 @@
resolved "https://registry.nlark.com/@types/mdurl/download/@types/mdurl-1.0.2.tgz?cache=0&sync_timestamp=1629708392076&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fmdurl%2Fdownload%2F%40types%2Fmdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
integrity sha1-4s6dg6YTus8oTHvn1JGUXjnh+Ok=
"@types/mdx-js__react@^1.5.5":
version "1.5.5"
resolved "https://registry.npmmirror.com/@types/mdx-js__react/download/@types/mdx-js__react-1.5.5.tgz#fa6daa1a28336d77b6cf071aacc7e497600de9ee"
integrity sha1-+m2qGigzbXe2zwcarMfkl2AN6e4=
dependencies:
"@types/react" "*"
"@types/ms@*":
version "0.7.31"
resolved "https://registry.nlark.com/@types/ms/download/@types/ms-0.7.31.tgz?cache=0&sync_timestamp=1629708397505&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fms%2Fdownload%2F%40types%2Fms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"