feat: add callout support

client/package.json

@@ -31,6 +31,7 @@
     "react-modal": "^3.16.1",
     "react-select": "^5.8.0",
     "reactjs-popup": "^2.0.6",
+    "remark-github-blockquote-alert": "^1.2.1",
     "remixicon": "^4.2.0",
     "rin-server": "workspace:rin-server@latest",
     "typescript-cookie": "^1.0.6",

client/src/components/markdown.tsx

@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
 import gfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
+import { remarkAlert } from 'remark-github-blockquote-alert'
 import "katex/dist/katex.min.css";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
@@ -30,7 +31,7 @@ export function Markdown({ content }: { content: string }) {
   return (
     <ReactMarkdown
       className="toc-content dark:text-neutral-300"
-      remarkPlugins={[gfm, remarkMath]}
+      remarkPlugins={[gfm, remarkMath, remarkAlert]}
       children={content}
       rehypePlugins={[rehypeKatex, rehypeRaw]}
       components={{
@@ -99,9 +100,8 @@ export function Markdown({ content }: { content: string }) {
             return (
               <code
                 {...rest}
-                className={`bg-[#eff1f3] dark:bg-[#4a5061] h-[24px] px-[4px] rounded-md mx-[2px] py-[2px] text-neutral-800 dark:text-neutral-300 ${
-                  className || ""
-                }`}
+                className={`bg-[#eff1f3] dark:bg-[#4a5061] h-[24px] px-[4px] rounded-md mx-[2px] py-[2px] text-neutral-800 dark:text-neutral-300 ${className || ""
+                  }`}
                 style={inlineCodeStyle}
               >
                 {children}
@@ -210,7 +210,7 @@ export function Markdown({ content }: { content: string }) {
             </h6>
           );
         },
-        p({ children, ...props }) {
+        p({ children,node, ...props }) {
           return (
             <p className="mt-2 py-1" {...props}>
               {children}
@@ -252,6 +252,18 @@ export function Markdown({ content }: { content: string }) {
           });
           return <section {...props}>{modifiedChildren}</section>;
         },
+        div({ children, node, ...props }) {
+          // if (props.className === "admonition") {
+          //   return (
+          //     <div
+          //       className="p-4 border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-500"
+          //     >
+          //       {children}
+          //     </div>
+          //   );
+          // }
+          return <div {...props}>{children}</div>;
+        }
       }}
     />
   );

client/src/index.css

@@ -57,37 +57,40 @@ ul {
 }
 
 .markdown-alert {
-  @apply !border-l-0 border-0 rounded-lg !py-4 my-4 !px-4 !leading-snug;
+  @apply !border-l-2 border-2 rounded-lg !py-4 my-4 !px-4 !leading-snug space-y-0;
 }
 
 .markdown-alert-note {
-  @apply !border-indigo-100 bg-indigo-50 !text-indigo-400;
+  @apply !border-indigo-300 bg-indigo-100 !text-indigo-400 dark:!bg-indigo-900 dark:!text-indigo-300 dark:!border-indigo-900;
 }
 
 .markdown-alert-warning {
-  @apply !border-yellow-100 bg-yellow-50 !text-yellow-400;
+  @apply !border-yellow-300 bg-yellow-100 !text-yellow-400 dark:!bg-yellow-900 dark:!text-yellow-300 dark:!border-yellow-900;
 }
 
 .markdown-alert-tip {
-  @apply !border-green-100 bg-green-50 !text-green-400;
+  @apply !border-green-300 bg-green-100 !text-green-400 dark:!bg-green-900 dark:!text-green-300 dark:!border-green-900;
 }
 
 .markdown-alert-important {
-  @apply !border-purple-100 bg-purple-50 !text-purple-400;
+  @apply !border-purple-300 bg-purple-100 !text-purple-400 dark:!bg-purple-900 dark:!text-purple-300 dark:!border-purple-900;
 }
 
 .markdown-alert-caution {
-  @apply !border-red-100 bg-red-50 !text-red-400;
+  @apply !border-red-300 bg-red-100 !text-red-400 dark:!bg-red-900 dark:!text-red-300 dark:!border-red-900;
 }
 
 .markdown-alert-title {
-  @apply !mb-2 !text-inherit !font-bold;
+  @apply flex flex-row items-center !mb-0 !text-inherit !font-bold fill-current;
 }
 
 .p-inputtext {
   @apply bg-secondary text-end px-2 py-2;
 }
 
+.octicon {
+  @apply mr-1 w-3;
+}
 /* animation */
 
 @keyframes anvil {