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

package/lib-next/theme/NavbarItem/LocaleDropdownNavbarItem.js

@@ -1,66 +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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import IconLanguage from '@theme/IconLanguage';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useAlternatePageUtils} from '@docusaurus/theme-common';
-export default function LocaleDropdownNavbarItem({
-  mobile,
-  dropdownItemsBefore,
-  dropdownItemsAfter,
-  ...props
-}) {
-  const {
-    i18n: {currentLocale, locales, localeConfigs},
-  } = useDocusaurusContext();
-  const alternatePageUtils = useAlternatePageUtils();
-
-  function getLocaleLabel(locale) {
-    return localeConfigs[locale].label;
-  }
-
-  const localeItems = locales.map((locale) => {
-    const to = `pathname://${alternatePageUtils.createUrl({
-      locale,
-      fullyQualified: false,
-    })}`;
-    return {
-      isNavLink: true,
-      label: getLocaleLabel(locale),
-      to,
-      target: '_self',
-      autoAddBaseUrl: false,
-      className: locale === currentLocale ? 'dropdown__link--active' : '',
-      style: {
-        textTransform: 'capitalize',
-      },
-    };
-  });
-  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; // Mobile is handled a bit differently
-
-  const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
-  return (
-    <DefaultNavbarItem
-      {...props}
-      href="#"
-      mobile={mobile}
-      label={
-        <span>
-          <IconLanguage
-            style={{
-              verticalAlign: 'text-bottom',
-              marginRight: 5,
-            }}
-          />
-          <span>{dropdownLabel}</span>
-        </span>
-      }
-      items={items}
-    />
-  );
-}

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

@@ -1,41 +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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
-import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
-const NavbarItemComponents = {
-  default: () => DefaultNavbarItem,
-  localeDropdown: () => LocaleDropdownNavbarItem,
-  search: () => SearchNavbarItem,
-  // Need to lazy load these items as we don't know for sure the docs plugin is loaded
-  // See https://github.com/facebook/docusaurus/issues/3360
-  docsVersion: () =>
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-    require('@theme/NavbarItem/DocsVersionNavbarItem').default,
-  docsVersionDropdown: () =>
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-    require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
-  doc: () =>
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-    require('@theme/NavbarItem/DocNavbarItem').default,
-};
-
-const getNavbarItemComponent = (type = 'default') => {
-  const navbarItemComponent = NavbarItemComponents[type];
-
-  if (!navbarItemComponent) {
-    throw new Error(`No NavbarItem component found for type "${type}".`);
-  }
-
-  return navbarItemComponent();
-};
-
-export default function NavbarItem({type, ...props}) {
-  const NavbarItemComponent = getNavbarItemComponent(type);
-  return <NavbarItemComponent {...props} />;
-}

package/lib-next/theme/NotFound.js

@@ -1,50 +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 Layout from '@theme/Layout';
-import Translate, {translate} from '@docusaurus/Translate';
-
-function NotFound() {
-  return (
-    <Layout
-      title={translate({
-        id: 'theme.NotFound.title',
-        message: 'Page Not Found',
-      })}>
-      <main className="container margin-vert--xl">
-        <div className="row">
-          <div className="col col--6 col--offset-3">
-            <h1 className="hero__title">
-              <Translate
-                id="theme.NotFound.title"
-                description="The title of the 404 page">
-                Page Not Found
-              </Translate>
-            </h1>
-            <p>
-              <Translate
-                id="theme.NotFound.p1"
-                description="The first paragraph of the 404 page">
-                We could not find what you were looking for.
-              </Translate>
-            </p>
-            <p>
-              <Translate
-                id="theme.NotFound.p2"
-                description="The 2nd paragraph of the 404 page">
-                Please contact the owner of the site that linked you to the
-                original URL and let them know their link is broken.
-              </Translate>
-            </p>
-          </div>
-        </div>
-      </main>
-    </Layout>
-  );
-}
-
-export default NotFound;

package/lib-next/theme/SearchBar.js

@@ -1,11 +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.
- */
-// By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this file, it is your responsibility to provide an implementation
-// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
-// npm run swizzle @docusaurus/theme-search-algolia SearchBar
-export {default} from '@docusaurus/Noop';

package/lib-next/theme/SearchMetadatas/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 Head from '@docusaurus/Head';
-// Note: we don't couple this to Algolia/DocSearch on purpose
-// We may want to support other search engine plugins too
-// Search plugins should swizzle/override this comp to add their behavior
-export default function SearchMetadatas({locale, version, tag}) {
-  return (
-    <Head>
-      {locale && <meta name="docusaurus_locale" content={locale} />}
-      {version && <meta name="docusaurus_version" content={version} />}
-      {tag && <meta name="docusaurus_tag" content={tag} />}
-    </Head>
-  );
-}

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

