@readme/markdown 6.75.0-beta.8 → 6.75.0

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-link/${ref[1]}${hashStr}`;
+    return `${base}/reference/${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
+    // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h3 className={`callout-heading${title ? '' : ' empty'}`}>
+      <h2 className={`callout-heading${title ? '' : ' empty'}`}>
         <span className="callout-icon">{icon}</span>
         {title}
-      </h3>
+      </h2>
       {content}
     </blockquote>
   );

package/components/Callout/style.scss

@@ -1,81 +1,104 @@
-@mixin callout ($l-offset: 1.33rem) {
+/* 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) {
   --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 .8em;
+    padding: 0 0 0 0.8em;
   }
 
   .callout-heading {
     color: var(--title, --text);
-    margin-bottom: calc(#{$l-offset} * .5);
+    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);
+
     &:only-child {
       margin-bottom: 0;
     }
+
     &.empty {
       float: left;
-      margin-top: calc(#{$l-offset} * .5);
+      margin-top: calc(#{$l-offset} * 0.5);
+
       .callout-icon {
         line-height: 0;
       }
     }
+
     > * {
       color: inherit;
       margin: 0;
     }
-    &:before {
+
+    &::before {
       position: absolute;
       right: 100%;
       width: 2.4em;
@@ -83,20 +106,24 @@
       font: normal normal normal 1em/1 FontAwesome;
     }
   }
+
   .callout-icon {
     float: left;
-    margin-left: calc(-#{$l-offset} - .5em);
-    margin-right: -.25rem;
+    margin-left: calc(-#{$l-offset} - 0.5em);
+    margin-right: -0.25rem;
   }
 }
-@mixin calloutCustomIcons($R: callout) {
+
+@mixin callout-custom-icons($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);
@@ -109,24 +136,30 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
   @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;
@@ -135,10 +168,13 @@
 }
 
 .callout {
-  &.callout { // bump specificity
+  &.callout {
+    // bump specificity
     @include callout;
   }
-  @include calloutCustomIcons;
+
+  @include callout-custom-icons;
+
   border-top-right-radius: var(--markdown-radius);
   border-bottom-right-radius: var(--markdown-radius);
 }

package/components/Code/index.jsx

@@ -63,6 +63,8 @@ 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,21 +1,27 @@
-@mixin gfmCodeBaseStyles($background: #F6F8FA, $background-dark: #242E34, $text: inherit) {
-
+/* 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) {
   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
+    margin-top: 0;
+    word-wrap: normal;
   }
 
   code {
@@ -25,25 +31,21 @@
     color: var(--md-code-text);
     font-size: 85%;
     margin: 0;
-    padding: .2em .4em;
+    padding: 0.2em 0.4em;
 
-    >div[class*="cm-"] {
+    > div[class*='cm-'] {
       display: inherit;
     }
   }
 
-  pre {
-    word-wrap: normal
-  }
-
-  pre>code {
+  pre > code {
     background: 0 0;
     border: 0;
     font-size: 100%;
     margin: 0;
     padding: 0;
     white-space: pre;
-    word-break: normal
+    word-break: normal;
   }
 
   pre {
@@ -57,7 +59,7 @@
     font-size: 85%;
     line-height: 1.45;
     overflow: auto;
-    padding: 1em
+    padding: 1em;
   }
 
   pre code.theme-dark {
@@ -74,7 +76,7 @@
     max-width: auto;
     overflow: visible;
     padding: 0;
-    word-wrap: normal
+    word-wrap: normal;
   }
 
   kbd {
@@ -89,89 +91,86 @@
     font-size: 11px;
     line-height: 10px;
     padding: 3px 5px;
-    vertical-align: middle
+    vertical-align: middle;
   }
 }
 
-@mixin copyCodeButton {
+@mixin copy-code-button {
   button.rdmd-code-copy {
-    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;
-    }
+    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;
 
     &:not(:hover) {
-
-      &:before,
-      &:after {
-        opacity: .66;
+      &::before,
+      &::after {
+        opacity: 0.66;
       }
     }
 
     &:hover {
       &:not(:active) {
         box-shadow:
-          inset 0 0 0 1px rgba(#8B8B8B, .75),
-          -1px 2px 6px -3px rgba(black, .2);
+          inset 0 0 0 1px rgba(#8b8b8b, 0.75),
+          -1px 2px 6px -3px rgba(black, 0.2);
       }
     }
 
     &:active {
       box-shadow:
-        inset 0 0 0 1px rgba(#8B8B8B, .5),
-        inset 1px 4px 6px -2px rgba(0, 0, 0, .175);
+        inset 0 0 0 1px rgba(#8b8b8b, 0.5),
+        inset 1px 4px 6px -2px rgba(0, 0, 0, 0.175);
 
-      &:before,
-      &:after {
-        opacity: .75;
+      &::before,
+      &::after {
+        opacity: 0.75;
       }
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       display: inline-block;
-      font: normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";
+      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;
       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: .3s .15s ease;
+      transition: 0.3s 0.15s ease;
     }
 
-    &:after {
+    &::after {
       // @todo why are these !important @rafe, you dumbell?
-      content: "\e942" !important;
+      content: '\e942' !important;
       font-weight: 900 !important;
-      position: absolute;
-      top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%) scale(.33);
       opacity: 0 !important;
-      transition: .3s 0s ease;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(0.33);
+      transition: 0.3s 0s ease;
     }
 
     &_copied {
@@ -184,16 +183,16 @@
         opacity: 1;
       }
 
-      &:before {
-        transition: .3s 0s ease;
-        transform: scale(.33);
+      &::before {
         opacity: 0 !important;
+        transition: 0.3s 0s ease;
+        transform: scale(0.33);
       }
 
-      &:after {
-        transition: .3s .15s ease;
-        transform: translate(-50%, -50%) scale(1);
+      &::after {
         opacity: 1 !important;
+        transition: 0.3s 0.15s ease;
+        transform: translate(-50%, -50%) scale(1);
       }
     }
   }
@@ -201,11 +200,11 @@
   pre {
     position: relative;
 
-    >code {
+    > code {
       background: inherit;
     }
 
-    >code.theme-dark {
+    > code.theme-dark {
       color: white;
     }
 
@@ -221,7 +220,7 @@
       overflow: hidden;
       padding: 0;
 
-      >code {
+      > code {
         display: block !important;
         overflow: auto;
         padding: 1em;
@@ -232,7 +231,7 @@
     // manage copied state style
     & {
       &:hover button.rdmd-code-copy:not(:hover) {
-        transition-delay: .4s;
+        transition-delay: 0.4s;
       }
 
       &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied) {
@@ -243,7 +242,7 @@
 }
 
 .markdown-body {
-  // --md-code-background: #F6F8FA;  
-  @include gfmCodeBaseStyles;
-  @include copyCodeButton;
+  // --md-code-background: #F6F8FA;
+  @include gfm-code-base-styles;
+  @include copy-code-button;
 }

package/components/CodeTabs/index.jsx

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

package/components/CodeTabs/style.scss

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

package/components/Embed/index.jsx

@@ -83,7 +83,6 @@ Embed.defaultProps = {
 const CreateEmbed =
   ({ lazyImages }) =>
   // eslint-disable-next-line react/display-name
-  props =>
-    <Embed {...props} lazy={lazyImages} />;
+  props => <Embed {...props} lazy={lazyImages} />;
 
 module.exports = CreateEmbed;