Added simple MD support for sidenote content

src/components/Content/Grid/Row/index.tsx

@@ -17,7 +17,7 @@ export function Row({ style, children }: RowProps) {
     <div
       className={`${styles.row}`}
       style={{
-        gridTemplateColumns: `repeat(${style.cols}, 1 fr)`,
+        gridTemplateColumns: `repeat(${style.cols}, 1fr)`,
         gap: `${style.gap}`,
         alignItems: `${style.align}`,
         justifyContent: `${style.justify}`,

src/components/Content/Sidenote/Container/index.tsx

@@ -1,3 +1,6 @@
+import React from 'react';
+import { marked } from 'marked';
+
 import type { Sidenote } from '@/lib/types/components';
 import styles from './Container.module.css';
 
@@ -21,12 +24,15 @@ export default function Container({ items }: ContainerProps) {
             <span className={styles.marker}>
               <span className={styles.symbol}>{sidenote.marker}</span>
             </span>
-            <div className={styles.content}>
-              {sidenote.content}
-              <a href={`#ref-${sidenote.id}`} className={styles.ref}>
-                ↩
-              </a>
-            </div>
+            <div
+              className={`${styles.content} content`}
+              dangerouslySetInnerHTML={{
+                __html: marked.parseInline(sidenote.content),
+              }}
+            />
+            <a href={`#ref-${sidenote.id}`} className={styles.ref}>
+              ↩
+            </a>
           </div>
         </div>
       ))}

src/styles/globals/content.css

@@ -433,9 +433,9 @@
 
     a {
       &:not([class]) {
-        @mixin anim-txt-typewriter;
+        @mixin anim-txt-pointer;
 
-        color: var(--color-text-tertiary);
+        color: var(--color-secondary);
         transition: color 0.2s ease-in-out;
 
         &:hover {