@@ -1,36 +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 Head from '@docusaurus/Head';
-import {useThemeConfig, useTitleFormatter} from '@docusaurus/theme-common';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-export default function Seo({title, description, keywords, image}) {
-  const {image: defaultImage} = useThemeConfig();
-  const pageTitle = useTitleFormatter(title);
-  const pageImage = useBaseUrl(image || defaultImage, {
-    absolute: true,
-  });
-  return (
-    <Head>
-      {title && <title>{pageTitle}</title>}
-      {title && <meta property="og:title" content={pageTitle} />}
-
-      {description && <meta name="description" content={description} />}
-      {description && <meta property="og:description" content={description} />}
-
-      {keywords && (
-        <meta
-          name="keywords"
-          content={Array.isArray(keywords) ? keywords.join(',') : keywords}
-        />
-      )}
-
-      {pageImage && <meta property="og:image" content={pageImage} />}
-      {pageImage && <meta name="twitter:image" content={pageImage} />}
-    </Head>
-  );
-}

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

@@ -1,53 +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, {useRef} from 'react';
-import {useHistory} from '@docusaurus/router';
-import Translate from '@docusaurus/Translate';
-import {useLocationChange} from '@docusaurus/theme-common';
-import styles from './styles.module.css';
-
-function programmaticFocus(el) {
-  el.setAttribute('tabindex', '-1');
-  el.focus();
-  el.removeAttribute('tabindex');
-}
-
-function SkipToContent() {
-  const containerRef = useRef(null);
-  const {action} = useHistory();
-
-  const handleSkip = (e) => {
-    e.preventDefault();
-    const targetElement =
-      document.querySelector('main:first-of-type') ||
-      document.querySelector('.main-wrapper');
-
-    if (targetElement) {
-      programmaticFocus(targetElement);
-    }
-  };
-
-  useLocationChange(({location}) => {
-    if (containerRef.current && !location.hash && action !== 'POP') {
-      programmaticFocus(containerRef.current);
-    }
-  });
-  return (
-    <div ref={containerRef}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
-        <Translate
-          id="theme.common.skipToMainContent"
-          description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
-          Skip to main content
-        </Translate>
-      </a>
-    </div>
-  );
-}
-
-export default SkipToContent;

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

@@ -1,14 +0,0 @@
-.skipToContent {
-  position: fixed;
-  top: 1rem;
-  left: 100%;
-  z-index: calc(var(--ifm-z-index-fixed) + 1);
-  padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
-  color: var(--ifm-color-emphasis-900);
-  background-color: var(--ifm-background-surface-color);
-}
-
-.skipToContent:focus {
-  left: 1rem;
-  box-shadow: var(--ifm-global-shadow-md);
-}

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

@@ -1,52 +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 useTOCHighlight from '@theme/hooks/useTOCHighlight';
-import styles from './styles.module.css';
-const LINK_CLASS_NAME = 'table-of-contents__link';
-const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
-const TOP_OFFSET = 100;
-/* eslint-disable jsx-a11y/control-has-associated-label */
-
-function Headings({toc, isChild}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return (
-    <ul
-      className={
-        isChild ? '' : 'table-of-contents table-of-contents__left-border'
-      }>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: heading.value,
-            }}
-          />
-          <Headings isChild toc={heading.children} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function TOC({toc}) {
-  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
-  return (
-    <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
-      <Headings toc={toc} />
-    </div>
-  );
-}
-
-export default TOC;

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

@@ -1,23 +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.
- */
-
-.tableOfContents {
-  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
-  overflow-y: auto;
-  position: sticky;
-  top: calc(var(--ifm-navbar-height) + 1rem);
-}
-
-@media only screen and (max-width: 996px) {
-  .tableOfContents {
-    display: none;
-  }
-
-  .docItemContainer {
-    padding: 0 0.3rem;
-  }
-}

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

