From 112309940cde31a0c132588f1f00a8da67063b66 Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Wed, 6 Apr 2022 16:02:27 +0800
Subject: [PATCH] Add markdown styles

---
 components/mdx/Image.tsx                      |  1 -
 components/post/PostTOC.tsx                   |  2 +-
 .../p/{second-post.mdx => markdown-test.mdx}  | 40 +++++++--------
 styles/prism-one-dark.css                     | 24 ++++-----
 styles/prism-one-light.css                    | 20 ++++----
 styles/rua.css                                | 50 +++++++++++++++++++
 6 files changed, 91 insertions(+), 46 deletions(-)
 rename pages/p/{second-post.mdx => markdown-test.mdx} (86%)

diff --git a/components/mdx/Image.tsx b/components/mdx/Image.tsx
index 74e21d9..adfbe8e 100644
--- a/components/mdx/Image.tsx
+++ b/components/mdx/Image.tsx
@@ -1,4 +1,3 @@
-import cn from 'classnames';
 import NextImage from 'next/image';
 import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
 
diff --git a/components/post/PostTOC.tsx b/components/post/PostTOC.tsx
index e700b03..07504c7 100644
--- a/components/post/PostTOC.tsx
+++ b/components/post/PostTOC.tsx
@@ -11,7 +11,7 @@ const PostTOC: FC<Props> = ({ headings }) => {
     <>
       <h2>What&apos;s inside?</h2>
 
-      <ul className="pl-4 border-l-4 border-gray-300">
+      <ul className="pl-4 border-l-4 border-gray-300 toc">
         {headings?.map((h) => (
           <li key={h.link}>
             <Anchor href={h.link} external={false}>
diff --git a/pages/p/second-post.mdx b/pages/p/markdown-test.mdx
similarity index 86%
rename from pages/p/second-post.mdx
rename to pages/p/markdown-test.mdx
index a29d61b..a27f10b 100644
--- a/pages/p/second-post.mdx
+++ b/pages/p/markdown-test.mdx
@@ -1,14 +1,14 @@
 ---
-title: Second post test
-date: '2022-03-25'
+title: Markdown test
+date: '2022-04-06'
 tags: ['functions', 'JavaScript']
 ---
 
 import Layout from 'layouts/MDXLayout.tsx';
 
 export const meta = {
-  title: 'Second post test',
-  date: '2022-03-25',
+  title: 'Markdown test',
+  date: '2022-04-06',
   tags: ['functions', 'JavaScript'],
 };
 
@@ -65,6 +65,12 @@ This is my second post.
 
 ## Horizontal Rules
 
+heihei
+
+---
+
+haha
+
 ## Typographic replacements
 
 Enable typographer option to see result.
@@ -129,10 +135,12 @@ Inline `code`
 
 Indented code
 
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
+```
+// Some comments
+line 1 of code
+line 2 of code
+line 3 of code
+```
 
 Block code "fences"
 
@@ -143,7 +151,7 @@ Sample text here...
 Syntax highlighting
 
 ```js
-var foo = function (bar) {
+const foo = function (bar) {
   return bar++;
 };
 
@@ -176,20 +184,8 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
 ## Images
 
-With a reference later in the document defining the URL location:
-
-With a reference later in the document defining the URL location:
-
-With a reference later in the document defining the URL location:
-
 ![Minion](/images/p/second-post/minion.png)
 
-With a reference later in the document defining the URL location:
-
-With a reference later in the document defining the URL location:
-
-With a reference later in the document defining the URL location:
-
 ## Other
 
-> test
+> Blockquote test.
diff --git a/styles/prism-one-dark.css b/styles/prism-one-dark.css
index a3aa59e..7c0d23d 100644
--- a/styles/prism-one-dark.css
+++ b/styles/prism-one-dark.css
@@ -28,8 +28,8 @@
  * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
  */
 
-.dark code[class*='language-'],
-.dark pre[class*='language-'] {
+.dark code,
+.dark pre {
   background: hsl(220, 13%, 18%);
   color: hsl(220, 14%, 71%);
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
@@ -51,24 +51,24 @@
 }
 
 /* Selection */
-.dark code[class*='language-']::-moz-selection,
-.dark code[class*='language-'] *::-moz-selection,
-.dark pre[class*='language-'] *::-moz-selection {
+.dark code::-moz-selection,
+.dark code *::-moz-selection,
+.dark pre *::-moz-selection {
   background: hsl(220, 13%, 28%);
   color: inherit;
   text-shadow: none;
 }
 
-.dark code[class*='language-']::selection,
-.dark code[class*='language-'] *::selection,
-.dark pre[class*='language-'] *::selection {
+.dark code::selection,
+.dark code *::selection,
+.dark pre *::selection {
   background: hsl(220, 13%, 28%);
   color: inherit;
   text-shadow: none;
 }
 
 /* Code blocks */
-.dark pre[class*='language-'] {
+.dark pre {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
@@ -76,7 +76,7 @@
 }
 
 /* Inline code */
-.dark :not(pre) > code[class*='language-'] {
+.dark :not(pre) > code {
   padding: 0.2em 0.3em;
   border-radius: 0.3em;
   white-space: normal;
@@ -84,8 +84,8 @@
 
 /* Print */
 @media print {
-  .dark code[class*='language-'],
-  .dark pre[class*='language-'] {
+  .dark code,
+  .dark pre {
     text-shadow: none;
   }
 }
diff --git a/styles/prism-one-light.css b/styles/prism-one-light.css
index 4a294ff..14a755c 100644
--- a/styles/prism-one-light.css
+++ b/styles/prism-one-light.css
@@ -28,8 +28,8 @@
  * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
  */
 
-code[class*='language-'],
-pre[class*='language-'] {
+code,
+pre {
   background: hsl(230, 1%, 98%);
   color: hsl(230, 8%, 24%);
   font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
@@ -50,22 +50,22 @@ pre[class*='language-'] {
 }
 
 /* Selection */
-code[class*='language-']::-moz-selection,
-code[class*='language-'] *::-moz-selection,
-pre[class*='language-'] *::-moz-selection {
+code::-moz-selection,
+code *::-moz-selection,
+pre *::-moz-selection {
   background: hsl(230, 1%, 90%);
   color: inherit;
 }
 
-code[class*='language-']::selection,
-code[class*='language-'] *::selection,
-pre[class*='language-'] *::selection {
+code::selection,
+code *::selection,
+pre *::selection {
   background: hsl(230, 1%, 90%);
   color: inherit;
 }
 
 /* Code blocks */
-pre[class*='language-'] {
+pre {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
@@ -73,7 +73,7 @@ pre[class*='language-'] {
 }
 
 /* Inline code */
-:not(pre) > code[class*='language-'] {
+:not(pre) > code {
   padding: 0.2em 0.3em;
   border-radius: 0.3em;
   white-space: normal;
diff --git a/styles/rua.css b/styles/rua.css
index fd80822..86f90e7 100644
--- a/styles/rua.css
+++ b/styles/rua.css
@@ -91,6 +91,13 @@
   @apply text-lg leading-10;
 }
 
+#article .toc {
+  padding-left: 0.8em;
+}
+#article .toc li {
+  list-style-type: none;
+}
+
 #article h1 {
   font-weight: bold;
   text-align: center;
@@ -272,3 +279,46 @@ h6:hover::before {
 #article sup {
   top: -0.5em;
 }
+
+#article ol li {
+  list-style-type: auto;
+}
+#article ul li {
+  list-style-type: initial;
+}
+#article ul.no-list,
+#article ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+#article ol[type='1'] {
+  list-style-type: decimal;
+}
+#article ol[type='a'] {
+  list-style-type: lower-alpha;
+}
+#article ol[type='i'] {
+  list-style-type: lower-roman;
+}
+#article div > ol:not([type]) {
+  list-style-type: decimal;
+}
+#article ul,
+#article ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+#article ol ol,
+#article ul ol {
+  list-style-type: lower-roman;
+}
+#article ul ul ol,
+#article ul ol ol,
+#article ol ul ol,
+#article ol ol ol {
+  list-style-type: lower-alpha;
+}
+#article dd {
+  margin-left: 0;
+}