@docusaurus/theme-classic 2.0.0-beta.2 → 2.0.0-beta.22

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;
-}

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

@@ -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.
- */
-import React, {useState, useRef, memo} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import clsx from 'clsx';
-import './styles.css';
-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);
-    return (
-      <div
-        className={clsx('react-toggle', className, {
-          'react-toggle--checked': checked,
-          'react-toggle--focus': focused,
-          'react-toggle--disabled': disabled,
-        })}>
-        <div
-          className="react-toggle-track"
-          role="button"
-          tabIndex={-1}
-          onClick={() => inputRef.current?.click()}>
-          <div className="react-toggle-track-check">{icons.checked}</div>
-          <div className="react-toggle-track-x">{icons.unchecked}</div>
-          <div className="react-toggle-thumb" />
-        </div>
-
-        <input
-          ref={inputRef}
-          checked={checked}
-          type="checkbox"
-          className="react-toggle-screenreader-only"
-          aria-label="Switch between dark and light mode"
-          onChange={onChange}
-          onClick={() => setChecked(!checked)}
-          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}
-    />
-  );
-}

package/lib-next/theme/Toggle/styles.css

@@ -1,103 +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.
- */
-
-/**
- * Styles for React Toggle
- * copied over because we want to allow user to swizzle it and modify the css
- * and also to make sure its compatible with our dark mode
- * https://github.com/aaronshaf/react-toggle/blob/master/style.css
- */
-.react-toggle {
-  touch-action: pan-x;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.react-toggle--disabled {
-  cursor: not-allowed;
-}
-
-.react-toggle-track {
-  width: 50px;
-  height: 24px;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  transition: all 0.2s ease;
-}
-
-.react-toggle-track-check {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin: auto 0;
-  left: 8px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-[data-theme='dark'] .react-toggle .react-toggle-track-check,
-.react-toggle--checked .react-toggle-track-check {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin: auto 0;
-  right: 10px;
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-[data-theme='dark'] .react-toggle .react-toggle-track-x,
-.react-toggle--checked .react-toggle-track-x {
-  opacity: 0;
-}
-
-.react-toggle-thumb {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4d4d4d;
-  border-radius: 50%;
-  background-color: #fafafa;
-  transition: all 0.25s ease;
-}
-
-[data-theme='dark'] .react-toggle .react-toggle-thumb,
-.react-toggle--checked .react-toggle-thumb {
-  left: 27px;
-}
-
-.react-toggle--focus .react-toggle-thumb,
-.react-toggle:hover .react-toggle-thumb {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
-}
-
-.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
-}

package/lib-next/theme/UserPreferencesContext.js

@@ -1,9 +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 {createContext} from 'react';
-const UserPreferencesContext = createContext(undefined);
-export default UserPreferencesContext;

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

@@ -1,24 +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 useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
-import UserPreferencesContext from '@theme/UserPreferencesContext';
-
-function UserPreferencesProvider(props) {
-  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-  return (
-    <UserPreferencesContext.Provider
-      value={{
-        tabGroupChoices,
-        setTabGroupChoices,
-      }}>
-      {props.children}
-    </UserPreferencesContext.Provider>
-  );
-}
-
-export default UserPreferencesProvider;

package/lib-next/theme/hooks/useAnnouncementBar.js

@@ -1,49 +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 {useState, useEffect, useCallback} from 'react';
-import {useThemeConfig, createStorageSlot} from '@docusaurus/theme-common';
-const DismissStorage = createStorageSlot('docusaurus.announcement.dismiss');
-const IdStorage = createStorageSlot('docusaurus.announcement.id');
-
-const useAnnouncementBar = () => {
-  const {announcementBar} = useThemeConfig();
-  const [isClosed, setClosed] = useState(true);
-  const handleClose = useCallback(() => {
-    DismissStorage.set('true');
-    setClosed(true);
-  }, []);
-  useEffect(() => {
-    if (!announcementBar) {
-      return;
-    }
-
-    const {id} = announcementBar;
-    let viewedId = IdStorage.get(); // retrocompatibility due to spelling mistake of default id
-    // see https://github.com/facebook/docusaurus/issues/3338
-
-    if (viewedId === 'annoucement-bar') {
-      viewedId = 'announcement-bar';
-    }
-
-    const isNewAnnouncement = id !== viewedId;
-    IdStorage.set(id);
-
-    if (isNewAnnouncement) {
-      DismissStorage.set('false');
-    }
-
-    if (isNewAnnouncement || DismissStorage.get() === 'false') {
-      setClosed(false);
-    }
-  }, []);
-  return {
-    isAnnouncementBarClosed: isClosed,
-    closeAnnouncementBar: handleClose,
-  };
-};
-
-export default useAnnouncementBar;

package/lib-next/theme/hooks/useContextualSearchFilters.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 {useAllDocsData, useActivePluginAndVersion} from '@theme/hooks/useDocs';
-import {
-  useDocsPreferredVersionByPluginId,
-  DEFAULT_SEARCH_TAG,
-  docVersionSearchTag,
-} from '@docusaurus/theme-common';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-// We may want to support multiple search engines, don't couple that to Algolia/DocSearch
-// Maybe users will want to use its own search engine solution
-export default function useContextualSearchFilters() {
-  const {i18n} = useDocusaurusContext();
-  const allDocsData = useAllDocsData();
-  const activePluginAndVersion = useActivePluginAndVersion();
-  const docsPreferredVersionByPluginId = useDocsPreferredVersionByPluginId();
-
-  function getDocPluginTags(pluginId) {
-    const activeVersion =
-      activePluginAndVersion?.activePlugin?.pluginId === pluginId
-        ? activePluginAndVersion.activeVersion
-        : undefined;
-    const preferredVersion = docsPreferredVersionByPluginId[pluginId];
-    const latestVersion = allDocsData[pluginId].versions.find((v) => v.isLast);
-    const version = activeVersion ?? preferredVersion ?? latestVersion;
-    return docVersionSearchTag(pluginId, version.name);
-  }
-
-  const tags = [
-    DEFAULT_SEARCH_TAG,
-    ...Object.keys(allDocsData).map(getDocPluginTags),
-  ];
-  return {
-    locale: i18n.currentLocale,
-    tags,
-  };
-}

package/lib-next/theme/hooks/useDocs.js

@@ -1,10 +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.
- */
-// Re-expose useDocs
-// Ensure it's always statically available even if user is not using the docs plugin
-// Problem reported for the blog-only mode: https://github.com/facebook/docusaurus/issues/3360
-export * from '@docusaurus/plugin-content-docs/lib/theme/hooks/useDocs';