@@ -1,43 +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 styles from './styles.module.css';
-
-/* eslint-disable jsx-a11y/control-has-associated-label */
-function HeadingsInline({toc, isChild}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return (
-    <ul className={isChild ? '' : 'table-of-contents'}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`} // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: heading.value,
-            }}
-          />
-          <HeadingsInline isChild toc={heading.children} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function TOCInline({toc}) {
-  return (
-    <div className={clsx(styles.tableOfContentsInline)}>
-      <HeadingsInline toc={toc} />
-    </div>
-  );
-}
-
-export default TOCInline;

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

@@ -1,144 +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, cloneElement, Children} from 'react';
-import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-function isInViewport(element) {
-  const {top, left, bottom, right} = element.getBoundingClientRect();
-  const {innerHeight, innerWidth} = window;
-  return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0;
-}
-
-const keys = {
-  left: 37,
-  right: 39,
-};
-
-function Tabs(props) {
-  const {lazy, block, defaultValue, values, groupId, className} = props;
-  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
-  const children = Children.toArray(props.children);
-  const tabRefs = [];
-
-  if (groupId != null) {
-    const relevantTabGroupChoice = tabGroupChoices[groupId];
-
-    if (
-      relevantTabGroupChoice != null &&
-      relevantTabGroupChoice !== selectedValue &&
-      values.some((value) => value.value === relevantTabGroupChoice)
-    ) {
-      setSelectedValue(relevantTabGroupChoice);
-    }
-  }
-
-  const handleTabChange = (event) => {
-    const selectedTab = event.currentTarget;
-    const selectedTabIndex = tabRefs.indexOf(selectedTab);
-    const selectedTabValue = values[selectedTabIndex].value;
-    setSelectedValue(selectedTabValue);
-
-    if (groupId != null) {
-      setTabGroupChoices(groupId, selectedTabValue);
-      setTimeout(() => {
-        if (isInViewport(selectedTab)) {
-          return;
-        }
-
-        selectedTab.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth',
-        });
-        selectedTab.classList.add(styles.tabItemActive);
-        setTimeout(
-          () => selectedTab.classList.remove(styles.tabItemActive),
-          2000,
-        );
-      }, 150);
-    }
-  };
-
-  const handleKeydown = (event) => {
-    let focusElement;
-
-    switch (event.keyCode) {
-      case keys.right: {
-        const nextTab = tabRefs.indexOf(event.target) + 1;
-        focusElement = tabRefs[nextTab] || tabRefs[0];
-        break;
-      }
-
-      case keys.left: {
-        const prevTab = tabRefs.indexOf(event.target) - 1;
-        focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1];
-        break;
-      }
-
-      default:
-        break;
-    }
-
-    focusElement?.focus();
-  };
-
-  return (
-    <div className="tabs-container">
-      <ul
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          'tabs',
-          {
-            'tabs--block': block,
-          },
-          className,
-        )}>
-        {values.map(({value, label}) => (
-          <li
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            className={clsx('tabs__item', styles.tabItem, {
-              'tabs__item--active': selectedValue === value,
-            })}
-            key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
-            onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
-            onClick={handleTabChange}>
-            {label}
-          </li>
-        ))}
-      </ul>
-
-      {lazy ? (
-        cloneElement(
-          children.filter(
-            (tabItem) => tabItem.props.value === selectedValue,
-          )[0],
-          {
-            className: 'margin-vert--md',
-          },
-        )
-      ) : (
-        <div className="margin-vert--md">
-          {children.map((tabItem, i) =>
-            cloneElement(tabItem, {
-              key: i,
-              hidden: tabItem.props.value !== selectedValue,
-            }),
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Tabs;

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

@@ -1,23 +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.
- */
-
-.tabItem {
-  margin-top: 0 !important;
-}
-
-.tabItemActive {
-  animation: blink 0.5s ease-in-out 5;
-}
-
-@keyframes blink {
-  0% {
-    background-color: var(--ifm-hover-overlay);
-  }
-  100% {
-    background-color: rgba(0, 0, 0, 0);
-  }
-}

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

@@ -1,25 +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 useTheme from '@theme/hooks/useTheme';
-import ThemeContext from '@theme/ThemeContext';
-
-function ThemeProvider(props) {
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useTheme();
-  return (
-    <ThemeContext.Provider
-      value={{
-        isDarkTheme,
-        setLightTheme,
-        setDarkTheme,
-      }}>
-      {props.children}
-    </ThemeContext.Provider>
-  );
-}
-
-export default ThemeProvider;

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

@@ -1,41 +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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useThemeContext from '@theme/hooks/useThemeContext';
-import styles from './styles.module.css';
-
-const ThemedImage = (props) => {
-  const {isClient} = useDocusaurusContext();
-  const {isDarkTheme} = useThemeContext();
-  const {sources, className, alt = '', ...propsRest} = props;
-  const clientThemes = isDarkTheme ? ['dark'] : ['light'];
-  const renderedSourceNames = isClient
-    ? clientThemes // We need to render both images on the server to avoid flash
-    : // See https://github.com/facebook/docusaurus/pull/3730
-      ['light', 'dark'];
-  return (
-    <>
-      {renderedSourceNames.map((sourceName) => (
-        <img
-          key={sourceName}
-          src={sources[sourceName]}
-          alt={alt}
-          className={clsx(
-            styles.themedImage,
-            styles[`themedImage--${sourceName}`],
-            className,
-          )}
-          {...propsRest}
-        />
-      ))}
-    </>
-  );
-};
-
-export default ThemedImage;

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

@@ -1,18 +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.
- */
-
-.themedImage {
-  display: none;
-}
-
-html[data-theme='light'] .themedImage--light {
-  display: initial;
-}
-
-html[data-theme='dark'] .themedImage--dark {
-  display: initial;
-}