Add markdown styles

components/mdx/Image.tsx

@@ -1,4 +1,3 @@
-import cn from 'classnames';
 import NextImage from 'next/image';
 import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
 

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}>

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.

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;
   }
 }

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;

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;
+}