Add support for GitHub's admonitions

frontend/package.json

@@ -20,6 +20,7 @@
     "@tanstack/react-query-devtools": "^5.53.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/react-is": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
@@ -37,6 +38,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
+    "react-is": "^18.3.1",
     "react-router-dom": "^6.26.1",
     "react-virtuoso": "^4.10.2",
     "rehype-raw": "^7.0.0",

frontend/src/components/Markdown/Blockquote.tsx

@@ -0,0 +1,103 @@
+import clsx from "clsx";
+import { BlockquoteHTMLAttributes, ReactNode } from "react";
+import { isElement } from "react-is";
+
+const WARNING_MARK = "[!WARNING]";
+const IMPORTANT_MARK = "[!DANGER]";
+const NOTE_MARK = "[!NOTE]";
+const TIP_MARK = "[!TIP]";
+const CAUTION_MARK = "[!CAUTION]";
+
+function getAdmonitionClassName(prefix: string) {
+  switch (prefix) {
+    case NOTE_MARK:
+      return "bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-100";
+    case CAUTION_MARK:
+      return "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-100";
+    case WARNING_MARK:
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-100";
+    case TIP_MARK:
+      return "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-100";
+    case IMPORTANT_MARK:
+      return "bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-100";
+  }
+}
+
+function getAdmonitionTitle(prefix: string) {
+  switch (prefix) {
+    case NOTE_MARK:
+      return "Note";
+    case CAUTION_MARK:
+      return "Caution";
+    case WARNING_MARK:
+      return "Warning";
+    case TIP_MARK:
+      return "Tip";
+    case IMPORTANT_MARK:
+      return "Important";
+  }
+}
+
+function getAdmonitionMatch(children: ReactNode) {
+  if (!Array.isArray(children)) {
+    return null;
+  }
+
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+
+    if (!isElement(child)) {
+      continue;
+    }
+
+    const type = child.props.children;
+
+    if (typeof type !== "string") {
+      continue;
+    }
+
+    switch (type) {
+      case WARNING_MARK:
+      case CAUTION_MARK:
+      case NOTE_MARK:
+      case TIP_MARK:
+      case IMPORTANT_MARK:
+        return {
+          prefix: type,
+          content: children.slice(i + 1),
+        };
+    }
+  }
+
+  return null;
+}
+
+export function MarkdownBlockquote({
+  children,
+}: BlockquoteHTMLAttributes<HTMLQuoteElement>) {
+  const admonitionMatch = getAdmonitionMatch(children);
+
+  if (admonitionMatch) {
+    const { prefix, content } = admonitionMatch;
+    const className = getAdmonitionClassName(prefix);
+    const title = getAdmonitionTitle(prefix);
+
+    return (
+      <div
+        className={clsx(
+          "mt-5 px-3 py-2 first:mt-0 [&>details]:mt-2.5 [&>h6]:mt-4 [&>p]:mt-2.5 [li>&:first-child]:mt-0",
+          className,
+        )}
+      >
+        <strong className="font-semibold">{title}</strong>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <blockquote className="mt-5 flex flex-col border-l-2 border-gray-500 pl-5">
+      {children}
+    </blockquote>
+  );
+}

frontend/src/components/Markdown/Details.tsx

@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from "react";
+
+export function MarkdownDetails({
+  children,
+}: DetailsHTMLAttributes<HTMLDetailsElement>) {
+  return <details className="mt-5">{children}</details>;
+}

frontend/src/components/Markdown/H4.tsx

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+import { HeadingLink } from "../HeadingLink";
+
+export function MarkdownH4({
+  children,
+  id,
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h6
+      className="group mt-8 scroll-mt-5 break-words text-base font-bold first:mt-0"
+      id={id}
+    >
+      {children}
+      {id && <HeadingLink id={id} label={children as string} />}
+    </h6>
+  );
+}

frontend/src/components/Markdown/P.tsx

@@ -14,8 +14,6 @@ function getAdmonitionClassName(prefix: string) {
       return "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-100";
     case WARNING_MARK:
       return "bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-100";
-    default:
-      return "";
   }
 }
 
@@ -56,7 +54,6 @@ export function MarkdownP({ children }: HTMLAttributes<HTMLParagraphElement>) {
 
     return (
       <div
-        role="alert"
         className={clsx(
           "mt-5 px-3 py-2 first:mt-0 [li>&:first-child]:mt-0",
           className,

frontend/src/components/Markdown/Summary.tsx

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+
+export function MarkdownSummary({ children }: HTMLAttributes<HTMLElement>) {
+  return (
+    <summary className="cursor-default select-none font-semibold">
+      {children}
+    </summary>
+  );
+}

frontend/src/components/Markdown/index.tsx

@@ -25,6 +25,10 @@ import { MarkdownTh } from "./Th";
 import { MarkdownImg } from "./Img";
 import { MarkdownOl } from "./Ol";
 import { MarkdownHr } from "./Hr";
+import { MarkdownBlockquote } from "./Blockquote";
+import { MarkdownH4 } from "./H4";
+import { MarkdownDetails } from "./Details";
+import { MarkdownSummary } from "./Summary";
 
 const production: Options = {
   development: false,
@@ -38,6 +42,7 @@ const production: Options = {
     h1: MarkdownH1,
     h2: MarkdownH2,
     h3: MarkdownH3,
+    h4: MarkdownH4,
     p: MarkdownP,
     code: MarkdownCode,
     pre: MarkdownPre,
@@ -47,6 +52,9 @@ const production: Options = {
     img: MarkdownImg,
     ol: MarkdownOl,
     hr: MarkdownHr,
+    blockquote: MarkdownBlockquote,
+    details: MarkdownDetails,
+    summary: MarkdownSummary,
   },
 };