@readme/markdown 6.74.1 → 6.75.0-beta.1

package/README.md

@@ -1,5 +1,5 @@
-@readme/markdown
-===
+# @readme/markdown
+
 <img align="right" width="26%" src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png">
 
 ReadMe's flavored Markdown parser and MDX rendering engine. <img align=center src=https://github.com/readmeio/markdown/workflows/CI/badge.svg alt="RDMD CI Status">
@@ -14,28 +14,24 @@ By default, the updated markdown package exports a function which takes a string
 
 ```jsx
 import React from 'react';
-import rdmd from "@readme/markdown";
+import rdmd from '@readme/markdown';
 
-export default ({ body }) => (
-  <div className="markdown-body">
-    {rdmd(body)}
-  </div>
-);
+export default ({ body }) => <div className="markdown-body">{rdmd(body)}</div>;
 ```
 
 ### Export Methods
 
 In addition to the default React processor, the package exports some other methods for transforming ReadMe-flavored markdown:
 
-| Export  | Description                                    | Arguments       |
-| -------:|:---------------------------------------------- |:--------------- |
-|*`react`*|_(default)_ returns a VDOM tree object          |`text`, `options`|
-|*`md`*   | transform mdast in to ReadMe-flavored markdown |`tree`, `options`|
-|*`html`* | transform markdown in to HTML                  |`text`, `options`|
-|*`mdast`*| transform markdown to an mdast object          |`text`, `options`|
-|*`hast`* | transform markdown to HAST object              |`text`, `options`|
-|*`plain`*| transform markdown to plain text               |`text`, `options`|
-|*`utils`*| contexts, defaults, helpers, etc.              | N/A             |
+|    Export | Description                                    | Arguments         |
+| --------: | :--------------------------------------------- | :---------------- |
+| _`react`_ | _(default)_ returns a VDOM tree object         | `text`, `options` |
+|    _`md`_ | transform mdast in to ReadMe-flavored markdown | `tree`, `options` |
+|  _`html`_ | transform markdown in to HTML                  | `text`, `options` |
+| _`mdast`_ | transform markdown to an mdast object          | `text`, `options` |
+|  _`hast`_ | transform markdown to HAST object              | `text`, `options` |
+| _`plain`_ | transform markdown to plain text               | `text`, `options` |
+| _`utils`_ | contexts, defaults, helpers, etc.              | N/A               |
 
 ### Settings & Options
 

package/components/Anchor.jsx

