@docusaurus/theme-classic 2.0.0-beta.fc64c12e4 → 2.0.0

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

@@ -1,20 +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 clsx from 'clsx';
-import {Details as DetailsGeneric} from '@docusaurus/theme-common';
-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-next/theme/Details/styles.module.css

@@ -1,13 +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.
- */
-
-.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-next/theme/DocItem/index.js

@@ -1,131 +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 clsx from 'clsx';
-import {useActivePlugin, useVersions} from '@theme/hooks/useDocs';
-import useWindowSize from '@theme/hooks/useWindowSize';
-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 TOCCollapsible from '@theme/TOCCollapsible';
-import EditThisPage from '@theme/EditThisPage';
-import {MainHeading} from '@theme/Heading';
-import styles from './styles.module.css';
-
-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';
-  const windowSize = useWindowSize();
-  const canRenderTOC =
-    !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
-  const renderTocDesktop =
-    canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
-  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>
-              )}
-
-              {canRenderTOC && (
-                <TOCCollapsible
-                  toc={DocContent.toc}
-                  className={styles.tocMobile}
-                />
-              )}
-
-              <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>
-        {renderTocDesktop && (
-          <div className="col col--3">
-            <TOC toc={DocContent.toc} />
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-export default DocItem;

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

@@ -1,32 +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.
- */
-
-.docItemContainer article *:first-child,
-.docItemContainer header + * {
-  margin-top: 0;
-}
-
-.lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
-  font-size: smaller;
-}
-
-@media only screen and (min-width: 997px) {
-  .docItemCol {
-    max-width: 75% !important;
-  }
-
-  .lastUpdated {
-    text-align: right;
-  }
-
-  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
-  .tocMobile {
-    display: none;
-  }
-}

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

@@ -1,149 +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 BackToTopButton from '@theme/BackToTopButton';
-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 DocPageContent({currentDocRoute, versionMetadata, children}) {
-  const {isClient} = useDocusaurusContext();
-  const {pluginId, version} = versionMetadata;
-  const sidebarName = currentDocRoute.sidebar;
-  const sidebar = sidebarName
-    ? versionMetadata.docsSidebars[sidebarName]
-    : undefined;
-  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}>
-        <BackToTopButton />
-
-        {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}
-              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,85 +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%;
-}
-
-.docSidebarContainer {
-  display: none;
-}
-
-@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 {
-    display: block;
-    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;

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

@@ -1,121 +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} from 'react';
-import clsx from 'clsx';
-import {
-  useThemeConfig,
-  useAnnouncementBar,
-  MobileSecondaryMenuFiller,
-} from '@docusaurus/theme-common';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import useScrollPosition from '@theme/hooks/useScrollPosition';
-import Logo from '@theme/Logo';
-import IconArrow from '@theme/IconArrow';
-import {translate} from '@docusaurus/Translate';
-import {DocSidebarItems} from '@theme/DocSidebarItem';
-import styles from './styles.module.css';
-
-function useShowAnnouncementBar() {
-  const {isClosed} = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(!isClosed);
-  useScrollPosition(({scrollY}) => {
-    if (!isClosed) {
-      setShowAnnouncementBar(scrollY === 0);
-    }
-  });
-  return showAnnouncementBar;
-}
-
-function HideableSidebarButton({onClick}) {
-  return (
-    <button
-      type="button"
-      title={translate({
-        id: 'theme.docs.sidebar.collapseButtonTitle',
-        message: 'Collapse sidebar',
-        description: 'The title attribute for collapse button of doc sidebar',
-      })}
-      aria-label={translate({
-        id: 'theme.docs.sidebar.collapseButtonAriaLabel',
-        message: 'Collapse sidebar',
-        description: 'The title attribute for collapse button of doc sidebar',
-      })}
-      className={clsx(
-        'button button--secondary button--outline',
-        styles.collapseSidebarButton,
-      )}
-      onClick={onClick}>
-      <IconArrow className={styles.collapseSidebarButtonIcon} />
-    </button>
-  );
-}
-
-function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
-  const showAnnouncementBar = useShowAnnouncementBar();
-  const {
-    navbar: {hideOnScroll},
-    hideableSidebar,
-  } = useThemeConfig();
-  const {isClosed: isAnnouncementBarClosed} = useAnnouncementBar();
-  return (
-    <div
-      className={clsx(styles.sidebar, {
-        [styles.sidebarWithHideableNavbar]: hideOnScroll,
-        [styles.sidebarHidden]: isHidden,
-      })}>
-      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      <nav
-        className={clsx('menu thin-scrollbar', styles.menu, {
-          [styles.menuWithAnnouncementBar]:
-            !isAnnouncementBarClosed && showAnnouncementBar,
-        })}>
-        <ul className="menu__list">
-          <DocSidebarItems items={sidebar} activePath={path} />
-        </ul>
-      </nav>
-      {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
-    </div>
-  );
-}
-
-const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => {
-  return (
-    <ul className="menu__list">
-      <DocSidebarItems
-        items={sidebar}
-        activePath={path}
-        onItemClick={() => toggleSidebar()}
-      />
-    </ul>
-  );
-};
-
-function DocSidebarMobile(props) {
-  return (
-    <MobileSecondaryMenuFiller
-      component={DocSidebarMobileSecondaryMenu}
-      props={props}
-    />
-  );
-}
-
-const DocSidebarDesktopMemo = React.memo(DocSidebarDesktop);
-const DocSidebarMobileMemo = React.memo(DocSidebarMobile);
-export default function DocSidebar(props) {
-  const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
-
-  const shouldRenderSidebarDesktop =
-    windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
-
-  const shouldRenderSidebarMobile = windowSize === 'mobile';
-  return (
-    <>
-      {shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}
-      {shouldRenderSidebarMobile && <DocSidebarMobileMemo {...props} />}
-    </>
-  );
-}