@docusaurus/theme-classic 2.0.0-beta.15d451942 → 2.0.0-beta.18

package/src/theme/CodeBlock/index.tsx

@@ -5,97 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState, useRef} from 'react';
+import React, {isValidElement, useEffect, useState} from 'react';
 import clsx from 'clsx';
-import Highlight, {defaultProps, Language} from 'prism-react-renderer';
-import copy from 'copy-text-to-clipboard';
-import rangeParser from 'parse-numeric-range';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
+import Highlight, {defaultProps, type Language} from 'prism-react-renderer';
+import {
+  useThemeConfig,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+  ThemeClassNames,
+  usePrismTheme,
+} from '@docusaurus/theme-common';
+import CopyButton from '@theme/CodeBlock/CopyButton';
 import type {Props} from '@theme/CodeBlock';
-import Translate, {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
-import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
-
-const highlightLinesRangeRegex = /{([\d,-]+)}/;
-const getHighlightDirectiveRegex = (
-  languages = ['js', 'jsBlock', 'jsx', 'python', 'html'],
-) => {
-  // supported types of comments
-  const comments = {
-    js: {
-      start: '\\/\\/',
-      end: '',
-    },
-    jsBlock: {
-      start: '\\/\\*',
-      end: '\\*\\/',
-    },
-    jsx: {
-      start: '\\{\\s*\\/\\*',
-      end: '\\*\\/\\s*\\}',
-    },
-    python: {
-      start: '#',
-      end: '',
-    },
-    html: {
-      start: '<!--',
-      end: '-->',
-    },
-  };
-  // supported directives
-  const directives = [
-    'highlight-next-line',
-    'highlight-start',
-    'highlight-end',
-  ].join('|');
-  // to be more reliable, the opening and closing comment must match
-  const commentPattern = languages
-    .map(
-      (lang) =>
-        `(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`,
-    )
-    .join('|');
-  // white space is allowed, but otherwise it should be on it's own line
-  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
-};
-// select comment styles based on language
-const highlightDirectiveRegex = (lang) => {
-  switch (lang) {
-    case 'js':
-    case 'javascript':
-    case 'ts':
-    case 'typescript':
-      return getHighlightDirectiveRegex(['js', 'jsBlock']);
-
-    case 'jsx':
-    case 'tsx':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'jsx']);
-
-    case 'html':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'html']);
-
-    case 'python':
-    case 'py':
-      return getHighlightDirectiveRegex(['python']);
-
-    default:
-      // all comment types
-      return getHighlightDirectiveRegex();
-  }
-};
-
 export default function CodeBlock({
   children,
-  className: languageClassName,
+  className: blockClassName = '',
   metastring,
   title,
+  language: languageProp,
 }: Props): JSX.Element {
   const {prism} = useThemeConfig();
 
-  const [showCopied, setShowCopied] = useState(false);
   const [mounted, setMounted] = useState(false);
   // The Prism theme on SSR is always the default theme but the site theme
   // can be in a different mode. React hydration doesn't update DOM styles
@@ -108,89 +42,51 @@ export default function CodeBlock({
     setMounted(true);
   }, []);
 
-  // TODO: the title is provided by MDX as props automatically
-  // so we probably don't need to parse the metastring
-  // (note: title="xyz" => title prop still has the quotes)
+  // We still parse the metastring in case we want to support more syntax in the
+  // future. Note that MDX doesn't strip quotes when parsing metastring:
+  // "title=\"xyz\"" => title: "\"xyz\""
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
-
-  const button = useRef(null);
-  let highlightLines: number[] = [];
-
   const prismTheme = usePrismTheme();
 
-  // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
-  const content = Array.isArray(children) ? children.join('') : children;
-
-  if (metastring && highlightLinesRangeRegex.test(metastring)) {
-    // Tested above
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
-    highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
+  // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
+  // When the children is not a simple string, we just return a styled block
+  // without actually highlighting.
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return (
+      <Highlight
+        {...defaultProps}
+        key={String(mounted)}
+        theme={prismTheme}
+        code=""
+        language={'text' as Language}>
+        {({className, style}) => (
+          <pre
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex={0}
+            className={clsx(
+              className,
+              styles.codeBlockStandalone,
+              'thin-scrollbar',
+              styles.codeBlockContainer,
+              blockClassName,
+              ThemeClassNames.common.codeBlock,
+            )}
+            style={style}>
+            <code className={styles.codeBlockLines}>{children}</code>
+          </pre>
+        )}
+      </Highlight>
+    );
   }
 
-  let language =
-    languageClassName &&
-    // Force Prism's language union type to `any` because it does not contain all available languages
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ((languageClassName.replace(/language-/, '') as Language) as any);
+  // The children is now guaranteed to be one/more plain strings
+  const content = Array.isArray(children)
+    ? children.join('')
+    : (children as string);
 
-  if (!language && prism.defaultLanguage) {
-    language = prism.defaultLanguage;
-  }
-
-  // only declaration OR directive highlight can be used for a block
-  let code = content.replace(/\n$/, '');
-  if (highlightLines.length === 0 && language !== undefined) {
-    let range = '';
-    const directiveRegex = highlightDirectiveRegex(language);
-    // go through line by line
-    const lines = content.replace(/\n$/, '').split('\n');
-    let blockStart;
-    // loop through lines
-    for (let index = 0; index < lines.length; ) {
-      const line = lines[index];
-      // adjust for 0-index
-      const lineNumber = index + 1;
-      const match = line.match(directiveRegex);
-      if (match !== null) {
-        const directive = match
-          .slice(1)
-          .reduce(
-            (final: string | undefined, item) => final || item,
-            undefined,
-          );
-        switch (directive) {
-          case 'highlight-next-line':
-            range += `${lineNumber},`;
-            break;
-
-          case 'highlight-start':
-            blockStart = lineNumber;
-            break;
-
-          case 'highlight-end':
-            range += `${blockStart}-${lineNumber - 1},`;
-            break;
-
-          default:
-            break;
-        }
-        lines.splice(index, 1);
-      } else {
-        // lines without directives are unchanged
-        index += 1;
-      }
-    }
-    highlightLines = rangeParser(range);
-    code = lines.join('\n');
-  }
-
-  const handleCopyCode = () => {
-    copy(code);
-    setShowCopied(true);
-
-    setTimeout(() => setShowCopied(false), 2000);
-  };
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
+  const {highlightLines, code} = parseLines(content, metastring, language);
 
   return (
     <Highlight
@@ -198,68 +94,53 @@ export default function CodeBlock({
       key={String(mounted)}
       theme={prismTheme}
       code={code}
-      language={language}>
+      language={(language ?? 'text') as Language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockContainer}>
+        <div
+          className={clsx(
+            styles.codeBlockContainer,
+            blockClassName,
+            {
+              [`language-${language}`]:
+                language && !blockClassName.includes(`language-${language}`),
+            },
+            ThemeClassNames.common.codeBlock,
+          )}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
             </div>
           )}
-          <div className={clsx(styles.codeBlockContent, language)}>
-            <div
+          <div className={styles.codeBlockContent} style={style}>
+            <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
-                [styles.codeBlockWithTitle]: codeBlockTitle,
-              })}>
-              <div className={styles.codeBlockLines} style={style}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              <code className={styles.codeBlockLines}>
                 {tokens.map((line, i) => {
-                  if (line.length === 1 && line[0].content === '') {
-                    line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                  if (line.length === 1 && line[0]!.content === '\n') {
+                    line[0]!.content = '';
                   }
 
                   const lineProps = getLineProps({line, key: i});
 
-                  if (highlightLines.includes(i + 1)) {
-                    lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+                  if (highlightLines.includes(i)) {
+                    lineProps.className += ' docusaurus-highlight-code-line';
                   }
 
                   return (
-                    <div key={i} {...lineProps}>
+                    <span key={i} {...lineProps}>
                       {line.map((token, key) => (
                         <span key={key} {...getTokenProps({token, key})} />
                       ))}
-                    </div>
+                      <br />
+                    </span>
                   );
                 })}
-              </div>
-            </div>
+              </code>
+            </pre>
 
-            <button
-              ref={button}
-              type="button"
-              aria-label={translate({
-                id: 'theme.CodeBlock.copyButtonAriaLabel',
-                message: 'Copy code to clipboard',
-                description: 'The ARIA label for copy code blocks button',
-              })}
-              className={clsx(styles.copyButton)}
-              onClick={handleCopyCode}>
-              {showCopied ? (
-                <Translate
-                  id="theme.CodeBlock.copied"
-                  description="The copied button label on code blocks">
-                  Copied
-                </Translate>
-              ) : (
-                <Translate
-                  id="theme.CodeBlock.copy"
-                  description="The copy button label on code blocks">
-                  Copy
-                </Translate>
-              )}
-            </button>
+            <CopyButton code={code} />
           </div>
         </div>
       )}

