@docusaurus/theme-classic 0.0.0-5256 → 0.0.0-5260

package/lib/theme/AnnouncementBar/CloseButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/AnnouncementBar/CloseButton';
+export default function AnnouncementBarCloseButton(props: Props): JSX.Element | null;

package/lib/theme/AnnouncementBar/CloseButton/index.js

@@ -0,0 +1,26 @@
+/**
+ * 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 {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import styles from './styles.module.css';
+export default function AnnouncementBarCloseButton(props) {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

package/lib/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

package/lib/theme/AnnouncementBar/Content/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/AnnouncementBar/Content';
+export default function AnnouncementBarContent(props: Props): JSX.Element | null;

package/lib/theme/AnnouncementBar/Content/index.js

@@ -0,0 +1,23 @@
+/**
+ * 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 {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function AnnouncementBarContent(props) {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar;
+  return (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

package/lib/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}

package/lib/theme/AnnouncementBar/index.js

@@ -5,44 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
-import {translate} from '@docusaurus/Translate';
-import IconClose from '@theme/Icon/Close';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
 import styles from './styles.module.css';
 export default function AnnouncementBar() {
-  const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
   if (!isActive) {
     return null;
   }
-  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
+  const {backgroundColor, textColor, isCloseable} = announcementBar;
   return (
     <div
       className={styles.announcementBar}
       style={{backgroundColor, color: textColor}}
       role="banner">
       {isCloseable && <div className={styles.announcementBarPlaceholder} />}
-      <div
-        className={styles.announcementBarContent}
-        // Developer provided the HTML, so assume it's safe.
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{__html: content}}
-      />
-      {isCloseable ? (
-        <button
-          type="button"
-          className={clsx('clean-btn close', styles.announcementBarClose)}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
           onClick={close}
-          aria-label={translate({
-            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
-            message: 'Close',
-            description: 'The ARIA label for close button of announcement bar',
-          })}>
-          <IconClose width={14} height={14} strokeWidth={3.1} />
-        </button>
-      ) : null}
+          className={styles.announcementBarClose}
+        />
+      )}
     </div>
   );
 }

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

@@ -15,7 +15,8 @@
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
-  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1); /* just above the navbar */
 }
 
 html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
@@ -29,15 +30,10 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
 .announcementBarClose {
   flex: 0 0 30px;
   align-self: stretch;
-  padding: 0;
-  line-height: 0;
 }
 
 .announcementBarContent {
   flex: 1 1 auto;
-  font-size: 85%;
-  text-align: center;
-  padding: 5px 0;
 }
 
 @media print {
@@ -46,11 +42,6 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   }
 }
 
