@docusaurus/theme-classic 3.10.1 → 4.0.0-canary-6808

package/src/options.ts

@@ -150,8 +150,8 @@ const itemWithType = (type: string | RegExp | undefined) => {
     type instanceof RegExp
       ? Joi.string().required().regex(type)
       : type
-      ? Joi.string().required().equal(type)
-      : Joi.string().forbidden();
+        ? Joi.string().required().equal(type)
+        : Joi.string().forbidden();
   return Joi.object({
     type: typeSchema,
   })

package/src/theme/Admonition/index.tsx

@@ -24,5 +24,6 @@ function getAdmonitionTypeComponent(type: string): ComponentType<Props> {
 export default function Admonition(unprocessedProps: Props): ReactNode {
   const props = processAdmonitionProps(unprocessedProps);
   const AdmonitionTypeComponent = getAdmonitionTypeComponent(props.type);
+  // eslint-disable-next-line react-hooks/static-components
   return <AdmonitionTypeComponent {...props} />;
 }

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

@@ -19,7 +19,6 @@ export default function AnnouncementBarContent(props: Props): ReactNode {
       {...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/styles.module.css

@@ -50,7 +50,7 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   }
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   :root {
     --docusaurus-announcement-bar-height: 30px;
   }

package/src/theme/BlogPostItem/Header/Title/styles.module.css

@@ -12,7 +12,7 @@
 /**
   Blog post title should be smaller on smaller devices
 **/
-@media (max-width: 576px) {
+@media (width <= 576px) {
   .title {
     font-size: 2rem;
   }

package/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -38,7 +38,7 @@
   color: var(--ifm-color-primary) !important;
 }
 
-@media (max-width: 996px) {
+@media (width <= 996px) {
   .sidebar {
     display: none;
   }

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -7,10 +7,10 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
 import {
   PageMetadata,
   HtmlClassNameProvider,
+  TagsPageLinkLabel,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
 import {useBlogTagsPostsPageTitle} from '@docusaurus/theme-common/internal';
@@ -47,11 +47,7 @@ function BlogTagsPostsPageContent({
         <Heading as="h1">{title}</Heading>
         {tag.description && <p>{tag.description}</p>}
         <Link href={tag.allTagsPath}>
-          <Translate
-            id="theme.tags.tagsPageLink"
-            description="The label of the link targeting the tag list page">
-            View All Tags
-          </Translate>
+          <TagsPageLinkLabel />
         </Link>
       </header>
       <BlogPostItems items={items} />

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

@@ -15,20 +15,17 @@ import Line from '@theme/CodeBlock/Line';
 
 import styles from './styles.module.css';
 
-// TODO Docusaurus v4: remove useless forwardRef
-const Pre = React.forwardRef<HTMLPreElement, ComponentProps<'pre'>>(
-  (props, ref) => {
-    return (
-      <pre
-        ref={ref}
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex={0}
-        {...props}
-        className={clsx(props.className, styles.codeBlock, 'thin-scrollbar')}
-      />
-    );
-  },
-);
+function Pre({className, ref, ...props}: ComponentProps<'pre'>) {
+  return (
+    <pre
+      ref={ref}
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+      tabIndex={0}
+      {...props}
+      className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+    />
+  );
+}
 
 function Code(props: ComponentProps<'code'>) {
   const {metadata} = useCodeBlockContext();

package/src/theme/ContentVisibility/Unlisted/index.tsx

@@ -7,15 +7,23 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import Head from '@docusaurus/Head';
 import {
   ThemeClassNames,
   UnlistedBannerTitle,
   UnlistedBannerMessage,
-  UnlistedMetadata,
 } from '@docusaurus/theme-common';
 import Admonition from '@theme/Admonition';
 import type {Props} from '@theme/ContentVisibility/Unlisted';
 
+function UnlistedMetadata(): ReactNode {
+  return (
+    <Head>
+      <meta name="robots" content="noindex, nofollow" />
+    </Head>
+  );
+}
+
 function UnlistedBanner({className}: Props) {
   return (
     <Admonition

package/src/theme/DocCard/index.tsx

@@ -27,7 +27,7 @@ function getFallbackEmojiIcon(
   item: PropSidebarItemLink | PropSidebarItemCategory,
 ): string {
   if (item.type === 'category') {
-    return '🗃';
+    return '🗃️';
   }
   return isInternalUrl(item.href) ? '📄️' : '🔗';
 }

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .generatedIndexPage {
     max-width: 75% !important;
   }

package/src/theme/DocItem/Layout/styles.module.css

@@ -10,7 +10,7 @@
   margin-top: 0;
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .docItemCol {
     max-width: 75% !important;
   }

package/src/theme/DocItem/TOC/Mobile/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
   .tocMobile {
     display: none;

package/src/theme/DocRoot/Layout/Main/styles.module.css

@@ -10,7 +10,7 @@
   width: 100%;
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .docMainContainer {
     flex-grow: 1;
     max-width: calc(100% - var(--doc-sidebar-width));

package/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .expandButton {
     position: absolute;
     top: 0;

package/src/theme/DocRoot/Layout/Sidebar/styles.module.css

@@ -14,7 +14,7 @@
   display: none;
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .docSidebarContainer {
     display: block;
     width: var(--doc-sidebar-width);

package/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css

@@ -15,7 +15,7 @@
   --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .collapseSidebarButton {
     display: block !important;
     background-color: var(--docusaurus-collapse-button-bg);

package/src/theme/DocSidebar/Desktop/Content/styles.module.css

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .menu {
     flex-grow: 1;
     padding: 0.5rem;
   }
+
   @supports (scrollbar-gutter: stable) {
     .menu {
       padding: 0.5rem 0 0.5rem 0.5rem;

package/src/theme/DocSidebar/Desktop/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .sidebar {
     display: flex;
     flex-direction: column;

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

@@ -135,11 +135,7 @@ function CollapseButton({
 }
 
 function CategoryLinkLabel({label}: {label: string}) {
-  return (
-    <span title={label} className={styles.categoryLinkLabel}>
-      {label}
-    </span>
-  );
+  return <span className={styles.categoryLinkLabel}>{label}</span>;
 }
 
 export default function DocSidebarItemCategory(props: Props): ReactNode {
@@ -284,7 +280,9 @@ function DocSidebarItemCategoryCollapsible({
           aria-current={isCurrentPage ? 'page' : undefined}
           role={collapsible && !href ? 'button' : undefined}
           aria-expanded={collapsible && !href ? !collapsed : undefined}
-          href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
+          href={
+            collapsible ? (hrefWithSSRFallback ?? '#') : hrefWithSSRFallback
+          }
           {...props}>
           <CategoryLinkLabel label={label} />
         </Link>

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

@@ -27,7 +27,6 @@ export default function DocSidebarItemHtml({
         className,
       )}
       key={index}
-      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: value}}
     />
   );

package/src/theme/DocSidebarItem/Html/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .menuHtmlItem {
     padding: var(--ifm-menu-link-padding-vertical)
       var(--ifm-menu-link-padding-horizontal);

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

@@ -17,11 +17,7 @@ import type {Props} from '@theme/DocSidebarItem/Link';
 import styles from './styles.module.css';
 
 function LinkLabel({label}: {label: string}) {
-  return (
-    <span title={label} className={styles.linkLabel}>
-      {label}
-    </span>
-  );
+  return <span className={styles.linkLabel}>{label}</span>;
 }
 
 export default function DocSidebarItemLink({

package/src/theme/DocTagDocListPage/index.tsx

@@ -12,9 +12,10 @@ import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
+  TagsPageLinkLabel,
   usePluralForm,
 } from '@docusaurus/theme-common';
-import Translate, {translate} from '@docusaurus/Translate';
+import {translate} from '@docusaurus/Translate';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocTagDocListPage';
 import Unlisted from '@theme/ContentVisibility/Unlisted';
@@ -88,11 +89,7 @@ function DocTagDocListPageContent({
               <Heading as="h1">{title}</Heading>
               {tag.description && <p>{tag.description}</p>}
               <Link href={tag.allTagsPath}>
-                <Translate
-                  id="theme.tags.tagsPageLink"
-                  description="The label of the link targeting the tag list page">
-                  View all tags
-                </Translate>
+                <TagsPageLinkLabel />
               </Link>
             </header>
             <section className="margin-vert--lg">

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

@@ -11,7 +11,7 @@
   margin-top: 0.2rem;
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .lastUpdated {
     text-align: right;
   }

package/src/theme/Footer/Copyright/index.tsx

@@ -13,7 +13,6 @@ export default function FooterCopyright({copyright}: Props): ReactNode {
     <div
       className="footer__copyright"
       // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: copyright}}
     />
   );

package/src/theme/Footer/Links/MultiColumn/index.tsx

@@ -19,7 +19,6 @@ function ColumnLinkItem({item}: {item: ColumnItemType}) {
     <li
       className={clsx('footer__item', item.className)}
       // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: item.html}}
     />
   ) : (

package/src/theme/Footer/Links/Simple/index.tsx

@@ -19,7 +19,6 @@ function SimpleLinkItem({item}: {item: Props['links'][number]}) {
     <span
       className={clsx('footer__link-item', item.className)}
       // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: item.html}}
     />
   ) : (

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

@@ -8,7 +8,7 @@
 /*
 Hide color mode toggle in small viewports
  */
-@media (max-width: 996px) {
+@media (width <= 996px) {
   .colorModeToggle {
     display: none;
   }

package/src/theme/Navbar/MobileSidebar/Layout/index.tsx

@@ -5,24 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {version, type ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
 
-// TODO Docusaurus v4: remove temporary inert workaround
-//  See https://github.com/facebook/react/issues/17157
-//  See https://github.com/radix-ui/themes/pull/509
-function inertProps(inert: boolean) {
-  const isBeforeReact19 = parseInt(version!.split('.')[0]!, 10) < 19;
-  if (isBeforeReact19) {
-    // TODO Docusaurus v4: remove temporary inert workaround
-    return {inert: inert ? '' : undefined} as unknown as {inert: boolean};
-  }
-  return {inert};
-}
-
 function NavbarMobileSidebarPanel({
   children,
   inert,
@@ -36,7 +24,7 @@ function NavbarMobileSidebarPanel({
         ThemeClassNames.layout.navbar.mobileSidebar.panel,
         'navbar-sidebar__item menu',
       )}
-      {...inertProps(inert)}>
+      inert={inert}>
       {children}
     </div>
   );

package/src/theme/Navbar/Search/styles.module.css

@@ -13,14 +13,14 @@ See https://github.com/facebook/docusaurus/pull/9385
   display: none;
 }
 
-@media (max-width: 996px) {
+@media (width <= 996px) {
   .navbarSearchContainer {
     position: absolute;
     right: var(--ifm-navbar-padding-horizontal);
   }
 }
 
-@media (min-width: 997px) {
+@media (width >= 997px) {
   .navbarSearchContainer {
     padding: 0 var(--ifm-navbar-item-padding-horizontal);
   }

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

@@ -12,7 +12,7 @@
   top: calc(var(--ifm-navbar-height) + 1rem);
 }
 
-@media (max-width: 996px) {
+@media (width <= 996px) {
   .tableOfContents {
     display: none;
   }

package/src/theme/prism-include-languages.ts

@@ -29,10 +29,10 @@ export default function prismIncludeLanguages(
 
   additionalLanguages.forEach((lang) => {
     if (lang === 'php') {
-      // eslint-disable-next-line global-require
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
       require('prismjs/components/prism-markup-templating.js');
     }
-    // eslint-disable-next-line global-require, import/no-dynamic-require
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     require(`prismjs/components/prism-${lang}`);
   });
 

package/src/theme-classic.d.ts

@@ -499,8 +499,7 @@ declare module '@theme/CodeBlock/Buttons/WordWrapButton' {
 }
 
 declare module '@theme/CodeBlock/Container' {
-  import type {ReactNode} from 'react';
-  import type {ComponentProps} from 'react';
+  import type {ReactNode, ComponentProps} from 'react';
 
   export default function CodeBlockContainer<T extends 'div' | 'pre'>({
     as: As,
@@ -1325,9 +1324,6 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
     readonly position?: 'left' | 'right';
   };
 
-  // TODO Docusaurus v4, remove old type name
-  export type DesktopOrMobileNavBarItemProps = DefaultNavbarItemProps;
-
   export interface Props extends DefaultNavbarItemProps {
     readonly mobile?: boolean;
   }
@@ -1381,9 +1377,6 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' {
     readonly className?: string;
   };
 
-  // TODO Docusaurus v4, remove old type name
-  export type DesktopOrMobileNavBarItemProps = DropdownNavbarItemProps;
-
   export interface Props extends DropdownNavbarItemProps {
     readonly mobile?: boolean;
   }

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

@@ -1,18 +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.
- */
-
-.themedImage {
-  display: none;
-}
-
-[data-theme='light'] .themedImage--light {
-  display: initial;
-}
-
-[data-theme='dark'] .themedImage--dark {
-  display: initial;
-}

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

@@ -1,18 +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.
- */
-
-.themedImage {
-  display: none;
-}
-
-[data-theme='light'] .themedImage--light {
-  display: initial;
-}
-
-[data-theme='dark'] .themedImage--dark {
-  display: initial;
-}