feat(plugin_container): support for GitHub markdown alerts syntax (#58)

.gitignore

@@ -193,4 +193,5 @@ $RECYCLE.BIN/
 !.yarn/versions
 
 *.node
-.vscode
+.vscode
+.idea

__test__/__snapshots__/index.spec.ts.snap

@@ -438,6 +438,12 @@ exports[`compile > should render container type correctly 1`] = `
     <p>This is a <code>block</code> of type <code>danger</code></p>
   </div>
 </div>
+<details>
+  <summary>DETAILS</summary>
+  <div>
+    <p>This is a <code>block</code> of type <code>details</code></p>
+  </div>
+</details>
 "
 `;
 
@@ -449,6 +455,8 @@ function _createMdxContent(props) {
       div: "div",
       p: "p",
       code: "code",
+      details: "details",
+      summary: "summary",
     },
     _provideComponents(),
     props.components
@@ -544,6 +552,21 @@ function _createMdxContent(props) {
           </_components.p>
         </_components.div>
       </_components.div>
+      {"\\n"}
+      <_components.details className="rspress-directive details">
+        <_components.summary className="rspress-directive-title">
+          {"DETAILS"}
+        </_components.summary>
+        <_components.div className="rspress-directive-content">
+          <_components.p>
+            {"This is a "}
+            <_components.code>{"block"}</_components.code>
+            {" of type "}
+            <_components.code>{"details"}</_components.code>
+            {"\\n"}
+          </_components.p>
+        </_components.div>
+      </_components.details>
     </>
   );
 }
