@rspress-theme-anatole/plugin-container-syntax 0.0.2

package/container.css

@@ -0,0 +1,206 @@
+/*
+  * Container Style
+ */
+:root {
+  --rp-container-note-border: var(--rp-c-divider-light);
+  --rp-container-note-text: var(--rp-c-text-1);
+  --rp-container-note-bg: var(--rp-c-bg-soft);
+  --rp-container-note-code-bg: rgba(128, 128, 128, 0.1);
+  --rp-container-note-link: var(--rp-c-link);
+
+  --rp-container-tip-border: rgba(7, 156, 112, 0.2);
+  --rp-container-tip-text: #278359;
+  --rp-container-tip-bg: rgba(7, 156, 112, 0.06);
+  --rp-container-tip-code-bg: rgba(7, 156, 112, 0.1);
+
+  --rp-container-info-border: rgba(0, 149, 255, 0.2);
+  --rp-container-info-text: #07f;
+  --rp-container-info-bg: rgba(0, 149, 255, 0.06);
+  --rp-container-info-code-bg: rgba(0, 149, 255, 0.1);
+
+  --rp-container-warning-border: rgba(255, 197, 23, 0.4);
+  --rp-container-warning-text: #887233;
+  --rp-container-warning-bg: rgba(255, 197, 23, 0.1);
+  --rp-container-warning-code-bg: rgba(255, 197, 23, 0.1);
+
+  --rp-container-danger-border: rgba(237, 60, 80, 0.2);
+  --rp-container-danger-text: #ab2131;
+  --rp-container-danger-bg: rgba(237, 60, 80, 0.08);
+  --rp-container-danger-code-bg: rgba(237, 60, 80, 0.1);
+
+  --rp-container-details-border: var(--rp-c-divider-light);
+  --rp-container-details-text: var(--rp-c-text-1);
+  --rp-container-details-bg: var(--rp-c-bg-soft);
+  --rp-container-details-code-bg: rgba(128, 128, 128, 0.1);
+  --rp-container-details-link: var(--rp-c-link);
+}
+
+.dark {
+  --rp-container-tip-text: #3ec480;
+  --rp-container-tip-bg: rgba(7, 156, 112, 0.1);
+
+  --rp-container-info-text: #66c2ff;
+  --rp-container-info-bg: rgba(0, 149, 255, 0.1);
+
+  --rp-container-warning-text: rgb(251, 180, 81);
+  --rp-container-warning-border: rgba(255, 197, 23, 0.25);
+  --rp-container-warning-bg: rgba(255, 197, 23, 0.12);
+
+  --rp-container-danger-text: rgb(247, 110, 133);
+  --rp-container-danger-border: rgba(237, 60, 80, 0.3);
+  --rp-container-danger-bg: rgba(237, 60, 80, 0.12);
+}
+
+.rspress-doc .rspress-directive {
+  border: 1px solid transparent;
+  border-radius: var(--rp-radius);
+  padding: 20px 24px 12px;
+  line-height: 1.7;
+  font-size: 14px;
+  font-weight: 400;
+  margin: 24px 0;
+}
+
+.rspress-doc .rspress-directive .rspress-directive-title {
+  margin-bottom: 8px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.rspress-doc .rspress-directive .rspress-directive-content p {
+  margin: 8px 0;
+}
+
+.rspress-doc .rspress-directive .rspress-directive-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 3px;
+}
+
+.rspress-doc .rspress-directive p {
+  margin: 8px 0;
+}
+
+.rspress-doc .rspress-directive code {
+  color: inherit;
+  font-size: 13px;
+}
+
+.rspress-doc .rspress-directive a {
+  font-weight: 500;
+  transition: color 0.25s;
+  border-bottom: 1px solid currentColor;
+}
+
+.rspress-doc .rspress-directive.note {
+  border-color: var(--rp-container-note-border);
+  background-color: var(--rp-container-note-bg);
+}
+
+.rspress-doc .rspress-directive.note .rspress-directive-title {
+  color: var(--rp-container-note-text);
+}
+
+.rspress-doc .rspress-directive.note code {
+  color: var(--rp-container-note-text);
+  background-color: var(--rp-container-note-code-bg);
+}
+
+.rspress-doc .rspress-directive.note a {
+  color: var(--rp-container-note-text);
+}
+
+.rspress-doc .rspress-directive.tip {
+  border-color: var(--rp-container-tip-border);
+  background-color: var(--rp-container-tip-bg);
+}
+
+.rspress-doc .rspress-directive.tip .rspress-directive-title {
+  color: var(--rp-container-tip-text);
+}
+
+.rspress-doc .rspress-directive.tip code {
+  color: var(--rp-container-tip-text);
+  background-color: var(--rp-container-tip-code-bg);
+}
+
+.rspress-doc .rspress-directive.tip a {
+  color: var(--rp-container-tip-text);
+}
+
+.rspress-doc .rspress-directive.info {
+  border-color: var(--rp-container-info-border);
+  background-color: var(--rp-container-info-bg);
+}
+
+.rspress-doc .rspress-directive.info .rspress-directive-title {
+  color: var(--rp-container-info-text);
+}
+
+.rspress-doc .rspress-directive.info code {
+  color: var(--rp-container-info-text);
+  background-color: var(--rp-container-info-code-bg);
+}
+
+.rspress-doc .rspress-directive.info a {
+  color: var(--rp-container-info-text);
+}
+
+.rspress-doc .rspress-directive.warning {
+  border-color: var(--rp-container-warning-border);
+  background-color: var(--rp-container-warning-bg);
+}
+
+.rspress-doc .rspress-directive.warning .rspress-directive-title {
+  color: var(--rp-container-warning-text);
+}
+
+.rspress-doc .rspress-directive.warning code {
+  color: var(--rp-container-warning-text);
+  background-color: var(--rp-container-warning-code-bg);
+}
+
+.rspress-doc .rspress-directive.warning a {
+  color: var(--rp-container-warning-text);
+}
+
+.rspress-doc .rspress-directive.caution,
+.rspress-doc .rspress-directive.danger {
+  border-color: var(--rp-container-danger-border);
+  background-color: var(--rp-container-danger-bg);
+}
+
+.rspress-doc .rspress-directive.caution .rspress-directive-title,
+.rspress-doc .rspress-directive.danger .rspress-directive-title {
+  color: var(--rp-container-danger-text);
+}
+
+.rspress-doc .rspress-directive.caution code,
+.rspress-doc .rspress-directive.danger code {
+  color: var(--rp-container-danger-text);
+  background-color: var(--rp-container-danger-code-bg);
+}
+
+.rspress-doc .rspress-directive.caution a,
+.rspress-doc .rspress-directive.danger a {
+  color: var(--rp-container-danger-text);
+}
+
+.rspress-doc .rspress-directive.details {
+  border-color: var(--rp-container-details-border);
+  background-color: var(--rp-container-details-bg);
+}
+
+.rspress-doc .rspress-directive.details .rspress-directive-title {
+  color: var(--rp-container-details-text);
+}
+
+.rspress-doc .rspress-directive.details code {
+  color: var(--rp-container-details-text);
+  background-color: var(--rp-container-details-code-bg);
+}
+
+.rspress-doc .rspress-directive.details a {
+  color: var(--rp-container-details-link);
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { RspressPlugin } from '@rspress-theme-anatole/shared';
+
+export declare function pluginContainerSyntax(): RspressPlugin;
+
+export { }

package/dist/index.js

@@ -0,0 +1,212 @@
+import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
+import * as __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__ from "node:url";
+import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__ from "@rspress-theme-anatole/shared";
+const DIRECTIVE_TYPES = [
+    'tip',
+    'note',
+    'warning',
+    'caution',
+    'danger',
+    'info',
+    'details'
+];
+const REGEX_BEGIN = /^\s*:::\s*(\w+)\s*(.*)?/;
+const REGEX_END = /\s*:::$/;
+const REGEX_GH_BEGIN = /^\s*\s*\[!(\w+)\]\s*(.*)?/;
+const TITLE_REGEX_IN_MD = /{\s*title=["']?(.+)}\s*/;
+const TITLE_REGEX_IN_MDX = /\s*title=["']?(.+)\s*/;
+const trimTailingQuote = (str)=>str.replace(/['"]$/g, '');
+const parseTitle = (rawTitle = '', isMDX = false)=>{
+    const matched = rawTitle?.match(isMDX ? TITLE_REGEX_IN_MDX : TITLE_REGEX_IN_MD);
+    return trimTailingQuote(matched?.[1] || rawTitle);
+};
+const createContainer = (type, title, children)=>{
+    const isDetails = 'details' === type;
+    const rootHName = isDetails ? 'details' : 'div';
+    const titleHName = isDetails ? 'summary' : 'div';
+    return {
+        type: 'containerDirective',
+        data: {
+            hName: rootHName,
+            hProperties: {
+                class: `rspress-directive ${type}`
+            }
+        },
+        children: [
+            {
+                type: 'paragraph',
+                data: {
+                    hName: titleHName,
+                    hProperties: {
+                        class: 'rspress-directive-title'
+                    }
+                },
+                children: [
+                    {
+                        type: 'text',
+                        value: title || type.toUpperCase()
+                    }
+                ]
+            },
+            {
+                type: 'paragraph',
+                data: {
+                    hName: 'div',
+                    hProperties: {
+                        class: 'rspress-directive-content'
+                    }
+                },
+                children: children
+            }
+        ]
+    };
+};
+function transformer(tree) {
+    let i = 0;
+    try {
+        while(i < tree.children.length){
+            const node = tree.children[i];
+            if ('children' in node) transformer(node);
+            if ('containerDirective' === node.type) {
+                const type = node.name;
+                if (DIRECTIVE_TYPES.includes(type)) tree.children.splice(i, 1, createContainer(type, node.attributes?.title ?? type.toUpperCase(), node.children));
+            } else if ('blockquote' === node.type && 'paragraph' === node.children[0].type && 'value' in node.children[0].children[0]) {
+                const initiatorTag = node.children[0].children[0].value;
+                const match = initiatorTag.match(REGEX_GH_BEGIN);
+                if (match) {
+                    const [, type] = match;
+                    if (!DIRECTIVE_TYPES.includes(type.toLowerCase())) {
+                        i++;
+                        continue;
+                    }
+                    if (1 === node.children.length && 'paragraph' === node.children[0].type) node.children[0].children[0].value = match[2] ?? '';
+                    const newChild = createContainer(type.toLowerCase(), type.toUpperCase(), 0 === node.children.slice(1).length ? node.children.slice(0) : node.children.slice(1));
+                    tree.children.splice(i, 1, newChild);
+                }
+            }
+            if ('paragraph' !== node.type || 'text' !== node.children[0].type) {
+                i++;
+                continue;
+            }
+            const firstTextNode = node.children[0];
+            const text = firstTextNode.value;
+            const metaText = text.split('\n')[0];
+            const content = text.slice(metaText.length);
+            const match = metaText.match(REGEX_BEGIN);
+            if (!match) {
+                i++;
+                continue;
+            }
+            const [, type, rawTitle] = match;
+            let title = parseTitle(rawTitle);
+            const titleExpressionNode = node.children[1] && 'mdxTextExpression' === node.children[1].type ? node.children[1] : null;
+            if (titleExpressionNode) {
+                title = parseTitle(titleExpressionNode.value, true);
+                node.children.splice(1, 1);
+            }
+            if (!DIRECTIVE_TYPES.includes(type)) {
+                i++;
+                continue;
+            }
+            const wrappedChildren = [];
+            if (content?.endsWith(':::')) {
+                wrappedChildren.push({
+                    type: 'paragraph',
+                    children: [
+                        {
+                            type: 'text',
+                            value: content.replace(REGEX_END, '')
+                        }
+                    ]
+                });
+                const newChild = createContainer(type, title, wrappedChildren);
+                tree.children.splice(i, 1, newChild);
+            } else {
+                const paragraphChild = {
+                    type: 'paragraph',
+                    children: []
+                };
+                wrappedChildren.push(paragraphChild);
+                if (content.length) paragraphChild.children.push({
+                    type: 'text',
+                    value: content
+                });
+                paragraphChild.children.push(...node.children.slice(1, -1));
+                if (0 === paragraphChild.children.length) wrappedChildren.pop();
+                const lastChildInNode = node.children[node.children.length - 1];
+                if ('text' === lastChildInNode.type && REGEX_END.test(lastChildInNode.value)) {
+                    const lastChildInNodeText = lastChildInNode.value;
+                    const matchedEndContent = lastChildInNodeText.slice(0, -3).trim();
+                    if (wrappedChildren.length) wrappedChildren[0].children.push({
+                        type: 'text',
+                        value: matchedEndContent
+                    });
+                    else if (matchedEndContent) wrappedChildren.push({
+                        type: 'paragraph',
+                        children: [
+                            {
+                                type: 'text',
+                                value: matchedEndContent
+                            }
+                        ]
+                    });
+                    const newChild = createContainer(type, title, wrappedChildren);
+                    tree.children.splice(i, 1, newChild);
+                    i++;
+                    continue;
+                }
+                if (lastChildInNode !== firstTextNode && wrappedChildren.length) wrappedChildren[0].children.push(lastChildInNode);
+                let j = i + 1;
+                while(j < tree.children.length){
+                    const currentParagraph = tree.children[j];
+                    if ('paragraph' !== currentParagraph.type) {
+                        wrappedChildren.push(currentParagraph);
+                        j++;
+                        continue;
+                    }
+                    const lastChild = currentParagraph.children[currentParagraph.children.length - 1];
+                    if (lastChild === firstTextNode || 'text' === lastChild.type && REGEX_END.test(lastChild.value)) {
+                        const lastChildText = lastChild.value;
+                        const matchedEndContent = lastChildText.slice(0, -3).trim();
+                        wrappedChildren.push(...currentParagraph.children.filter((child)=>child !== firstTextNode && child !== lastChild));
+                        if (matchedEndContent) wrappedChildren.push({
+                            type: 'paragraph',
+                            children: [
+                                {
+                                    type: 'text',
+                                    value: matchedEndContent
+                                }
+                            ]
+                        });
+                        const newChild = createContainer(type, title, wrappedChildren);
+                        tree.children.splice(i, j - i + 1, newChild);
+                        break;
+                    }
+                    wrappedChildren.push({
+                        ...currentParagraph,
+                        children: currentParagraph.children.filter((child)=>child !== firstTextNode)
+                    });
+                    j++;
+                }
+            }
+            i++;
+        }
+    } catch (e) {
+        console.log(e);
+        throw e;
+    }
+}
+const remarkPluginContainer = ()=>transformer;
+const src_dirname = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.normalizePosixPath)(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__.fileURLToPath)(import.meta.url)));
+function pluginContainerSyntax() {
+    return {
+        name: '@rspress-theme-anatole/plugin-container-syntax',
+        markdown: {
+            remarkPlugins: [
+                remarkPluginContainer
+            ]
+        },
+        globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].posix.join(src_dirname, '../container.css')
+    };
+}
+export { pluginContainerSyntax };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@rspress-theme-anatole/plugin-container-syntax",
+  "version": "0.0.2",
+  "license": "MIT",
+  "sideEffects": [
+    "*.css",
+    "*.less",
+    "*.sass",
+    "*.scss"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "container.css"
+  ],
+  "dependencies": {
+    "@rspress-theme-anatole/shared": "0.1.19"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.49.2",
+    "@rslib/core": "0.5.2",
+    "@types/mdast": "^3.0.15",
+    "mdast-util-mdx-expression": "^1.3.2",
+    "mdast-util-mdx-jsx": "^2.1.4",
+    "rehype-stringify": "^9.0.4",
+    "remark-directive": "^2.0.1",
+    "remark-mdx": "2.3.0",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}