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

package/lib-next/theme/CodeBlock/index.js

@@ -1,268 +0,0 @@
-/**
- * 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, {useEffect, useState, useRef} from 'react';
-import clsx from 'clsx';
-import Highlight, {defaultProps} from 'prism-react-renderer';
-import copy from 'copy-text-to-clipboard';
-import rangeParser from 'parse-numeric-range';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
-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,
-  metastring,
-  title,
-}) {
-  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
-  // 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.
-
-  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 = parseCodeBlockTitle(metastring) || title;
-  const button = useRef(null);
-  let highlightLines = [];
-  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);
-  }
-
-  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 = rangeParser(range);
-    code = lines.join('\n');
-  }
-
-  const handleCopyCode = () => {
-    copy(code);
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 2000);
-  };
-
-  return (
-    <Highlight
-      {...defaultProps}
-      key={String(mounted)}
-      theme={prismTheme}
-      code={code}
-      language={language}>
-      {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockContainer}>
-          {codeBlockTitle && (
-            <div style={style} className={styles.codeBlockTitle}>
-              {codeBlockTitle}
-            </div>
-          )}
-          <div className={clsx(styles.codeBlockContent, language)}>
-            <pre
-              /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-              tabIndex={0}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
-                [styles.codeBlockWithTitle]: codeBlockTitle,
-              })}
-              style={style}>
-              <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
-                  }
-
-                  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={translate({
-                id: 'theme.CodeBlock.copyButtonAriaLabel',
-                message: 'Copy code to clipboard',
-                description: 'The ARIA label for copy code blocks button',
-              })}
-              className={clsx(styles.copyButton, 'clean-btn')}
-              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>
-          </div>
-        </div>
-      )}
-    </Highlight>
-  );
-}

package/lib-next/theme/DocItem/index.js

@@ -1,117 +0,0 @@
-/**
- * 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 DocPaginator from '@theme/DocPaginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import Seo from '@theme/Seo';
-import LastUpdated from '@theme/LastUpdated';
-import TOC from '@theme/TOC';
-import EditThisPage from '@theme/EditThisPage';
-import {MainHeading} from '@theme/Heading';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import {useActivePlugin, useVersions} from '@theme/hooks/useDocs';
-
-function DocItem(props) {
-  const {content: DocContent, versionMetadata} = props;
-  const {metadata, frontMatter} = DocContent;
-  const {
-    image,
-    keywords,
-    hide_title: hideTitle,
-    hide_table_of_contents: hideTableOfContents,
-  } = frontMatter;
-  const {
-    description,
-    title,
-    editUrl,
-    lastUpdatedAt,
-    formattedLastUpdatedAt,
-    lastUpdatedBy,
-  } = metadata;
-  const {pluginId} = useActivePlugin({
-    failfast: true,
-  });
-  const versions = useVersions(pluginId); // If site is not versioned or only one version is included
-  // we don't show the version badge
-  // See https://github.com/facebook/docusaurus/issues/3362
-
-  const showVersionBadge = versions.length > 1; // We only add a title if:
-  // - user asks to hide it with frontmatter
-  // - the markdown content does not already contain a top-level h1 heading
-
-  const shouldAddTitle =
-    !hideTitle && typeof DocContent.contentTitle === 'undefined';
-  return (
-    <>
-      <Seo
-        {...{
-          title,
-          description,
-          keywords,
-          image,
-        }}
-      />
-
-      <div className="row">
-        <div
-          className={clsx('col', {
-            [styles.docItemCol]: !hideTableOfContents,
-          })}>
-          <DocVersionBanner versionMetadata={versionMetadata} />
-          <div className={styles.docItemContainer}>
-            <article>
-              {showVersionBadge && (
-                <span className="badge badge--secondary">
-                  Version: {versionMetadata.label}
-                </span>
-              )}
-
-              <div className="markdown">
-                {/*
-                Title can be declared inside md content or declared through frontmatter and added manually
-                To make both cases consistent, the added title is added under the same div.markdown block
-                See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
-                */}
-                {shouldAddTitle && <MainHeading>{title}</MainHeading>}
-
-                <DocContent />
-              </div>
-
-              {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
-                <footer className="row docusaurus-mt-lg">
-                  <div className="col">
-                    {editUrl && <EditThisPage editUrl={editUrl} />}
-                  </div>
-
-                  <div className={clsx('col', styles.lastUpdated)}>
-                    {(lastUpdatedAt || lastUpdatedBy) && (
-                      <LastUpdated
-                        lastUpdatedAt={lastUpdatedAt}
-                        formattedLastUpdatedAt={formattedLastUpdatedAt}
-                        lastUpdatedBy={lastUpdatedBy}
-                      />
-                    )}
-                  </div>
-                </footer>
-              )}
-            </article>
-
-            <DocPaginator metadata={metadata} />
-          </div>
-        </div>
-        {!hideTableOfContents && DocContent.toc && (
-          <div className="col col--3">
-            <TOC toc={DocContent.toc} />
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-export default DocItem;

package/lib-next/theme/DocPage/index.js

@@ -1,173 +0,0 @@
-/**
- * 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, {useState, useCallback} from 'react';
-import {MDXProvider} from '@mdx-js/react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import renderRoutes from '@docusaurus/renderRoutes';
-import Layout from '@theme/Layout';
-import DocSidebar from '@theme/DocSidebar';
-import MDXComponents from '@theme/MDXComponents';
-import NotFound from '@theme/NotFound';
-import IconArrow from '@theme/IconArrow';
-import {matchPath} from '@docusaurus/router';
-import {translate} from '@docusaurus/Translate';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import {ThemeClassNames, docVersionSearchTag} from '@docusaurus/theme-common';
-
-function getSidebar({versionMetadata, currentDocRoute}) {
-  function addTrailingSlash(str) {
-    return str.endsWith('/') ? str : `${str}/`;
-  }
-
-  function removeTrailingSlash(str) {
-    return str.endsWith('/') ? str.slice(0, -1) : str;
-  }
-
-  const {permalinkToSidebar, docsSidebars} = versionMetadata; // With/without trailingSlash, we should always be able to get the appropriate sidebar
-  // note: docs plugin permalinks currently never have trailing slashes
-  // trailingSlash is handled globally at the framework level, not plugin level
-
-  const sidebarName =
-    permalinkToSidebar[currentDocRoute.path] ||
-    permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] ||
-    permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)];
-  const sidebar = docsSidebars[sidebarName];
-  return {
-    sidebar,
-    sidebarName,
-  };
-}
-
-function DocPageContent({currentDocRoute, versionMetadata, children}) {
-  const {siteConfig, isClient} = useDocusaurusContext();
-  const {pluginId, version} = versionMetadata;
-  const {sidebarName, sidebar} = getSidebar({
-    versionMetadata,
-    currentDocRoute,
-  });
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
-  const [hiddenSidebar, setHiddenSidebar] = useState(false);
-  const toggleSidebar = useCallback(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false);
-    }
-
-    setHiddenSidebarContainer(!hiddenSidebarContainer);
-  }, [hiddenSidebar]);
-  return (
-    <Layout
-      key={isClient}
-      wrapperClassName={ThemeClassNames.wrapper.docPages}
-      pageClassName={ThemeClassNames.page.docPage}
-      searchMetadatas={{
-        version,
-        tag: docVersionSearchTag(pluginId, version),
-      }}>
-      <div className={styles.docPage}>
-        {sidebar && (
-          <aside
-            className={clsx(styles.docSidebarContainer, {
-              [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
-            })}
-            onTransitionEnd={(e) => {
-              if (
-                !e.currentTarget.classList.contains(styles.docSidebarContainer)
-              ) {
-                return;
-              }
-
-              if (hiddenSidebarContainer) {
-                setHiddenSidebar(true);
-              }
-            }}>
-            <DocSidebar
-              key={
-                // Reset sidebar state on sidebar changes
-                // See https://github.com/facebook/docusaurus/issues/3414
-                sidebarName
-              }
-              sidebar={sidebar}
-              path={currentDocRoute.path}
-              sidebarCollapsible={
-                siteConfig.themeConfig?.sidebarCollapsible ?? true
-              }
-              onCollapse={toggleSidebar}
-              isHidden={hiddenSidebar}
-            />
-
-            {hiddenSidebar && (
-              <div
-                className={styles.collapsedDocSidebar}
-                title={translate({
-                  id: 'theme.docs.sidebar.expandButtonTitle',
-                  message: 'Expand sidebar',
-                  description:
-                    'The ARIA label and title attribute for expand button of doc sidebar',
-                })}
-                aria-label={translate({
-                  id: 'theme.docs.sidebar.expandButtonAriaLabel',
-                  message: 'Expand sidebar',
-                  description:
-                    'The ARIA label and title attribute for expand button of doc sidebar',
-                })}
-                tabIndex={0}
-                role="button"
-                onKeyDown={toggleSidebar}
-                onClick={toggleSidebar}>
-                <IconArrow className={styles.expandSidebarButtonIcon} />
-              </div>
-            )}
-          </aside>
-        )}
-        <main
-          className={clsx(styles.docMainContainer, {
-            [styles.docMainContainerEnhanced]:
-              hiddenSidebarContainer || !sidebar,
-          })}>
-          <div
-            className={clsx(
-              'container padding-top--md padding-bottom--lg',
-              styles.docItemWrapper,
-              {
-                [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
-              },
-            )}>
-            <MDXProvider components={MDXComponents}>{children}</MDXProvider>
-          </div>
-        </main>
-      </div>
-    </Layout>
-  );
-}
-
-function DocPage(props) {
-  const {
-    route: {routes: docRoutes},
-    versionMetadata,
-    location,
-  } = props;
-  const currentDocRoute = docRoutes.find((docRoute) =>
-    matchPath(location.pathname, docRoute),
-  );
-
-  if (!currentDocRoute) {
-    return <NotFound {...props} />;
-  }
-
-  return (
-    <DocPageContent
-      currentDocRoute={currentDocRoute}
-      versionMetadata={versionMetadata}>
-      {renderRoutes(docRoutes, {
-        versionMetadata,
-      })}
-    </DocPageContent>
-  );
-}
-
-export default DocPage;

package/lib-next/theme/DocPage/styles.module.css

@@ -1,80 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
-}
-
-:global(.docs-wrapper) {
-  display: flex;
-}
-
-.docPage,
-.docMainContainer {
-  display: flex;
-  width: 100%;
-}
-
-@media (min-width: 997px) {
-  .docMainContainer {
-    flex-grow: 1;
-    max-width: calc(100% - var(--doc-sidebar-width));
-  }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docSidebarContainer {
-    width: var(--doc-sidebar-width);
-    margin-top: calc(-1 * var(--ifm-navbar-height));
-    border-right: 1px solid var(--ifm-toc-border-color);
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
-  }
-
-  .docSidebarContainerHidden {
-    width: var(--doc-sidebar-hidden-width);
-    cursor: pointer;
-  }
-
-  .collapsedDocSidebar {
-    position: sticky;
-    top: 0;
-    height: 100%;
-    max-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color var(--ifm-transition-fast) ease;
-  }
-
-  .collapsedDocSidebar:hover,
-  .collapsedDocSidebar:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-
-  .expandSidebarButtonIcon {
-    transform: rotate(0);
-  }
-  html[dir='rtl'] .expandSidebarButtonIcon {
-    transform: rotate(180deg);
-  }
-
-  html[data-theme='dark'] .collapsedDocSidebar:hover,
-  html[data-theme='dark'] .collapsedDocSidebar:focus {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  }
-}

package/lib-next/theme/DocPaginator/index.js

@@ -1,59 +0,0 @@
-/**
- * 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 Link from '@docusaurus/Link';
-import Translate, {translate} from '@docusaurus/Translate';
-
-function DocPaginator(props) {
-  const {metadata} = props;
-  return (
-    <nav
-      className="pagination-nav docusaurus-mt-lg"
-      aria-label={translate({
-        id: 'theme.docs.paginator.navAriaLabel',
-        message: 'Docs pages navigation',
-        description: 'The ARIA label for the docs pagination',
-      })}>
-      <div className="pagination-nav__item">
-        {metadata.previous && (
-          <Link
-            className="pagination-nav__link"
-            to={metadata.previous.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {metadata.previous.title}
-            </div>
-          </Link>
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {metadata.next && (
-          <Link className="pagination-nav__link" to={metadata.next.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              {metadata.next.title} &raquo;
-            </div>
-          </Link>
-        )}
-      </div>
-    </nav>
-  );
-}
-
-export default DocPaginator;