@readme/markdown 6.87.1 → 6.89.0

package/components/CodeTabs/index.tsx

@@ -0,0 +1,38 @@
+import { uppercase } from '@readme/syntax-highlighter';
+import React from 'react';
+
+const CodeTabs = props => {
+  const { children, theme } = props;
+
+  function handleClick({ target }, index: number) {
+    const $wrap = target.parentElement.parentElement;
+    const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
+    $open.forEach((el: Element) => el.classList.remove('CodeTabs_active'));
+    $wrap.classList.remove('CodeTabs_initial');
+
+    const codeblocks = $wrap.querySelectorAll('pre');
+    codeblocks[index].classList.add('CodeTabs_active');
+
+    target.classList.add('CodeTabs_active');
+  }
+
+  return (
+    <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
+      <div className="CodeTabs-toolbar">
+        {(Array.isArray(children) ? children : [children]).map((pre, i) => {
+          const { meta, lang } = pre.props.children.props;
+
+          /* istanbul ignore next */
+          return (
+            <button key={i} onClick={e => handleClick(e, i)} type="button">
+              {meta || `${!lang ? 'Text' : uppercase(lang)}`}
+            </button>
+          );
+        })}
+      </div>
+      <div className="CodeTabs-inner">{children}</div>
+    </div>
+  );
+};
+
+export default CodeTabs;

package/components/CodeTabs/style.scss

@@ -1,24 +1,21 @@
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable declaration-property-value-disallowed-list */
 @import '~codemirror/lib/codemirror.css';
 @import '~codemirror/theme/neo.css';
 
-@mixin code-tabs {
-  $bgc-pre: #f6f8fa;
-  $bgc-pre-dark: #242e34;
+@mixin CodeTabs {
+  $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));
 
