From 1f3d95c1ac729545b8096d903e6815847ad01a57 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 29 Oct 2023 17:23:56 +0800
Subject: [PATCH] feat: support gfm alerts

Signed-off-by: Innei <i@innei.in>
---
 src/components/icons/status.tsx               | 26 ++----
 src/components/ui/link/MLink.tsx              |  1 -
 src/components/ui/markdown/Markdown.tsx       |  2 +
 src/components/ui/markdown/customize.md       | 11 +++
 src/components/ui/markdown/parsers/alert.tsx  | 92 +++++++++++++++++++
 .../ui/markdown/parsers/container.tsx         |  1 +
 6 files changed, 114 insertions(+), 19 deletions(-)
 create mode 100644 src/components/ui/markdown/parsers/alert.tsx

diff --git a/src/components/icons/status.tsx b/src/components/icons/status.tsx
index 8aebf51622..22f8a51b13 100644
--- a/src/components/icons/status.tsx
+++ b/src/components/icons/status.tsx
@@ -44,26 +44,16 @@ export function ClaritySuccessLine(props: SVGProps<SVGSVGElement>) {
 
 export function IonInformation(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg width="1em" height="1em" viewBox="0 0 512 512" {...props}>
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="40"
-        d="M196 220h64v172"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeMiterlimit="10"
-        strokeWidth="40"
-        d="M187 396h138"
-      />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      {...props}
+    >
       <path
         fill="currentColor"
-        d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Zm16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8Zm-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12Z"
       />
     </svg>
   )
diff --git a/src/components/ui/link/MLink.tsx b/src/components/ui/link/MLink.tsx
index 7c672a5bb2..a94fa21760 100644
--- a/src/components/ui/link/MLink.tsx
+++ b/src/components/ui/link/MLink.tsx
@@ -84,7 +84,6 @@ export const MLink: FC<{
 
   const showRichLink = !!parsedType && !!parsedName
 
-  console.log(text || parsedName, 'text || parsedName')
   return (
     <FloatPopover
       as="span"
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
index 6e8a7ddc4d..f593bbbef9 100644
--- a/src/components/ui/markdown/Markdown.tsx
+++ b/src/components/ui/markdown/Markdown.tsx
@@ -19,6 +19,7 @@ import { Gallery } from '../gallery'
 import { LinkCard } from '../link-card'
 import { MLink } from '../link/MLink'
 import styles from './markdown.module.css'
+import { AlertsRule } from './parsers/alert'
 import { ContainerRule } from './parsers/container'
 import { InsertRule } from './parsers/ins'
 import { KateXRule } from './parsers/katex'
@@ -249,6 +250,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           ins: InsertRule,
           kateX: KateXRule,
           container: ContainerRule,
+          alerts: AlertsRule,
 
           ...additionalParserRules,
         },
diff --git a/src/components/ui/markdown/customize.md b/src/components/ui/markdown/customize.md
index 249e0b27be..42e1c00211 100644
--- a/src/components/ui/markdown/customize.md
+++ b/src/components/ui/markdown/customize.md
@@ -198,3 +198,14 @@ Inline https://github.com/Innei
 ```
 
 [Innei 太菜了]{GH@Innei}
+
+## Alerts
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
diff --git a/src/components/ui/markdown/parsers/alert.tsx b/src/components/ui/markdown/parsers/alert.tsx
new file mode 100644
index 0000000000..d9da62df2d
--- /dev/null
+++ b/src/components/ui/markdown/parsers/alert.tsx
@@ -0,0 +1,92 @@
+import clsx from 'clsx'
+import { blockRegex, Priority } from 'markdown-to-jsx'
+import type { MarkdownToJSX } from 'markdown-to-jsx'
+
+import {
+  FluentShieldError20Regular,
+  FluentWarning28Regular,
+  IonInformation,
+} from '~/components/icons/status'
+
+import { Markdown } from '../Markdown'
+
+const textColorMap = {
+  NOTE: 'text-always-blue-500 dark:text-always-blue-400',
+  IMPORTANT: 'text-accent',
+  WARNING: 'text-amber-500 dark:text-amber-400',
+} as any
+
+const borderColorMap = {
+  NOTE: 'border-always-blue-500 dark:border-always-blue-400',
+  IMPORTANT: 'border-accent',
+  WARNING: 'border-amber-500 dark:border-amber-400',
+} as any
+
+const typedIconMap = {
+  NOTE: IonInformation,
+  IMPORTANT: FluentWarning28Regular,
+  WARNING: FluentShieldError20Regular,
+} as any
+
+/**
+ *
+ * > [!NOTE]
+ * > Highlights information that users should take into account, even when skimming.
+ */
+const ALERT_BLOCKQUOTE_R =
+  // /^( *> *\[!(NOTE|IMPORTANT|WARNING)\] *\n(?: *>.*(?:\n|$))+)/m
+  // /^( *> *\[!(?:(?<type>NOTE|IMPORTANT|WARNING))\](?<body>.*(\n *>.*?)*))(?=\n *> *\[(NOTE|IMPORTANT|WARNING)\]|$)/
+  // /^(> *\[!(?<type>NOTE|IMPORTANT|WARNING)\](?<body>(?:\n?.*?)*))((?:\n{2,})|$)/
+  // /^*> *\[!(?<type>NOTE|IMPORTANT|WARNING)\](?<body>(?:\n? *>.*?)*?)(?=\n{2,}|$)/
+  // /^( *> *\[!(?<type>NOTE|IMPORTANT|WARNING)\].*?(?:\n(?! *> *\[(NOTE|IMPORTANT|WARNING)\]).*?)*)/
+
+  // /^(> \[!(?<type>NOTE|IMPORTANT|WARNING)\])(?<body>(?:\n? *>.*?(?!\n *> *\[(?:NOTE|IMPORTANT|WARNING)\]))*)/
+  /^(> \[!(?<type>NOTE|IMPORTANT|WARNING)\].*?)(?<body>(?:\n *>.*?)*)(?=\n{2,}|$)/
+
+export const AlertsRule: MarkdownToJSX.Rule = {
+  match: blockRegex(ALERT_BLOCKQUOTE_R),
+  order: Priority.HIGH,
+  parse(capture) {
+    return {
+      raw: capture[0],
+      parsed: {
+        ...capture.groups,
+      },
+    }
+  },
+  react(node, output, state) {
+    const { type, body } = node.parsed
+    const bodyClean = body.replace(/^> */gm, '')
+
+    const typePrefix = type[0] + type.toLowerCase().slice(1)
+
+    const Icon = typedIconMap[type] || typedIconMap.info
+    return (
+      <blockquote className={clsx(borderColorMap[type], 'not-italic')}>
+        <span
+          className={clsx(
+            'text-semibold mb-1 inline-flex items-center',
+            textColorMap[type],
+          )}
+        >
+          <Icon
+            className={clsx(
+              `flex-shrink-0 text-3xl md:mr-2 md:self-start md:text-left`,
+              typedIconMap[type] || typedIconMap.info,
+            )}
+          />
+
+          {typePrefix}
+        </span>
+        <br />
+
+        <Markdown
+          allowsScript
+          className="not-prose w-full [&>p:first-child]:mt-0"
+        >
+          {bodyClean}
+        </Markdown>
+      </blockquote>
+    )
+  },
+}
diff --git a/src/components/ui/markdown/parsers/container.tsx b/src/components/ui/markdown/parsers/container.tsx
index b03092483a..9b365fc3a0 100644
--- a/src/components/ui/markdown/parsers/container.tsx
+++ b/src/components/ui/markdown/parsers/container.tsx
@@ -20,6 +20,7 @@ const shouldCatchContainerName = [
   'warning',
   'note',
 ].join('|')
+
 export const ContainerRule: MarkdownToJSX.Rule = {
   match: blockRegex(
     new RegExp(