Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Oct 22, 2024
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2ccd46
feat(plugin_container): support for GitHub markdown alerts syntax
seeintea Oct 21, 2024
f09a5e8
style: apply ci suggestions
seeintea Oct 21, 2024
09ff4b4
test: apply reviewers suggestions
seeintea Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,4 +193,5 @@ $RECYCLE.BIN/
!.yarn/versions

*.node
.vscode
.vscode
.idea
177 changes: 177 additions & 0 deletions __test__/__snapshots__/index.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
"
`;

Expand All @@ -449,6 +455,8 @@ function _createMdxContent(props) {
div: "div",
p: "p",
code: "code",
details: "details",
summary: "summary",
},
_provideComponents(),
props.components
Expand Down Expand Up @@ -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>
</>
);
}
Expand Down Expand Up @@ -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;
"
`;
4 changes: 4 additions & 0 deletions __test__/container-type.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
:::
19 changes: 19 additions & 0 deletions __test__/github-alert-syntax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
15 changes: 15 additions & 0 deletions __test__/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,19 @@ describe("compile", () => {
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: "xxx.mdx",
development: true,
root: "xxx",
seeintea marked this conversation as resolved.
Show resolved Hide resolved
});

expect(html).toMatchSnapshot();
expect(result).toMatchSnapshot();
});
});
Loading
Loading