@readme/markdown 7.4.2 → 7.5.0

package/README.md

@@ -50,6 +50,14 @@ A module ([`RMDXModule`](#rmdxmodule)) of renderable components
 
 Compiles an ast to mdx.
 
+###### Parameters
+
+Extends [`remark-stringify` options](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options).
+
+###### Returns
+
+An mdx string.
+
 #### `mdast`
 
 Parses mdx to an mdast.

package/components/Accordion/index.tsx

@@ -3,9 +3,12 @@ import React, { useState } from 'react';
 import './style.scss';
 
 const Accordion = ({ children, icon, iconColor, title }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <details className="Accordion">
+    <details className="Accordion" onToggle={() => setIsOpen(!isOpen)}>
       <summary className="Accordion-title">
+       <i className={`Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right`}></i>
        {icon && <i className={`Accordion-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
        {title}
       </summary>

package/components/Accordion/style.scss

@@ -26,11 +26,31 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    &::marker {
+      content: "";
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    } 
+  }
+
+  &-toggleIcon,
+  &-toggleIcon_opened {
+    color: var(--color-text-default, #384248);
+    font-size: 14px;
+    margin-left: 5px;
+    margin-right: 10px;
+    transition: transform 0.1s;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &-icon {
     color: var(--project-color-primary, inherit);
-    margin-left: 10px;
     margin-right: 10px;
   }
 

package/components/Tabs/index.tsx

@@ -19,6 +19,7 @@ const Tabs = ({ children }) => {
         <nav className="TabGroup-nav">
           {children?.map((tab, index: number) => 
             <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
+              {tab.props.icon && <i className={`TabGroup-icon fa ${tab.props.icon}`} style={{ color: `${tab.props.iconColor}` }}></i>}
               {tab.props.title}
             </button>
           )}

package/components/Tabs/style.scss

@@ -33,6 +33,11 @@
     }
   }
 
+  &-icon {
+    color: var(--project-color-primary, inherit);
+    margin-right: 10px;
+  }
+
   .TabContent {
     color: var(--color-text-muted, #4f5a66);
   }

package/dist/lib/mdx.d.ts

@@ -1,4 +1,4 @@
-export declare const mdx: (tree: any, { hast }?: {
+export declare const mdx: (tree: any, { hast, ...opts }?: {
     hast?: boolean;
 }) => string;
 export default mdx;

package/dist/main.css

@@ -1,6 +1,6 @@
-.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-icon{color:var(--project-color-primary, inherit);margin-left:10px;margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}
+.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-default, #384248);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}
 .CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:15px;padding-bottom:0;backdrop-filter:blur(20px);background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}.CardsGrid .Card-top{display:inline-flex;flex-direction:row}.CardsGrid .Card-icon{color:var(--project-color-primary, inherit);font-size:20px}.CardsGrid .Card-title{color:var(--color-text-default, #384248);font-weight:600;margin-top:10px}.CardsGrid .Card-title:first-child{margin-top:0}.CardsGrid .Card-content{color:var(--color-text-muted, #4f5a66)}.CardsGrid a.Card:not([href=""]){text-decoration:none;color:inherit}.CardsGrid a.Card:not([href=""]):hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}
-.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--project-color-primary, var(--color-text-default, #384248));color:var(--project-color-primary, var(--color-text-default, #384248));font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
+.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--project-color-primary, var(--color-text-default, #384248));color:var(--project-color-primary, var(--color-text-default, #384248));font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13307,8 +13307,10 @@ var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_defau
 
 
 const Accordion = ({ children, icon, iconColor, title }) => {
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+    const [isOpen, setIsOpen] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right` }),
             icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-icon fa ${icon}`, style: { color: `${iconColor}` } }),
             title),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion-content" }, children)));
@@ -13795,7 +13797,9 @@ const Tabs = ({ children }) => {
     const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) },
+                tab.props.icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `TabGroup-icon fa ${tab.props.icon}`, style: { color: `${tab.props.iconColor}` } }),
+                tab.props.title)))),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
@@ -47926,7 +47930,12 @@ const getHPropKeys = (node) => {
  */
 const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
     if ('name' in attr) {
-        memo[attr.name] = typeof attr.value !== 'string' ? JSON.parse(attr.value.value) : attr.value;
+        if (typeof attr.value === 'string') {
+            memo[attr.name] = attr.value;
+        }
+        else if (attr.value.value !== 'undefined') {
+            memo[attr.name] = JSON.parse(attr.value.value);
+        }
     }
     return memo;
 }, {});
@@ -48004,6 +48013,9 @@ const toAttributes = (object, keys = []) => {
         if (typeof v === 'string') {
             value = v;
         }
+        else if (typeof v === 'undefined') {
+            return;
+        }
         else {
             /* values can be null, undefined, string, or a expression, eg:
              *
@@ -65327,6 +65339,20 @@ const readmeToMdx = () => tree => {
             });
         }
     });
+    visit(tree, 'html', (node, index, parent) => {
+        const html = node.value;
+        const isScriptOrStyleTag = [!!html.match(/^<(?:style|script)/i), !!html.match(/<\/(?:style|script)>$/i)];
+        if (!isScriptOrStyleTag.includes(true))
+            return;
+        parent.children.splice(index, 1, {
+            type: 'html-block',
+            children: [{ type: 'text', value: html }],
+            data: {
+                hName: 'html-block',
+                hProperties: { html },
+            },
+        });
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -93970,6 +93996,17 @@ function compilers() {
 /* harmony default export */ const processor_compile = (compilers);
 
 ;// CONCATENATED MODULE: ./lib/mdx.ts
+var mdx_rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 
 
 
@@ -93977,7 +94014,8 @@ function compilers() {
 
 
 
-const mdx_mdx = (tree, { hast = false } = {}) => {
+const mdx_mdx = (tree, _a = {}) => {
+    var { hast = false } = _a, opts = mdx_rest(_a, ["hast"]);
     const processor = unified()
         .use(hast ? rehypeRemark : undefined)
         .use(remarkMdx)
@@ -93986,7 +94024,7 @@ const mdx_mdx = (tree, { hast = false } = {}) => {
         .use(readme_to_mdx)
         .use(tables_to_jsx)
         .use(processor_compile)
-        .use(remarkStringify);
+        .use(remarkStringify, opts);
     return processor.stringify(processor.runSync(tree));
 };
 /* harmony default export */ const lib_mdx = (mdx_mdx);

package/dist/main.node.js

@@ -7854,8 +7854,10 @@ var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_defau
 
 
 const Accordion = ({ children, icon, iconColor, title }) => {
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+    const [isOpen, setIsOpen] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right` }),
             icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-icon fa ${icon}`, style: { color: `${iconColor}` } }),
             title),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion-content" }, children)));
@@ -13219,7 +13221,9 @@ const Tabs = ({ children }) => {
     const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) },
+                tab.props.icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `TabGroup-icon fa ${tab.props.icon}`, style: { color: `${tab.props.iconColor}` } }),
+                tab.props.title)))),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
@@ -48913,7 +48917,12 @@ const getHPropKeys = (node) => {
  */
 const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
     if ('name' in attr) {
-        memo[attr.name] = typeof attr.value !== 'string' ? JSON.parse(attr.value.value) : attr.value;
+        if (typeof attr.value === 'string') {
+            memo[attr.name] = attr.value;
+        }
+        else if (attr.value.value !== 'undefined') {
+            memo[attr.name] = JSON.parse(attr.value.value);
+        }
     }
     return memo;
 }, {});
@@ -48991,6 +49000,9 @@ const toAttributes = (object, keys = []) => {
         if (typeof v === 'string') {
             value = v;
         }
+        else if (typeof v === 'undefined') {
+            return;
+        }
         else {
             /* values can be null, undefined, string, or a expression, eg:
              *
@@ -66314,6 +66326,20 @@ const readmeToMdx = () => tree => {
             });
         }
     });
+    visit(tree, 'html', (node, index, parent) => {
+        const html = node.value;
+        const isScriptOrStyleTag = [!!html.match(/^<(?:style|script)/i), !!html.match(/<\/(?:style|script)>$/i)];
+        if (!isScriptOrStyleTag.includes(true))
+            return;
+        parent.children.splice(index, 1, {
+            type: 'html-block',
+            children: [{ type: 'text', value: html }],
+            data: {
+                hName: 'html-block',
+                hProperties: { html },
+            },
+        });
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -94957,6 +94983,17 @@ function compilers() {
 /* harmony default export */ const processor_compile = (compilers);
 
 ;// CONCATENATED MODULE: ./lib/mdx.ts
+var mdx_rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 
 
 
@@ -94964,7 +95001,8 @@ function compilers() {
 
 
 
-const mdx_mdx = (tree, { hast = false } = {}) => {
+const mdx_mdx = (tree, _a = {}) => {
+    var { hast = false } = _a, opts = mdx_rest(_a, ["hast"]);
     const processor = unified()
         .use(hast ? rehypeRemark : undefined)
         .use(remarkMdx)
@@ -94973,7 +95011,7 @@ const mdx_mdx = (tree, { hast = false } = {}) => {
         .use(readme_to_mdx)
         .use(tables_to_jsx)
         .use(processor_compile)
-        .use(remarkStringify);
+        .use(remarkStringify, opts);
     return processor.stringify(processor.runSync(tree));
 };
 /* harmony default export */ const lib_mdx = (mdx_mdx);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "7.4.2",
+  "version": "7.5.0",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",