@docusaurus/theme-classic 0.0.0-4731 → 0.0.0-4734

package/lib/theme-classic.d.ts

@@ -833,11 +833,8 @@ declare module '@theme/IconExternalLink' {
 }
 
 declare module '@theme/TagsListByLetter' {
-  export type TagsListItem = Readonly<{
-    name: string;
-    permalink: string;
-    count: number;
-  }>;
+  import type {TagsListItem} from '@docusaurus/theme-common';
+
   export interface Props {
     readonly tags: readonly TagsListItem[];
   }
@@ -853,7 +850,7 @@ declare module '@theme/TagsListInline' {
 }
 
 declare module '@theme/Tag' {
-  import type {TagsListItem} from '@theme/TagsListByLetter';
+  import type {TagsListItem} from '@docusaurus/theme-common';
   import type {Optional} from 'utility-types';
 
   export interface Props extends Optional<TagsListItem, 'count'> {}

package/lib-next/theme/DocBreadcrumbs/index.js

@@ -16,7 +16,7 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl'; // TODO move to design system folder
 
 function BreadcrumbsItemLink({children, href}) {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  const className = 'breadcrumbs__link';
   return href ? (
     <Link className={className} href={href} itemProp="item">
       <span itemProp="name">{children}</span>
@@ -81,7 +81,8 @@ export default function DocBreadcrumbs() {
             key={idx}
             active={idx === breadcrumbs.length - 1}
             index={idx}>
-            <BreadcrumbsItemLink href={item.href}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
               {item.label}
             </BreadcrumbsItemLink>
           </BreadcrumbsItem>

package/lib-next/theme/DocBreadcrumbs/styles.module.css

@@ -6,21 +6,6 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
-}
-
-.breadcrumbsItemLink {
-  --ifm-breadcrumb-size-multiplier: 0.7 !important;
-  margin-bottom: 0.4rem;
-  background: var(--ifm-color-gray-100);
-}
-
-html[data-theme='dark'] .breadcrumbsItemLink {
-  background-color: var(--ifm-color-gray-900);
-}
-
-@media (min-width: 997px) {
-  .breadcrumbsItemLink {
-    --ifm-breadcrumb-size-multiplier: 0.8;
-  }
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }

package/lib-next/theme/DocItem/index.js

@@ -15,7 +15,11 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
 export default function DocItem(props) {
@@ -41,7 +45,7 @@ export default function DocItem(props) {
   const renderTocDesktop =
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
   return (
-    <>
+    <HtmlClassNameProvider className={`docs-doc-id-${metadata.unversionedId}`}>
       <Seo
         {...{
           title,
@@ -106,6 +110,6 @@ export default function DocItem(props) {
           </div>
         )}
       </div>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/lib-next/theme/DocPage/index.js

@@ -16,13 +16,13 @@ import {translate} from '@docusaurus/Translate';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import {
+  HtmlClassNameProvider,
   ThemeClassNames,
   docVersionSearchTag,
   DocsSidebarProvider,
   useDocsSidebar,
   DocsVersionProvider,
 } from '@docusaurus/theme-common';
-import Head from '@docusaurus/Head';
 
 function DocPageContent({
   currentDocRoute,
@@ -145,11 +145,7 @@ export default function DocPage(props) {
     ? versionMetadata.docsSidebars[sidebarName]
     : null;
   return (
-    <>
-      <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) action */}
-        <html className={versionMetadata.className} />
-      </Head>
+    <HtmlClassNameProvider className={versionMetadata.className}>
       <DocsVersionProvider version={versionMetadata}>
         <DocsSidebarProvider sidebar={sidebar ?? null}>
           <DocPageContent
@@ -162,6 +158,6 @@ export default function DocPage(props) {
           </DocPageContent>
         </DocsSidebarProvider>
       </DocsVersionProvider>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/lib-next/theme/LayoutProviders/index.js

@@ -12,6 +12,7 @@ import {
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
   ScrollControllerProvider,
+  PluginHtmlClassNameProvider,
 } from '@docusaurus/theme-common';
 export default function LayoutProviders({children}) {
   return (
@@ -21,7 +22,9 @@ export default function LayoutProviders({children}) {
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
-                {children}
+                <PluginHtmlClassNameProvider>
+                  {children}
+                </PluginHtmlClassNameProvider>
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>

package/lib-next/theme/NavbarItem/DefaultNavbarItem.js

@@ -31,11 +31,7 @@ function DefaultNavbarItemDesktop({
   return element;
 }
 
-function DefaultNavbarItemMobile({
-  className,
-  isDropdownItem: _isDropdownItem,
-  ...props
-}) {
+function DefaultNavbarItemMobile({className, isDropdownItem, ...props}) {
   return (
     <li className="menu__list-item">
       <NavbarNavLink className={clsx('menu__link', className)} {...props} />
@@ -45,7 +41,7 @@ function DefaultNavbarItemMobile({
 
 export default function DefaultNavbarItem({
   mobile = false,
-  position: _position,
+  position,
   // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }) {

package/lib-next/theme/NavbarItem/DropdownNavbarItem.js

@@ -104,7 +104,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
 function DropdownNavbarItemMobile({
   items,
   className,
-  position: _position,
+  position,
   // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4731",
+  "version": "0.0.0-4734",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4731",
-    "@docusaurus/plugin-content-blog": "0.0.0-4731",
-    "@docusaurus/plugin-content-docs": "0.0.0-4731",
-    "@docusaurus/plugin-content-pages": "0.0.0-4731",
-    "@docusaurus/theme-common": "0.0.0-4731",
-    "@docusaurus/theme-translations": "0.0.0-4731",
-    "@docusaurus/utils": "0.0.0-4731",
-    "@docusaurus/utils-common": "0.0.0-4731",
-    "@docusaurus/utils-validation": "0.0.0-4731",
+    "@docusaurus/core": "0.0.0-4734",
+    "@docusaurus/plugin-content-blog": "0.0.0-4734",
+    "@docusaurus/plugin-content-docs": "0.0.0-4734",
+    "@docusaurus/plugin-content-pages": "0.0.0-4734",
+    "@docusaurus/theme-common": "0.0.0-4734",
+    "@docusaurus/theme-translations": "0.0.0-4734",
+    "@docusaurus/utils": "0.0.0-4734",
+    "@docusaurus/utils-common": "0.0.0-4734",
+    "@docusaurus/utils-validation": "0.0.0-4734",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.5.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4731",
-    "@docusaurus/types": "0.0.0-4731",
+    "@docusaurus/module-type-aliases": "0.0.0-4734",
+    "@docusaurus/types": "0.0.0-4734",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "f3787c5cd81d0d934005814e3038d897f5ba58aa"
+  "gitHead": "0ca49e19e1c96a7d4a0f2bb72ccfca4b7a3eb9bb"
 }

package/src/theme/DocBreadcrumbs/index.tsx

@@ -24,7 +24,7 @@ function BreadcrumbsItemLink({
   children: ReactNode;
   href?: string;
 }): JSX.Element {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  const className = 'breadcrumbs__link';
   return href ? (
     <Link className={className} href={href} itemProp="item">
       <span itemProp="name">{children}</span>
@@ -98,7 +98,8 @@ export default function DocBreadcrumbs(): JSX.Element | null {
             key={idx}
             active={idx === breadcrumbs.length - 1}
             index={idx}>
-            <BreadcrumbsItemLink href={item.href}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
               {item.label}
             </BreadcrumbsItemLink>
           </BreadcrumbsItem>

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

@@ -6,21 +6,6 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
-}
-
-.breadcrumbsItemLink {
-  --ifm-breadcrumb-size-multiplier: 0.7 !important;
-  margin-bottom: 0.4rem;
-  background: var(--ifm-color-gray-100);
-}
-
-html[data-theme='dark'] .breadcrumbsItemLink {
-  background-color: var(--ifm-color-gray-900);
-}
-
-@media (min-width: 997px) {
-  .breadcrumbsItemLink {
-    --ifm-breadcrumb-size-multiplier: 0.8;
-  }
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }

package/src/theme/DocItem/index.tsx

@@ -17,7 +17,11 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
 
@@ -49,7 +53,7 @@ export default function DocItem(props: Props): JSX.Element {
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
 
   return (
-    <>
+    <HtmlClassNameProvider className={`docs-doc-id-${metadata.unversionedId}`}>
       <Seo {...{title, description, keywords, image}} />
 
       <div className="row">
@@ -107,6 +111,6 @@ export default function DocItem(props: Props): JSX.Element {
           </div>
         )}
       </div>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/src/theme/DocPage/index.tsx

@@ -20,14 +20,15 @@ import {translate} from '@docusaurus/Translate';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
+
 import {
+  HtmlClassNameProvider,
   ThemeClassNames,
   docVersionSearchTag,
   DocsSidebarProvider,
   useDocsSidebar,
   DocsVersionProvider,
 } from '@docusaurus/theme-common';
-import Head from '@docusaurus/Head';
 
 type DocPageContentProps = {
   readonly currentDocRoute: DocumentRoute;
@@ -160,11 +161,7 @@ export default function DocPage(props: Props): JSX.Element {
     : null;
 
   return (
-    <>
-      <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) action */}
-        <html className={versionMetadata.className} />
-      </Head>
+    <HtmlClassNameProvider className={versionMetadata.className}>
       <DocsVersionProvider version={versionMetadata}>
         <DocsSidebarProvider sidebar={sidebar ?? null}>
           <DocPageContent
@@ -175,6 +172,6 @@ export default function DocPage(props: Props): JSX.Element {
           </DocPageContent>
         </DocsSidebarProvider>
       </DocsVersionProvider>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/src/theme/DocSidebarItem/index.tsx

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

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

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

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

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

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

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

package/src/theme/LayoutProviders/index.tsx

@@ -13,6 +13,7 @@ import {
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
   ScrollControllerProvider,
+  PluginHtmlClassNameProvider,
 } from '@docusaurus/theme-common';
 import type {Props} from '@theme/LayoutProviders';
 
@@ -24,7 +25,9 @@ export default function LayoutProviders({children}: Props): JSX.Element {
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
-                {children}
+                <PluginHtmlClassNameProvider>
+                  {children}
+                </PluginHtmlClassNameProvider>
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>

package/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -41,7 +41,7 @@ function DefaultNavbarItemDesktop({
 
 function DefaultNavbarItemMobile({
   className,
-  isDropdownItem: _isDropdownItem,
+  isDropdownItem,
   ...props
 }: DesktopOrMobileNavBarItemProps) {
   return (
@@ -53,7 +53,7 @@ function DefaultNavbarItemMobile({
 
 export default function DefaultNavbarItem({
   mobile = false,
-  position: _position, // Need to destructure position from props so that it doesn't get passed on.
+  position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }: Props): JSX.Element {
   const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -124,7 +124,7 @@ function DropdownNavbarItemDesktop({
 function DropdownNavbarItemMobile({
   items,
   className,
-  position: _position, // Need to destructure position from props so that it doesn't get passed on.
+  position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }: DesktopOrMobileNavBarItemProps) {
   const localPathname = useLocalPathname();

package/src/theme-classic.d.ts

@@ -833,11 +833,8 @@ declare module '@theme/IconExternalLink' {
 }
 
 declare module '@theme/TagsListByLetter' {
-  export type TagsListItem = Readonly<{
-    name: string;
-    permalink: string;
-    count: number;
-  }>;
+  import type {TagsListItem} from '@docusaurus/theme-common';
+
   export interface Props {
     readonly tags: readonly TagsListItem[];
   }
@@ -853,7 +850,7 @@ declare module '@theme/TagsListInline' {
 }
 
 declare module '@theme/Tag' {
-  import type {TagsListItem} from '@theme/TagsListByLetter';
+  import type {TagsListItem} from '@docusaurus/theme-common';
   import type {Optional} from 'utility-types';
 
   export interface Props extends Optional<TagsListItem, 'count'> {}