@readme/markdown 6.75.0-beta.35 → 6.75.0-beta.37

package/components/Anchor.jsx

@@ -1,11 +1,11 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import { string, node } from 'prop-types';
+import React from 'react';
 
-const BaseUrlContext = require('../contexts/BaseUrl');
+import BaseUrlContext from '../contexts/BaseUrl';
 
 // Nabbed from here:
 // https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
-function getHref(href, baseUrl) {
+export function getHref(href, baseUrl) {
   const [path, hash] = href.split('#');
   const hashStr = hash ? `#${hash}` : '';
 
@@ -49,7 +49,9 @@ function docLink(href) {
 }
 
 function Anchor(props) {
-  const { baseUrl, children, href, target, title, ...attrs } = props;
+  const { children, href, target, title, ...attrs } = props;
+  const baseUrl = useContext(BaseUrlContext);
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <a {...attrs} href={getHref(href, baseUrl)} target={target} title={title} {...docLink(href)}>
@@ -59,12 +61,12 @@ function Anchor(props) {
 }
 
 Anchor.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  download: PropTypes.string,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  title: PropTypes.string,
+  baseUrl: string,
+  children: node.isRequired,
+  download: string,
+  href: string,
+  target: string,
+  title: string,
 };
 
 Anchor.defaultProps = {
@@ -74,17 +76,4 @@ Anchor.defaultProps = {
   title: '',
 };
 
-const AnchorWithContext = props => (
-  <BaseUrlContext.Consumer>{baseUrl => <Anchor baseUrl={baseUrl} {...props} />}</BaseUrlContext.Consumer>
-);
-
-AnchorWithContext.sanitize = sanitizeSchema => {
-  // This is for our custom link formats
-  sanitizeSchema.protocols.href.push('doc', 'target', 'ref', 'blog', 'changelog', 'page');
-
-  return sanitizeSchema;
-};
-
-module.exports = AnchorWithContext;
-
-AnchorWithContext.getHref = getHref;
+export default Anchor;

package/components/Glossary/index.tsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import Tooltip from '@tippyjs/react';
+import GlossaryContext from '../../contexts/GlossaryTerms';
+import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
+
+interface Props extends React.PropsWithChildren {
+  term?: string;
+  terms: GlossaryTerm[];
+}
+
+const Glossary = ({ children, term: termProp, terms }: Props) => {
+  const term = (Array.isArray(children) ? children[0] : children) || termProp;
+  const foundTerm = terms.find(i => term.toLowerCase() === i?.term?.toLowerCase());
+
+  if (!foundTerm) return <span>{term}</span>;
+
+  return (
+    <Tooltip
+      content={
+        <div className="Glossary-tooltip-content">
+          <strong className="Glossary-term">{foundTerm.term}</strong> - {foundTerm.definition}
+        </div>
+      }
+      offset={[-5, 5]}
+      placement="bottom-start"
+    >
+      <span className="Glossary-trigger">{term}</span>
+    </Tooltip>
+  );
+};
+
+const GlossaryWithContext = props => {
+  const terms = useContext(GlossaryContext);
+  return terms ? <Glossary {...props} terms={terms} /> : <span>{props.term}</span>;
+};
+
+export { Glossary, GlossaryWithContext as default, GlossaryContext };

package/components/Glossary/style.scss

@@ -0,0 +1,69 @@
+.Glossary {
+  &-trigger {
+    border-bottom: 1px solid #737c83;
+    border-style: dotted;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    cursor: pointer;
+  }
+
+  &-tooltip-content {
+    --Glossary-bg: var(--color-bg-page, var(--white));
+    --Glossary-color: var(--color-text-default, var(--gray20));
+    --Glossary-shadow: var(
+      --box-shadow-menu-light,
+      0 5px 10px rgba(0, 0, 0, 0.05),
+      0 2px 6px rgba(0, 0, 0, 0.025),
+      0 1px 3px rgba(0, 0, 0, 0.025)
+    );
+
+    /* what the dark-mode mixin does in the readme project */
+    [data-color-mode='dark'] & {
+      --Glossary-bg: var(--gray15);
+      --Glossary-color: var(--color-text-default, var(--white));
+      --Glossary-shadow: var(
+        --box-shadow-menu-dark,
+        0 1px 3px rgba(0, 0, 0, 0.025),
+        0 2px 6px rgba(0, 0, 0, 0.025),
+        0 5px 10px rgba(0, 0, 0, 0.05)
+      );
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-color-mode='auto'] & {
+        --Glossary-bg: var(--Tooltip-bg, var(--gray0));
+        --Glossary-color: var(--color-text-default, var(--white));
+        --Glossary-shadow: var(
+          --box-shadow-menu-dark,
+          0 1px 3px rgba(0, 0, 0, 0.025),
+          0 2px 6px rgba(0, 0, 0, 0.025),
+          0 5px 10px rgba(0, 0, 0, 0.05)
+        );
+      }
+    }
+
+    background-color: var(--Glossary-bg);
+    border: 1px solid #{var(--color-border-default, rgba(black, 0.1))};
+    border-radius: var(--border-radius);
+    box-shadow: var(--Glossary-shadow);
+    color: var(--Glossary-color);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 15px;
+    text-align: left;
+    width: 350px;
+  }
+
+  &-term {
+    font-style: italic;
+  }
+}
+
+.tippy-box {
+  // needed for tippy's default animation
+  &[data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+}

package/components/index.ts

@@ -3,7 +3,7 @@ export { default as Callout } from './Callout';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';
-export { default as GlossaryItem } from './GlossaryItem';
+export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';

package/dist/components/Glossary/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import GlossaryContext from '../../contexts/GlossaryTerms';
+import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
+interface Props extends React.PropsWithChildren {
+    term?: string;
+    terms: GlossaryTerm[];
+}
+declare const Glossary: ({ children, term: termProp, terms }: Props) => React.JSX.Element;
+declare const GlossaryWithContext: (props: any) => React.JSX.Element;
+export { Glossary, GlossaryWithContext as default, GlossaryContext };

package/dist/components/index.d.ts

@@ -3,7 +3,7 @@ export { default as Callout } from './Callout';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';
-export { default as GlossaryItem } from './GlossaryItem';
+export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';

package/dist/contexts/GlossaryTerms.d.ts

@@ -1,15 +1,7 @@
-import { ReactNode } from "react";
 export type GlossaryTerm = {
     term: string;
     definition: string;
     _id?: string;
 };
-export type GlossaryItem = {
-    term?: string;
-    terms: GlossaryTerm[];
-};
 declare const GlossaryContext: import("react").Context<GlossaryTerm[]>;
 export default GlossaryContext;
-export declare function Provider(Provider: any, arg1: {
-    value: GlossaryTerm[];
-}): ReactNode;

package/dist/contexts/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RunOpts } from '../index';
+type Props = React.PropsWithChildren & Pick<RunOpts, 'baseUrl' | 'terms' | 'variables'>;
+declare const Contexts: ({ children, terms, variables, baseUrl }: Props) => React.ReactNode;
+export default Contexts;

package/dist/index.d.ts

@@ -1,23 +1,33 @@
 import React from 'react';
 import { RunOptions } from '@mdx-js/mdx';
 import * as Components from './components';
+import { GlossaryTerm } from './contexts/GlossaryTerms';
 type ComponentOpts = Record<string, (props: any) => React.ReactNode>;
-type RunOpts = Omit<RunOptions, 'Fragment'> & {
+interface Variables {
+    user: {
+        keys: string[];
+    };
+    defaults: {
+        name: string;
+        default: string;
+    }[];
+}
+export type RunOpts = Omit<RunOptions, 'Fragment'> & {
     components?: ComponentOpts;
     imports?: Record<string, unknown>;
+    baseUrl?: string;
+    terms?: GlossaryTerm[];
+    variables?: Variables;
 };
 export { Components };
 export declare const utils: {
     readonly options: any;
-    BaseUrlContext: any;
     getHref: any;
-    GlossaryContext: React.Context<import("./contexts/GlossaryTerms").GlossaryTerm[]>;
-    VariablesContext: any;
     calloutIcons: {};
 };
 export declare const reactProcessor: (opts?: {}) => import("unified").Processor<import("mdast").Root, import("estree").Program, import("estree").Program, import("estree").Program, string>;
 export declare const compile: (text: string, opts?: {}) => string;
-export declare const run: (code: string, _opts?: RunOpts) => Promise<import("mdx/types").MDXContent | (() => any)>;
+export declare const run: (code: string, _opts?: RunOpts) => Promise<() => React.JSX.Element>;
 export declare const reactTOC: (text: string, opts?: {}) => void;
 export declare const mdx: (tree: any, opts?: {}) => string;
 export declare const html: (text: string, opts?: {}) => void;

package/dist/main.js

@@ -6783,131 +6783,6 @@ module.exports = {
 }));
 
 
-/***/ }),
-
-/***/ 9294:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-__webpack_require__(3534);
-__webpack_require__(590);
-__webpack_require__(4216);
-__webpack_require__(5195);
-__webpack_require__(9693);
-__webpack_require__(8665);
-__webpack_require__(4913);
-__webpack_require__(9389);
-__webpack_require__(4189);
-__webpack_require__(8741);
-__webpack_require__(9218);
-__webpack_require__(7899);
-__webpack_require__(5086);
-__webpack_require__(6048);
-__webpack_require__(9979);
-__webpack_require__(4602);
-var _excluded = ["baseUrl", "children", "href", "target", "title"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-__webpack_require__(115);
-__webpack_require__(4895);
-__webpack_require__(7136);
-__webpack_require__(8636);
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var PropTypes = __webpack_require__(5556);
-var React = __webpack_require__(1307);
-var BaseUrlContext = __webpack_require__(9357);
-
-// Nabbed from here:
-// https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
-function getHref(href, baseUrl) {
-  var _href$split = href.split('#'),
-    _href$split2 = _slicedToArray(_href$split, 2),
-    path = _href$split2[0],
-    hash = _href$split2[1];
-  var hashStr = hash ? "#".concat(hash) : '';
-  var base = baseUrl === '/' ? '' : baseUrl;
-  var doc = path.match(/^doc:([-_a-zA-Z0-9#]*)$/);
-  if (doc) {
-    return "".concat(base, "/docs/").concat(doc[1]).concat(hashStr);
-  }
-  var ref = path.match(/^ref:([-_a-zA-Z0-9#]*)$/);
-  if (ref) {
-    return "".concat(base, "/reference-link/").concat(ref[1]).concat(hashStr);
-  }
-
-  // we need to perform two matches for changelogs in case
-  // of legacy links that use 'blog' instead of 'changelog'
-  var blog = path.match(/^blog:([-_a-zA-Z0-9#]*)$/);
-  var changelog = path.match(/^changelog:([-_a-zA-Z0-9#]*)$/);
-  var changelogMatch = blog || changelog;
-  if (changelogMatch) {
-    return "".concat(base, "/changelog/").concat(changelogMatch[1]).concat(hashStr);
-  }
-  var custompage = path.match(/^page:([-_a-zA-Z0-9#]*)$/);
-  if (custompage) {
-    return "".concat(base, "/page/").concat(custompage[1]).concat(hashStr);
-  }
-  return href;
-}
-function docLink(href) {
-  var doc = href.match(/^doc:([-_a-zA-Z0-9#]*)$/);
-  if (!doc) return false;
-  return {
-    className: 'doc-link',
-    'data-sidebar': doc[1]
-  };
-}
-function Anchor(props) {
-  var baseUrl = props.baseUrl,
-    children = props.children,
-    href = props.href,
-    target = props.target,
-    title = props.title,
-    attrs = _objectWithoutProperties(props, _excluded);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    React.createElement("a", _extends({}, attrs, {
-      href: getHref(href, baseUrl),
-      target: target,
-      title: title
-    }, docLink(href)), children)
-  );
-}
-Anchor.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  download: PropTypes.string,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  title: PropTypes.string
-};
-Anchor.defaultProps = {
-  baseUrl: '/',
-  href: '',
-  target: '',
-  title: ''
-};
-var AnchorWithContext = function AnchorWithContext(props) {
-  return /*#__PURE__*/React.createElement(BaseUrlContext.Consumer, null, function (baseUrl) {
-    return /*#__PURE__*/React.createElement(Anchor, _extends({
-      baseUrl: baseUrl
-    }, props));
-  });
-};
-AnchorWithContext.sanitize = function (sanitizeSchema) {
-  // This is for our custom link formats
-  sanitizeSchema.protocols.href.push('doc', 'target', 'ref', 'blog', 'changelog', 'page');
-  return sanitizeSchema;
-};
-module.exports = AnchorWithContext;
-AnchorWithContext.getHref = getHref;
-
 /***/ }),
 
 /***/ 398:
@@ -7020,14 +6895,6 @@ module.exports = CreateStyle;
 
 /***/ }),
 
-/***/ 9357:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var React = __webpack_require__(1307);
-module.exports = React.createContext('/');
-
-/***/ }),
-
 /***/ 7965:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -14253,12 +14120,12 @@ __webpack_require__.d(util_types_namespaceObject, {
 var components_namespaceObject = {};
 __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
-  Anchor: () => ((Anchor_default())),
+  Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
-  GlossaryItem: () => (GlossaryItemWithContext),
+  Glossary: () => (GlossaryWithContext),
   HTMLBlock: () => (components_HTMLBlock),
   Heading: () => ((Heading_default())),
   Image: () => (components_Image),
@@ -60954,9 +60821,159 @@ var jsx_runtime_namespaceObject = /*#__PURE__*/__webpack_require__.t(jsx_runtime
 // EXTERNAL MODULE: external "@readme/variable"
 var variable_ = __webpack_require__(8167);
 var variable_default = /*#__PURE__*/__webpack_require__.n(variable_);
-// EXTERNAL MODULE: ./components/Anchor.jsx
-var Anchor = __webpack_require__(9294);
-var Anchor_default = /*#__PURE__*/__webpack_require__.n(Anchor);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.js
+var es_symbol = __webpack_require__(3534);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.description.js
+var es_symbol_description = __webpack_require__(590);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.iterator.js
+var es_symbol_iterator = __webpack_require__(4216);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.from.js
+var es_array_from = __webpack_require__(5195);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.index-of.js
+var es_array_index_of = __webpack_require__(9693);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.iterator.js
+var es_array_iterator = __webpack_require__(8665);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.slice.js
+var es_array_slice = __webpack_require__(4913);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.date.to-string.js
+var es_date_to_string = __webpack_require__(9389);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.function.bind.js
+var es_function_bind = __webpack_require__(4189);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.function.name.js
+var es_function_name = __webpack_require__(8741);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.assign.js
+var es_object_assign = __webpack_require__(9218);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.keys.js
+var es_object_keys = __webpack_require__(7899);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.to-string.js
+var es_object_to_string = __webpack_require__(5086);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
+var es_regexp_to_string = __webpack_require__(6048);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.iterator.js
+var es_string_iterator = __webpack_require__(9979);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.iterator.js
+var web_dom_collections_iterator = __webpack_require__(4602);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.concat.js
+var es_array_concat = __webpack_require__(115);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.is-array.js
+var es_array_is_array = __webpack_require__(4895);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.exec.js
+var es_regexp_exec = __webpack_require__(7136);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.match.js
+var es_string_match = __webpack_require__(8636);
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(5556);
+;// CONCATENATED MODULE: ./contexts/BaseUrl.js
+
+var BaseUrlContext = /*#__PURE__*/external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createContext('/');
+/* harmony default export */ const BaseUrl = (BaseUrlContext);
+;// CONCATENATED MODULE: ./components/Anchor.jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _excluded = ["children", "href", "target", "title"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+// Nabbed from here:
+// https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
+function getHref(href, baseUrl) {
+  var _href$split = href.split('#'),
+    _href$split2 = _slicedToArray(_href$split, 2),
+    path = _href$split2[0],
+    hash = _href$split2[1];
+  var hashStr = hash ? "#".concat(hash) : '';
+  var base = baseUrl === '/' ? '' : baseUrl;
+  var doc = path.match(/^doc:([-_a-zA-Z0-9#]*)$/);
+  if (doc) {
+    return "".concat(base, "/docs/").concat(doc[1]).concat(hashStr);
+  }
+  var ref = path.match(/^ref:([-_a-zA-Z0-9#]*)$/);
+  if (ref) {
+    return "".concat(base, "/reference-link/").concat(ref[1]).concat(hashStr);
+  }
+
+  // we need to perform two matches for changelogs in case
+  // of legacy links that use 'blog' instead of 'changelog'
+  var blog = path.match(/^blog:([-_a-zA-Z0-9#]*)$/);
+  var changelog = path.match(/^changelog:([-_a-zA-Z0-9#]*)$/);
+  var changelogMatch = blog || changelog;
+  if (changelogMatch) {
+    return "".concat(base, "/changelog/").concat(changelogMatch[1]).concat(hashStr);
+  }
+  var custompage = path.match(/^page:([-_a-zA-Z0-9#]*)$/);
+  if (custompage) {
+    return "".concat(base, "/page/").concat(custompage[1]).concat(hashStr);
+  }
+  return href;
+}
+function docLink(href) {
+  var doc = href.match(/^doc:([-_a-zA-Z0-9#]*)$/);
+  if (!doc) return false;
+  return {
+    className: 'doc-link',
+    'data-sidebar': doc[1]
+  };
+}
+function Anchor(props) {
+  var children = props.children,
+    href = props.href,
+    target = props.target,
+    title = props.title,
+    attrs = _objectWithoutProperties(props, _excluded);
+  var baseUrl = useContext(BaseUrl);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", _extends({}, attrs, {
+      href: getHref(href, baseUrl),
+      target: target,
+      title: title
+    }, docLink(href)), children)
+  );
+}
+Anchor.propTypes = {
+  baseUrl: prop_types.string,
+  children: prop_types.node.isRequired,
+  download: prop_types.string,
+  href: prop_types.string,
+  target: prop_types.string,
+  title: prop_types.string
+};
+Anchor.defaultProps = {
+  baseUrl: '/',
+  href: '',
+  target: '',
+  title: ''
+};
+/* harmony default export */ const components_Anchor = (Anchor);
 ;// CONCATENATED MODULE: ./components/Callout/index.tsx
 
 const themes = {
@@ -61109,28 +61126,25 @@ var react_default = /*#__PURE__*/__webpack_require__.n(react_);
 
 const GlossaryContext = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createContext)([]);
 /* harmony default export */ const GlossaryTerms = (GlossaryContext);
-// haxx
-function Provider(Provider, arg1) {
-    throw new Error('Function not implemented.');
-}
 
-;// CONCATENATED MODULE: ./components/GlossaryItem/index.tsx
+;// CONCATENATED MODULE: ./components/Glossary/index.tsx
 
 
 
-const GlossaryItem = ({ term, terms }) => {
-    const foundTerm = terms.find(i => term.toLowerCase() === i.term.toLowerCase());
+const Glossary = ({ children, term: termProp, terms }) => {
+    const term = (Array.isArray(children) ? children[0] : children) || termProp;
+    const foundTerm = terms.find(i => { var _a; return term.toLowerCase() === ((_a = i === null || i === void 0 ? void 0 : i.term) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
     if (!foundTerm)
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", null, term);
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((react_default()), { content: external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "GlossaryItem-tooltip-content" },
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("strong", { className: "GlossaryItem-term" }, foundTerm.term),
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((react_default()), { content: external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Glossary-tooltip-content" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("strong", { className: "Glossary-term" }, foundTerm.term),
             " - ",
             foundTerm.definition), offset: [-5, 5], placement: "bottom-start" },
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", { className: "GlossaryItem-trigger" }, term)));
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", { className: "Glossary-trigger" }, term)));
 };
-const GlossaryItemWithContext = props => {
+const GlossaryWithContext = props => {
     const terms = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(GlossaryTerms);
-    return terms ? external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(GlossaryItem, Object.assign({}, props, { terms: terms })) : null;
+    return terms ? external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Glossary, Object.assign({}, props, { terms: terms })) : external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", null, props.term);
 };
 
 
@@ -61225,8 +61239,6 @@ const Table = (props) => {
 };
 /* harmony default export */ const components_Table = (Table);
 
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(5556);
 ;// CONCATENATED MODULE: ./components/TableOfContents/index.jsx
 
 
@@ -61261,15 +61273,6 @@ TableOfContents.propTypes = {
 
 
 
-// EXTERNAL MODULE: ./contexts/BaseUrl.js
-var BaseUrl = __webpack_require__(9357);
-var BaseUrl_default = /*#__PURE__*/__webpack_require__.n(BaseUrl);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.js
-var es_symbol = __webpack_require__(3534);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.description.js
-var es_symbol_description = __webpack_require__(590);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.iterator.js
-var es_symbol_iterator = __webpack_require__(4216);
 // 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
@@ -61278,8 +61281,6 @@ var es_array_filter = __webpack_require__(17);
 var es_array_for_each = __webpack_require__(8476);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.includes.js
 var es_array_includes = __webpack_require__(7746);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.iterator.js
-var es_array_iterator = __webpack_require__(8665);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.date.to-primitive.js
 var es_date_to_primitive = __webpack_require__(7787);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.number.constructor.js
@@ -61292,18 +61293,10 @@ var es_object_define_property = __webpack_require__(5852);
 var es_object_get_own_property_descriptor = __webpack_require__(678);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.get-own-property-descriptors.js
 var es_object_get_own_property_descriptors = __webpack_require__(3101);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.keys.js
-var es_object_keys = __webpack_require__(7899);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.to-string.js
-var es_object_to_string = __webpack_require__(5086);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.includes.js
 var es_string_includes = __webpack_require__(3148);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.iterator.js
-var es_string_iterator = __webpack_require__(9979);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.for-each.js
 var web_dom_collections_for_each = __webpack_require__(8379);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.iterator.js
-var web_dom_collections_iterator = __webpack_require__(4602);
 ;// CONCATENATED MODULE: ./options.js
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
@@ -78665,8 +78658,11 @@ const embed_embed = (node) => {
     var _a, _b;
     const { image, favicon, iframe, title, url } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
     const complexEmbed = Boolean(image) || Boolean(favicon) || iframe;
-    if (complexEmbed)
-        return `<Embed ${Object.assign({}, (_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties)} />`;
+    if (complexEmbed) {
+        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
+        // TODO: make this a util
+        return `<Embed ${attributes} />`;
+    }
     return `[${title}](${url} "@embed")'`;
 };
 /* harmony default export */ const compile_embed = (embed_embed);
@@ -78677,8 +78673,10 @@ const gemoji_gemoji = (node) => `:${node.name}:`;
 
 ;// CONCATENATED MODULE: ./processor/compile/html-block.ts
 const htmlBlock = (node) => {
+    var _a;
     const html = node.data.hProperties.html;
-    return `<HTMLBlock>${JSON.stringify({ html }, null, 2)}</HTMLBlock>`;
+    const attributes = Object.keys((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
+    return `<HTMLBlock${attributes && ' ' + attributes}>{\`${html}\`}</HTMLBlock>`;
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
@@ -78687,8 +78685,10 @@ const compile_image_image = (node) => {
     var _a, _b;
     const { align, className, width } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
     const complexImage = Boolean(width) || Boolean(className) || Boolean(align);
-    if (complexImage)
-        return `<Image ${Object.assign({}, (_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties)} />`;
+    if (complexImage) {
+        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
+        return `<Image ${attributes} />`;
+    }
     return `![${node.alt}](${node.url}${node.title ? ` "${node.title}")` : ')'}`;
 };
 /* harmony default export */ const compile_image = (compile_image_image);
@@ -78736,6 +78736,21 @@ class MdxSyntaxError extends SyntaxError {
     }
 }
 
+;// CONCATENATED MODULE: ./contexts/index.tsx
+
+
+
+
+const compose = (children, ...contexts) => {
+    return contexts.reduce((content, [Context, value]) => {
+        return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Context.Provider, { value: value }, content);
+    }, children);
+};
+const Contexts = ({ children, terms = [], variables = { user: { keys: [] }, defaults: [] }, baseUrl = '/' }) => {
+    return compose(children, [GlossaryTerms, terms], [variable_.VariablesContext, variables], [BaseUrl, baseUrl]);
+};
+/* harmony default export */ const contexts = (Contexts);
+
 ;// CONCATENATED MODULE: ./index.tsx
 var index_rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -78765,17 +78780,13 @@ var index_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
-
 const unimplemented = browser_default()('mdx:unimplemented');
 
 const utils = {
     get options() {
         return Object.assign({}, options);
     },
-    BaseUrlContext: (BaseUrl_default()),
-    getHref: Anchor.getHref,
-    GlossaryContext: GlossaryTerms,
-    VariablesContext: (variable_default()).VariablesContext,
+    getHref: getHref,
     calloutIcons: {},
 };
 const makeUseMDXComponents = (more) => {
@@ -78797,9 +78808,11 @@ const index_compile = (text, opts = {}) => {
 };
 const index_run = async (code, _opts = {}) => {
     const { Fragment } = jsx_runtime_namespaceObject;
-    const { components } = _opts, opts = index_rest(_opts, ["components"]);
+    const { components, terms, variables, baseUrl } = _opts, opts = index_rest(_opts, ["components", "terms", "variables", "baseUrl"]);
     const file = await run(code, Object.assign(Object.assign(Object.assign({}, jsx_runtime_namespaceObject), { Fragment, baseUrl: "file:///home/runner/work/markdown/markdown/index.tsx", imports: { React: (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()) }, useMDXComponents: makeUseMDXComponents(components) }), opts));
-    return (file === null || file === void 0 ? void 0 : file.default) || (() => null);
+    const Content = (file === null || file === void 0 ? void 0 : file.default) || (() => null);
+    return () => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(contexts, { terms: terms, variables: variables, baseUrl: baseUrl },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Content, null)));
 };
 const reactTOC = (text, opts = {}) => {
     unimplemented('reactTOC');

package/dist/main.node.js

@@ -6780,100 +6780,6 @@ module.exports = {
 }));
 
 
-/***/ }),
-
-/***/ 294:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-const _excluded = ["baseUrl", "children", "href", "target", "title"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const PropTypes = __webpack_require__(556);
-const React = __webpack_require__(540);
-const BaseUrlContext = __webpack_require__(357);
-
-// Nabbed from here:
-// https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
-function getHref(href, baseUrl) {
-  const [path, hash] = href.split('#');
-  const hashStr = hash ? `#${hash}` : '';
-  const base = baseUrl === '/' ? '' : baseUrl;
-  const doc = path.match(/^doc:([-_a-zA-Z0-9#]*)$/);
-  if (doc) {
-    return `${base}/docs/${doc[1]}${hashStr}`;
-  }
-  const ref = path.match(/^ref:([-_a-zA-Z0-9#]*)$/);
-  if (ref) {
-    return `${base}/reference-link/${ref[1]}${hashStr}`;
-  }
-
-  // we need to perform two matches for changelogs in case
-  // of legacy links that use 'blog' instead of 'changelog'
-  const blog = path.match(/^blog:([-_a-zA-Z0-9#]*)$/);
-  const changelog = path.match(/^changelog:([-_a-zA-Z0-9#]*)$/);
-  const changelogMatch = blog || changelog;
-  if (changelogMatch) {
-    return `${base}/changelog/${changelogMatch[1]}${hashStr}`;
-  }
-  const custompage = path.match(/^page:([-_a-zA-Z0-9#]*)$/);
-  if (custompage) {
-    return `${base}/page/${custompage[1]}${hashStr}`;
-  }
-  return href;
-}
-function docLink(href) {
-  const doc = href.match(/^doc:([-_a-zA-Z0-9#]*)$/);
-  if (!doc) return false;
-  return {
-    className: 'doc-link',
-    'data-sidebar': doc[1]
-  };
-}
-function Anchor(props) {
-  const {
-      baseUrl,
-      children,
-      href,
-      target,
-      title
-    } = props,
-    attrs = _objectWithoutProperties(props, _excluded);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    React.createElement("a", _extends({}, attrs, {
-      href: getHref(href, baseUrl),
-      target: target,
-      title: title
-    }, docLink(href)), children)
-  );
-}
-Anchor.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  download: PropTypes.string,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  title: PropTypes.string
-};
-Anchor.defaultProps = {
-  baseUrl: '/',
-  href: '',
-  target: '',
-  title: ''
-};
-const AnchorWithContext = props => /*#__PURE__*/React.createElement(BaseUrlContext.Consumer, null, baseUrl => /*#__PURE__*/React.createElement(Anchor, _extends({
-  baseUrl: baseUrl
-}, props)));
-AnchorWithContext.sanitize = sanitizeSchema => {
-  // This is for our custom link formats
-  sanitizeSchema.protocols.href.push('doc', 'target', 'ref', 'blog', 'changelog', 'page');
-  return sanitizeSchema;
-};
-module.exports = AnchorWithContext;
-AnchorWithContext.getHref = getHref;
-
 /***/ }),
 
 /***/ 398:
@@ -6977,14 +6883,6 @@ module.exports = CreateStyle;
 
 /***/ }),
 
-/***/ 357:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-const React = __webpack_require__(540);
-module.exports = React.createContext('/');
-
-/***/ }),
-
 /***/ 965:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -9922,12 +9820,12 @@ __webpack_require__.d(util_types_namespaceObject, {
 var components_namespaceObject = {};
 __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
-  Anchor: () => ((Anchor_default())),
+  Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
-  GlossaryItem: () => (GlossaryItemWithContext),
+  Glossary: () => (GlossaryWithContext),
   HTMLBlock: () => (components_HTMLBlock),
   Heading: () => ((Heading_default())),
   Image: () => (components_Image),
@@ -58237,9 +58135,92 @@ var jsx_runtime_namespaceObject = /*#__PURE__*/__webpack_require__.t(jsx_runtime
 // EXTERNAL MODULE: ./node_modules/@readme/variable/dist/index.js
 var dist = __webpack_require__(355);
 var dist_default = /*#__PURE__*/__webpack_require__.n(dist);
-// EXTERNAL MODULE: ./components/Anchor.jsx
-var Anchor = __webpack_require__(294);
-var Anchor_default = /*#__PURE__*/__webpack_require__.n(Anchor);
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(556);
+;// CONCATENATED MODULE: ./contexts/BaseUrl.js
+
+const BaseUrlContext = /*#__PURE__*/react.createContext('/');
+/* harmony default export */ const BaseUrl = (BaseUrlContext);
+;// CONCATENATED MODULE: ./components/Anchor.jsx
+const _excluded = ["children", "href", "target", "title"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+// Nabbed from here:
+// https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
+function getHref(href, baseUrl) {
+  const [path, hash] = href.split('#');
+  const hashStr = hash ? `#${hash}` : '';
+  const base = baseUrl === '/' ? '' : baseUrl;
+  const doc = path.match(/^doc:([-_a-zA-Z0-9#]*)$/);
+  if (doc) {
+    return `${base}/docs/${doc[1]}${hashStr}`;
+  }
+  const ref = path.match(/^ref:([-_a-zA-Z0-9#]*)$/);
+  if (ref) {
+    return `${base}/reference-link/${ref[1]}${hashStr}`;
+  }
+
+  // we need to perform two matches for changelogs in case
+  // of legacy links that use 'blog' instead of 'changelog'
+  const blog = path.match(/^blog:([-_a-zA-Z0-9#]*)$/);
+  const changelog = path.match(/^changelog:([-_a-zA-Z0-9#]*)$/);
+  const changelogMatch = blog || changelog;
+  if (changelogMatch) {
+    return `${base}/changelog/${changelogMatch[1]}${hashStr}`;
+  }
+  const custompage = path.match(/^page:([-_a-zA-Z0-9#]*)$/);
+  if (custompage) {
+    return `${base}/page/${custompage[1]}${hashStr}`;
+  }
+  return href;
+}
+function docLink(href) {
+  const doc = href.match(/^doc:([-_a-zA-Z0-9#]*)$/);
+  if (!doc) return false;
+  return {
+    className: 'doc-link',
+    'data-sidebar': doc[1]
+  };
+}
+function Anchor(props) {
+  const {
+      children,
+      href,
+      target,
+      title
+    } = props,
+    attrs = _objectWithoutProperties(props, _excluded);
+  const baseUrl = useContext(BaseUrl);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    react.createElement("a", _extends({}, attrs, {
+      href: getHref(href, baseUrl),
+      target: target,
+      title: title
+    }, docLink(href)), children)
+  );
+}
+Anchor.propTypes = {
+  baseUrl: prop_types.string,
+  children: prop_types.node.isRequired,
+  download: prop_types.string,
+  href: prop_types.string,
+  target: prop_types.string,
+  title: prop_types.string
+};
+Anchor.defaultProps = {
+  baseUrl: '/',
+  href: '',
+  target: '',
+  title: ''
+};
+/* harmony default export */ const components_Anchor = (Anchor);
 ;// CONCATENATED MODULE: ./components/Callout/index.tsx
 
 const themes = {
@@ -62817,7 +62798,7 @@ var react_dom = __webpack_require__(961);
 
 
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function tippy_react_esm_objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -62979,7 +62960,7 @@ function TippyGenerator(tippy) {
         ignoreAttributes = _ref$ignoreAttributes === void 0 ? true : _ref$ignoreAttributes,
         __source = _ref.__source,
         __self = _ref.__self,
-        restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
+        restOfNativeProps = tippy_react_esm_objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
 
     var isControlledMode = visible !== undefined;
     var isSingletonMode = singleton !== undefined;
@@ -63243,7 +63224,7 @@ function useSingletonGenerator(createSingleton) {
 
       var _sourceData$props = sourceData.props,
           content = _sourceData$props.content,
-          props = _objectWithoutPropertiesLoose(_sourceData$props, ["content"]);
+          props = tippy_react_esm_objectWithoutPropertiesLoose(_sourceData$props, ["content"]);
 
       instance.setProps(deepPreserveProps(instance.props, Object.assign({}, props, {
         overrides: overrides
@@ -63309,7 +63290,7 @@ function useSingletonGenerator(createSingleton) {
 var forwardRef = (function (Tippy, defaultProps) {
   return /*#__PURE__*/(0,react.forwardRef)(function TippyWrapper(_ref, _ref2) {
     var children = _ref.children,
-        props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+        props = tippy_react_esm_objectWithoutPropertiesLoose(_ref, ["children"]);
 
     return (
       /*#__PURE__*/
@@ -63336,28 +63317,25 @@ var tippy_react_esm_index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator
 
 const GlossaryContext = (0,react.createContext)([]);
 /* harmony default export */ const GlossaryTerms = (GlossaryContext);
-// haxx
-function Provider(Provider, arg1) {
-    throw new Error('Function not implemented.');
-}
 
-;// CONCATENATED MODULE: ./components/GlossaryItem/index.tsx
+;// CONCATENATED MODULE: ./components/Glossary/index.tsx
 
 
 
-const GlossaryItem = ({ term, terms }) => {
-    const foundTerm = terms.find(i => term.toLowerCase() === i.term.toLowerCase());
+const Glossary = ({ children, term: termProp, terms }) => {
+    const term = (Array.isArray(children) ? children[0] : children) || termProp;
+    const foundTerm = terms.find(i => { var _a; return term.toLowerCase() === ((_a = i === null || i === void 0 ? void 0 : i.term) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
     if (!foundTerm)
         return react.createElement("span", null, term);
-    return (react.createElement(tippy_react_esm, { content: react.createElement("div", { className: "GlossaryItem-tooltip-content" },
-            react.createElement("strong", { className: "GlossaryItem-term" }, foundTerm.term),
+    return (react.createElement(tippy_react_esm, { content: react.createElement("div", { className: "Glossary-tooltip-content" },
+            react.createElement("strong", { className: "Glossary-term" }, foundTerm.term),
             " - ",
             foundTerm.definition), offset: [-5, 5], placement: "bottom-start" },
-        react.createElement("span", { className: "GlossaryItem-trigger" }, term)));
+        react.createElement("span", { className: "Glossary-trigger" }, term)));
 };
-const GlossaryItemWithContext = props => {
+const GlossaryWithContext = props => {
     const terms = (0,react.useContext)(GlossaryTerms);
-    return terms ? react.createElement(GlossaryItem, Object.assign({}, props, { terms: terms })) : null;
+    return terms ? react.createElement(Glossary, Object.assign({}, props, { terms: terms })) : react.createElement("span", null, props.term);
 };
 
 
@@ -63452,8 +63430,6 @@ const Table = (props) => {
 };
 /* harmony default export */ const components_Table = (Table);
 
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(556);
 ;// CONCATENATED MODULE: ./components/TableOfContents/index.jsx
 
 
@@ -63489,9 +63465,6 @@ TableOfContents.propTypes = {
 
 
 
-// EXTERNAL MODULE: ./contexts/BaseUrl.js
-var BaseUrl = __webpack_require__(357);
-var BaseUrl_default = /*#__PURE__*/__webpack_require__.n(BaseUrl);
 ;// CONCATENATED MODULE: ./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; }
@@ -80825,8 +80798,11 @@ const embed_embed = (node) => {
     var _a, _b;
     const { image, favicon, iframe, title, url } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
     const complexEmbed = Boolean(image) || Boolean(favicon) || iframe;
-    if (complexEmbed)
-        return `<Embed ${Object.assign({}, (_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties)} />`;
+    if (complexEmbed) {
+        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
+        // TODO: make this a util
+        return `<Embed ${attributes} />`;
+    }
     return `[${title}](${url} "@embed")'`;
 };
 /* harmony default export */ const compile_embed = (embed_embed);
@@ -80837,8 +80813,10 @@ const gemoji_gemoji = (node) => `:${node.name}:`;
 
 ;// CONCATENATED MODULE: ./processor/compile/html-block.ts
 const htmlBlock = (node) => {
+    var _a;
     const html = node.data.hProperties.html;
-    return `<HTMLBlock>${JSON.stringify({ html }, null, 2)}</HTMLBlock>`;
+    const attributes = Object.keys((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
+    return `<HTMLBlock${attributes && ' ' + attributes}>{\`${html}\`}</HTMLBlock>`;
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
@@ -80847,8 +80825,10 @@ const compile_image_image = (node) => {
     var _a, _b;
     const { align, className, width } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
     const complexImage = Boolean(width) || Boolean(className) || Boolean(align);
-    if (complexImage)
-        return `<Image ${Object.assign({}, (_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties)} />`;
+    if (complexImage) {
+        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
+        return `<Image ${attributes} />`;
+    }
     return `![${node.alt}](${node.url}${node.title ? ` "${node.title}")` : ')'}`;
 };
 /* harmony default export */ const compile_image = (compile_image_image);
@@ -80896,6 +80876,21 @@ class MdxSyntaxError extends SyntaxError {
     }
 }
 
+;// CONCATENATED MODULE: ./contexts/index.tsx
+
+
+
+
+const compose = (children, ...contexts) => {
+    return contexts.reduce((content, [Context, value]) => {
+        return react.createElement(Context.Provider, { value: value }, content);
+    }, children);
+};
+const Contexts = ({ children, terms = [], variables = { user: { keys: [] }, defaults: [] }, baseUrl = '/' }) => {
+    return compose(children, [GlossaryTerms, terms], [dist.VariablesContext, variables], [BaseUrl, baseUrl]);
+};
+/* harmony default export */ const contexts = (Contexts);
+
 ;// CONCATENATED MODULE: ./index.tsx
 var index_rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -80925,17 +80920,13 @@ var index_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
-
 const unimplemented = src_default()('mdx:unimplemented');
 
 const utils = {
     get options() {
         return Object.assign({}, options);
     },
-    BaseUrlContext: (BaseUrl_default()),
-    getHref: Anchor.getHref,
-    GlossaryContext: GlossaryTerms,
-    VariablesContext: (dist_default()).VariablesContext,
+    getHref: getHref,
     calloutIcons: {},
 };
 const makeUseMDXComponents = (more) => {
@@ -80957,9 +80948,11 @@ const index_compile = (text, opts = {}) => {
 };
 const index_run = async (code, _opts = {}) => {
     const { Fragment } = jsx_runtime_namespaceObject;
-    const { components } = _opts, opts = index_rest(_opts, ["components"]);
+    const { components, terms, variables, baseUrl } = _opts, opts = index_rest(_opts, ["components", "terms", "variables", "baseUrl"]);
     const file = await run(code, Object.assign(Object.assign(Object.assign({}, jsx_runtime_namespaceObject), { Fragment, baseUrl: "file:///home/runner/work/markdown/markdown/index.tsx", imports: { React: react }, useMDXComponents: makeUseMDXComponents(components) }), opts));
-    return (file === null || file === void 0 ? void 0 : file.default) || (() => null);
+    const Content = (file === null || file === void 0 ? void 0 : file.default) || (() => null);
+    return () => (react.createElement(contexts, { terms: terms, variables: variables, baseUrl: baseUrl },
+        react.createElement(Content, null)));
 };
 const reactTOC = (text, opts = {}) => {
     unimplemented('reactTOC');

package/package.json

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

package/styles/components.scss

@@ -6,4 +6,4 @@
 @import '../components/Callout/style';
 @import '../components/Heading/style';
 @import '../components/Embed/style';
-@import '../components/GlossaryItem/style';
+@import '../components/Glossary/style';

package/components/GlossaryItem/index.tsx

@@ -1,31 +0,0 @@
-import React, { useContext } from 'react';
-import Tooltip from '@tippyjs/react';
-import GlossaryContext from '../../contexts/GlossaryTerms';
-import type { GlossaryItem, GlossaryTerm } from '../../contexts/GlossaryTerms';
-
-const GlossaryItem = ({ term, terms }: { term: string; terms: GlossaryTerm[] }) => {
-  const foundTerm = terms.find(i => term.toLowerCase() === i.term.toLowerCase());
-
-  if (!foundTerm) return <span>{term}</span>;
-
-  return (
-    <Tooltip
-      content={
-        <div className="GlossaryItem-tooltip-content">
-          <strong className="GlossaryItem-term">{foundTerm.term}</strong> - {foundTerm.definition}
-        </div>
-      }
-      offset={[-5, 5]}
-      placement="bottom-start"
-    >
-      <span className="GlossaryItem-trigger">{term}</span>
-    </Tooltip>
-  );
-};
-
-const GlossaryItemWithContext = props => {
-  const terms = useContext(GlossaryContext);
-  return terms ? <GlossaryItem {...props} terms={terms} /> : null;
-};
-
-export { GlossaryItem, GlossaryItemWithContext as default, GlossaryContext };

package/components/GlossaryItem/style.scss

@@ -1,60 +0,0 @@
-.GlossaryItem {
-  &-trigger {
-    border-bottom: 1px solid #737c83;
-    border-style: dotted;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    cursor: pointer;
-  }
-
-  &-tooltip-content {
-    --GlossaryItem-bg: var(--color-bg-page, var(--white));
-    --GlossaryItem-color: var(--color-text-default, var(--gray20));
-    --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
-      0 2px 6px rgba(0, 0, 0, .025),
-      0 1px 3px rgba(0, 0, 0, .025));
-
-    /* what the dark-mode mixin does in the readme project */
-    [data-color-mode='dark'] & {
-      --GlossaryItem-bg: var(--gray15);
-      --GlossaryItem-color: var(--color-text-default, var(--white));
-      --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
-        0 2px 6px rgba(0, 0, 0, 0.025),
-        0 5px 10px rgba(0, 0, 0, 0.05))
-    }
-
-    @media (prefers-color-scheme: dark) {
-      [data-color-mode='auto'] & {
-        --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0));
-        --GlossaryItem-color: var(--color-text-default, var(--white));
-        --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
-          0 2px 6px rgba(0, 0, 0, 0.025),
-          0 5px 10px rgba(0, 0, 0, 0.05))
-      }
-    }
-
-    background-color: var(--GlossaryItem-bg);
-    border: 1px solid #{var(--color-border-default, rgba(black, 0.1))};
-    border-radius: var(--border-radius);
-    box-shadow: var(--GlossaryItem-shadow);
-    color: var(--GlossaryItem-color);
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 15px;
-    text-align: left;
-    width: 350px;
-  }
-
-  &-term {
-    font-style: italic;
-  }
-}
-
-.tippy-box {
-  // needed for tippy's default animation
-  &[data-animation='fade'][data-state='hidden'] {
-    opacity: 0;
-  }
-}

package/dist/components/GlossaryItem/index.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import GlossaryContext from '../../contexts/GlossaryTerms';
-import type { GlossaryItem, GlossaryTerm } from '../../contexts/GlossaryTerms';
-declare const GlossaryItem: ({ term, terms }: {
-    term: string;
-    terms: GlossaryTerm[];
-}) => React.JSX.Element;
-declare const GlossaryItemWithContext: (props: any) => React.JSX.Element;
-export { GlossaryItem, GlossaryItemWithContext as default, GlossaryContext };