@readme/markdown 9.2.1 → 9.3.0

package/components/CodeTabs/index.tsx

@@ -14,11 +14,11 @@ interface Props {
 const CodeTabs = (props: Props) => {
   const { children } = props;
   const theme = useContext(ThemeContext);
-
+  const hasMermaid = !Array.isArray(children) && children.props?.children.props.lang === 'mermaid';
 
   // render Mermaid diagram
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined' && hasMermaid) {
       import('mermaid').then(module => {
         mermaid = module.default;
         mermaid.initialize({
@@ -27,7 +27,7 @@ const CodeTabs = (props: Props) => {
         mermaid.contentLoaded();
       });
     }
-  }, [theme]);
+  }, [hasMermaid, theme]);
 
   function handleClick({ target }, index: number) {
     const $wrap = target.parentElement.parentElement;
@@ -42,7 +42,7 @@ const CodeTabs = (props: Props) => {
   }
 
   // render single Mermaid diagram
-  if (!Array.isArray(children) && children.props?.children.props.lang === 'mermaid') {
+  if (hasMermaid) {
     const value = children.props.children.props.value;
     return <pre className="mermaid mermaid_single">{value}</pre>;
   }

package/components/TutorialTile.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+// We render a placeholder in this library, as the actual implemenation is
+// deeply tied to the main app
+const TutorialTile = () => {
+  const style = {
+    height: '50px',
+    border: '1px solid var(--color-border-default, rgba(black, 0.1))',
+    borderRadius: 'var(--border-radius-lg, 7.5px)',
+    minWidth: '230px',
+    display: 'inline-flex',
+    padding: '10px',
+  };
+
+  const placeholderStyle = {
+    borderRadius: 'var(--border-radius-lg, 7.5px)',
+    backgroundColor: 'var(--color-skeleton, #384248)',
+  };
+
+  const avatarStyle = {
+    ...placeholderStyle,
+    height: '30px',
+    width: '30px',
+  };
+
+  const lineStyle = {
+    ...placeholderStyle,
+    height: '12px',
+    width: '150px',
+    margin: '0 15px',
+  };
+
+  return (
+    <div>
+      <div style={style}>
+        <div style={avatarStyle} />
+        <div>
+          <div style={{ ...lineStyle, marginBottom: '6px' }} />
+          <div style={{ ...lineStyle, width: '75px' }} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TutorialTile;

package/components/index.ts

@@ -15,3 +15,4 @@ export { default as TableOfContents } from './TableOfContents';
 export { default as Tabs, Tab } from './Tabs';
 export { default as TailwindRoot } from './TailwindRoot';
 export { default as TailwindStyle } from './TailwindStyle';
+export { default as TutorialTile } from './TutorialTile';

package/dist/components/TutorialTile.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TutorialTile: () => React.JSX.Element;
+export default TutorialTile;

package/dist/components/index.d.ts

@@ -15,3 +15,4 @@ export { default as TableOfContents } from './TableOfContents';
 export { default as Tabs, Tab } from './Tabs';
 export { default as TailwindRoot } from './TailwindRoot';
 export { default as TailwindStyle } from './TailwindStyle';
+export { default as TutorialTile } from './TutorialTile';

package/dist/example/RenderError.d.ts

@@ -19,6 +19,6 @@ declare class RenderError extends React.Component<PropsWithChildren<Props>, Stat
     static componentDidCatch(error: Error, info: {
         componentStack: string;
     }): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
 }
 export default RenderError;

package/dist/main.js

@@ -11709,7 +11709,8 @@ __webpack_require__.d(components_namespaceObject, {
   TableOfContents: () => (components_TableOfContents),
   Tabs: () => (components_Tabs),
   TailwindRoot: () => (components_TailwindRoot),
-  TailwindStyle: () => (components_TailwindStyle)
+  TailwindStyle: () => (components_TailwindStyle),
+  TutorialTile: () => (components_TutorialTile)
 });
 
 // NAMESPACE OBJECT: ./node_modules/micromark/lib/constructs.js
@@ -12039,9 +12040,10 @@ let mermaid;
 const CodeTabs = (props) => {
     const { children } = props;
     const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
+    const hasMermaid = !Array.isArray(children) && children.props?.children.props.lang === 'mermaid';
     // render Mermaid diagram
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
-        if (typeof window !== 'undefined') {
+        if (typeof window !== 'undefined' && hasMermaid) {
             Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 1387, 23)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
@@ -12050,7 +12052,7 @@ const CodeTabs = (props) => {
                 mermaid.contentLoaded();
             });
         }
-    }, [theme]);
+    }, [hasMermaid, theme]);
     function handleClick({ target }, index) {
         const $wrap = target.parentElement.parentElement;
         const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
@@ -12061,7 +12063,7 @@ const CodeTabs = (props) => {
         target.classList.add('CodeTabs_active');
     }
     // render single Mermaid diagram
-    if (!Array.isArray(children) && children.props?.children.props.lang === 'mermaid') {
+    if (hasMermaid) {
         const value = children.props.children.props.value;
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid mermaid_single" }, value);
     }
@@ -12568,6 +12570,43 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
 };
 /* harmony default export */ const components_TailwindStyle = (TailwindStyle);
 
+;// ./components/TutorialTile.tsx
+
+// We render a placeholder in this library, as the actual implemenation is
+// deeply tied to the main app
+const TutorialTile = () => {
+    const style = {
+        height: '50px',
+        border: '1px solid var(--color-border-default, rgba(black, 0.1))',
+        borderRadius: 'var(--border-radius-lg, 7.5px)',
+        minWidth: '230px',
+        display: 'inline-flex',
+        padding: '10px',
+    };
+    const placeholderStyle = {
+        borderRadius: 'var(--border-radius-lg, 7.5px)',
+        backgroundColor: 'var(--color-skeleton, #384248)',
+    };
+    const avatarStyle = {
+        ...placeholderStyle,
+        height: '30px',
+        width: '30px',
+    };
+    const lineStyle = {
+        ...placeholderStyle,
+        height: '12px',
+        width: '150px',
+        margin: '0 15px',
+    };
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", null,
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: style },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: avatarStyle }),
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", null,
+                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: { ...lineStyle, marginBottom: '6px' } }),
+                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: { ...lineStyle, width: '75px' } })))));
+};
+/* harmony default export */ const components_TutorialTile = (TutorialTile);
+
 ;// ./components/index.ts
 
 