package/src/theme/CodeBlock/styles.module.css

@@ -7,58 +7,43 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
+  box-shadow: var(--ifm-global-shadow-lw);
 }
 
 .codeBlockContent {
   position: relative;
-  /*rtl:ignore*/
+  /* rtl:ignore */
   direction: ltr;
+  border-radius: var(--ifm-global-radius);
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
   border-bottom: 1px solid var(--ifm-color-emphasis-300);
   font-size: var(--ifm-code-font-size);
   font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
 }
 
 .codeBlock {
-  overflow: auto;
-  border-radius: var(--ifm-global-radius);
+  margin: 0;
+  padding: 0;
+  background-color: inherit;
 }
 
-.codeBlockWithTitle {
+.codeBlockTitle + .codeBlockContent .codeBlock {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.copyButton {
-  background: rgba(0, 0, 0, 0.3);
-  border: none;
-  border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-white);
-  cursor: pointer;
-  opacity: 0;
-  user-select: none;
-  padding: 0.4rem 0.5rem;
-  position: absolute;
-  right: calc(var(--ifm-pre-padding) / 2);
-  top: calc(var(--ifm-pre-padding) / 2);
-  transition: opacity 200ms ease-in-out;
-}
-
-.codeBlockTitle:hover + .codeBlockContent .copyButton,
-.codeBlockContent:hover > .copyButton,
-.copyButton:focus {
-  opacity: 1;
+.codeBlockStandalone {
+  padding: 0;
 }
 
 .codeBlockLines {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace);
-  white-space: pre;
+  font: inherit;
+  /* rtl:ignore */
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);

package/src/theme/ColorModeToggle/index.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import type {Props} from '@theme/ColorModeToggle';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+
+  const title = translate(
+    {
+      message: 'Switch between dark and light mode (currently {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the navbar color mode toggle',
+    },
+    {
+      mode:
+        value === 'dark'
+          ? translate({
+              message: 'dark mode',
+              id: 'theme.colorToggle.ariaLabel.mode.dark',
+              description: 'The name for the dark color mode',
+            })
+          : translate({
+              message: 'light mode',
+              id: 'theme.colorToggle.ariaLabel.mode.light',
+              description: 'The name for the light color mode',
+            }),
+    },
+  );
+
+  return (
+    <div className={clsx(styles.toggle, className)}>
+      <button
+        className={clsx(
+          'clean-btn',
+          styles.toggleButton,
+          !isBrowser && styles.toggleButtonDisabled,
+        )}
+        type="button"
+        onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+        disabled={!isBrowser}
+        title={title}
+        aria-label={title}>
+        <IconLightMode
+          className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+        />
+        <IconDarkMode
+          className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+        />
+      </button>
+    </div>
+  );
+}
+
+export default React.memo(ColorModeToggle);

