mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
Add new post toc
fix useLayoutEffect warnning
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
|
||||
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
|
||||
import { useTheme } from 'next-themes';
|
||||
|
||||
interface Props extends SandpackProps {}
|
||||
|
29
components/post/SlideToc.tsx
Normal file
29
components/post/SlideToc.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import tocbot from 'tocbot';
|
||||
|
||||
const SlideToc = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
useEffect(() => {
|
||||
// Waiting the right time.
|
||||
mounted &&
|
||||
tocbot.init({
|
||||
tocSelector: '.toc',
|
||||
contentSelector: '#post-content',
|
||||
headingSelector: 'h1, h2, h3',
|
||||
});
|
||||
|
||||
return () => tocbot.destroy();
|
||||
}, [mounted]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end">
|
||||
<div className="toc"></div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SlideToc;
|
@ -1,12 +1,10 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
import { MyMatters } from 'types';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
import { getHeadings } from 'lib/utils';
|
||||
import PostTOC from 'components/post/PostTOC';
|
||||
|
||||
const Footer = dynamic(() => import('components/Footer'));
|
||||
const HeadBar = dynamic(() => import('components/NavBar'));
|
||||
const PostComment = dynamic(() => import('components/post/PostComment'));
|
||||
const SlideToc = dynamic(() => import('components/post/SlideToc'));
|
||||
|
||||
interface Props extends MyMatters {
|
||||
showTOC?: boolean;
|
||||
@ -14,23 +12,17 @@ interface Props extends MyMatters {
|
||||
}
|
||||
|
||||
const MDXLayout = ({ title, date, showTOC = true, children }: Props) => {
|
||||
const contentString = renderToString(children);
|
||||
const headings = getHeadings(contentString);
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeadBar />
|
||||
|
||||
<main id="article" className="max-w-5xl px-4 mx-auto my-10">
|
||||
<article>
|
||||
<h1>{title}</h1>
|
||||
|
||||
<time>{date}</time>
|
||||
|
||||
{showTOC && <PostTOC headings={headings} />}
|
||||
<main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
|
||||
<h1>{title}</h1>
|
||||
<time>{date}</time>
|
||||
{showTOC && <SlideToc />}
|
||||
|
||||
<article id="post-content">
|
||||
{children}
|
||||
|
||||
<PostComment />
|
||||
</article>
|
||||
</main>
|
||||
|
@ -33,7 +33,8 @@
|
||||
"rehype-slug": "^5.0.1",
|
||||
"remark-frontmatter": "^4.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"sharp": "^0.30.7"
|
||||
"sharp": "^0.30.7",
|
||||
"tocbot": "^4.18.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
|
@ -93,14 +93,34 @@
|
||||
}
|
||||
|
||||
#article .toc {
|
||||
padding-left: 0.8em;
|
||||
@apply my-4;
|
||||
@apply hidden dark:bg-rua-gray-700;
|
||||
@apply fixed z-10 p-6 bg-white rounded-md xl:inline-block;
|
||||
@apply translate-x-[110%] top-1/2 -translate-y-1/2;
|
||||
@apply max-h-[85%] overflow-auto;
|
||||
}
|
||||
|
||||
#article .toc li {
|
||||
#article .toc .toc-list .toc-list {
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#article .toc .toc-list-item {
|
||||
padding-bottom: 0.5rem;
|
||||
@apply transition-all;
|
||||
}
|
||||
|
||||
#article .toc .toc-list-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* #article .toc .toc-link {
|
||||
} */
|
||||
|
||||
#article .toc .is-active-link {
|
||||
@apply font-semibold transition-all;
|
||||
}
|
||||
|
||||
#article p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
@ -116,7 +136,7 @@
|
||||
display: block;
|
||||
text-align: center;
|
||||
@apply text-gray-400 dark:text-gray-600;
|
||||
@apply mt-8 mb-20;
|
||||
@apply mt-8 mb-10;
|
||||
}
|
||||
|
||||
#article h2,
|
||||
@ -301,7 +321,7 @@ h6:hover::before {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
#article ol li {
|
||||
#article ol li:not(.toc-list-item) {
|
||||
list-style-type: auto;
|
||||
}
|
||||
|
||||
@ -327,12 +347,12 @@ h6:hover::before {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
#article div > ol:not([type]) {
|
||||
#article div > ol:not([type]):not(.toc-list) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
#article ul,
|
||||
#article ol {
|
||||
#article ol:not(.toc-list) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2em;
|
||||
|
@ -22,6 +22,7 @@ module.exports = {
|
||||
gray: {
|
||||
100: '#aabfc5',
|
||||
600: 'rgb(66,66,66)',
|
||||
700: 'hsl(220, 13%, 18%)', // code background in dark
|
||||
800: 'rgb(35,38,38)', // card background in dark
|
||||
900: 'rgb(24,25,26)', // body background in dark
|
||||
},
|
||||
|
@ -8150,6 +8150,11 @@ to-regex-range@^5.0.1:
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
tocbot@^4.18.2:
|
||||
version "4.18.2"
|
||||
resolved "https://registry.npmmirror.com/tocbot/-/tocbot-4.18.2.tgz#e98bb4120fae02f0e4a01d3acff03f3db2ba3ad9"
|
||||
integrity sha512-bWUfEYQZ4oFgT+qZYvzlTgbsTmA645ApHbo1iRaOBUeFfy5IpctgAQQjCXbPZy+4RDZ1JJYlIBgoApZMzMaYog==
|
||||
|
||||
tough-cookie@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
|
||||
|
Reference in New Issue
Block a user