@@ -18,7 +18,7 @@ function getHref(href, baseUrl) {
 
   const ref = path.match(/^ref:([-_a-zA-Z0-9#]*)$/);
   if (ref) {
-    return `${base}/reference/${ref[1]}${hashStr}`;
+    return `${base}/reference-link/${ref[1]}${hashStr}`;
   }
 
   // we need to perform two matches for changelogs in case

package/components/Callout/index.jsx

@@ -6,12 +6,12 @@ const Callout = props => {
   const [title, ...content] = !props.title ? [null, props.children] : props.children;
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
+    // eslint-disable-next-line react/jsx-props-no-spreading
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h2 className={`callout-heading${title ? '' : ' empty'}`}>
+      <h3 className={`callout-heading${title ? '' : ' empty'}`}>
         <span className="callout-icon">{icon}</span>
         {title}
-      </h2>
+      </h3>
       {content}
     </blockquote>
   );

package/components/Callout/style.scss

@@ -1,104 +1,81 @@
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
-/* stylelint-disable order/properties-alphabetical-order */
-/* stylelint-disable order/order */
-@mixin callout($l-offset: 1.33rem) {
+@mixin callout ($l-offset: 1.33rem) {
   --background: #{lighten(#dfe2e5, 8.75%)};
   --border: #{lighten(#6a737d, 12.5%)};
 
-  background: var(--background);
-  border-color: var(--border);
-  color: var(--text);
-  padding: $l-offset;
+  & {
+    background: var(--background);
+    border-color: var(--border);
+    color: var(--text);
+    padding: $l-offset;
+  }
 
   &_info {
     $color: #46b8da;
-
     --background: #e3edf2;
     --title: #{$color};
     --border: #{lighten($color, 5%)}; // should be #5bc0de
   }
 
-  &_warn,
-  &_warning {
+  &_warn, &_warning {
     $color: #eea236;
-
     --background: #fcf8f2;
     --title: #{$color};
     --border: #{lighten($color, 5%)};
   }
 
-  &_ok,
-  &_okay,
-  &_success {
+  &_ok, &_okay, &_success {
     $color: #489e49;
-
     --background: #f3f8f3;
     --title: #{$color};
     --border: #{lighten($color, 5%)}; // should be #50af51
   }
 
-  &_err,
-  &_error {
+  &_err, &_error {
     $color: #d43f3a;
-
     --background: #fdf7f7;
     --title: #{$color};
-    --border: #{lighten($color, 5%)}; // should be #d9534f
+    --border: #{lighten($color, 5%)};  // should be #d9534f
   }
 
   > * {
     margin-left: $l-offset;
     position: relative;
   }
-
-  ul,
-  ol {
+  ul, ol {
     padding-left: 1.3em;
   }
 
   a {
     color: inherit;
   }
-
   hr {
     border-color: var(--border, var(--markdown-edge, #eee));
   }
-
   blockquote {
     color: var(--text);
     border-color: var(--border);
     border-width: 3px;
-    padding: 0 0 0 0.8em;
+    padding: 0 0 0 .8em;
   }
 
   .callout-heading {
     color: var(--title, --text);
-    font-size: 1.25em; // match h3
-    font-family: var(--markdown-title-font); // match h3
-    font-weight: var(--markdown-title-weight, 600); // match h3
-    line-height: 1.25; // match h3
-    margin-bottom: calc(#{$l-offset} * 0.5);
-
+    margin-bottom: calc(#{$l-offset} * .5);
     &:only-child {
       margin-bottom: 0;
     }
-
     &.empty {
       float: left;
-      margin-top: calc(#{$l-offset} * 0.5);
-
+      margin-top: calc(#{$l-offset} * .5);
       .callout-icon {
         line-height: 0;
       }
     }
-
     > * {
       color: inherit;
       margin: 0;
     }
-
-    &::before {
+    &:before {
       position: absolute;
       right: 100%;
       width: 2.4em;
@@ -106,23 +83,20 @@
       font: normal normal normal 1em/1 FontAwesome;
     }
   }
-
   .callout-icon {
     float: left;
-    margin-left: calc(-#{$l-offset} - 0.5em);
-    margin-right: -0.25rem;
+    margin-left: calc(-#{$l-offset} - .5em);
+    margin-right: -.25rem;
   }
 }
-@mixin callout-custom-icons($R: callout) {
+@mixin calloutCustomIcons($R: callout) {
   --emoji: 1em;
-  --icon-font: fontawesome;
-
+  --icon-font: FontAwesome;
   &-icon {
     font-size: var(--emoji, 0);
     color: var(--icon-color, inherit) !important;
   }
-
-  &-icon::before {
+  &-icon:before {
     content: var(--icon);
     font-family: var(--icon-font);
     font-size: var(--icon-size, 1rem);
@@ -137,27 +111,22 @@
   }
   @at-root .rdmdCallouts--useIconFont & {
     --emoji: unset;
-
     &_okay {
       /* thumbs up */
-      --icon: '\f164';
+      --icon: "\f164";
     }
-
     &_info {
       /* info circle */
-      --icon: '\f05a';
+      --icon: "\f05a";
     }
-
     &_warn {
       /* warning triangle */
-      --icon: '\f071';
+      --icon: "\f071";
     }
-
     &_error {
       /* warning circle */
-      --icon: '\f06a';
+      --icon: "\f06a";
     }
-
     &_default {
       /* warning circle */
       --emoji: 1rem;
@@ -166,12 +135,10 @@
 }
 
 .callout {
-  &.callout {
-    // bump specificity
+  &.callout { // bump specificity
     @include callout;
   }
-  @include callout-custom-icons;
-
+  @include calloutCustomIcons;
   border-top-right-radius: var(--markdown-radius);
   border-bottom-right-radius: var(--markdown-radius);
 }

package/components/Code/index.jsx

@@ -63,8 +63,6 @@ function Code(props) {
         data-lang={language}
         name={meta}
         suppressHydrationWarning={true}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
       >
         {codeContent}
       </code>

package/components/Code/style.scss

@@ -1,27 +1,21 @@
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
-/* stylelint-disable declaration-property-value-disallowed-list */
-/* stylelint-disable scss/selector-no-redundant-nesting-selector */
-/* stylelint-disable order/properties-alphabetical-order */
-@mixin gfm-code-base-styles($background: #f6f8fa, $background-dark: #242e34, $text: inherit) {
+@mixin gfmCodeBaseStyles($background: #F6F8FA, $background-dark: #242E34, $text: inherit) {
+
   code,
   kbd,
   pre {
-    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
     font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);
-    font-size: 1em;
+    font-size: 1em
   }
 
   code,
   pre {
-    font-size: 12px;
+    font-size: 12px
   }
 
   pre {
     margin-bottom: 0;
-    margin-top: 0;
-    word-wrap: normal;
+    margin-top: 0
   }
 
   code {
@@ -31,21 +25,25 @@
     color: var(--md-code-text);
     font-size: 85%;
     margin: 0;
-    padding: 0.2em 0.4em;
+    padding: .2em .4em;
 
-    > div[class*='cm-'] {
+    >div[class*="cm-"] {
       display: inherit;
     }
   }
 
-  pre > code {
+  pre {
+    word-wrap: normal
+  }
+
+  pre>code {
     background: 0 0;
     border: 0;
     font-size: 100%;
     margin: 0;
     padding: 0;
     white-space: pre;
-    word-break: normal;
+    word-break: normal
   }
 
   pre {
@@ -59,7 +57,7 @@
     font-size: 85%;
     line-height: 1.45;
     overflow: auto;
-    padding: 1em;
+    padding: 1em
   }
 
   pre code.theme-dark {
@@ -76,7 +74,7 @@
     max-width: auto;
     overflow: visible;
     padding: 0;
-    word-wrap: normal;
+    word-wrap: normal
   }
 
   kbd {
@@ -91,78 +89,89 @@
     font-size: 11px;
     line-height: 10px;
     padding: 3px 5px;
-    vertical-align: middle;
+    vertical-align: middle
   }
 }
 
-@mixin copy-code-button {
+@mixin copyCodeButton {
   button.rdmd-code-copy {
-    appearance: unset;
-    background: inherit;
-    background: var(--md-code-background, inherit);
-    border: none;
-    border-radius: 3px;
-    box-shadow: inset 0 0 0 1px rgba(#aaa, 0.66), -1px 2px 6px -3px rgba(black, 0.1);
-    color: inherit;
-    color: var(--md-code-text, inherit);
-    cursor: copy;
-    display: none !important; // hide by default
-    font: inherit;
-    margin: 0.5em 0.6em 0 0;
-    outline: none !important;
-    padding: 0.25em 0.7em;
-    transition: 0.15s ease-out;
+    DISPLAY: none !important; // hide by default
+
+    & {
+      -webkit-appearance: unset;
+      margin: .5em .6em 0 0;
+      padding: .25em .7em;
+      cursor: copy;
+      font: inherit;
+      color: inherit;
+      color: var(--md-code-text, inherit);
+      border: none;
+      border-radius: 3px;
+      outline: none !important;
+      background: inherit;
+      background: var(--md-code-background, inherit);
+      box-shadow:
+        inset 0 0 0 1px rgba(#aaa, .66),
+        -1px 2px 6px -3px rgba(black, .1);
+      transition: .15s ease-out;
+    }
 
     &:not(:hover) {
-      &::before,
-      &::after {
-        opacity: 0.66;
+
+      &:before,
+      &:after {
+        opacity: .66;
       }
     }
 
     &:hover {
       &:not(:active) {
-        box-shadow: inset 0 0 0 1px rgba(#8b8b8b, 0.75), -1px 2px 6px -3px rgba(black, 0.2);
+        box-shadow:
+          inset 0 0 0 1px rgba(#8B8B8B, .75),
+          -1px 2px 6px -3px rgba(black, .2);
       }
     }
 
     &:active {
-      box-shadow: inset 0 0 0 1px rgba(#8b8b8b, 0.5), inset 1px 4px 6px -2px rgba(0, 0, 0, 0.175);
+      box-shadow:
+        inset 0 0 0 1px rgba(#8B8B8B, .5),
+        inset 1px 4px 6px -2px rgba(0, 0, 0, .175);
 
-      &::before,
-      &::after {
-        opacity: 0.75;
+      &:before,
+      &:after {
+        opacity: .75;
       }
     }
 
-    &::before,
-    &::after {
+    &:before,
+    &:after {
       display: inline-block;
-      font: normal normal normal 1em/1 'Font Awesome 5 Free', FontAwesome;
-      font-family: ReadMe-Icons;
-      font-feature-settings: 'liga';
-      font-variant-ligatures: discretionary-ligatures;
-      line-height: 2;
+      font: normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
+
+      line-height: 2;
+      font-family: 'ReadMe-Icons';
+      font-variant-ligatures: discretionary-ligatures;
+      font-feature-settings: "liga";
     }
 
-    &::before {
-      content: '\e6c9';
+    &:before {
+      content: "\e6c9";
       font-weight: 800;
-      transition: 0.3s 0.15s ease;
+      transition: .3s .15s ease;
     }
 
-    &::after {
+    &:after {
       // @todo why are these !important @rafe, you dumbell?
-      content: '\e942' !important;
+      content: "\e942" !important;
       font-weight: 900 !important;
-      left: 50%;
-      opacity: 0 !important;
       position: absolute;
       top: 50%;
-      transform: translate(-50%, -50%) scale(0.33);
-      transition: 0.3s 0s ease;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(.33);
+      opacity: 0 !important;
+      transition: .3s 0s ease;
     }
 
     &_copied {
@@ -175,16 +184,16 @@
         opacity: 1;
       }
 
-      &::before {
+      &:before {
+        transition: .3s 0s ease;
+        transform: scale(.33);
         opacity: 0 !important;
-        transition: 0.3s 0s ease;
-        transform: scale(0.33);
       }
 
-      &::after {
-        opacity: 1 !important;
-        transition: 0.3s 0.15s ease;
+      &:after {
+        transition: .3s .15s ease;
         transform: translate(-50%, -50%) scale(1);
+        opacity: 1 !important;
       }
     }
   }
@@ -192,11 +201,11 @@
   pre {
     position: relative;
 
-    > code {
+    >code {
       background: inherit;
     }
 
-    > code.theme-dark {
+    >code.theme-dark {
       color: white;
     }
 
@@ -212,7 +221,7 @@
       overflow: hidden;
       padding: 0;
 
-      > code {
+      >code {
         display: block !important;
         overflow: auto;
         padding: 1em;
@@ -223,7 +232,7 @@
     // manage copied state style
     & {
       &:hover button.rdmd-code-copy:not(:hover) {
-        transition-delay: 0.4s;
+        transition-delay: .4s;
       }
 
       &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied) {
@@ -234,7 +243,7 @@
 }
 
 .markdown-body {
-  // --md-code-background: #F6F8FA;
-  @include gfm-code-base-styles;
-  @include copy-code-button;
+  // --md-code-background: #F6F8FA;  
+  @include gfmCodeBaseStyles;
+  @include copyCodeButton;
 }

package/components/CodeTabs/index.jsx

@@ -1,11 +1,9 @@
 const { uppercase } = require('@readme/syntax-highlighter');
 const PropTypes = require('prop-types');
 const React = require('react');
-const { useState } = require('react');
 
 const CodeTabs = props => {
   const { children, theme } = props;
-  const [activeIndex, setActiveIndex] = useState(0);
 
   function handleClick({ target }, index) {
     const $wrap = target.parentElement.parentElement;
@@ -16,32 +14,23 @@ const CodeTabs = props => {
     const codeblocks = $wrap.querySelectorAll('pre');
     codeblocks[index].classList.add('CodeTabs_active');
 
-    setActiveIndex(index);
+    target.classList.add('CodeTabs_active');
   }
 
   return (
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
-      <div className="CodeTabs-toolbar" role="tablist">
+      <div className="CodeTabs-toolbar">
         {children.map(({ props: pre }, i) => {
           const { meta, lang } = pre.children[0].props;
           /* istanbul ignore next */
           return (
-            <button
-              key={i}
-              aria-selected={activeIndex === i}
-              className={activeIndex === i ? 'CodeTabs_active' : ''}
-              onClick={e => handleClick(e, i)}
-              role="tab"
-              type="button"
-            >
+            <button key={i} onClick={e => handleClick(e, i)} type="button">
               {meta || `${!lang ? 'Text' : uppercase(lang)}`}
             </button>
           );
         })}
       </div>
-      <div className="CodeTabs-inner" role="tabpanel">
-        {children}
-      </div>
+      <div className="CodeTabs-inner">{children}</div>
     </div>
   );
 };