refactor: replace markdown parser

- replace markdown-it with remark and rehype
- add bunch of markdown features

apps/blog/src/main.tsx

@@ -6,8 +6,10 @@ import "./index.css"
 import "./styles/anchor.scss"
 import "./styles/blockQuote.scss"
 import "./styles/button.scss"
+import "./styles/callout.scss"
 import "./styles/checkbox.scss"
 import "./styles/code.scss"
+import "./styles/colorChip.scss"
 import "./styles/global.scss"
 import "./styles/heading.scss"
 import "./styles/hr.scss"

apps/blog/src/styles/anchor.scss

@@ -3,8 +3,15 @@ a {
 }
 
 /* The "#" thingy used beside headers */
-a.header-anchor {
-    @apply inline-block text-light-anchor-header dark:text-dark-anchor-header;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    a {
+        @apply mr-2 inline-block text-light-anchor-header dark:text-dark-anchor-header;
+    }
 }
 
 /* footnote anchors */

apps/blog/src/styles/callout.scss

@@ -0,0 +1,83 @@
+/* https://github.com/Microflash/remark-callout-directives/blob/e77daa802994094d40d6c504d5f9ed94f6c217fb/themes/microflash.css */
+
+.callout {
+    --callout-color: hsl(207, 14%, 62%);
+    --callout-background: ;
+    --callout-border: 1px solid hsl(205, 15%, 33%);
+    --callout-radius: 12px;
+    --callout-padding: 2ch;
+    border: var(--callout-border);
+    border-radius: var(--callout-radius);
+    background: var(--callout-background);
+    @apply my-8;
+}
+
+.callout code,
+.callout pre {
+    color: hsl(0, 0%, 90%);
+    background-color: hsl(0, 0%, 100%, 0.1);
+}
+
+.callout-content {
+    padding: var(--callout-padding);
+}
+
+.callout-content:first-child,
+.callout-content:only-child {
+    margin-block-start: 0;
+}
+
+.callout-content:last-child,
+.callout-content:only-child {
+    margin-block-end: 0;
+}
+
+.callout-indicator {
+    display: flex;
+    align-items: center;
+    border-block-end: var(--callout-border);
+    padding: calc(var(--callout-padding) / 2);
+}
+
+.callout-hint {
+    margin-inline-end: calc(var(--callout-padding) / 4);
+    color: var(--callout-color);
+}
+
+.callout-title {
+    margin-inline-start: calc(var(--callout-padding) / 4);
+    font-size: 0.9em;
+    font-weight: bold;
+    color: var(--callout-color);
+    letter-spacing: 0.04em;
+}
+
+.callout-note {
+    --callout-background: hsl(208, 20%, 13%);
+    --callout-color: hsl(207, 14%, 62%);
+    --callout-border: 1px solid hsl(206, 15%, 33%, 0.5);
+}
+
+.callout-commend {
+    --callout-background: hsl(152, 100%, 7%);
+    --callout-color: hsl(153, 32%, 50%);
+    --callout-border: 1px solid hsl(159, 100%, 19%, 0.5);
+}
+
+.callout-warn {
+    --callout-background: hsl(26, 100%, 10%);
+    --callout-color: hsl(32, 93%, 41%);
+    --callout-border: 1px solid hsl(31, 100%, 26%, 0.5);
+}
+
+.callout-deter {
+    --callout-background: hsl(358, 100%, 10%);
+    --callout-color: hsl(2, 82%, 62%);
+    --callout-border: 1px solid hsl(357, 76%, 37%, 0.4);
+}
+
+.callout-assert {
+    --callout-background: hsl(200, 100%, 10%);
+    --callout-color: hsl(200, 82%, 62%);
+    --callout-border: 1px solid hsl(199, 76%, 37%, 0.4);
+}

apps/blog/src/styles/colorChip.scss

