@readme/markdown 8.0.1 → 8.2.0

package/README.md

@@ -1,9 +1,27 @@
-# <img align="right" width="26%" src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png"> `@readme/markdown`
-
-<img align=right src=https://github.com/readmeio/markdown/workflows/CI/badge.svg alt="RDMD CI Status"> ReadMe's MDX rendering engine and custom component collection.
-<br/>  *(Use ReadMe? [Learn more about our upcoming move to MDX](https://docs.readme.com/rdmd/page/mdx-engine)!)*
-
-## Getting Started
+<p align="center">
+  <a href="https://npm.im/@readme/markdown">
+    <img src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png" width="150" alt="rmdx" />
+  </a>
+</p>
+
+<p align="center">
+  ReadMe's MDX rendering engine and custom component collection.<br />
+  <sub>
+    Use ReadMe? <a href="https://docs.readme.com/rdmd/page/mdx-engine">Learn more about our upcoming move to MDX!</a>
+  </sub>
+</p>
+
+<p align="center">
+  <a href="https://npm.im/@readme/markdown"><img src="https://img.shields.io/npm/v/@readme/markdown?style=for-the-badge" alt="NPM Version" /></a>
+  <a href="https://npm.im/@readme/markdown"><img src="https://img.shields.io/npm/l/@readme/markdown?style=for-the-badge" alt="MIT License" /></a>
+  <a href="https://github.com/readmeio/markdown"><img src="https://img.shields.io/github/actions/workflow/status/readmeio/markdown/ci.yml?branch=main&style=for-the-badge" alt="Build status" /></a>
+</p>
+
+<p align="center">
+  <a href="https://readme.com"><img src="https://raw.githubusercontent.com/readmeio/.github/main/oss-badge.svg" /></a>
+</p>
+
+## Usage
 
 To use the engine, install it from NPM:
 
@@ -16,11 +34,7 @@ Then [`compile`](#compile) and [`run`](#run) your MDX:
 ```jsx
 import RMDX from '@readme/markdown';
 
-export default ({ body }) => (
-  <div className="markdown-body">
-    {RMDX.run(RMDX.compile(body))}
-  </div>
-);
+export default ({ body }) => <div className="markdown-body">{RMDX.run(RMDX.compile(body))}</div>;
 ```
 
 ## API
@@ -42,13 +56,15 @@ A string of compiled Javascript module code.
 
 > [!CAUTION]
 > This is essentially a wrapper around [`mdx.run`](https://mdxjs.com/packages/mdx/#runcode-options) and **it will `eval` the compiled MDX**. Make sure you only call `run` on safe syntax from a trusted author!
->
-> #### Parameters
-> - **`string`** (`string`)—a compiled mdx document
-> - **`opts`** (`RunOpts`, optional)—configuration
->
-> #### Returns
-> An [`RMDXModule`](#rmdxmodule) of renderable components.
+
+#### Parameters
+
+- **`string`** (`string`)—a compiled mdx document
+- **`opts`** (`RunOpts`, optional)—configuration
+
+#### Returns
+
+An [`RMDXModule`](#rmdxmodule) of renderable components.
 
 ### `mdx`
 
@@ -57,7 +73,7 @@ Compiles an AST to a string of MDX syntax.
 #### Parameters
 
 - **`tree`** (`object`)—an abstract syntax tree
-- **`opts`** ([`Options`](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options "`remark-stringify` Options type"))—`remark-stringify` configuration.
+- **`opts`** ([`Options`](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options '`remark-stringify` Options type'))—`remark-stringify` configuration.
 
 #### Returns
 
@@ -67,8 +83,8 @@ An MDX string.
 
 - **`mdast`**: parse MDX syntax to MDAST.
 - **`hast`**: parse MDX syntax to HAST.
-- **`plain`**: parse MDX to a plaintext string with all Markdown syntax removed. (This *does not* `eval` the doc.)
-- **`tags`**: get a list of tag names from the doc. (This *does not* `eval` the doc.)
+- **`plain`**: parse MDX to a plaintext string with all Markdown syntax removed. (This _does not_ `eval` the doc.)
+- **`tags`**: get a list of tag names from the doc. (This _does not_ `eval` the doc.)
 - **`utils`**: additional defaults, helper methods, components, and so on.
 
 ## Types
@@ -103,7 +119,7 @@ Extends [`RunOptions`](https://mdxjs.com/packages/mdx/#runoptions)
 - **`toc`** (`HastHeading[]`)—a list of headings in the document
 - **`Toc`** (`() => MDCContent`)—a table of contents component
 
-## Local Development and Testing
+## Local development and testing
 
 To make changes to the RDMD engine locally, run the local development server. Clone the repo, `cd` in to it, `npm install`, and `npm run start`!
 

package/components/CodeTabs/style.scss

@@ -2,8 +2,8 @@
 @import '~codemirror/theme/neo.css';
 
 @mixin CodeTabs {
-  $bgc-pre: #F6F8FA;
-  $bgc-pre-dark: #242E34;
+  $bgc-pre: #f6f8fa;
+  $bgc-pre-dark: #242e34;
   $bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
   $bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
   $radius: var(--md-code-radius, var(--markdown-radius, 3px));
@@ -36,18 +36,18 @@
     }
     button {
       white-space: nowrap;
-      transition: .123s ease;
+      transition: 0.123s ease;
       -webkit-appearance: none;
       appearance: none;
       display: inline-block;
       line-height: 2;
-      padding: .5em 1em;
+      padding: 0.5em 1em;
       border: none;
       background: transparent;
       outline: none;
       color: inherit;
       font: inherit;
-      font-size: .75em;
+      font-size: 0.75em;
       cursor: pointer;
     }
   }
@@ -70,7 +70,7 @@
   }
 
   &-toolbar button:not(.CodeTabs_active):hover {
-    background: rgba(0, 0, 0, .075);
+    background: rgba(0, 0, 0, 0.075);
   }
 
   pre {
@@ -78,7 +78,9 @@
     background: $bgc-pre;
     background: var(--md-code-background, $bgc-pre);
     margin-bottom: 0;
-    &:not(.CodeTabs_active) { display: none }
+    &:not(.CodeTabs_active) {
+      display: none;
+    }
   }
 
   &.theme-dark pre {

package/components/Style/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+interface Props {
+  stylesheet?: string;
+}
+
+const Style = ({ stylesheet }: Props) => {
+  const hasDom = typeof document !== 'undefined';
+
+  if (!stylesheet) {
+    return null;
+  }
+
+  return hasDom ? createPortal(<style>{stylesheet}</style>, document.head) : <style>{stylesheet}</style>;
+};
+
+export default Style;

package/components/TailwindRoot/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const TailwindRoot = ({ children, flow }) => {
+  const Tag = flow ? 'div' : 'span';
+
+  return <Tag className="readme-tailwind">{children}</Tag>;
+};
+
+export default TailwindRoot;

package/components/index.ts

@@ -10,6 +10,8 @@ export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';
+export { default as Style } from './Style';
 export { default as Table } from './Table';
 export { default as Tabs, Tab } from './Tabs';
 export { default as TableOfContents } from './TableOfContents';
+export { default as TailwindRoot } from './TailwindRoot';

package/dist/10.node.js

@@ -22718,4 +22718,5 @@ exports["default"] = RAL;
 /***/ })
 
 };
-;
+;
+//# sourceMappingURL=10.node.js.map