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

package/lib/theme/Toggle/index.js

@@ -13,13 +13,15 @@ var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocus
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+require("./styles.css");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -52,36 +54,22 @@ const Toggle = (0, _react.memo)(({
   const [checked, setChecked] = (0, _react.useState)(defaultChecked);
   const [focused, setFocused] = (0, _react.useState)(false);
   const inputRef = (0, _react.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 === null || checkbox === void 0 ? void 0 : checkbox.checked);
-  };
-
   return <div className={(0, _clsx.default)('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" role="button" tabIndex={-1} onClick={() => {
+      var _inputRef$current;
+
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _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>
-        <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)} />
+        <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>;
 });
 

package/lib/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/lib/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/lib/theme/UserPreferencesProvider/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useTabGroupChoice = _interopRequireDefault(require("@theme/hooks/useTabGroupChoice"));
 
-var _useAnnouncementBar = _interopRequireDefault(require("@theme/hooks/useAnnouncementBar"));
-
 var _UserPreferencesContext = _interopRequireDefault(require("@theme/UserPreferencesContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,15 +24,9 @@ function UserPreferencesProvider(props) {
     tabGroupChoices,
     setTabGroupChoices
   } = (0, _useTabGroupChoice.default)();
-  const {
-    isAnnouncementBarClosed,
-    closeAnnouncementBar
-  } = (0, _useAnnouncementBar.default)();
   return <_UserPreferencesContext.default.Provider value={{
     tabGroupChoices,
-    setTabGroupChoices,
-    isAnnouncementBarClosed,
-    closeAnnouncementBar
+    setTabGroupChoices
   }}>
       {props.children}
     </_UserPreferencesContext.default.Provider>;

package/lib/theme/hooks/useHideableNavbar.js

@@ -64,8 +64,8 @@ const useHideableNavbar = hideOnScroll => {
       setIsNavbarVisible(true);
     }
   }, [navbarHeight, isFocusedAnchor]);
-  (0, _themeCommon.useChangeRoute)(() => {
-    if (!hideOnScroll) {
+  (0, _themeCommon.useLocationChange)(locationChangeEvent => {
+    if (!hideOnScroll || locationChangeEvent.location.hash) {
       return;
     }
 

package/lib/theme/hooks/useTabGroupChoice.js

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

package/lib/theme/hooks/useThemeContext.js

@@ -21,7 +21,7 @@ function useThemeContext() {
   const context = (0, _react.useContext)(_ThemeContext.default);
 
   if (context == null) {
-    throw new Error('`useThemeContext` is used outside of `Layout` Component. See https://docusaurus.io/docs/api/themes/configuration#usethemecontext.');
+    throw new Error('"useThemeContext" is used outside of "Layout" component. Please see https://docusaurus.io/docs/api/themes/configuration#usethemecontext.');
   }
 
   return context;

package/lib/theme/hooks/useUserPreferencesContext.js

@@ -21,7 +21,7 @@ function useUserPreferencesContext() {
   const context = (0, _react.useContext)(_UserPreferencesContext.default);
 
   if (context == null) {
-    throw new Error('`useUserPreferencesContext` is used outside of `Layout` Component.');
+    throw new Error('"useUserPreferencesContext" is used outside of "Layout" component.');
   }
 
   return context;

package/lib/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/lib/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/lib-next/index.js

@@ -18,7 +18,7 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
 ); // Need to be inlined to prevent dark mode FOUC
 // Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
 
-const storageKey = 'theme';
+const ThemeStorageKey = 'theme';
 
 const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
   return `(function() {
@@ -32,7 +32,7 @@ const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
   function getStoredTheme() {
     var theme = null;
     try {
-      theme = localStorage.getItem('${storageKey}');
+      theme = localStorage.getItem('${ThemeStorageKey}');
     } catch (err) {}
     return theme;
   }
@@ -56,7 +56,26 @@ const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
     }
   }
 })();`;
-};
+}; // Duplicated constant. Unfortunately we can't import it from theme-common, as we need to support older nodejs versions without ESM support
+// TODO: import from theme-common once we only support Node.js with ESM support
+// + move all those announcementBar stuff there too
+
+export const AnnouncementBarDismissStorageKey =
+  'docusaurus.announcement.dismiss';
+const AnnouncementBarDismissDataAttribute =
+  'data-announcement-bar-initially-dismissed'; // We always render the announcement bar html on the server, to prevent layout shifts on React hydration
+// The theme can use CSS + the data attribute to hide the announcement bar asap (before React hydration)
+
+const AnnouncementBarInlineJavaScript = `
+(function() {
+  function isDismissed() {
+    try {
+      return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
+    } catch (err) {}
+    return false;
+  }
+  document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
+})();`;
 
 function getInfimaCSSFile(direction) {
   return `infima/dist/css/default/default${
@@ -73,7 +92,11 @@ export default function docusaurusThemeClassic(
     i18n: {currentLocale, localeConfigs},
   } = context;
   const themeConfig = roughlyTypedThemeConfig || {};
-  const {colorMode, prism: {additionalLanguages = []} = {}} = themeConfig;
+  const {
+    announcementBar,
+    colorMode,
+    prism: {additionalLanguages = []} = {},
+  } = themeConfig;
   const {customCss} = options || {};
   const {direction} = localeConfigs[currentLocale];
   return {
@@ -170,10 +193,10 @@ export default function docusaurusThemeClassic(
         preBodyTags: [
           {
             tagName: 'script',
-            attributes: {
-              type: 'text/javascript',
-            },
-            innerHTML: noFlashColorMode(colorMode),
+            innerHTML: `
+${noFlashColorMode(colorMode)}
+${announcementBar ? AnnouncementBarInlineJavaScript : ''}
+            `,
           },
         ],
       };

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

@@ -6,16 +6,12 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
+import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 
 function AnnouncementBar() {
-  const {
-    isAnnouncementBarClosed,
-    closeAnnouncementBar,
-  } = useUserPreferencesContext();
+  const {isClosed, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
 
   if (!announcementBar) {
@@ -24,7 +20,7 @@ function AnnouncementBar() {
 
   const {content, backgroundColor, textColor, isCloseable} = announcementBar;
 
-  if (!content || (isCloseable && isAnnouncementBarClosed)) {
+  if (!content || (isCloseable && isClosed)) {
     return null;
   }
 
@@ -48,8 +44,8 @@ function AnnouncementBar() {
       {isCloseable ? (
         <button
           type="button"
-          className={styles.announcementBarClose}
-          onClick={closeAnnouncementBar}
+          className={clsx(styles.announcementBarClose, 'clean-btn')}
+          onClick={close}
           aria-label={translate({
             id: 'theme.AnnouncementBar.closeButtonAriaLabel',
             message: 'Close',

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

@@ -13,8 +13,13 @@
   position: relative;
   width: 100%;
   height: var(--docusaurus-announcement-bar-height);
-  background-color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+}
+
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
 }
 
 @media print {
@@ -35,11 +40,6 @@
   top: 0;
   width: 55px;
   font-size: 1.25rem;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-  background: none;
-  color: inherit;
   height: 100%;
 }
 

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

@@ -32,9 +32,9 @@ function BlogListPage(props) {
       }}>
       <div className="container margin-vert--lg">
         <div className="row">
-          <div className="col col--3">
+          <aside className="col col--3">
             <BlogSidebar sidebar={sidebar} />
-          </div>
+          </aside>
           <main className="col col--7">
             {items.map(({content: BlogPostContent}) => (
               <BlogPostItem