Modify styles

* add table of contents plugin
This commit is contained in:
DefectingCat
2022-03-23 21:05:57 +08:00
parent 717eee7d0a
commit 1bb382409b
7 changed files with 95 additions and 6 deletions

View File

@ -5,7 +5,7 @@ const nowDay = new Date().getFullYear();
const Footer: FC = () => {
return (
<>
<footer className="px-10">
<footer className="max-w-6xl px-10 mx-auto lg:px-0">
<div className="h-[2px] bg-slate-500"></div>
<div className="py-4">
&copy; 2022-{nowDay} Powered by Next.js 💙 xfy

View File

@ -27,7 +27,7 @@ const HeadBar: FC = () => {
<header
className={cn(
'flex justify-between mx-auto',
'max-w-6xl p-6 h-[84px]',
'max-w-6xl p-6 lg:px-0 h-[84px]',
'items-center relative'
)}
>

View File

@ -1,15 +1,42 @@
import { FC } from 'react';
import dynamic from 'next/dynamic';
import { renderToString } from 'react-dom/server';
const Footer = dynamic(() => import('components/Footer'));
const HeadBar = dynamic(() => import('components/NavBar'));
const MainLayout: FC = ({ children }) => {
// const contentString = renderToString(children as any);
// const getHeadings = (source: string) => {
// const regex = /<h2>(.*?)<\/h2>/g;
// if (source.match(regex)) {
// return source.match(regex)?.map((heading) => {
// const headingText = heading.replace('<h2>', '').replace('</h2>', '');
// const link = '#' + headingText.replace(/ /g, '_').toLowerCase();
// return {
// text: headingText,
// link,
// };
// });
// }
// return [];
// };
// const headings = getHeadings(contentString);
// console.log(headings);
return (
<>
<HeadBar />
<main id="article">{children}</main>
<main id="article" className="max-w-5xl px-8 mx-auto my-10">
{children}
</main>
<Footer />
</>

View File

@ -1,13 +1,14 @@
import remarkFrontmatter from 'remark-frontmatter';
import mdx from '@next/mdx';
import rehypePrism from '@mapbox/rehype-prism';
import remarkToc from 'remark-toc';
const withMDX = mdx({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkFrontmatter],
remarkPlugins: [remarkFrontmatter, remarkToc],
rehypePlugins: [rehypePrism],
// providerImportSource: '@mdx-js/react',
providerImportSource: '@mdx-js/react',
},
});

View File

@ -13,6 +13,7 @@
"dependencies": {
"@mapbox/rehype-prism": "^0.8.0",
"@mdx-js/loader": "^2.1.0",
"@mdx-js/react": "^2.1.0",
"@next/mdx": "^12.1.0",
"classnames": "^2.3.1",
"next": "12.1.0",
@ -20,7 +21,8 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"remark-frontmatter": "^4.0.1"
"remark-frontmatter": "^4.0.1",
"remark-toc": "^8.0.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.2",

View File

@ -16,4 +16,8 @@ This is my first post.
console.log('Hello world.');
```
### h3
this is h3 test
export default ({ children }) => <Layout>{children}</Layout>;

View File

@ -581,6 +581,14 @@
unist-util-visit "^4.0.0"
vfile "^5.0.0"
"@mdx-js/react@^2.1.0":
version "2.1.0"
resolved "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.0.tgz#2aca56d3d9d6f1bbee9f3c44bd26890331419953"
integrity sha512-RlPnY2WcVe91pOilf3Rmu1pArKj7gSK03uoaMFKjPWTyh9t6t1VYGSX40twlpChNSPmbcQ29D0xvSBOVMWA6yw==
dependencies:
"@types/mdx" "^2.0.0"
"@types/react" ">=16"
"@next/env@12.1.0":
version "12.1.0"
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.0.tgz#73713399399b34aa5a01771fb73272b55b22c314"
@ -822,6 +830,16 @@
resolved "https://registry.npmmirror.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
"@types/extend@^3.0.0":
version "3.0.1"
resolved "https://registry.npmmirror.com/@types/extend/-/extend-3.0.1.tgz#923dc2d707d944382433e01d6cc0c69030ab2c75"
integrity sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==
"@types/github-slugger@^1.0.0":
version "1.3.0"
resolved "https://registry.npmmirror.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524"
integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==
"@types/graceful-fs@^4.1.2":
version "4.1.5"
resolved "https://registry.npmmirror.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@ -931,6 +949,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@>=16":
version "17.0.42"
resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.42.tgz#8242b9219bf8a911c47f248e327206fea3f4ee5a"
integrity sha512-nuab3x3CpJ7VFeNA+3HTUuEkvClYHXqWtWd7Ud6AZYW7Z3NH9WKtgU+tFB0ZLcHq+niB/HnzLcaZPqMJ95+k5Q==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@ -2698,6 +2725,11 @@ git-username@^1.0.0:
parse-github-url "^1.0.2"
remote-origin-url "^1.0.0"
github-slugger@^1.0.0:
version "1.4.0"
resolved "https://registry.npmmirror.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
glob-parent@^5.1.2, glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@ -4245,6 +4277,20 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
resolved "https://registry.npmmirror.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
mdast-util-toc@^6.0.0:
version "6.1.0"
resolved "https://registry.npmmirror.com/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz#1f38419f5ce774449c8daa87b39a4d940b24be7c"
integrity sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==
dependencies:
"@types/extend" "^3.0.0"
"@types/github-slugger" "^1.0.0"
"@types/mdast" "^3.0.0"
extend "^3.0.0"
github-slugger "^1.0.0"
mdast-util-to-string "^3.1.0"
unist-util-is "^5.0.0"
unist-util-visit "^3.0.0"
mdurl@^1.0.0:
version "1.0.1"
resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@ -5432,6 +5478,15 @@ remark-rehype@^10.0.0:
mdast-util-to-hast "^12.1.0"
unified "^10.0.0"
remark-toc@^8.0.1:
version "8.0.1"
resolved "https://registry.npmmirror.com/remark-toc/-/remark-toc-8.0.1.tgz#f3e07ea13734f1c531e3d3460e58babe31d17cd7"
integrity sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==
dependencies:
"@types/mdast" "^3.0.0"
mdast-util-toc "^6.0.0"
unified "^10.0.0"
remote-origin-url@^1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/remote-origin-url/-/remote-origin-url-1.0.0.tgz#add020aa5f1a0b37372858e02b323dc28d4cd030"