-.announcementBarContent a {
-  color: inherit;
-  text-decoration: underline;
-}
-
 @media (min-width: 997px) {
   :root {
     --docusaurus-announcement-bar-height: 30px;

package/lib/theme/DocSidebarItem/Link/index.js

@@ -20,7 +20,7 @@ export default function DocSidebarItemLink({
   index,
   ...props
 }) {
-  const {href, label, className} = item;
+  const {href, label, className, autoAddBaseUrl} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
   return (
@@ -40,6 +40,7 @@ export default function DocSidebarItemLink({
             'menu__link--active': isActive,
           },
         )}
+        autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? 'page' : undefined}
         to={href}
         {...(isInternalLink && {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5256",
+  "version": "0.0.0-5260",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5256",
-    "@docusaurus/mdx-loader": "0.0.0-5256",
-    "@docusaurus/module-type-aliases": "0.0.0-5256",
-    "@docusaurus/plugin-content-blog": "0.0.0-5256",
-    "@docusaurus/plugin-content-docs": "0.0.0-5256",
-    "@docusaurus/plugin-content-pages": "0.0.0-5256",
-    "@docusaurus/theme-common": "0.0.0-5256",
-    "@docusaurus/theme-translations": "0.0.0-5256",
-    "@docusaurus/types": "0.0.0-5256",
-    "@docusaurus/utils": "0.0.0-5256",
-    "@docusaurus/utils-common": "0.0.0-5256",
-    "@docusaurus/utils-validation": "0.0.0-5256",
+    "@docusaurus/core": "0.0.0-5260",
+    "@docusaurus/mdx-loader": "0.0.0-5260",
+    "@docusaurus/module-type-aliases": "0.0.0-5260",
+    "@docusaurus/plugin-content-blog": "0.0.0-5260",
+    "@docusaurus/plugin-content-docs": "0.0.0-5260",
+    "@docusaurus/plugin-content-pages": "0.0.0-5260",
+    "@docusaurus/theme-common": "0.0.0-5260",
+    "@docusaurus/theme-translations": "0.0.0-5260",
+    "@docusaurus/types": "0.0.0-5260",
+    "@docusaurus/utils": "0.0.0-5260",
+    "@docusaurus/utils-common": "0.0.0-5260",
+    "@docusaurus/utils-validation": "0.0.0-5260",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "f8aa093749f3bf48a06c9af196501b24536af6b2"
+  "gitHead": "db60780cbcaaf6c55b3715f7dd6e5ede8cda989b"
 }

package/src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import type {Props} from '@theme/AnnouncementBar/CloseButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarCloseButton(
+  props: Props,
+): JSX.Element | null {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

package/src/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

package/src/theme/AnnouncementBar/Content/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/AnnouncementBar/Content';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarContent(
+  props: Props,
+): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar!;
+  return (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

package/src/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}

package/src/theme/AnnouncementBar/index.tsx

@@ -6,49 +6,33 @@
  */
 
 import React from 'react';
-import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
-import {translate} from '@docusaurus/Translate';
-import IconClose from '@theme/Icon/Close';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
 
 import styles from './styles.module.css';
 
 export default function AnnouncementBar(): JSX.Element | null {
-  const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
-
+  const {isActive, close} = useAnnouncementBar();
   if (!isActive) {
     return null;
   }
-
-  const {content, backgroundColor, textColor, isCloseable} = announcementBar!;
-
+  const {backgroundColor, textColor, isCloseable} = announcementBar!;
   return (
     <div
       className={styles.announcementBar}
       style={{backgroundColor, color: textColor}}
       role="banner">
       {isCloseable && <div className={styles.announcementBarPlaceholder} />}
-      <div
-        className={styles.announcementBarContent}
-        // Developer provided the HTML, so assume it's safe.
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{__html: content}}
-      />
-      {isCloseable ? (
-        <button
-          type="button"
-          className={clsx('clean-btn close', styles.announcementBarClose)}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
           onClick={close}
-          aria-label={translate({
-            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
-            message: 'Close',
-            description: 'The ARIA label for close button of announcement bar',
-          })}>
-          <IconClose width={14} height={14} strokeWidth={3.1} />
-        </button>
-      ) : null}
+          className={styles.announcementBarClose}
+        />
+      )}
     </div>
   );
 }

package/src/theme/AnnouncementBar/styles.module.css

@@ -15,7 +15,8 @@
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
-  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1); /* just above the navbar */
 }
 
 html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
@@ -29,15 +30,10 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
 .announcementBarClose {
   flex: 0 0 30px;
   align-self: stretch;
-  padding: 0;
-  line-height: 0;
 }
 
 .announcementBarContent {
   flex: 1 1 auto;
-  font-size: 85%;
-  text-align: center;
-  padding: 5px 0;
 }
 
 @media print {
@@ -46,11 +42,6 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   }
 }
 
-.announcementBarContent a {
-  color: inherit;
-  text-decoration: underline;
-}
-
 @media (min-width: 997px) {
   :root {
     --docusaurus-announcement-bar-height: 30px;

package/src/theme/DocSidebarItem/Link/index.tsx

@@ -24,7 +24,7 @@ export default function DocSidebarItemLink({
   index,
   ...props
 }: Props): JSX.Element {
-  const {href, label, className} = item;
+  const {href, label, className, autoAddBaseUrl} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
   return (
@@ -44,6 +44,7 @@ export default function DocSidebarItemLink({
             'menu__link--active': isActive,
           },
         )}
+        autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? 'page' : undefined}
         to={href}
         {...(isInternalLink && {

package/src/theme-classic.d.ts

@@ -55,6 +55,22 @@ declare module '@theme/AnnouncementBar' {
   export default function AnnouncementBar(): JSX.Element | null;
 }
 
+declare module '@theme/AnnouncementBar/Content' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'div'> {}
+
+  export default function AnnouncementBarContent(props: Props): JSX.Element;
+}
+
+declare module '@theme/AnnouncementBar/CloseButton' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'button'> {}
+
+  export default function AnnouncementBarCloseButton(props: Props): JSX.Element;
+}
+
 declare module '@theme/BackToTopButton' {
   export default function BackToTopButton(): JSX.Element;
 }