@@ -12587,6 +12626,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
 
 
 
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.to-primitive.js
 var es_symbol_to_primitive = __webpack_require__(6611);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js

package/dist/main.node.js

@@ -16152,7 +16152,8 @@ __webpack_require__.d(components_namespaceObject, {
   TableOfContents: () => (components_TableOfContents),
   Tabs: () => (components_Tabs),
   TailwindRoot: () => (components_TailwindRoot),
-  TailwindStyle: () => (components_TailwindStyle)
+  TailwindStyle: () => (components_TailwindStyle),
+  TutorialTile: () => (components_TutorialTile)
 });
 
 // NAMESPACE OBJECT: ./node_modules/micromark/lib/constructs.js
@@ -16415,9 +16416,10 @@ let mermaid;
 const CodeTabs = (props) => {
     const { children } = props;
     const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
+    const hasMermaid = !Array.isArray(children) && children.props?.children.props.lang === 'mermaid';
     // render Mermaid diagram
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
-        if (typeof window !== 'undefined') {
+        if (typeof window !== 'undefined' && hasMermaid) {
             __webpack_require__.e(/* import() */ 486).then(__webpack_require__.bind(__webpack_require__, 5486)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
@@ -16426,7 +16428,7 @@ const CodeTabs = (props) => {
                 mermaid.contentLoaded();
             });
         }
-    }, [theme]);
+    }, [hasMermaid, theme]);
     function handleClick({ target }, index) {
         const $wrap = target.parentElement.parentElement;
         const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
@@ -16437,7 +16439,7 @@ const CodeTabs = (props) => {
         target.classList.add('CodeTabs_active');
     }
     // render single Mermaid diagram
-    if (!Array.isArray(children) && children.props?.children.props.lang === 'mermaid') {
+    if (hasMermaid) {
         const value = children.props.children.props.value;
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid mermaid_single" }, value);
     }
@@ -21888,6 +21890,43 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
 };
 /* harmony default export */ const components_TailwindStyle = (TailwindStyle);
 
+;// ./components/TutorialTile.tsx
+
+// We render a placeholder in this library, as the actual implemenation is
+// deeply tied to the main app
+const TutorialTile = () => {
+    const style = {
+        height: '50px',
+        border: '1px solid var(--color-border-default, rgba(black, 0.1))',
+        borderRadius: 'var(--border-radius-lg, 7.5px)',
+        minWidth: '230px',
+        display: 'inline-flex',
+        padding: '10px',
+    };
+    const placeholderStyle = {
+        borderRadius: 'var(--border-radius-lg, 7.5px)',
+        backgroundColor: 'var(--color-skeleton, #384248)',
+    };
+    const avatarStyle = {
+        ...placeholderStyle,
+        height: '30px',
+        width: '30px',
+    };
+    const lineStyle = {
+        ...placeholderStyle,
+        height: '12px',
+        width: '150px',
+        margin: '0 15px',
+    };
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", null,
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: style },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: avatarStyle }),
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", null,
+                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: { ...lineStyle, marginBottom: '6px' } }),
+                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { style: { ...lineStyle, width: '75px' } })))));
+};
+/* harmony default export */ const components_TutorialTile = (TutorialTile);
+
 ;// ./components/index.ts
 
 
@@ -21907,6 +21946,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
 
 
 
+
 ;// ./options.js
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }