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"