From fac934eee2fd4e91d882231d1939b22f0a7f979e Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Mon, 28 Mar 2022 11:43:21 +0800
Subject: [PATCH] Add table of contents style

---
 next.config.mjs         |  6 ++++-
 pages/p/second-post.mdx |  2 +-
 styles/rua.css          | 54 +++++++++++++++++++----------------------
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index c2bee8b..348dbd4 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -10,7 +10,11 @@ const composedConfig = composePlugins([
   mdx({
     extension: /\.mdx?$/,
     options: {
-      remarkPlugins: [remarkFrontmatter, remarkToc, remarkGfm],
+      remarkPlugins: [
+        remarkFrontmatter,
+        () => remarkToc({ maxDepth: 2 }),
+        remarkGfm,
+      ],
       rehypePlugins: [rehypePrism, rehypeSlug],
       providerImportSource: '@mdx-js/react',
     },
diff --git a/pages/p/second-post.mdx b/pages/p/second-post.mdx
index 4120db4..9fad517 100644
--- a/pages/p/second-post.mdx
+++ b/pages/p/second-post.mdx
@@ -14,7 +14,7 @@ export const meta = {
 
 export default ({ children }) => <Layout {...meta}>{children}</Layout>;
 
-## Table Of Content
+## Table of contents
 
 ## Hello
 
diff --git a/styles/rua.css b/styles/rua.css
index 33c685c..25ce9af 100644
--- a/styles/rua.css
+++ b/styles/rua.css
@@ -2,6 +2,15 @@
   @apply text-lg leading-10;
 }
 
+/* For the table of content */
+#article h2#table-of-contents + ul {
+  @apply border-l-4 border-gray-300;
+  @apply pl-4;
+}
+#article h2#table-of-contents:hover::before {
+  content: unset;
+}
+
 #article h1 {
   font-weight: bold;
   text-align: center;
@@ -16,61 +25,48 @@
   @apply mt-8 mb-20;
 }
 
-#article h2 {
+#article h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: bold;
-  @apply relative text-3xl;
-  @apply text-gray-700 dark:text-gray-200;
-  @apply mt-8 mb-2;
 }
-#article h2:hover::before {
+#article h2:hover::before,
+h3:hover::before,
+h4:hover::before,
+h5:hover::before,
+h6:hover::before {
   content: '#';
   left: -1.6rem;
   @apply absolute text-gray-400;
 }
 
+#article h2 {
+  @apply relative text-3xl;
+  @apply text-gray-700 dark:text-gray-200;
+  @apply mt-8 mb-2;
+}
+
 #article h3 {
-  font-weight: bold;
   @apply relative text-2xl;
   @apply mt-6 mb-2;
 }
-#article h3:hover::before {
-  content: '#';
-  left: -1.5rem;
-  @apply absolute text-gray-400;
-}
 
 #article h4 {
-  font-weight: bold;
   @apply relative text-xl;
   @apply mt-6 mb-2;
 }
-#article h4:hover::before {
-  content: '#';
-  left: -1.5rem;
-  @apply absolute text-gray-400;
-}
 
 #article h5 {
-  font-weight: bold;
   @apply relative;
   @apply mt-4 mb-2;
 }
-#article h5:hover::before {
-  content: '#';
-  left: -1.5rem;
-  @apply absolute text-gray-400;
-}
 
 #article h6 {
-  font-weight: bold;
   @apply relative;
   @apply mt-2 mb-2;
 }
-#article h6:hover::before {
-  content: '#';
-  left: -1.5rem;
-  @apply absolute text-gray-400;
-}
 
 #article table {
   border-spacing: 0;