diff --git a/components/RUA/RUASandpack.tsx b/components/RUA/RUASandpack.tsx index 5812edf..59e79de 100644 --- a/components/RUA/RUASandpack.tsx +++ b/components/RUA/RUASandpack.tsx @@ -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 {} diff --git a/components/post/SlideToc.tsx b/components/post/SlideToc.tsx new file mode 100644 index 0000000..5792339 --- /dev/null +++ b/components/post/SlideToc.tsx @@ -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 ( + <> +
+
+
+ + ); +}; + +export default SlideToc; diff --git a/layouts/MDXLayout.tsx b/layouts/MDXLayout.tsx index 676cfbe..af7cd0f 100644 --- a/layouts/MDXLayout.tsx +++ b/layouts/MDXLayout.tsx @@ -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 ( <> -
-
-

{title}

- - - - {showTOC && } +
+

{title}

+ + {showTOC && } +
{children} -
diff --git a/package.json b/package.json index 5ea9637..a26fc1f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/styles/rua.css b/styles/rua.css index 49e2d78..e0e2778 100644 --- a/styles/rua.css +++ b/styles/rua.css @@ -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; diff --git a/tailwind.config.js b/tailwind.config.js index 25bd261..a49bf0b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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 }, diff --git a/yarn.lock b/yarn.lock index 68fa6f4..7721bfc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"