@docusaurus/theme-classic 2.0.0-beta.1ec2c95e3 → 2.0.0-beta.21

package/lib/theme/CodeBlock/index.js

@@ -1,253 +1,38 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CodeBlock;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
-
-var _copyTextToClipboard = _interopRequireDefault(require("copy-text-to-clipboard"));
-
-var _parseNumericRange = _interopRequireDefault(require("parse-numeric-range"));
-
-var _usePrismTheme = _interopRequireDefault(require("@theme/hooks/usePrismTheme"));
-
-var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * 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.
  */
-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();
-  }
-};
-
-function CodeBlock({
-  children,
-  className: languageClassName,
-  metastring,
-  title
-}) {
-  const {
-    prism
-  } = (0, _themeCommon.useThemeConfig)();
-  const [showCopied, setShowCopied] = (0, _react.useState)(false);
-  const [mounted, setMounted] = (0, _react.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
-  // that come from SSR. Hence force a re-render after mounting to apply the
-  // current relevant styles. There will be a flash seen of the original
-  // styles seen using this current approach but that's probably ok. Fixing
-  // the flash will require changing the theming approach and is not worth it
-  // at this point.
-
-  (0, _react.useEffect)(() => {
-    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)
-
-  const codeBlockTitle = (0, _themeCommon.parseCodeBlockTitle)(metastring) || title;
-  const button = (0, _react.useRef)(null);
-  let highlightLines = [];
-  const prismTheme = (0, _usePrismTheme.default)(); // 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 = (0, _parseNumericRange.default)(highlightLinesRange).filter(n => n > 0);
-  }
-
-  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-/, '');
-
-  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, 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 = (0, _parseNumericRange.default)(range);
-    code = lines.join('\n');
+import React, {isValidElement} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import ElementContent from '@theme/CodeBlock/Content/Element';
+import StringContent from '@theme/CodeBlock/Content/String';
+/**
+ * Best attempt to make the children a plain string so it is copyable. If there
+ * are react elements, we will not be able to copy the content, and it will
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children) {
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return children;
   }
-
-  const handleCopyCode = () => {
-    (0, _copyTextToClipboard.default)(code);
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 2000);
-  };
-
-  return <_prismReactRenderer.default {..._prismReactRenderer.defaultProps} key={String(mounted)} theme={prismTheme} code={code} language={language}>
-      {({
-      className,
-      style,
-      tokens,
-      getLineProps,
-      getTokenProps
-    }) => <div className={_stylesModule.default.codeBlockContainer}>
-          {codeBlockTitle && <div style={style} className={_stylesModule.default.codeBlockTitle}>
-              {codeBlockTitle}
-            </div>}
-          <div className={(0, _clsx.default)(_stylesModule.default.codeBlockContent, language)}>
-            <pre
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex={0} className={(0, _clsx.default)(className, _stylesModule.default.codeBlock, 'thin-scrollbar', {
-          [_stylesModule.default.codeBlockWithTitle]: codeBlockTitle
-        })} style={style}>
-              <code className={_stylesModule.default.codeBlockLines}>
-                {tokens.map((line, i) => {
-              if (line.length === 1 && line[0].content === '') {
-                line[0].content = '\n'; // eslint-disable-line no-param-reassign
-              }
-
-              const lineProps = getLineProps({
-                line,
-                key: i
-              });
-
-              if (highlightLines.includes(i + 1)) {
-                lineProps.className += ' docusaurus-highlight-code-line';
-              }
-
-              return <span key={i} {...lineProps}>
-                      {line.map((token, key) => <span key={key} {...getTokenProps({
-                  token,
-                  key
-                })} />)}
-                    </span>;
-            })}
-              </code>
-            </pre>
-
-            <button ref={button} type="button" aria-label={(0, _Translate.translate)({
-          id: 'theme.CodeBlock.copyButtonAriaLabel',
-          message: 'Copy code to clipboard',
-          description: 'The ARIA label for copy code blocks button'
-        })} className={(0, _clsx.default)(_stylesModule.default.copyButton, 'clean-btn')} onClick={handleCopyCode}>
-              {showCopied ? <_Translate.default id="theme.CodeBlock.copied" description="The copied button label on code blocks">
-                  Copied
-                </_Translate.default> : <_Translate.default id="theme.CodeBlock.copy" description="The copy button label on code blocks">
-                  Copy
-                </_Translate.default>}
-            </button>
-          </div>
-        </div>}
-    </_prismReactRenderer.default>;
-}
+  // The children is now guaranteed to be one/more plain strings
+  return Array.isArray(children) ? children.join('') : children;
+}
+export default function CodeBlock({children: rawChildren, ...props}) {
+  // 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 that come
+  // from SSR. Hence force a re-render after mounting to apply the current
+  // relevant styles.
+  const isBrowser = useIsBrowser();
+  const children = maybeStringifyChildren(rawChildren);
+  const CodeBlockComp =
+    typeof children === 'string' ? StringContent : ElementContent;
+  return (
+    <CodeBlockComp key={String(isBrowser)} {...props}>
+      {children}
+    </CodeBlockComp>
+  );
+}

package/lib/theme/ColorModeToggle/index.d.ts

@@ -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.
+ */
+import React from 'react';
+import type { Props } from '@theme/ColorModeToggle';
+declare function ColorModeToggle({ className, value, onChange }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColorModeToggle>;
+export default _default;

package/lib/theme/ColorModeToggle/index.js

@@ -0,0 +1,60 @@
+/**
+ * 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 useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
+import styles from './styles.module.css';
+function ColorModeToggle({className, value, onChange}) {
+  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/lib/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/lib/theme/Details/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/Details';
+export default function Details({ ...props }: Props): JSX.Element;

package/lib/theme/Details/index.js

@@ -0,0 +1,21 @@
+/**
+ * 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/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}) {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}

package/lib/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/lib/theme/DocBreadcrumbs/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+export default function DocBreadcrumbs(): JSX.Element | null;

package/lib/theme/DocBreadcrumbs/index.js

@@ -0,0 +1,115 @@
+/**
+ * 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 {
+  ThemeClassNames,
+  useSidebarBreadcrumbs,
+  useHomePageRoute,
+} from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import IconHome from '@theme/IconHome';
+import styles from './styles.module.css';
+// TODO move to design system folder
+function BreadcrumbsItemLink({children, href, isLast}) {
+  const className = 'breadcrumbs__link';
+  if (isLast) {
+    return (
+      <span className={className} itemProp="name">
+        {children}
+      </span>
+    );
+  }
+  return href ? (
+    <Link className={className} href={href} itemProp="item">
+      <span itemProp="name">{children}</span>
+    </Link>
+  ) : (
+    // TODO Google search console doesn't like breadcrumb items without href.
+    // The schema doesn't seem to require `id` for each `item`, although Google
+    // insist to infer one, even if it's invalid. Removing `itemProp="item
+    // name"` for now, since I don't know how to properly fix it.
+    // See https://github.com/facebook/docusaurus/issues/7241
+    <span className={className}>{children}</span>
+  );
+}
+// TODO move to design system folder
+function BreadcrumbsItem({children, active, index, addMicrodata}) {
+  return (
+    <li
+      {...(addMicrodata && {
+        itemScope: true,
+        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
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
+        href={homeHref}>
+        <IconHome className={styles.breadcrumbHomeIcon} />
+      </Link>
+    </li>
+  );
+}
+export default function DocBreadcrumbs() {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+  if (!breadcrumbs) {
+    return null;
+  }
+  return (
+    <nav
+      className={clsx(
+        ThemeClassNames.docs.docBreadcrumbs,
+        styles.breadcrumbsContainer,
+      )}
+      aria-label={translate({
+        id: 'theme.docs.breadcrumbs.navAriaLabel',
+        message: 'Breadcrumbs',
+        description: 'The ARIA label for the breadcrumbs',
+      })}>
+      <ul
+        className="breadcrumbs"
+        itemScope
+        itemType="https://schema.org/BreadcrumbList">
+        {homePageRoute && <HomeBreadcrumbItem />}
+        {breadcrumbs.map((item, idx) => {
+          const isLast = idx === breadcrumbs.length - 1;
+          return (
+            <BreadcrumbsItem
+              key={idx}
+              active={isLast}
+              index={idx}
+              addMicrodata={!!item.href}>
+              <BreadcrumbsItemLink href={item.href} isLast={isLast}>
+                {item.label}
+              </BreadcrumbsItemLink>
+            </BreadcrumbsItem>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/lib/theme/{Heading/styles.css → DocBreadcrumbs/styles.module.css}

@@ -5,19 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.anchor {
-  display: block;
-  position: relative;
-  top: -0.5rem;
-}
-
-.hash-link {
-  opacity: 0;
-  padding-left: 0.5rem;
-  transition: opacity var(--ifm-transition-fast);
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }
 
-.hash-link:focus,
-*:hover > .hash-link {
-  opacity: 1;
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
 }

package/lib/theme/DocCard/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocCard';
+export default function DocCard({ item }: Props): JSX.Element;