@@ -749,3 +772,157 @@ function MDXContent(props = {}) {
 export default MDXContent;
 "
 `;
+
+exports[`compile > should render github alerts correctly 1`] = `
+"<div>
+  <div>TIP</div>
+  <div>
+    <p>
+      <strong>Helpful advice for doing things better or more easily.</strong>
+    </p>
+  </div>
+</div>
+<div>
+  <div>NOTE</div>
+  <div>
+    <h1>Please read this note!</h1>
+  </div>
+</div>
+<div>
+  <div>WARNING</div>
+  <div>
+    <p>Use <code>dummy</code> instead of <code>demo</code></p>
+  </div>
+</div>
+<div>
+  <div>CAUTION</div>
+  <div>
+    <p>Use this code:-</p>
+    <pre><code>console.log(69);
+</code></pre>
+  </div>
+</div>
+<details>
+  <summary>DETAILS</summary>
+  <div>
+    <p>This is a <code>block</code> of type <code>details</code></p>
+  </div>
+</details>
+"
+`;
+
+exports[`compile > should render github alerts correctly 2`] = `
+"import { useMDXComponents as _provideComponents } from "@mdx-js/react";
+function _createMdxContent(props) {
+  const _components = Object.assign(
+    {
+      div: "div",
+      p: "p",
+      strong: "strong",
+      h1: "h1",
+      code: "code",
+      pre: "pre",
+      details: "details",
+      summary: "summary",
+    },
+    _provideComponents(),
+    props.components
+  );
+  return (
+    <>
+      <_components.div className="rspress-directive TIP">
+        <_components.div className="rspress-directive-title">
+          {"TIP"}
+        </_components.div>
+        <_components.div className="rspress-directive-content">
+          {"\\n"}
+          <_components.p>
+            <_components.strong>
+              {"Helpful advice for doing things better or more easily."}
+            </_components.strong>
+          </_components.p>
+          {"\\n"}
+        </_components.div>
+      </_components.div>
+      {"\\n"}
+      <_components.div className="rspress-directive NOTE">
+        <_components.div className="rspress-directive-title">
+          {"NOTE"}
+        </_components.div>
+        <_components.div className="rspress-directive-content">
+          {"\\n"}
+          {"\\n"}
+          <_components.h1>{"Please read this note!"}</_components.h1>
+          {"\\n"}
+        </_components.div>
+      </_components.div>
+      {"\\n"}
+      <_components.div className="rspress-directive warning">
+        <_components.div className="rspress-directive-title">
+          {"WARNING"}
+        </_components.div>
+        <_components.div className="rspress-directive-content">
+          {"\\n"}
+          <_components.p>
+            {"Use "}
+            <_components.code>{"dummy"}</_components.code>
+            {" instead of "}
+            <_components.code>{"demo"}</_components.code>
+          </_components.p>
+          {"\\n"}
+        </_components.div>
+      </_components.div>
+      {"\\n"}
+      <_components.div className="rspress-directive CAUTION">
+        <_components.div className="rspress-directive-title">
+          {"CAUTION"}
+        </_components.div>
+        <_components.div className="rspress-directive-content">
+          {"\\n"}
+          {"\\n"}
+          <_components.p>{"Use this code:-"}</_components.p>
+          {"\\n"}
+          <_components.pre>
+            <_components.code className="language-javascript">
+              {"console.log(69);\\n"}
+            </_components.code>
+          </_components.pre>
+          {"\\n"}
+        </_components.div>
+      </_components.div>
+      {"\\n"}
+      <_components.details className="rspress-directive details">
+        <_components.summary className="rspress-directive-title">
+          {"DETAILS"}
+        </_components.summary>
+        <_components.div className="rspress-directive-content">
+          {"\\n"}
+          <_components.p>
+            {"This is a "}
+            <_components.code>{"block"}</_components.code>
+            {" of type "}
+            <_components.code>{"details"}</_components.code>
+          </_components.p>
+          {"\\n"}
+        </_components.div>
+      </_components.details>
+    </>
+  );
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = Object.assign(
+    {},
+    _provideComponents(),
+    props.components
+  );
+  return MDXLayout ? (
+    <MDXLayout {...props}>
+      <_createMdxContent {...props} />
+    </MDXLayout>
+  ) : (
+    _createMdxContent(props)
+  );
+}
+export default MDXContent;
+"
+`;

__test__/container-type.md

@@ -21,3 +21,7 @@ This is a `block` of type `danger`
 :::caution
 This is a `block` of type `danger`
 :::
+
+:::details
+This is a `block` of type `details`
+:::

__test__/github-alert-syntax.md

@@ -0,0 +1,19 @@
+> [!TIP]
+> **Helpful advice for doing things better or more easily.**
+
+> [!NOTE]
+>
+> # Please read this note!
+
+> [!warning]
+> Use `dummy` instead of `demo`
+
+> [!CAUTION]
+>
+> Use this code:-
+> ```javascript
+> console.log(69);
+> ```
+
+> [!details]
+> This is a `block` of type `details`

__test__/index.spec.ts

@@ -42,9 +42,9 @@ describe("compile", () => {
   test("should render container type correctly", async () => {
     const { code: result, html } = await testCompile({
       value: readFileSync(path.join(__dirname, "./container-type.md"), "utf8"),
-      filepath: "xxx.mdx",
+      filepath: "container-type.md",
       development: true,
-      root: "xxx",
+      root: "",
     });
 
     expect(html).toMatchSnapshot();
@@ -57,9 +57,9 @@ describe("compile", () => {
         path.join(__dirname, "./container-type-with-space.md"),
         "utf8",
       ),
-      filepath: "xxx.mdx",
+      filepath: "container-type-with-space.md",
       development: true,
-      root: "xxx",
+      root: "",
     });
 
     expect(html).toMatchSnapshot();
@@ -72,9 +72,9 @@ describe("compile", () => {
         path.join(__dirname, "./container-content.md"),
         "utf8",
       ),
-      filepath: "xxx.mdx",
+      filepath: "container-content.md",
       development: true,
-      root: "xxx",
+      root: "",
     });
 
     expect(html).toMatchSnapshot();
@@ -87,9 +87,9 @@ describe("compile", () => {
         path.join(__dirname, "./container-title.mdx"),
         "utf8",
       ),
-      filepath: "xxx.mdx",
+      filepath: "container-title.mdx",
       development: true,
-      root: "xxx",
+      root: "",
     });
 
     expect(html).toMatchSnapshot();
@@ -99,9 +99,24 @@ describe("compile", () => {
   test("should render container title in md correctly", async () => {
     const { code: result, html } = await testCompile({
       value: readFileSync(path.join(__dirname, "./container-title.md"), "utf8"),
-      filepath: "xxx.md",
+      filepath: "container-title.md",
       development: true,
-      root: "xxx",
+      root: "",
+    });
+
+    expect(html).toMatchSnapshot();
+    expect(result).toMatchSnapshot();
+  });
+
+  test("should render github alerts correctly", async () => {
+    const { code: result, html } = await testCompile({
+      value: readFileSync(
+          path.join(__dirname, "./github-alert-syntax.md"),
+          "utf8",
+      ),
+      filepath: "github-alert-syntax.md",
+      development: true,
+      root: "",
     });
 
     expect(html).toMatchSnapshot();