Skip to content

Commit

Permalink
feat(mdx-admonitions): add admonitions syntax support
Browse files Browse the repository at this point in the history
issue #614
  • Loading branch information
sabertazimi committed Apr 27, 2022
1 parent b576692 commit 18540d5
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 139 deletions.
52 changes: 18 additions & 34 deletions contents/implementFancyMDX.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -180,20 +180,6 @@ Two 🍰 is: {Math.PI * 2}
return <span style={{color: 'goldenrod'}}>Not me.</span>
})()}

export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!

{/* A comment! */}
Expand Down Expand Up @@ -330,23 +316,6 @@ $$

## Admonitions

:::main{#readme}

Lorem:br
ipsum.

::hr{.red}

A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}.

:::

:::note{.warning}
if you chose xxx, you should also use yyy somewhere…
:::

::youtube[Video of a cat in a box]{#01ab2cd3efg}

:::note

Some **content** with _markdown_ `syntax`. Check [this `api`](#).
Expand Down Expand Up @@ -377,15 +346,30 @@ Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::note Your Title
:::note{Your Title}

Some **content** with _markdown_ `syntax`.
I can write **Markdown** alongside my _JSX_!

:::

:::tip MDX in admonitions
:::tip{MDX in admonitions}

Two 🍰 is: {Math.PI * 2}

{(function () {
const guess = Math.random()

if (guess > 0.66) {
return <span style={{color: 'tomato'}}>Look at us.</span>
}

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
if (guess > 0.33) {
return <span style={{color: 'violet'}}>Who would have guessed?!</span>
}

return <span style={{color: 'goldenrod'}}>Not me.</span>
})()}

I can write **Markdown** alongside my _JSX_!

Expand Down
2 changes: 2 additions & 0 deletions lib/getPostsData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import remarkGemoji from 'remark-gemoji';
import remarkGfm from 'remark-gfm';
import remarkGitHub from 'remark-github';
import remarkMath from 'remark-math';
import remarkAdmonitions from './remark-admonitions';

const contentsPath = path.join(process.cwd(), 'contents');
let postsData: Post[] = [];
Expand Down Expand Up @@ -59,6 +60,7 @@ async function generatePostData(filePath: string): Promise<Post> {
remarkGemoji,
remarkMath,
remarkDirective,
remarkAdmonitions,
],
rehypePlugins: [
rehypeSlug,
Expand Down
44 changes: 44 additions & 0 deletions lib/remark-admonitions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import type { Parent } from 'mdast';
import { visit } from 'unist-util-visit';

/**
* Markdown abstract syntax tree node definition.
* @see https://github.com/syntax-tree/mdast
*/
interface ContainerDirective extends Parent {
name: string;
attributes: Record<string, string>;
value?: string;
}

export default function remarkAdmonitions() {
return (tree: any) => {
visit(tree, (node: ContainerDirective) => {
if (node.type === 'containerDirective') {
const title = Object.keys(node.attributes).join(' ');

// Add `<strong class="admonition-title">{title}</strong>`
if (title) {
node.children.unshift({
type: 'strong',
children: [{ type: 'text', value: title }],
data: {
hName: 'strong',
hProperties: {
className: 'admonition-title',
},
},
});
}

// Change container html element to `<aside class="admonition admonition-*">`,
node.data = {
hName: 'aside',
hProperties: {
className: `admonition admonition-${node.name}`,
},
};
}
});
};
}
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@
"remark-gfm": "^3.0.1",
"remark-github": "^11.2.2",
"remark-math": "^5.1.1",
"typed.js": "^2.0.12"
"typed.js": "^2.0.12",
"unist-util-visit": "^4.1.0"
},
"devDependencies": {
"@dg-scripts/stylelint-config": "^5.9.0",
Expand All @@ -74,6 +75,7 @@
"@testing-library/react": "^13.1.1",
"@types/jest": "^27.4.1",
"@types/jest-axe": "^3.5.3",
"@types/mdast": "^3.0.10",
"@types/node": "^16.11.27",
"@types/react": "^18.0.6",
"@types/react-dom": "^18.0.2",
Expand Down
116 changes: 12 additions & 104 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2161,6 +2161,7 @@ __metadata:
"@testing-library/react": ^13.1.1
"@types/jest": ^27.4.1
"@types/jest-axe": ^3.5.3
"@types/mdast": ^3.0.10
"@types/node": ^16.11.27
"@types/react": ^18.0.6
"@types/react-dom": ^18.0.2
Expand Down Expand Up @@ -2204,6 +2205,7 @@ __metadata:
tslib: ^2.4.0
typed.js: ^2.0.12
typescript: ^4.6.3
unist-util-visit: ^4.1.0
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -2508,7 +2510,7 @@ __metadata:
languageName: node
linkType: hard

"@types/mdast@npm:^3.0.0":
"@types/mdast@npm:^3.0.0, @types/mdast@npm:^3.0.10":
version: 3.0.10
resolution: "@types/mdast@npm:3.0.10"
dependencies:
Expand Down Expand Up @@ -2603,18 +2605,7 @@ __metadata:
languageName: node
linkType: hard

"@types/react@npm:*, @types/react@npm:^18.0.6":
version: 18.0.6
resolution: "@types/react@npm:18.0.6"
dependencies:
"@types/prop-types": "*"
"@types/scheduler": "*"
csstype: ^3.0.2
checksum: 368b40176f0dab30a611c3263bf1d9878cebede9ce8015bc5661a396787dbe41f0b667b8d6d448dea7bc8c0557bf3cb329ab2b16ad2dacb18eaa764358bd16d4
languageName: node
linkType: hard

"@types/react@npm:>=16":
"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.6":
version: 18.0.7
resolution: "@types/react@npm:18.0.7"
dependencies:
Expand Down Expand Up @@ -2995,16 +2986,7 @@ __metadata:
languageName: node
linkType: hard

"acorn@npm:^8.0.0, acorn@npm:^8.2.4, acorn@npm:^8.7.0":
version: 8.7.0
resolution: "acorn@npm:8.7.0"
bin:
acorn: bin/acorn
checksum: e0f79409d68923fbf1aa6d4166f3eedc47955320d25c89a20cc822e6ba7c48c5963d5bc657bc242d68f7a4ac9faf96eef033e8f73656da6c640d4219935fdfd0
languageName: node
linkType: hard

"acorn@npm:^8.4.1, acorn@npm:^8.5.0":
"acorn@npm:^8.0.0, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.0":
version: 8.7.1
resolution: "acorn@npm:8.7.1"
bin:
Expand Down Expand Up @@ -3071,19 +3053,7 @@ __metadata:
languageName: node
linkType: hard

"ajv@npm:^8.0.1":
version: 8.6.3
resolution: "ajv@npm:8.6.3"
dependencies:
fast-deep-equal: ^3.1.1
json-schema-traverse: ^1.0.0
require-from-string: ^2.0.2
uri-js: ^4.2.2
checksum: 690ffb9408415fdab43686b3f92037ba0c8362f5d0709a123ba3fb546e6ad81414455f80a2b5cc432ce924afe9864671198f022bc331a19c072d4ede152ec3ca
languageName: node
linkType: hard

"ajv@npm:^8.6.0":
"ajv@npm:^8.0.1, ajv@npm:^8.6.0":
version: 8.11.0
resolution: "ajv@npm:8.11.0"
dependencies:
Expand Down Expand Up @@ -3657,7 +3627,7 @@ __metadata:
languageName: node
linkType: hard

"browserslist@npm:^4.14.5":
"browserslist@npm:^4.14.5, browserslist@npm:^4.17.5, browserslist@npm:^4.20.2":
version: 4.20.3
resolution: "browserslist@npm:4.20.3"
dependencies:
Expand All @@ -3672,21 +3642,6 @@ __metadata:
languageName: node
linkType: hard

"browserslist@npm:^4.17.5, browserslist@npm:^4.20.2":
version: 4.20.2
resolution: "browserslist@npm:4.20.2"
dependencies:
caniuse-lite: ^1.0.30001317
electron-to-chromium: ^1.4.84
escalade: ^3.1.1
node-releases: ^2.0.2
picocolors: ^1.0.0
bin:
browserslist: cli.js
checksum: 18e09beeae32e69fea45fc3642240fb63027b1460d90e24da86377177dca3d82c80f8fa44469d95109e3962f08eb2a23e03037bd5e1f1ec38e4866e2a8572435
languageName: node
linkType: hard

"bs-logger@npm:0.x":
version: 0.2.6
resolution: "bs-logger@npm:0.2.6"
Expand Down Expand Up @@ -3794,7 +3749,7 @@ __metadata:
languageName: node
linkType: hard

"caniuse-lite@npm:^1.0.30001283, caniuse-lite@npm:^1.0.30001317, caniuse-lite@npm:^1.0.30001332":
"caniuse-lite@npm:^1.0.30001283, caniuse-lite@npm:^1.0.30001332":
version: 1.0.30001332
resolution: "caniuse-lite@npm:1.0.30001332"
checksum: e54182ea42ab3d2ff1440f9a6480292f7ab23c00c188df7ad65586312e4da567e8bedd5cb5fb8f0ff4193dc027a54e17e0b3c0b6db5d5a3fb61c7726ff9c45b3
Expand Down Expand Up @@ -4925,13 +4880,6 @@ __metadata:
languageName: node
linkType: hard

"electron-to-chromium@npm:^1.4.84":
version: 1.4.88
resolution: "electron-to-chromium@npm:1.4.88"
checksum: a93d364efae8e6f718f1aae0f47914028178ed0b643cc583344127dc547bf1f7fc8df066834233e04629e8df2141eb192bcb2070abdbeeb872e551acbaba2bbf
languageName: node
linkType: hard

"emittery@npm:^0.8.1":
version: 0.8.1
resolution: "emittery@npm:0.8.1"
Expand Down Expand Up @@ -6135,14 +6083,7 @@ __metadata:
languageName: node
linkType: hard

"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
version: 4.2.9
resolution: "graceful-fs@npm:4.2.9"
checksum: 68ea4e07ff2c041ada184f9278b830375f8e0b75154e3f080af6b70f66172fabb4108d19b3863a96b53fc068a310b9b6493d86d1291acc5f3861eb4b79d26ad6
languageName: node
linkType: hard

"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4":
"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
version: 4.2.10
resolution: "graceful-fs@npm:4.2.10"
checksum: 3f109d70ae123951905d85032ebeae3c2a5a7a997430df00ea30df0e3a6c60cf6689b109654d6fdacd28810a053348c4d14642da1d075049e6be1ba5216218da
Expand Down Expand Up @@ -9016,30 +8957,14 @@ __metadata:
languageName: node
linkType: hard

"mime-db@npm:1.50.0":
version: 1.50.0
resolution: "mime-db@npm:1.50.0"
checksum: 95fcc19c3664ae72391c8a7e4015dde7fb6817c98c951493ca3a1d48050feb8ee08810a372ce7d9e16310042d26e5bda168916f600583a9a583655eeea8ff5f5
languageName: node
linkType: hard

"mime-db@npm:1.52.0":
version: 1.52.0
resolution: "mime-db@npm:1.52.0"
checksum: 0d99a03585f8b39d68182803b12ac601d9c01abfa28ec56204fa330bc9f3d1c5e14beb049bafadb3dbdf646dfb94b87e24d4ec7b31b7279ef906a8ea9b6a513f
languageName: node
linkType: hard

"mime-types@npm:^2.1.12":
version: 2.1.33
resolution: "mime-types@npm:2.1.33"
dependencies:
mime-db: 1.50.0
checksum: 05f2a0b3f169fbc51d79bdc7674ceb379dd07dbeadb0143059a7def865224686ee9f9051aeb340e98b6c11dbc06794ce0122181db4312cb1ad054fd90b0d510e
languageName: node
linkType: hard

"mime-types@npm:^2.1.27":
"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27":
version: 2.1.35
resolution: "mime-types@npm:2.1.35"
dependencies:
Expand Down Expand Up @@ -9431,13 +9356,6 @@ __metadata:
languageName: node
linkType: hard

"node-releases@npm:^2.0.2":
version: 2.0.2
resolution: "node-releases@npm:2.0.2"
checksum: da858bf86b4d512842379749f5a5e4196ddab05ba18ffcf29f05bf460beceaca927f070f4430bb5046efec18941ddbc85e4c5fdbb83afc28a38dd6069a2f255e
languageName: node
linkType: hard

"node-releases@npm:^2.0.3":
version: 2.0.3
resolution: "node-releases@npm:2.0.3"
Expand Down Expand Up @@ -12013,17 +11931,7 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard

"source-map-support@npm:^0.5.6":
version: 0.5.20
resolution: "source-map-support@npm:0.5.20"
dependencies:
buffer-from: ^1.0.0
source-map: ^0.6.0
checksum: 43946aff452011960d16154304b11011e0185549493e65dd90da045959409fb2d266ba1c854fff3d5949f8e59382e3fcc7f7c5fa66136007a6750ad06c6c0baa
languageName: node
linkType: hard

"source-map-support@npm:~0.5.20":
"source-map-support@npm:^0.5.6, source-map-support@npm:~0.5.20":
version: 0.5.21
resolution: "source-map-support@npm:0.5.21"
dependencies:
Expand Down Expand Up @@ -13342,7 +13250,7 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard

"unist-util-visit@npm:^4.0.0":
"unist-util-visit@npm:^4.0.0, unist-util-visit@npm:^4.1.0":
version: 4.1.0
resolution: "unist-util-visit@npm:4.1.0"
dependencies:
Expand Down

0 comments on commit 18540d5

Please sign in to comment.