@readme/markdown 6.75.0-beta.34 → 6.75.0-beta.36

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/Callout/index.tsx

@@ -23,20 +23,20 @@ const themes: Record<string, string> = {
 };
 
 const Callout = (props: Props) => {
-  const { attributes, children, icon, heading } = props;
+  const { attributes, children, icon } = props;
 
   let theme = props.theme || themes[icon] || 'default';
+  const [heading, ...body] = Array.isArray(children) ? children : [children];
+  const empty = !heading.props.children;
 
   return (
     // @ts-ignore
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      {heading && (
-        <h3 className={`callout-heading${heading ? '' : ' empty'}`}>
-          <span className="callout-icon">{icon}</span>
-          {heading}
-        </h3>
-      )}
-      {children}
+      <h3 className={`callout-heading${empty ? ' empty' : ''}`}>
+        <span className="callout-icon">{icon}</span>
+        {!empty && heading}
+      </h3>
+      {body}
     </blockquote>
   );
 };

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;