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

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

@@ -6,19 +6,15 @@
  */
 import React from 'react';
 import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
-import useAnnouncementBar from '@theme/hooks/useAnnouncementBar';
 import UserPreferencesContext from '@theme/UserPreferencesContext';
 
 function UserPreferencesProvider(props) {
   const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-  const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar();
   return (
     <UserPreferencesContext.Provider
       value={{
         tabGroupChoices,
         setTabGroupChoices,
-        isAnnouncementBarClosed,
-        closeAnnouncementBar,
       }}>
       {props.children}
     </UserPreferencesContext.Provider>

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

@@ -7,7 +7,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';
 
 const useHideableNavbar = (hideOnScroll) => {
   const location = useLocation();
@@ -52,8 +52,8 @@ const useHideableNavbar = (hideOnScroll) => {
     },
     [navbarHeight, isFocusedAnchor],
   );
-  useChangeRoute(() => {
-    if (!hideOnScroll) {
+  useLocationChange((locationChangeEvent) => {
+    if (!hideOnScroll || locationChangeEvent.location.hash) {
       return;
     }
 

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

@@ -16,14 +16,12 @@ const useTabGroupChoice = () => {
   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/lib-next/theme/hooks/useThemeContext.js

@@ -12,7 +12,7 @@ function useThemeContext() {
 
   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.',
     );
   }
 

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.1ab8aa0af",
+  "version": "2.0.0-beta.2",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/types.d.ts",
@@ -23,33 +23,34 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/theme-common": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/types": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/utils": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/utils-validation": "2.0.0-beta.1ab8aa0af",
+    "@docusaurus/core": "2.0.0-beta.2",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.2",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.2",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.2",
+    "@docusaurus/theme-common": "2.0.0-beta.2",
+    "@docusaurus/types": "2.0.0-beta.2",
+    "@docusaurus/utils": "2.0.0-beta.2",
+    "@docusaurus/utils-common": "2.0.0-beta.2",
+    "@docusaurus/utils-validation": "2.0.0-beta.2",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "clsx": "^1.1.1",
-    "copy-text-to-clipboard": "^3.0.0",
-    "fs-extra": "^9.1.0",
+    "copy-text-to-clipboard": "^3.0.1",
+    "fs-extra": "^10.0.0",
     "globby": "^11.0.2",
-    "infima": "0.2.0-alpha.23",
+    "infima": "0.2.0-alpha.26",
     "lodash": "^4.17.20",
     "parse-numeric-range": "^1.2.0",
-    "postcss": "^8.2.10",
-    "prism-react-renderer": "^1.1.1",
+    "postcss": "^8.2.15",
+    "prism-react-renderer": "^1.2.1",
     "prismjs": "^1.23.0",
     "prop-types": "^15.7.2",
     "react-router-dom": "^5.2.0",
     "rtlcss": "^3.1.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.1ab8aa0af"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.2"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
@@ -58,5 +59,5 @@
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "63c06baac39707a1a4c3cc4c0031cb2163f256c4"
+  "gitHead": "883f07fddffaf1657407c8e202e370cc436e25f7"
 }

package/src/index.ts

@@ -6,7 +6,7 @@
  */
 
 import {DocusaurusContext, Plugin} from '@docusaurus/types';
-import {ThemeConfig} from '@docusaurus/theme-common';
+import type {ThemeConfig} from '@docusaurus/theme-common';
 import {getTranslationFiles, translateThemeConfig} from './translations';
 import path from 'path';
 import Module from 'module';
@@ -24,7 +24,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() {
   var defaultMode = '${defaultMode}';
@@ -37,7 +37,7 @@ const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
   function getStoredTheme() {
     var theme = null;
     try {
-      theme = localStorage.getItem('${storageKey}');
+      theme = localStorage.getItem('${ThemeStorageKey}');
     } catch (err) {}
     return theme;
   }
@@ -63,6 +63,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${
     direction === 'rtl' ? '-rtl' : ''
@@ -82,7 +102,11 @@ export default function docusaurusThemeClassic(
     i18n: {currentLocale, localeConfigs},
   } = context;
   const themeConfig = (roughlyTypedThemeConfig || {}) as ThemeConfig;
-  const {colorMode, prism: {additionalLanguages = []} = {}} = themeConfig;
+  const {
+    announcementBar,
+    colorMode,
+    prism: {additionalLanguages = []} = {},
+  } = themeConfig;
   const {customCss} = options || {};
   const {direction} = localeConfigs[currentLocale];
 
@@ -178,10 +202,10 @@ export default function docusaurusThemeClassic(
         preBodyTags: [
           {
             tagName: 'script',
-            attributes: {
-              type: 'text/javascript',
-            },
-            innerHTML: noFlashColorMode(colorMode),
+            innerHTML: `
+${noFlashColorMode(colorMode)}
+${announcementBar ? AnnouncementBarInlineJavaScript : ''}
+            `,
           },
         ],
       };

package/src/theme/AnnouncementBar/index.tsx

@@ -7,17 +7,13 @@
 
 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(): JSX.Element | null {
-  const {
-    isAnnouncementBarClosed,
-    closeAnnouncementBar,
-  } = useUserPreferencesContext();
+  const {isClosed, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
 
   if (!announcementBar) {
@@ -25,7 +21,8 @@ function AnnouncementBar(): JSX.Element | null {
   }
 
   const {content, backgroundColor, textColor, isCloseable} = announcementBar;
-  if (!content || (isCloseable && isAnnouncementBarClosed)) {
+
+  if (!content || (isCloseable && isClosed)) {
     return null;
   }
 
@@ -45,8 +42,8 @@ function AnnouncementBar(): JSX.Element | null {
       {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/src/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/src/theme/BlogListPage/index.tsx

@@ -35,9 +35,9 @@ function BlogListPage(props: Props): JSX.Element {
       }}>
       <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