chore: update

Author: SoonIter

packages/core/src/node/mdx/remarkPlugins/containerSyntax.ts

@@ -77,40 +77,21 @@ const createContainer = (
   title: string | undefined,
   children: (BlockContent | PhrasingContent)[],
 ): ContainerDirective => {
-  const isDetails = type === 'details';
-
-  const rootHName = isDetails ? 'details' : 'div';
-  const titleHName = isDetails ? 'summary' : 'div';
-
   return {
     type: 'containerDirective',
-    name: type,
+    name: 'Callout',
+    attributes: {
+      type: type,
+      title: title || getTypeName(type),
+    },
     data: {
-      hName: rootHName,
+      hName: 'Callout',
       hProperties: {
-        class: `rspress-directive ${type}`,
+        type: type,
+        title: title || getTypeName(type),
       },
     },
-    children: [
-      {
-        type: 'paragraph',
-        data: {
-          hName: titleHName,
-          hProperties: {
-            class: 'rspress-directive-title',
-          },
-        },
-        children: [{ type: 'text', value: title || getTypeName(type) }],
-      },
-      {
-        type: 'paragraph',
-        data: {
-          hName: 'div',
-          hProperties: { class: 'rspress-directive-content' },
-        },
-        children: children as PhrasingContent[],
-      },
-    ],
+    children: children as BlockContent[],
   };
 };
 

packages/theme-default/src/styles/container.scss renamed to packages/theme-default/src/components/Callout/index.scss

@@ -242,8 +242,6 @@
     }
 
     &:where(details) {
-      margin: 16px 0;
-      padding: 8px;
       font-size: normal;
       cursor: pointer;
       transition: all 0.3s;

packages/theme-default/src/components/Callout/index.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import './index.scss';
+
+export interface CalloutProps {
+  type: 'tip' | 'note' | 'warning' | 'caution' | 'danger' | 'info' | 'details';
+  title?: string;
+  children: ReactNode;
+}
+
+/**
+ * Construct the DOM structure of the container directive.
+ * For example:
+ *
+ * ::: tip {title="foo"}
+ * This is a tip
+ * :::
+ *
+ * will be transformed to:
+ *
+ * <div class="rspress-directive tip">
+ *   <div class="rspress-directive-title">Tip</div>
+ *   <div class="rspress-directive-content">
+ *     <p>This is a tip</p>
+ *   </div>
+ * </div>
+ */
+export function Callout({ type, title, children }: CalloutProps) {
+  const isDetails = type === 'details';
+
+  if (isDetails) {
+    return (
+      <details className={`rspress-directive ${type}`}>
+        <summary className="rspress-directive-title">{title}</summary>
+        <div className="rspress-directive-content">{children}</div>
+      </details>
+    );
+  }
+
+  return (
+    <div className={`rspress-directive ${type}`}>
+      <div className="rspress-directive-title">{title}</div>
+      <div className="rspress-directive-content">{children}</div>
+    </div>
+  );
+}
+
+export default Callout;

packages/theme-default/src/components/DocContent/docComponents/index.tsx

@@ -1,3 +1,4 @@
+import { Callout } from '@theme';
 import { A } from './a';
 import { Code } from './codeblock/code';
 import { PreWithCodeButtonGroup } from './codeblock/pre';
@@ -31,5 +32,8 @@ export function getCustomMDXComponent() {
     code: Code,
     pre: PreWithCodeButtonGroup,
     img: Img,
+
+    // custom components can be added here
+    Callout,
   };
 }

packages/theme-default/src/index.ts

@@ -2,6 +2,7 @@
 export { Aside } from './components/Aside/index';
 export { Badge } from './components/Badge/index';
 export { Button } from './components/Button/index';
+export { Callout, type CalloutProps } from './components/Callout/index';
 export {
   CodeBlockRuntime,
   type CodeBlockRuntimeProps,

packages/theme-default/src/styles/index.ts

@@ -10,5 +10,4 @@ import './tailwind.css';
 import './code.scss';
 import './scrollbar.scss';
 import './shiki.scss';
-import './container.scss';
 import 'nprogress/nprogress.css';