@docusaurus/theme-classic 2.0.0-beta.1ab8aa0af → 2.0.0-beta.2

package/src/theme/Toggle/styles.css

@@ -0,0 +1,103 @@
+/**
+ * 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/src/theme/Toggle/styles.module.css

@@ -15,100 +15,3 @@
 .toggle::before {
   position: absolute;
 }
-
-/**
- * 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
- */
-:global(.react-toggle) {
-  touch-action: pan-x;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-:global(.react-toggle-screenreader-only) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-:global(.react-toggle--disabled) {
-  cursor: not-allowed;
-}
-
-:global(.react-toggle-track) {
-  width: 50px;
-  height: 24px;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  transition: all 0.2s ease;
-}
-
-:global(.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;
-}
-
-:global([data-theme='dark'] .react-toggle .react-toggle-track-check),
-:global(.react-toggle--checked .react-toggle-track-check) {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-:global(.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;
-}
-
-:global([data-theme='dark'] .react-toggle .react-toggle-track-x),
-:global(.react-toggle--checked .react-toggle-track-x) {
-  opacity: 0;
-}
-
-:global(.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;
-}
-
-:global([data-theme='dark'] .react-toggle .react-toggle-thumb),
-:global(.react-toggle--checked .react-toggle-thumb) {
-  left: 27px;
-}
-
-:global(.react-toggle--focus .react-toggle-thumb),
-:global(.react-toggle:hover .react-toggle-thumb) {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
-}
-
-:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
-}

package/src/theme/UserPreferencesProvider/index.tsx

@@ -8,21 +8,16 @@
 import React from 'react';
 
 import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
-import useAnnouncementBar from '@theme/hooks/useAnnouncementBar';
 import UserPreferencesContext from '@theme/UserPreferencesContext';
 import type {Props} from '@theme/UserPreferencesProvider';
 
 function UserPreferencesProvider(props: Props): JSX.Element {
   const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-  const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar();
-
   return (
     <UserPreferencesContext.Provider
       value={{
         tabGroupChoices,
         setTabGroupChoices,
-        isAnnouncementBarClosed,
-        closeAnnouncementBar,
       }}>
       {props.children}
     </UserPreferencesContext.Provider>

package/src/theme/hooks/useHideableNavbar.ts

@@ -8,7 +8,7 @@
 import {useState, useCallback, useEffect, useRef} from 'react';
 import {useLocation} from '@docusaurus/router';
 import useScrollPosition from '@theme/hooks/useScrollPosition';
-import {useChangeRoute} from '@docusaurus/theme-common';
+import {useLocationChange} from '@docusaurus/theme-common';
 import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
 
 const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
@@ -56,8 +56,8 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
     [navbarHeight, isFocusedAnchor],
   );
 
-  useChangeRoute(() => {
-    if (!hideOnScroll) {
+  useLocationChange((locationChangeEvent) => {
+    if (!hideOnScroll || locationChangeEvent.location.hash) {
       return;
     }
 

package/src/theme/hooks/useTabGroupChoice.ts

@@ -22,12 +22,12 @@ const useTabGroupChoice = (): useTabGroupChoiceReturns => {
   useEffect(() => {
     try {
       const localStorageChoices = {};
-      for (const storageKey of listStorageKeys()) {
+      listStorageKeys().forEach((storageKey) => {
         if (storageKey.startsWith(TAB_CHOICE_PREFIX)) {
           const groupId = storageKey.substring(TAB_CHOICE_PREFIX.length);
           localStorageChoices[groupId] = createStorageSlot(storageKey).get();
         }
-      }
+      });
       setChoices(localStorageChoices);
     } catch (err) {
       console.error(err);

package/src/theme/hooks/useThemeContext.ts

@@ -14,7 +14,7 @@ function useThemeContext(): ThemeContextProps {
   const context = useContext<ThemeContextProps | undefined>(ThemeContext);
   if (context == null) {
     throw new Error(
-      '`useThemeContext` is used outside of `Layout` Component. See https://docusaurus.io/docs/api/themes/configuration#usethemecontext.',
+      '"useThemeContext" is used outside of "Layout" component. Please see https://docusaurus.io/docs/api/themes/configuration#usethemecontext.',
     );
   }
   return context;

package/src/theme/hooks/useUserPreferencesContext.ts

@@ -16,7 +16,7 @@ function useUserPreferencesContext(): UserPreferencesContextProps {
   );
   if (context == null) {
     throw new Error(
-      '`useUserPreferencesContext` is used outside of `Layout` Component.',
+      '"useUserPreferencesContext" is used outside of "Layout" component.',
     );
   }
   return context;

package/src/types.d.ts

@@ -114,16 +114,7 @@ declare module '@theme/Heading' {
 
   const Heading: (Tag: HeadingType) => (props: Props) => JSX.Element;
   export default Heading;
-}
-
-declare module '@theme/hooks/useAnnouncementBar' {
-  export type useAnnouncementBarReturns = {
-    readonly isAnnouncementBarClosed: boolean;
-    readonly closeAnnouncementBar: () => void;
-  };
-
-  const useAnnouncementBar: () => useAnnouncementBarReturns;
-  export default useAnnouncementBar;
+  export const MainHeading: (props: Props) => JSX.Element;
 }
 
 declare module '@theme/hooks/useHideableNavbar' {
@@ -213,8 +204,6 @@ declare module '@theme/hooks/useUserPreferencesContext' {
   export type UserPreferencesContextProps = {
     tabGroupChoices: {readonly [groupId: string]: string};
     setTabGroupChoices: (groupId: string, newChoice: string) => void;
-    isAnnouncementBarClosed: boolean;
-    closeAnnouncementBar: () => void;
   };
 
   export default function useUserPreferencesContext(): UserPreferencesContextProps;
@@ -598,3 +587,12 @@ declare module '@theme/IconLanguage' {
   const IconLanguage: (props: Props) => JSX.Element;
   export default IconLanguage;
 }
+
+declare module '@theme/IconExternalLink' {
+  import type {ComponentProps} from 'react';
+
+  export type Props = ComponentProps<'svg'>;
+
+  const IconExternalLink: (props: Props) => JSX.Element;
+  export default IconExternalLink;
+}

package/src/validateThemeConfig.js

@@ -50,7 +50,7 @@ const BaseNavbarItemSchema = Joi.object({
   href: URISchema,
   label: Joi.string(),
   className: Joi.string(),
-  prependBaseUrlToHref: Joi.string(),
+  prependBaseUrlToHref: Joi.bool(),
 })
   // We allow any unknown attributes on the links
   // (users may need additional attributes like target, aria-role, data-customAttribute...)
@@ -250,8 +250,8 @@ const ThemeConfigSchema = Joi.object({
   announcementBar: Joi.object({
     id: Joi.string().default('announcement-bar'),
     content: Joi.string(),
-    backgroundColor: Joi.string().default('#fff'),
-    textColor: Joi.string().default('#000'),
+    backgroundColor: Joi.string(),
+    textColor: Joi.string(),
     isCloseable: Joi.bool().default(true),
   }).optional(),
   navbar: Joi.object({

package/update-code-translations.js

@@ -53,6 +53,7 @@ async function extractThemeCodeMessages() {
   const {
     globSourceCodeFilePaths,
     extractAllSourceCodeFileTranslations,
+    // eslint-disable-next-line global-require
   } = require('@docusaurus/core/lib/server/translations/translationsExtractor');
 
   const filePaths = (

package/lib-next/theme/NavbarItem/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.
- */
-
-@media (max-width: 996px) {
-  .searchWrapper {
-    position: absolute;
-    right: var(--ifm-navbar-padding-horizontal);
-  }
-}

package/src/theme/NavbarItem/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.
- */
-
-@media (max-width: 996px) {
-  .searchWrapper {
-    position: absolute;
-    right: var(--ifm-navbar-padding-horizontal);
-  }
-}

package/src/theme/hooks/useAnnouncementBar.ts

@@ -1,58 +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';
-import type {useAnnouncementBarReturns} from '@theme/hooks/useAnnouncementBar';
-
-const DismissStorage = createStorageSlot('docusaurus.announcement.dismiss');
-const IdStorage = createStorageSlot('docusaurus.announcement.id');
-
-const useAnnouncementBar = (): useAnnouncementBarReturns => {
-  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;