@docusaurus/theme-classic 2.0.0-beta.21 → 2.0.0-beta.22

package/src/theme/NavbarItem/DocSidebarNavbarItem.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
-import {useLayoutDocsSidebar} from '@docusaurus/theme-common';
+import {useLayoutDocsSidebar} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem';
 

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -10,10 +10,8 @@ import {
   useVersions,
   useActiveDocContext,
 } from '@docusaurus/plugin-content-docs/client';
-import {
-  useDocsPreferredVersion,
-  useDocsVersionCandidates,
-} from '@docusaurus/theme-common';
+import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';

package/src/theme/NavbarItem/DocsVersionNavbarItem.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {useDocsVersionCandidates} from '@docusaurus/theme-common';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import type {Props} from '@theme/NavbarItem/DocsVersionNavbarItem';
 import type {GlobalVersion} from '@docusaurus/plugin-content-docs/client';

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -8,12 +8,11 @@
 import React, {useState, useRef, useEffect} from 'react';
 import clsx from 'clsx';
 import {
-  isSamePath,
+  isRegexpStringMatch,
   useCollapsible,
   Collapsible,
-  isRegexpStringMatch,
-  useLocalPathname,
 } from '@docusaurus/theme-common';
+import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
 import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import NavbarItem, {type LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 import type {

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -7,10 +7,10 @@
 
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
-import IconLanguage from '@theme/IconLanguage';
+import IconLanguage from '@theme/Icon/Language';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 

package/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -10,7 +10,7 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
-import IconExternalLink from '@theme/IconExternalLink';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/NavbarItem/NavbarNavLink';
 
 export default function NavbarNavLink({

package/src/theme/NavbarItem/index.tsx

@@ -24,5 +24,5 @@ export default function NavbarItem({type, ...props}: Props): JSX.Element {
   if (!NavbarItemComponent) {
     throw new Error(`No NavbarItem component found for type "${type}".`);
   }
-  return <NavbarItemComponent {...(props as never)} />;
+  return <NavbarItemComponent {...(props as any)} />;
 }

package/src/theme/SiteMetadata/index.tsx

@@ -9,13 +9,12 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {PageMetadata, useThemeConfig} from '@docusaurus/theme-common';
 import {
-  PageMetadata,
   DEFAULT_SEARCH_TAG,
   useAlternatePageUtils,
-  useThemeConfig,
   keyboardFocusedClassName,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import SearchMetadata from '@theme/SearchMetadata';
 

package/src/theme/SkipToContent/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import {useSkipToContent} from '@docusaurus/theme-common';
+import {useSkipToContent} from '@docusaurus/theme-common/internal';
 
 import styles from './styles.module.css';
 

package/src/theme/TOCItems/index.tsx

@@ -6,12 +6,12 @@
  */
 
 import React, {useMemo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
-  type TOCHighlightConfig,
-  useThemeConfig,
   useTOCHighlight,
   useFilteredAndTreeifiedTOC,
-} from '@docusaurus/theme-common';
+  type TOCHighlightConfig,
+} from '@docusaurus/theme-common/internal';
 import TOCItemTree from '@theme/TOCItems/Tree';
 import type {Props} from '@theme/TOCItems';
 

package/src/theme/Tabs/index.tsx

@@ -13,11 +13,11 @@ import React, {
 } from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import {duplicates} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
-  duplicates,
   useTabGroupChoice,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/Tabs';
 import type {Props as TabItemProps} from '@theme/TabItem';
 

package/src/theme-classic.d.ts

@@ -42,7 +42,7 @@ declare module '@theme/Admonition' {
     readonly children: ReactNode;
     readonly type: 'note' | 'tip' | 'danger' | 'info' | 'caution';
     readonly icon?: ReactNode;
-    readonly title?: string;
+    readonly title?: ReactNode;
   }
   export default function Admonition(props: Props): JSX.Element;
 }
@@ -95,41 +95,103 @@ declare module '@theme/BlogSidebar' {
 }
 
 declare module '@theme/BlogPostItem' {
-  import type {FrontMatter, Metadata} from '@theme/BlogPostPage';
-  import type {Assets} from '@docusaurus/plugin-content-blog';
+  import type {ReactNode} from 'react';
 
   export interface Props {
-    readonly frontMatter: FrontMatter;
-    readonly assets: Assets;
-    readonly metadata: Metadata;
-    readonly truncated?: string | boolean;
-    readonly isBlogPostPage?: boolean;
-    readonly children: JSX.Element;
+    children: ReactNode;
+    className?: string;
   }
 
   export default function BlogPostItem(props: Props): JSX.Element;
 }
 
-declare module '@theme/BlogPostAuthor' {
-  import type {Metadata} from '@theme/BlogPostPage';
+declare module '@theme/BlogPostItems' {
+  import type {ComponentType, ReactNode} from 'react';
+  import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';
+
+  export interface Props {
+    items: readonly {content: PropBlogPostContent}[];
+    component?: ComponentType<{children: ReactNode}>;
+  }
+
+  export default function BlogPostItem(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Container' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    children: ReactNode;
+    className?: string;
+  }
+
+  export default function BlogPostItemContainer(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header' {
+  export default function BlogPostItemHeader(): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header/Title' {
+  export interface Props {
+    className?: string;
+  }
+
+  export default function BlogPostItemHeaderTitle(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header/Info' {
+  export interface Props {
+    className?: string;
+  }
+
+  export default function BlogPostItemHeaderInfo(): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header/Author' {
+  import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';
+
+  export interface Props {
+    readonly author: PropBlogPostContent['metadata']['authors'][number];
+    readonly className?: string;
+  }
+
+  export default function BlogPostItemHeaderAuthor(props: Props): JSX.Element;
+}
 
+declare module '@theme/BlogPostItem/Header/Authors' {
   export interface Props {
-    readonly author: Metadata['authors'][number];
+    readonly className?: string;
   }
 
-  export default function BlogPostAuthor(props: Props): JSX.Element;
+  export default function BlogPostItemHeaderAuthors(props: Props): JSX.Element;
 }
 
-declare module '@theme/BlogPostAuthors' {
-  import type {Metadata} from '@theme/BlogPostPage';
-  import type {Assets} from '@docusaurus/plugin-content-blog';
+declare module '@theme/BlogPostItem/Content' {
+  import type {ReactNode} from 'react';
 
   export interface Props {
-    readonly authors: Metadata['authors'];
-    readonly assets: Assets;
+    children: ReactNode;
+    className?: string;
   }
 
-  export default function BlogPostAuthors(props: Props): JSX.Element;
+  export default function BlogPostItemContent(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Footer' {
+  export default function BlogPostItemFooter(): JSX.Element | null;
+}
+
+declare module '@theme/BlogPostItem/Footer/ReadMoreLink' {
+  import type {Props as LinkProps} from '@docusaurus/Link';
+
+  export type Props = LinkProps & {
+    blogPostTitle: string;
+  };
+
+  export default function BlogPostItemFooterReadMoreLink(
+    props: Props,
+  ): JSX.Element | null;
 }
 
 declare module '@theme/BlogPostPaginator' {
@@ -261,10 +323,40 @@ declare module '@theme/DocCardList' {
   export default function DocCardList(props: Props): JSX.Element;
 }
 
-declare module '@theme/DocItemFooter' {
-  import type {Props} from '@theme/DocItem';
+declare module '@theme/DocItem/Layout' {
+  export interface Props {
+    readonly children: JSX.Element;
+  }
+
+  export default function DocItemLayout(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocItem/Metadata' {
+  export default function DocItemMetadata(): JSX.Element;
+}
+
+declare module '@theme/DocItem/Content' {
+  export interface Props {
+    readonly children: JSX.Element;
+  }
+
+  export default function DocItemContent(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocItem/TOC/Mobile' {
+  export default function DocItemTOCMobile(): JSX.Element;
+}
+
+declare module '@theme/DocItem/TOC/Desktop' {
+  export default function DocItemTOCDesktop(): JSX.Element;
+}
+
+declare module '@theme/DocItem/Paginator' {
+  export default function DocItemPaginator(): JSX.Element;
+}
 
-  export default function DocItemFooter(props: Props): JSX.Element;
+declare module '@theme/DocItem/Footer' {
+  export default function DocItemFooter(): JSX.Element;
 }
 
 declare module '@theme/DocPage/Layout' {
@@ -328,8 +420,6 @@ declare module '@theme/DocSidebar' {
     readonly sidebar: readonly PropSidebarItem[];
     readonly onCollapse: () => void;
     readonly isHidden: boolean;
-    // MobileSecondaryFilter expects Record<string, unknown>
-    readonly [key: string]: unknown;
   }
 
   export default function DocSidebar(props: Props): JSX.Element;
@@ -568,14 +658,14 @@ declare module '@theme/Layout' {
   export default function Layout(props: Props): JSX.Element;
 }
 
-declare module '@theme/LayoutProviders' {
+declare module '@theme/Layout/Provider' {
   import type {ReactNode} from 'react';
 
   export interface Props {
     readonly children: ReactNode;
   }
 
-  export default function LayoutProviders(props: Props): JSX.Element;
+  export default function LayoutProvider(props: Props): JSX.Element;
 }
 
 declare module '@theme/SearchMetadata' {
@@ -677,6 +767,7 @@ declare module '@theme/MDXComponents' {
   import type MDXDetails from '@theme/MDXComponents/Details';
   import type MDXUl from '@theme/MDXComponents/Ul';
   import type MDXImg from '@theme/MDXComponents/Img';
+  import type Admonition from '@theme/Admonition';
 
   export type MDXComponentsObject = {
     readonly head: typeof MDXHead;
@@ -692,6 +783,7 @@ declare module '@theme/MDXComponents' {
     readonly h4: (props: ComponentProps<'h4'>) => JSX.Element;
     readonly h5: (props: ComponentProps<'h5'>) => JSX.Element;
     readonly h6: (props: ComponentProps<'h6'>) => JSX.Element;
+    readonly admonition: typeof Admonition;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [tagName: string]: ComponentType<any>;
   };
@@ -1073,7 +1165,7 @@ declare module '@theme/TOCItems' {
 }
 
 declare module '@theme/TOCItems/Tree' {
-  import type {TOCTreeNode} from '@docusaurus/theme-common';
+  import type {TOCTreeNode} from '@docusaurus/theme-common/internal';
 
   export interface Props {
     readonly toc: readonly TOCTreeNode[];
@@ -1164,7 +1256,7 @@ declare module '@theme/Logo' {
   export default function Logo(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconArrow' {
+declare module '@theme/Icon/Arrow' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1172,7 +1264,7 @@ declare module '@theme/IconArrow' {
   export default function IconArrow(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconDarkMode' {
+declare module '@theme/Icon/DarkMode' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1180,7 +1272,7 @@ declare module '@theme/IconDarkMode' {
   export default function IconDarkMode(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconEdit' {
+declare module '@theme/Icon/Edit' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1188,7 +1280,7 @@ declare module '@theme/IconEdit' {
   export default function IconEdit(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconHome' {
+declare module '@theme/Icon/Home' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1196,7 +1288,7 @@ declare module '@theme/IconHome' {
   export default function IconHome(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconLightMode' {
+declare module '@theme/Icon/LightMode' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1204,7 +1296,7 @@ declare module '@theme/IconLightMode' {
   export default function IconLightMode(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconMenu' {
+declare module '@theme/Icon/Menu' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1212,7 +1304,7 @@ declare module '@theme/IconMenu' {
   export default function IconMenu(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconClose' {
+declare module '@theme/Icon/Close' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1220,7 +1312,7 @@ declare module '@theme/IconClose' {
   export default function IconClose(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconLanguage' {
+declare module '@theme/Icon/Language' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
@@ -1228,7 +1320,7 @@ declare module '@theme/IconLanguage' {
   export default function IconLanguage(props: Props): JSX.Element;
 }
 
-declare module '@theme/IconExternalLink' {
+declare module '@theme/Icon/ExternalLink' {
   import type {ComponentProps} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}

package/src/validateThemeConfig.ts

@@ -300,6 +300,18 @@ const CustomCssSchema = Joi.alternatives()
   .try(Joi.array().items(Joi.string().required()), Joi.string().required())
   .optional();
 
+const LogoSchema = Joi.object({
+  alt: Joi.string().allow(''),
+  src: Joi.string().required(),
+  srcDark: Joi.string(),
+  width: Joi.alternatives().try(Joi.string(), Joi.number()),
+  height: Joi.alternatives().try(Joi.string(), Joi.number()),
+  href: Joi.string(),
+  target: Joi.string(),
+  style: Joi.object(),
+  className: Joi.string(),
+});
+
 export const ThemeConfigSchema = Joi.object<ThemeConfig>({
   // TODO temporary (@alpha-58)
   // @ts-expect-error: forbidden
@@ -344,27 +356,11 @@ export const ThemeConfigSchema = Joi.object<ThemeConfig>({
       .items(NavbarItemSchema)
       .default(DEFAULT_CONFIG.navbar.items),
     title: Joi.string().allow('', null),
-    logo: Joi.object({
-      alt: Joi.string().allow(''),
-      src: Joi.string().required(),
-      srcDark: Joi.string(),
-      width: Joi.alternatives().try(Joi.string(), Joi.number()),
-      height: Joi.alternatives().try(Joi.string(), Joi.number()),
-      href: Joi.string(),
-      target: Joi.string(),
-    }),
+    logo: LogoSchema,
   }).default(DEFAULT_CONFIG.navbar),
   footer: Joi.object({
     style: Joi.string().equal('dark', 'light').default('light'),
-    logo: Joi.object({
-      alt: Joi.string().allow(''),
-      src: Joi.string().required(),
-      srcDark: Joi.string(),
-      // TODO infer this from reading the image
-      width: Joi.alternatives().try(Joi.string(), Joi.number()),
-      height: Joi.alternatives().try(Joi.string(), Joi.number()),
-      href: Joi.string(),
-    }),
+    logo: LogoSchema,
     copyright: Joi.string(),
     links: Joi.alternatives(
       Joi.array().items(

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

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

package/lib/theme/LayoutProviders/index.js

@@ -1,33 +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.
- */
-import React from 'react';
-import {
-  ColorModeProvider,
-  TabGroupChoiceProvider,
-  AnnouncementBarProvider,
-  DocsPreferredVersionContextProvider,
-  ScrollControllerProvider,
-  NavbarProvider,
-  PluginHtmlClassNameProvider,
-} from '@docusaurus/theme-common';
-export default function LayoutProviders({children}) {
-  return (
-    <ColorModeProvider>
-      <AnnouncementBarProvider>
-        <TabGroupChoiceProvider>
-          <ScrollControllerProvider>
-            <DocsPreferredVersionContextProvider>
-              <PluginHtmlClassNameProvider>
-                <NavbarProvider>{children}</NavbarProvider>
-              </PluginHtmlClassNameProvider>
-            </DocsPreferredVersionContextProvider>
-          </ScrollControllerProvider>
-        </TabGroupChoiceProvider>
-      </AnnouncementBarProvider>
-    </ColorModeProvider>
-  );
-}

package/src/theme/LayoutProviders/index.tsx

@@ -1,36 +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.
- */
-
-import React from 'react';
-import {
-  ColorModeProvider,
-  TabGroupChoiceProvider,
-  AnnouncementBarProvider,
-  DocsPreferredVersionContextProvider,
-  ScrollControllerProvider,
-  NavbarProvider,
-  PluginHtmlClassNameProvider,
-} from '@docusaurus/theme-common';
-import type {Props} from '@theme/LayoutProviders';
-
-export default function LayoutProviders({children}: Props): JSX.Element {
-  return (
-    <ColorModeProvider>
-      <AnnouncementBarProvider>
-        <TabGroupChoiceProvider>
-          <ScrollControllerProvider>
-            <DocsPreferredVersionContextProvider>
-              <PluginHtmlClassNameProvider>
-                <NavbarProvider>{children}</NavbarProvider>
-              </PluginHtmlClassNameProvider>
-            </DocsPreferredVersionContextProvider>
-          </ScrollControllerProvider>
-        </TabGroupChoiceProvider>
-      </AnnouncementBarProvider>
-    </ColorModeProvider>
-  );
-}