@@ -0,0 +1,8 @@
+.gfm-color-chip {
+    margin-left: 0.125rem;
+    display: inline-block;
+    height: 0.625rem;
+    width: 0.625rem;
+    border-radius: 9999px;
+    border: 1px solid gray;
+}

apps/blog/src/styles/img.scss

@@ -5,3 +5,11 @@ img {
 table img {
     max-width: fit-content;
 }
+
+figure {
+    @apply my-4 text-center italic text-light-text-gray dark:text-dark-text-gray;
+
+    img {
+        @apply mx-auto;
+    }
+}

apps/blog/src/styles/mark.scss

@@ -1,3 +1,87 @@
 mark {
-    @apply bg-light-mark-bg text-light-mark-text dark:bg-dark-mark-bg dark:text-dark-mark-text;
+    @apply text-light-mark-text dark:text-dark-mark-text;
+}
+
+/* same as yellow */
+.flexible-marker-default {
+    @apply bg-light-mark-bg dark:bg-dark-mark-bg;
+}
+
+.flexible-marker-amber {
+    @apply bg-amber-400 bg-opacity-100 dark:bg-amber-500 dark:bg-opacity-50;
+}
+
+.flexible-marker-blue {
+    @apply bg-blue-400 bg-opacity-70 dark:bg-blue-500 dark:bg-opacity-50;
+}
+
+.flexible-marker-cyan {
+    @apply bg-cyan-200 dark:bg-cyan-500 dark:bg-opacity-50;
+}
+
+.flexible-marker-brown {
+    @apply bg-yellow-800 bg-opacity-70 dark:bg-opacity-80;
+}
+
+/* same as magenta */
+.flexible-marker-fuchsia {
+    @apply bg-fuchsia-600 bg-opacity-70 dark:bg-fuchsia-400 dark:bg-opacity-50;
+}
+
+.flexible-marker-green {
+    @apply bg-green-600 bg-opacity-70 dark:bg-green-400 dark:bg-opacity-50;
+}
+
+.flexible-marker-hotpink {
+    @apply bg-pink-400 bg-opacity-70;
+}
+
+.flexible-marker-lime {
+    @apply bg-lime-300 bg-opacity-90 dark:bg-lime-400 dark:bg-opacity-70;
+}
+
+/* same as fuchsia */
+.flexible-marker-magenta {
+    @apply bg-fuchsia-600 bg-opacity-70 dark:bg-fuchsia-400 dark:bg-opacity-50;
+}
+
+.flexible-marker-navyblue {
+    @apply bg-blue-700 bg-opacity-70 dark:bg-blue-600 dark:bg-opacity-70;
+}
+
+.flexible-marker-orange {
+    @apply bg-orange-600 bg-opacity-80 dark:bg-orange-500 dark:bg-opacity-70;
+}
+
+.flexible-marker-purple {
+    @apply bg-purple-700 bg-opacity-70 dark:bg-purple-500 dark:bg-opacity-70;
+}
+
+.flexible-marker-pink {
+    @apply bg-pink-500 bg-opacity-80 dark:bg-pink-400 dark:bg-opacity-70;
+}
+
+.flexible-marker-red {
+    @apply bg-red-600 bg-opacity-80 dark:bg-red-500 dark:bg-opacity-70;
+}
+
+.flexible-marker-silver {
+    @apply bg-gray-500 bg-opacity-60 dark:bg-slate-400 dark:bg-opacity-70;
+}
+
+.flexible-marker-teal {
+    @apply bg-teal-700 bg-opacity-50 dark:bg-teal-600 dark:bg-opacity-70;
+}
+
+.flexible-marker-violet {
+    @apply bg-violet-600 bg-opacity-60 dark:bg-violet-600 dark:bg-opacity-70;
+}
+
+.flexible-marker-gray {
+    @apply bg-neutral-600 bg-opacity-60 dark:bg-neutral-500 dark:bg-opacity-60;
+}
+
+/* same as default */
+.flexible-marker-yellow {
+    @apply bg-light-mark-bg dark:bg-dark-mark-bg;
 }