package/src/theme/ColorModeToggle/styles.module.css

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.toggle {
+  width: 2rem;
+  height: 2rem;
+}
+
+.toggleButton {
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
+}
+
+.toggleButton:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+  display: none;
+}
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}

package/src/theme/Details/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {Details as DetailsGeneric} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Details';
+import styles from './styles.module.css';
+
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
+const InfimaClasses = 'alert alert--info';
+
+export default function Details({...props}: Props): JSX.Element {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}

package/src/theme/Details/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+}

package/src/theme/DocBreadcrumbs/index.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import {
+  ThemeClassNames,
+  useSidebarBreadcrumbs,
+  useHomePageRoute,
+} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+// TODO move to design system folder
+function BreadcrumbsItemLink({
+  children,
+  href,
+}: {
+  children: ReactNode;
+  href?: string;
+}): JSX.Element {
+  const className = 'breadcrumbs__link';
+  return href ? (
+    <Link className={className} href={href} itemProp="item">
+      <span itemProp="name">{children}</span>
+    </Link>
+  ) : (
+    <span className={className} itemProp="item name">
+      {children}
+    </span>
+  );
+}
+
+// TODO move to design system folder
+function BreadcrumbsItem({
+  children,
+  active,
+  index,
+}: {
+  children: ReactNode;
+  active?: boolean;
+  index: number;
+}): JSX.Element {
+  return (
+    <li
+      itemScope
+      itemProp="itemListElement"
+      itemType="https://schema.org/ListItem"
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}>
+      {children}
+      <meta itemProp="position" content={String(index + 1)} />
+    </li>
+  );
+}
+
+function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
+        href={homeHref}>
+        🏠
+      </Link>
+    </li>
+  );
+}
+
+export default function DocBreadcrumbs(): JSX.Element | null {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+
+  if (!breadcrumbs) {
+    return null;
+  }
+
+  return (
+    <nav
+      className={clsx(
+        ThemeClassNames.docs.docBreadcrumbs,
+        styles.breadcrumbsContainer,
+      )}
+      aria-label="breadcrumbs">
+      <ul
+        className="breadcrumbs"
+        itemScope
+        itemType="https://schema.org/BreadcrumbList">
+        {homePageRoute && <HomeBreadcrumbItem />}
+        {breadcrumbs.map((item, idx) => (
+          <BreadcrumbsItem
+            key={idx}
+            active={idx === breadcrumbs.length - 1}
+            index={idx}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
+              {item.label}
+            </BreadcrumbsItemLink>
+          </BreadcrumbsItem>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/theme/DocBreadcrumbs/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+}