-  border-radius: $radius !important;
   color: #333;
   color: var(--md-code-text, #333);
+  border-radius: $radius !important;
   overflow: hidden;
 
   &.theme-dark {
     color: white;
     color: var(--md-code-text, white);
-
     .CodeTabs-toolbar {
       background: $bgc-bar-dark;
       background: var(--md-code-tabs, $bgc-bar-dark);
@@ -31,28 +28,27 @@
     display: flex;
     flex-flow: row nowrap;
     overflow: hidden;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
     overflow-x: auto;
-
+    -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
     &::-webkit-scrollbar {
       display: none;
     }
-
     button {
+      white-space: nowrap;
+      transition: .123s ease;
+      -webkit-appearance: none;
       appearance: none;
-      background: transparent;
-      border: none;
-      color: inherit;
-      cursor: pointer;
       display: inline-block;
-      font: inherit;
-      font-size: 0.75em;
       line-height: 2;
+      padding: .5em 1em;
+      border: none;
+      background: transparent;
       outline: none;
-      padding: 0.5em 1em;
-      transition: 0.123s ease;
-      white-space: nowrap;
+      color: inherit;
+      font: inherit;
+      font-size: .75em;
+      cursor: pointer;
     }
   }
 
@@ -73,20 +69,16 @@
     color: var(--md-code-text, white);
   }
 
-  &-toolbar button:not(.CodeTabs_active):hover,
-  &-toolbar button:not(.CodeTabs_active):active,
-  &-toolbar button:not(.CodeTabs_active):focus {
-    background: rgba(0, 0, 0, 0.075);
+  &-toolbar button:not(.CodeTabs_active):hover {
+    background: rgba(0, 0, 0, .075);
   }
 
   pre {
-    background: var(--md-code-background, $bgc-pre);
     border-radius: 0 0 $radius $radius !important;
+    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 {
@@ -100,5 +92,5 @@
 }
 
 .CodeTabs {
-  @include code-tabs;
+  @include CodeTabs;
 }

package/components/Embed/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+interface FaviconProps {
+  src: string;
+  alt?: string;
+}
+
+const Favicon = ({ src, alt = 'favicon', ...attr }: FaviconProps) => (
+  <img {...attr} alt={alt} height="14" src={src} width="14" />
+);
+
+interface EmbedProps {
+  lazy?: boolean;
+  url: string;
+  title: string;
+  providerName?: string;
+  providerUrl?: string;
+  html?: string;
+  iframe?: boolean;
+  image?: string;
+  favicon?: string;
+  typeOfEmbed?: string;
+}
+
+const Embed = ({
+  lazy = true,
+  url,
+  html,
+  providerName,
+  providerUrl,
+  title,
+  iframe,
+  image,
+  favicon,
+  ...attrs
+}: EmbedProps) => {
+  if (typeof iframe !== 'boolean') iframe = iframe === 'true';
+
+  if (html) {
+    try {
+      if (html !== decodeURIComponent(html)) {
+        html = decodeURIComponent(html);
+      } else if (html === 'false') {
+        html = undefined;
+      }
+    } catch (e) {
+      // html wasn't HTML apparently
+      html = undefined;
+    }
+  }
+
+  if (iframe) {
+    return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
+  }
+
+  if (!providerUrl && url)
+    providerUrl = new URL(url).hostname
+      .split(/(?:www)?\./)
+      .filter(i => i)
+      .join('.');
+
+  if (!providerName) providerName = providerUrl;
+
+  const classes = ['embed', image ? 'embed_hasImg' : ''];
+
+  return (
+    <div className={classes.join(' ')}>
+      {html ? (
+        <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
+          {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : undefined} src={image} />}
+          {title && title !== '@embed' ? (
+            <div className="embed-body">
+              {!favicon || <Favicon alt={providerName} src={favicon} />}
+              {providerUrl && (
+                <small className="embed-provider">
+                  {providerUrl.search(/^@{1}/) < 0 ? (
+                    providerName
+                  ) : (
+                    <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
+                  )}
+                </small>
+              )}
+              <div className="embed-title">{title}</div>
+            </div>
+          ) : (
+            <div className="embed-body">
+              <b>View</b>: <span className="embed-body-url">{url}</span>
+            </div>
+          )}
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default Embed;

package/components/Embed/style.scss

@@ -1,40 +1,33 @@
 .markdown-body .embed {
-  $embed: '.embed';
-
-  background: transparent;
-  border-radius: 3px;
-  border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
-  box-shadow: inset 0 0 0 1px rgba(black, 0.15);
-  color: var(--md-code-text, inherit);
-  padding: 15px;
-  transition: 0.3s ease;
-
-  &:hover {
-    background: var(--md-code-background, #f6f8fa);
-    box-shadow: inset 0 0 0 1px rgba(black, 0.1);
-  }
-
-  @at-root .markdown-body > #{$embed}_hasImg:nth-of-type(odd) {
-    margin-right: 30px;
-    padding-right: 0;
-    #{$embed}-link {
-      flex-direction: row-reverse;
+  $B: '.embed';
+  & {
+    padding: 15px;
+    color: var(--md-code-text, inherit);
+    border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
+    border-radius: 3px;
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(black, .15);
+    transition: .3s ease;
+    &:hover {
+      background: var(--md-code-background, #f6f8fa);
+      box-shadow: inset 0 0 0 1px rgba(black, .1);
     }
-    #{$embed}-img {
-      box-shadow: -0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
-      margin-left: 0.88em;
-      margin-right: -30px;
+    @at-root .markdown-body > #{$B}_hasImg:nth-of-type(odd) {
+      margin-right: 30px;
+      padding-right: 0;
+      #{$B}-link { flex-direction: row-reverse }
+      #{$B}-img {
+        margin-left: .88em;
+        margin-right: -30px;
+        box-shadow: -.3em .3em .9em -.3em rgba(black, .15);
+      }
     }
-  }
-
-  @at-root .markdown-body > #{$embed}_hasImg:nth-of-type(even) {
-    margin-left: 30px;
-    padding-left: 0;
-    #{$embed}-img {
-      margin-left: -30px;
+    @at-root .markdown-body > #{$B}_hasImg:nth-of-type(even) {
+      margin-left: 30px;
+      padding-left: 0;
+      #{$B}-img { margin-left: -30px }
     }
   }
-
   &:empty {
     display: none;
   }
@@ -42,87 +35,84 @@
   &-media {
     display: flex;
     justify-content: center;
-
-    > :only-child {
-      border-radius: 0 !important;
+    >:only-child {
       flex: 1;
       margin: -15px;
+      border-radius: 0 !important;
     }
   }
 
   &-link {
+    display: flex;
     align-items: center;
     color: var(--markdown-text, #333);
-    display: flex;
     text-decoration: none !important;
   }
 
   &-body {
     flex: 1;
     line-height: 1.3;
-    &,
-    #{$embed}-title {
+    &, #{$B}-title {
       font-size: 1.15em;
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
+      text-overflow: ellipsis;
     }
-    #{$embed}-provider {
+    #{$B}-provider {
       display: block;
-      opacity: 0.88;
       text-decoration-color: transparent !important;
+      opacity: .88;
     }
-
     &-url {
-      opacity: 0.75;
+      opacity: .75;
     }
   }
 
   &-provider {
     font-size: 0.8em;
     line-height: 1.6;
-    transition: 0.2 ease;
-
-    code {
-      opacity: 0.8;
-    }
 
     code:only-child {
-      background: transparent;
       display: block;
-      font-size: inherit !important;
-      margin: 0;
+      width: 100%;
+      font-size: 1.15em;
       overflow: hidden;
-      padding: 0;
-      text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
+      text-overflow: ellipsis;
+      background: transparent;
+      margin: 0;
+      padding: 0;
+      font-size: inherit !important;
     }
-  }
+    transition: .2 ease;
+    code {
+      opacity: 0.8;
+    }
+   }
 
   &-img {
-    background: white;
-    border: 1px solid rgba(black, 0.15);
-    border-radius: 3px;
-    box-shadow: 0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
-    margin: 0 0.88em 0 0;
+    width: 5em;
     max-width: 5em;
+    margin: 0 .88em 0 0;
     padding: 4px;
+    background: white;
+    border: 1px solid rgba(black, .15);
+    border-radius: 3px;
     transition: inherit;
-    width: 5em;
+    box-shadow: .3em .3em .9em -.3em rgba(black, .15);
   }
-  &:not(:hover) #{$embed}-img {
-    box-shadow: 0 0.25em 1em -0.5em rgba(black, 0.133);
+  &:not(:hover) #{$B}-img {
+    box-shadow: 0 .25em 1em -.5em rgba(black, .133);
   }
-  &:hover #{$embed}-img {
-    border: 1px solid rgba(black, 0.2);
+  &:hover #{$B}-img {
+    border: 1px solid rgba(black, .2);
   }
 
   &-favicon {
+    width: 12px !important;
     height: 12px !important;
-    margin-bottom: 12px;
-    margin-right: 6px;
     margin-top: 4px;
-    width: 12px !important;
+    margin-right: 6px;
+    margin-bottom: 12px;
   }
-}
+}

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="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 GlossaryWithContext = props => {
+  const terms = useContext(GlossaryContext);
+  return terms ? <Glossary {...props} terms={terms} /> : <span>{props.term}</span>;
+};
+
+export { Glossary, GlossaryWithContext as default, GlossaryContext };

