@docusaurus/theme-classic 2.0.0-beta.ff31de0ff → 2.0.1

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,37 +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} />}
-      {pageImage && <meta name="twitter:card" content="summary_large_image" />}
-    </Head>
-  );
-}

package/lib-next/theme/SkipToContent/index.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, {useRef} from 'react';
-import Translate from '@docusaurus/Translate';
-import {useChangeRoute} 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 handleSkip = (e) => {
-    e.preventDefault();
-    const targetElement =
-      document.querySelector('main:first-of-type') ||
-      document.querySelector('.main-wrapper');
-
-    if (targetElement) {
-      programmaticFocus(targetElement);
-    }
-  };
-
-  useChangeRoute(() => {
-    if (containerRef.current) {
-      programmaticFocus(containerRef.current);
-    }
-  });
-  return (
-    <div ref={containerRef}>
-      <a href="#main" 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,16 +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);
-  border-radius: var(--ifm-global-radius);
-  font: inherit;
-  border: none;
-}
-
-.skipToContent:focus {
-  left: 1rem;
-}

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) + 2rem);
-}
-
-@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/TOCInline/styles.module.css

@@ -1,12 +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.
- */
-
-.tableOfContentsInline ul {
-  list-style-type: disc;
-  font-size: initial;
-  padding-top: 0;
-}

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,42 +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 renderedSourceNames = isClient
-    ? isDarkTheme
-      ? ['dark']
-      : ['light'] // 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,11 +0,0 @@
-.themedImage {
-  display: none;
-}
-
-html[data-theme='light'] .themedImage--light {
-  display: initial;
-}
-
-html[data-theme='dark'] .themedImage--dark {
-  display: initial;
-}

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

@@ -1,95 +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, useRef, memo} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-const Dark = ({icon, style}) => (
-  <span className={clsx(styles.toggle, styles.dark)} style={style}>
-    {icon}
-  </span>
-);
-
-const Light = ({icon, style}) => (
-  <span className={clsx(styles.toggle, styles.light)} style={style}>
-    {icon}
-  </span>
-); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-const Toggle = memo(
-  ({className, icons, checked: defaultChecked, disabled, onChange}) => {
-    const [checked, setChecked] = useState(defaultChecked);
-    const [focused, setFocused] = useState(false);
-    const inputRef = useRef(null);
-
-    const handleToggle = (e) => {
-      const checkbox = inputRef.current;
-
-      if (!checkbox) {
-        return;
-      }
-
-      if (e.target !== checkbox) {
-        e.preventDefault();
-        checkbox.focus();
-        checkbox.click();
-        return;
-      }
-
-      setChecked(checkbox?.checked);
-    };
-
-    return (
-      <div
-        className={clsx('react-toggle', className, {
-          'react-toggle--checked': checked,
-          'react-toggle--focus': focused,
-          'react-toggle--disabled': disabled,
-        })}
-        role="button"
-        tabIndex={-1}
-        onClick={handleToggle}>
-        <div className="react-toggle-track">
-          <div className="react-toggle-track-check">{icons.checked}</div>
-          <div className="react-toggle-track-x">{icons.unchecked}</div>
-        </div>
-        <div className="react-toggle-thumb" />
-
-        <input
-          ref={inputRef}
-          checked={checked}
-          type="checkbox"
-          className="react-toggle-screenreader-only"
-          aria-label="Switch between dark and light mode"
-          onChange={onChange}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-        />
-      </div>
-    );
-  },
-);
-export default function (props) {
-  const {
-    colorMode: {
-      switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
-    },
-  } = useThemeConfig();
-  const {isClient} = useDocusaurusContext();
-  return (
-    <Toggle
-      disabled={!isClient}
-      icons={{
-        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
-      }}
-      {...props}
-    />
-  );
-}