@docusaurus/theme-classic 2.0.0-rc.1 → 2.1.0

package/lib/getSwizzleConfig.js

@@ -24,6 +24,13 @@ function getSwizzleConfig() {
                 },
                 description: 'The color mode toggle to switch between light and dark mode.',
             },
+            DocCardList: {
+                actions: {
+                    eject: 'safe',
+                    wrap: 'safe',
+                },
+                description: 'The component responsible for rendering a list of sidebar items cards.\nNotable used on the category generated-index pages.',
+            },
             DocSidebar: {
                 actions: {
                     eject: 'unsafe',

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/CodeBlock/Line/styles.module.css

@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   left: 0;
   padding: 0 var(--ifm-pre-padding);
   background: var(--ifm-pre-background);
+  overflow-wrap: normal;
 }
 
 .codeLineNumber::before {

package/lib/theme/DocCardList/index.d.ts

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/DocCardList';
-export default function DocCardList({ items, className }: Props): JSX.Element;
+export default function DocCardList(props: Props): JSX.Element;

package/lib/theme/DocCardList/index.js

@@ -6,21 +6,24 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {findFirstCategoryLink} from '@docusaurus/theme-common/internal';
+import {
+  useCurrentSidebarCategory,
+  filterDocCardListItems,
+} from '@docusaurus/theme-common';
 import DocCard from '@theme/DocCard';
-// Filter categories that don't have a link.
-function filterItems(items) {
-  return items.filter((item) => {
-    if (item.type === 'category') {
-      return !!findFirstCategoryLink(item);
-    }
-    return true;
-  });
+function DocCardListForCurrentSidebarCategory({className}) {
+  const category = useCurrentSidebarCategory();
+  return <DocCardList items={category.items} className={className} />;
 }
-export default function DocCardList({items, className}) {
+export default function DocCardList(props) {
+  const {items, className} = props;
+  if (!items) {
+    return <DocCardListForCurrentSidebarCategory {...props} />;
+  }
+  const filteredItems = filterDocCardListItems(items);
   return (
     <section className={clsx('row', className)}>
-      {filterItems(items).map((item, index) => (
+      {filteredItems.map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
           <DocCard item={item} />
         </article>

package/lib/theme/DocPage/index.js

@@ -6,7 +6,11 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  PageMetadata,
+} from '@docusaurus/theme-common';
 import {
   docVersionSearchTag,
   DocsSidebarProvider,
@@ -16,13 +20,8 @@ import {
 import DocPageLayout from '@theme/DocPage/Layout';
 import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';
-export default function DocPage(props) {
+function DocPageMetadata(props) {
   const {versionMetadata} = props;
-  const currentDocRouteMetadata = useDocRouteMetadata(props);
-  if (!currentDocRouteMetadata) {
-    return <NotFound />;
-  }
-  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
   return (
     <>
       <SearchMetadata
@@ -32,6 +31,24 @@ export default function DocPage(props) {
           versionMetadata.version,
         )}
       />
+      <PageMetadata>
+        {versionMetadata.noIndex && (
+          <meta name="robots" content="noindex, nofollow" />
+        )}
+      </PageMetadata>
+    </>
+  );
+}
+export default function DocPage(props) {
+  const {versionMetadata} = props;
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
+  if (!currentDocRouteMetadata) {
+    return <NotFound />;
+  }
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <>
+      <DocPageMetadata {...props} />
       <HtmlClassNameProvider
         className={clsx(
           // TODO: it should be removed from here

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

@@ -111,7 +111,7 @@ export default function DocSidebarItemCategory({
   useEffect(() => {
     if (
       collapsible &&
-      expandedItem &&
+      expandedItem != null &&
       expandedItem !== index &&
       autoCollapseCategories
     ) {

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/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -28,6 +28,7 @@ export default function LocaleDropdownNavbarItem({
     })}`;
     return {
       label: localeConfigs[locale].label,
+      lang: localeConfigs[locale].htmlLang,
       to,
       target: '_self',
       autoAddBaseUrl: false,

package/lib/theme/SkipToContent/index.js

@@ -5,13 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import {useSkipToContent} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 export default function SkipToContent() {
   const {containerRef, handleSkip} = useSkipToContent();
   return (
-    <div ref={containerRef} role="region">
+    <div
+      ref={containerRef}
+      role="region"
+      aria-label={translate({id: 'theme.common.skipToMainContent'})}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a href="#" className={styles.skipToContent} onClick={handleSkip}>
         <Translate

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

@@ -21,7 +21,7 @@
 
 .tagRegular {
   border-radius: 0.5rem;
-  padding: 0.3rem 0.5rem;
+  padding: 0.2rem 0.5rem 0.3rem;
   font-size: 90%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-rc.1",
+  "version": "2.1.0",
   "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": "2.0.0-rc.1",
-    "@docusaurus/mdx-loader": "2.0.0-rc.1",
-    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
-    "@docusaurus/plugin-content-blog": "2.0.0-rc.1",
-    "@docusaurus/plugin-content-docs": "2.0.0-rc.1",
-    "@docusaurus/plugin-content-pages": "2.0.0-rc.1",
-    "@docusaurus/theme-common": "2.0.0-rc.1",
-    "@docusaurus/theme-translations": "2.0.0-rc.1",
-    "@docusaurus/types": "2.0.0-rc.1",
-    "@docusaurus/utils": "2.0.0-rc.1",
-    "@docusaurus/utils-common": "2.0.0-rc.1",
-    "@docusaurus/utils-validation": "2.0.0-rc.1",
+    "@docusaurus/core": "2.1.0",
+    "@docusaurus/mdx-loader": "2.1.0",
+    "@docusaurus/module-type-aliases": "2.1.0",
+    "@docusaurus/plugin-content-blog": "2.1.0",
+    "@docusaurus/plugin-content-docs": "2.1.0",
+    "@docusaurus/plugin-content-pages": "2.1.0",
+    "@docusaurus/theme-common": "2.1.0",
+    "@docusaurus/theme-translations": "2.1.0",
+    "@docusaurus/types": "2.1.0",
+    "@docusaurus/utils": "2.1.0",
+    "@docusaurus/utils-common": "2.1.0",
+    "@docusaurus/utils-validation": "2.1.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -47,8 +47,6 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
-    "@docusaurus/types": "2.0.0-beta.21",
     "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
@@ -64,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "c8ddd02a8e68dfaf515c20465a049a83153bd205"
+  "gitHead": "be9b0942641184213485eba7fd75ceb0b328d3f4"
 }

package/src/getSwizzleConfig.ts

@@ -28,6 +28,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'The color mode toggle to switch between light and dark mode.',
       },
+      DocCardList: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a list of sidebar items cards.\nNotable used on the category generated-index pages.',
+      },
       DocSidebar: {
         actions: {
           eject: 'unsafe', // Too much technical code in sidebar, not very safe atm

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/CodeBlock/Line/styles.module.css

@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   left: 0;
   padding: 0 var(--ifm-pre-padding);
   background: var(--ifm-pre-background);
+  overflow-wrap: normal;
 }
 
 .codeLineNumber::before {

package/src/theme/DocCardList/index.tsx

@@ -7,25 +7,27 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {findFirstCategoryLink} from '@docusaurus/theme-common/internal';
+import {
+  useCurrentSidebarCategory,
+  filterDocCardListItems,
+} from '@docusaurus/theme-common';
 import DocCard from '@theme/DocCard';
 import type {Props} from '@theme/DocCardList';
-import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-// Filter categories that don't have a link.
-function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
-  return items.filter((item) => {
-    if (item.type === 'category') {
-      return !!findFirstCategoryLink(item);
-    }
-    return true;
-  });
+function DocCardListForCurrentSidebarCategory({className}: Props) {
+  const category = useCurrentSidebarCategory();
+  return <DocCardList items={category.items} className={className} />;
 }
 
-export default function DocCardList({items, className}: Props): JSX.Element {
+export default function DocCardList(props: Props): JSX.Element {
+  const {items, className} = props;
+  if (!items) {
+    return <DocCardListForCurrentSidebarCategory {...props} />;
+  }
+  const filteredItems = filterDocCardListItems(items);
   return (
     <section className={clsx('row', className)}>
-      {filterItems(items).map((item, index) => (
+      {filteredItems.map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
           <DocCard item={item} />
         </article>

package/src/theme/DocPage/index.tsx

@@ -7,7 +7,11 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  PageMetadata,
+} from '@docusaurus/theme-common';
 import {
   docVersionSearchTag,
   DocsSidebarProvider,
@@ -19,13 +23,8 @@ import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocPage';
 
-export default function DocPage(props: Props): JSX.Element {
+function DocPageMetadata(props: Props): JSX.Element {
   const {versionMetadata} = props;
-  const currentDocRouteMetadata = useDocRouteMetadata(props);
-  if (!currentDocRouteMetadata) {
-    return <NotFound />;
-  }
-  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
   return (
     <>
       <SearchMetadata
@@ -35,6 +34,25 @@ export default function DocPage(props: Props): JSX.Element {
           versionMetadata.version,
         )}
       />
+      <PageMetadata>
+        {versionMetadata.noIndex && (
+          <meta name="robots" content="noindex, nofollow" />
+        )}
+      </PageMetadata>
+    </>
+  );
+}
+
+export default function DocPage(props: Props): JSX.Element {
+  const {versionMetadata} = props;
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
+  if (!currentDocRouteMetadata) {
+    return <NotFound />;
+  }
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <>
+      <DocPageMetadata {...props} />
       <HtmlClassNameProvider
         className={clsx(
           // TODO: it should be removed from here

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

@@ -136,7 +136,7 @@ export default function DocSidebarItemCategory({
   useEffect(() => {
     if (
       collapsible &&
-      expandedItem &&
+      expandedItem != null &&
       expandedItem !== index &&
       autoCollapseCategories
     ) {

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/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -34,6 +34,7 @@ export default function LocaleDropdownNavbarItem({
     })}`;
     return {
       label: localeConfigs[locale]!.label,
+      lang: localeConfigs[locale]!.htmlLang,
       to,
       target: '_self',
       autoAddBaseUrl: false,

package/src/theme/SkipToContent/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import {useSkipToContent} from '@docusaurus/theme-common/internal';
 
 import styles from './styles.module.css';
@@ -14,7 +14,10 @@ import styles from './styles.module.css';
 export default function SkipToContent(): JSX.Element {
   const {containerRef, handleSkip} = useSkipToContent();
   return (
-    <div ref={containerRef} role="region">
+    <div
+      ref={containerRef}
+      role="region"
+      aria-label={translate({id: 'theme.common.skipToMainContent'})}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a href="#" className={styles.skipToContent} onClick={handleSkip}>
         <Translate

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

@@ -21,7 +21,7 @@
 
 .tagRegular {
   border-radius: 0.5rem;
-  padding: 0.3rem 0.5rem;
+  padding: 0.2rem 0.5rem 0.3rem;
   font-size: 90%;
 }
 

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;
 }
@@ -320,7 +336,7 @@ declare module '@theme/DocCardList' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
   export interface Props {
-    readonly items: PropSidebarItem[];
+    readonly items?: PropSidebarItem[];
     readonly className?: string;
   }