package/components/{GlossaryItem → Glossary}/style.scss

@@ -1,19 +1,17 @@
-/* stylelint-disable declaration-property-value-disallowed-list */
-/* stylelint-disable custom-property-pattern */
-/* stylelint-disable order/order */
 .GlossaryItem {
   &-trigger {
-    border-bottom: 1px dotted #737c83;
+    border-bottom: 1px solid #737c83;
+    border-style: dotted;
+    border-top: none;
     border-left: none;
     border-right: none;
-    border-top: none;
     cursor: pointer;
   }
 
   &-tooltip-content {
-    --GlossaryItem-bg: var(--color-bg-page, var(--white));
-    --GlossaryItem-color: var(--color-text-default, var(--gray20));
-    --GlossaryItem-shadow: var(
+    --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),
@@ -22,9 +20,9 @@
 
     /* 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(
+      --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),
@@ -33,10 +31,10 @@
     }
 
     @media (prefers-color-scheme: dark) {
-      [data-color-mode='system'] & {
-        --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0));
-        --GlossaryItem-color: var(--color-text-default, var(--white));
-        --GlossaryItem-shadow: var(
+      [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),
@@ -45,11 +43,11 @@
       }
     }
 
-    background-color: var(--GlossaryItem-bg);
+    background-color: var(--Glossary-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);
+    box-shadow: var(--Glossary-shadow);
+    color: var(--Glossary-color);
     font-size: 15px;
     font-weight: 400;
     line-height: 1.5;

package/components/HTMLBlock/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
+
+const extractScripts = (html: string = ''): [string, () => void] => {
+  const scripts: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = MATCH_SCRIPT_TAGS.exec(html)) !== null) {
+    scripts.push(match[1]);
+  }
+  const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
+  return [cleaned, () => scripts.map(js => window.eval(js))];
+};
+
+const HTMLBlock = ({ children = '', runScripts, safeMode = false }) => {
+  let html = children;
+  runScripts = typeof runScripts !== 'boolean' ? (runScripts === 'true' ? true : false) : runScripts;
+
+  if (typeof html !== 'string') html = renderToStaticMarkup(html);
+  const [cleanedHtml, exec] = extractScripts(html);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts) exec();
+  }, [runScripts, exec]);
+
+  if (safeMode) {
+    return (
+      <pre className="html-unsafe">
+        <code>{html}</code>
+      </pre>
+    );
+  }
+
+  return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: cleanedHtml }} />;
+};
+
+export default HTMLBlock;

package/components/Heading/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export type Depth = 1 | 2 | 3 | 4 | 5 | 6;
+
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLHeadingElement>> {
+  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  depth: Depth;
+}
+
+const Heading = ({ tag: Tag = 'h3', depth = 3, id, children, ...attrs }: Props) => {
+  if (!children) return '';
+
+  return (
+    <Tag {...attrs} className={`heading heading-${depth} header-scroll`}>
+      <div key={`heading-anchor-${id}`} className="heading-anchor anchor waypoint" id={id} />
+      <div key={`heading-text-${id}`} className="heading-text">
+        {children}
+      </div>
+      <a
+        key={`heading-anchor-icon-${id}`}
+        aria-label={`Skip link to ${children}`}
+        className="heading-anchor-icon fa fa-anchor"
+        href={`#${id}`}
+      />
+    </Tag>
+  );
+};
+
+const CreateHeading = (depth: Depth) => (props: Props) => <Heading {...props} depth={depth} tag={`h${depth}`} />;
+
+export default CreateHeading;

package/components/Heading/style.scss

@@ -1,43 +1,37 @@
 .heading.heading {
-  align-items: center;
   display: flex;
   justify-content: flex-start;
+  align-items: center;
   position: relative;
-
   .heading-text {
     flex: 1 100%;
   }
-
   .heading-anchor-deprecated {
     position: absolute;
     top: 0;
   }
-
   .heading-anchor {
     top: -1rem !important;
   }
-
   .heading-anchor,
   .heading-anchor-icon {
-    color: inherit;
+    position: absolute !important;
     display: inline !important;
-    font-size: 0.8rem !important;
-    margin-right: -0.8rem;
     order: -1;
-    padding: 0.8rem 0.2rem 0.8rem 0 !important;
-    position: absolute !important;
     right: 100%;
-    text-decoration: none;
     top: unset !important;
+    margin-right: -.8rem;
+    padding: .8rem .2rem .8rem 0 !important;
+    font-size: .8rem !important;
+    text-decoration: none;
+    color: inherit;
     transform: translateX(-100%);
-    transition: 0.2s ease;
-
+    transition: .2s ease;
     &:hover {
       opacity: 1;
     }
   }
-
   &:not(:hover) .heading-anchor-icon {
     opacity: 0;
   }
-}
+}