@docusaurus/theme-classic 0.0.0-4523 → 0.0.0-4527

package/lib/index.js

@@ -35,7 +35,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 const requireFromDocusaurusCore = (0, _module.createRequire)(require.resolve('@docusaurus/core/package.json'));
 const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin'); // Need to be inlined to prevent dark mode FOUC
-// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
+// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
 
 const ThemeStorageKey = 'theme';
 
@@ -76,15 +76,17 @@ const noFlashColorMode = ({
       setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
     }
   }
-})();`; // Duplicated constant. Unfortunately we can't import it from theme-common, as we need to support older nodejs versions without ESM support
+})();`; // Duplicated constant. Unfortunately we can't import it from theme-common, as
+// we need to support older nodejs versions without ESM support
 // TODO: import from theme-common once we only support Node.js with ESM support
 // + move all those announcementBar stuff there too
 
 
 const AnnouncementBarDismissStorageKey = 'docusaurus.announcement.dismiss';
 exports.AnnouncementBarDismissStorageKey = AnnouncementBarDismissStorageKey;
-const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed'; // We always render the announcement bar html on the server, to prevent layout shifts on React hydration
-// The theme can use CSS + the data attribute to hide the announcement bar asap (before React hydration)
+const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed'; // We always render the announcement bar html on the server, to prevent layout
+// shifts on React hydration. The theme can use CSS + the data attribute to hide
+// the announcement bar asap (before React hydration)
 
 const AnnouncementBarInlineJavaScript = `
 (function() {

package/lib/validateThemeConfig.js

@@ -58,8 +58,8 @@ const NavbarItemPosition = _utilsValidation.Joi.string().equal('left', 'right').
 const NavbarItemBaseSchema = _utilsValidation.Joi.object({
   label: _utilsValidation.Joi.string(),
   className: _utilsValidation.Joi.string()
-}) // We allow any unknown attributes on the links
-// (users may need additional attributes like target, aria-role, data-customAttribute...)
+}) // We allow any unknown attributes on the links (users may need additional
+// attributes like target, aria-role, data-customAttribute...)
 .unknown();
 
 const DefaultNavbarItemSchema = NavbarItemBaseSchema.append({
@@ -208,8 +208,8 @@ const FooterLinkItemSchema = _utilsValidation.Joi.object({
   href: _utilsValidation.URISchema,
   html: _utilsValidation.Joi.string(),
   label: _utilsValidation.Joi.string()
-}).xor('to', 'href', 'html').with('to', 'label').with('href', 'label').nand('html', 'label') // We allow any unknown attributes on the links
-// (users may need additional attributes like target, aria-role, data-customAttribute...)
+}).xor('to', 'href', 'html').with('to', 'label').with('href', 'label').nand('html', 'label') // We allow any unknown attributes on the links (users may need additional
+// attributes like target, aria-role, data-customAttribute...)
 .unknown();
 
 const CustomCssSchema = _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array().items(_utilsValidation.Joi.string().required()), _utilsValidation.Joi.string().required()).optional();

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

@@ -17,7 +17,9 @@ const threshold = 300; // Not all have support for smooth scrolling (particularl
 // TODO proper detection is currently unreliable!
 // see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
 
-const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling = ExecutionEnvironment.canUseDOM && 'scrollBehavior' in document.documentElement.style;
+const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling =
+//   ExecutionEnvironment.canUseDOM &&
+//   'scrollBehavior' in document.documentElement.style;
 
 function smoothScrollTopNative() {
   window.scrollTo({
@@ -41,8 +43,8 @@ function smoothScrollTopPolyfill() {
     }
   }
 
-  rafRecursion(); // Break the recursion
-  // Prevents the user from "fighting" against that recursion producing a weird UX
+  rafRecursion(); // Break the recursion. Prevents the user from "fighting" against that
+  // recursion producing a weird UX
 
   return () => raf && cancelAnimationFrame(raf);
 }

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

@@ -18,27 +18,24 @@ function BlogPostAuthor({author}) {
         </Link>
       )}
 
-      {
-        // Note: only legacy author front matter allow empty name (not frontMatter.authors)
-        name && (
-          <div
-            className="avatar__intro"
-            itemProp="author"
-            itemScope
-            itemType="https://schema.org/Person">
-            <div className="avatar__name">
-              <Link href={url} itemProp="url">
-                <span itemProp="name">{name}</span>
-              </Link>
-            </div>
-            {title && (
-              <small className="avatar__subtitle" itemProp="description">
-                {title}
-              </small>
-            )}
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <Link href={url} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </Link>
           </div>
-        )
-      }
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
     </div>
   );
 }

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

@@ -48,8 +48,9 @@ function BlogPostPage(props) {
           />
         ) : undefined
       }>
-      <Seo // TODO refactor needed: it's a bit annoying but Seo MUST be inside BlogLayout
-        // otherwise  default image (set by BlogLayout) would shadow the custom blog post image
+      <Seo // TODO refactor needed: it's a bit annoying but Seo MUST be inside
+        // BlogLayout, otherwise default image (set by BlogLayout) would shadow
+        // the custom blog post image
         title={title}
         description={description}
         keywords={keywords}

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

@@ -43,7 +43,8 @@ export default function CodeBlock({
 
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
   const prismTheme = usePrismTheme(); // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
-  // When the children is not a simple string, we just return a styled block without actually highlighting.
+  // When the children is not a simple string, we just return a styled block
+  // without actually highlighting.
 
   if (React.Children.toArray(children).some((el) => isValidElement(el))) {
     return (

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

@@ -7,7 +7,8 @@
 import React from 'react';
 import clsx from 'clsx';
 import {Details as DetailsGeneric} from '@docusaurus/theme-common';
-import styles from './styles.module.css'; // Should we have a custom details/summary comp in Infima instead of reusing alert classes?
+import styles from './styles.module.css'; // Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
 
 const InfimaClasses = 'alert alert--info';
 export default function Details({...props}) {

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

@@ -74,8 +74,9 @@ export default function DocItem(props) {
               <div
                 className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
                 {/*
-                Title can be declared inside md content or declared through front matter and added manually
-                To make both cases consistent, the added title is added under the same div.markdown block
+                Title can be declared inside md content or declared through
+                front matter and added manually. To make both cases consistent,
+                the added title is added under the same div.markdown block
                 See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
                 */}
                 {shouldAddTitle && (

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

@@ -152,7 +152,7 @@ function DocPage(props) {
   return (
     <>
       <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) generic plugin option */}
+        {/* TODO we should add a core addRoute({htmlClassName}) action */}
         <html className={versionMetadata.className} />
       </Head>
       <DocsVersionProvider version={versionMetadata}>

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

@@ -15,6 +15,7 @@ import {
   ThemeClassNames,
   useThemeConfig,
   useDocSidebarItemsExpandedState,
+  isSamePath,
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -36,7 +37,8 @@ export default function DocSidebarItem({item, ...props}) {
     default:
       return <DocSidebarItemLink item={item} {...props} />;
   }
-} // If we navigate to a category and it becomes active, it should automatically expand itself
+} // If we navigate to a category and it becomes active, it should automatically
+// expand itself
 
 function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
   const wasActive = usePrevious(isActive);
@@ -47,11 +49,15 @@ function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
       setCollapsed(false);
     }
   }, [isActive, wasActive, collapsed, setCollapsed]);
-} // When a collapsible category has no link, we still link it to its first child during SSR as a temporary fallback
-// This allows to be able to navigate inside the category even when JS fails to load, is delayed or simply disabled
-// React hydration becomes an optional progressive enhancement
-// see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
-// see https://github.com/facebook/docusaurus/issues/3030
+}
+/**
+ * When a collapsible category has no link, we still link it to its first child
+ * during SSR as a temporary fallback. This allows to be able to navigate inside
+ * the category even when JS fails to load, is delayed or simply disabled
+ * React hydration becomes an optional progressive enhancement
+ * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+ * see https://github.com/facebook/docusaurus/issues/3030
+ */
 
 function useCategoryHrefWithSSRFallback(item) {
   const isBrowser = useIsBrowser();
@@ -80,6 +86,7 @@ function DocSidebarItemCategory({
   const {items, label, collapsible, className, href} = item;
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
   const isActive = isActiveSidebarItem(item, activePath);
+  const isCurrentPage = isSamePath(href, activePath);
   const {collapsed, setCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
     // the default (item.collapsed) is only used for non-active categories
@@ -131,7 +138,10 @@ function DocSidebarItemCategory({
         },
         className,
       )}>
-      <div className="menu__list-item-collapsible">
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isCurrentPage,
+        })}>
         <Link
           className={clsx('menu__link', {
             'menu__link--sublist': collapsible && !href,
@@ -155,7 +165,7 @@ function DocSidebarItemCategory({
                   onItemClick?.(item);
                 }
           }
-          aria-current={isActive ? 'page' : undefined}
+          aria-current={isCurrentPage ? 'page' : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}>
           {label}

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

@@ -10,8 +10,8 @@ import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import Details from '@theme/Details';
-import './styles.css'; // MDX elements are wrapped through the MDX pragma
-// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
+import './styles.css'; // MDX elements are wrapped through the MDX pragma. In some cases (notably usage
+// with Head/Helmet) we need to unwrap those elements.
 
 function unwrapMDXElement(element) {
   if (element?.props?.mdxType && element?.props?.originalType) {
@@ -45,7 +45,8 @@ const MDXComponents = {
     />
   ),
   details: (props) => {
-    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the Details theme component
+    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the
+    // Details theme component
 
     const summary = items.find((item) => item?.props?.mdxType === 'summary');
     const children = <>{items.filter((item) => item !== summary)}</>;

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

@@ -68,8 +68,8 @@ export default function DocsVersionDropdownNavbarItem({
   const dropdownTo =
     mobile && items.length > 1
       ? undefined
-      : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item
-  // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
+      : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item. If we build
+  // the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
   // We'd rather render a button instead of a dropdown
 
   if (items.length <= 1) {

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

@@ -14,8 +14,8 @@ const NavbarItemComponents = {
   localeDropdown: () => LocaleDropdownNavbarItem,
   search: () => SearchNavbarItem,
   dropdown: () => DropdownNavbarItem,
-  // Need to lazy load these items as we don't know for sure the docs plugin is loaded
-  // See https://github.com/facebook/docusaurus/issues/3360
+  // Need to lazy load these items as we don't know for sure the docs plugin is
+  // loaded. See https://github.com/facebook/docusaurus/issues/3360
 
   /* eslint-disable @typescript-eslint/no-var-requires, global-require */
   docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,

package/lib-next/theme/SearchBar.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 // By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this file, it is your responsibility to provide an implementation
+// If you swizzled this, it is your responsibility to provide an implementation
 // Tip: swizzle the SearchBar from the Algolia theme for inspiration:
 // npm run swizzle @docusaurus/theme-search-algolia SearchBar
 export {default} from '@docusaurus/Noop';

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

@@ -8,7 +8,7 @@ import React from 'react';
 import clsx from 'clsx';
 import TOCItems from '@theme/TOCItems';
 import styles from './styles.module.css'; // Using a custom className
-// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
 
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';

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

@@ -42,7 +42,7 @@ function TabsComponent(props) {
     );
   });
   const values =
-    valuesProp ?? // We only pick keys that we recognize. MDX would inject some keys by default
+    valuesProp ?? // Only pick keys that we recognize. MDX would inject some keys by default
     children.map(({props: {value, label, attributes}}) => ({
       value,
       label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4523",
+  "version": "0.0.0-4527",
   "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-4523",
-    "@docusaurus/plugin-content-blog": "0.0.0-4523",
-    "@docusaurus/plugin-content-docs": "0.0.0-4523",
-    "@docusaurus/plugin-content-pages": "0.0.0-4523",
-    "@docusaurus/theme-common": "0.0.0-4523",
-    "@docusaurus/theme-translations": "0.0.0-4523",
-    "@docusaurus/utils": "0.0.0-4523",
-    "@docusaurus/utils-common": "0.0.0-4523",
-    "@docusaurus/utils-validation": "0.0.0-4523",
+    "@docusaurus/core": "0.0.0-4527",
+    "@docusaurus/plugin-content-blog": "0.0.0-4527",
+    "@docusaurus/plugin-content-docs": "0.0.0-4527",
+    "@docusaurus/plugin-content-pages": "0.0.0-4527",
+    "@docusaurus/theme-common": "0.0.0-4527",
+    "@docusaurus/theme-translations": "0.0.0-4527",
+    "@docusaurus/utils": "0.0.0-4527",
+    "@docusaurus/utils-common": "0.0.0-4527",
+    "@docusaurus/utils-validation": "0.0.0-4527",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4523",
-    "@docusaurus/types": "0.0.0-4523",
+    "@docusaurus/module-type-aliases": "0.0.0-4527",
+    "@docusaurus/types": "0.0.0-4527",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/prismjs": "^1.16.2",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "e78e68d4bc6a23f7e616eb7b59da9c79d9fb7452"
+  "gitHead": "fdd9e4feffd46f92b4ee3c519026bff7f2de6d05"
 }

package/src/index.ts

@@ -23,7 +23,7 @@ const ContextReplacementPlugin: typeof webpack.ContextReplacementPlugin =
   requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
 
 // Need to be inlined to prevent dark mode FOUC
-// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
+// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
 const ThemeStorageKey = 'theme';
 const noFlashColorMode = ({
   defaultMode,
@@ -64,15 +64,17 @@ const noFlashColorMode = ({
   }
 })();`;
 
-// Duplicated constant. Unfortunately we can't import it from theme-common, as we need to support older nodejs versions without ESM support
+// Duplicated constant. Unfortunately we can't import it from theme-common, as
+// we need to support older nodejs versions without ESM support
 // TODO: import from theme-common once we only support Node.js with ESM support
 // + move all those announcementBar stuff there too
 export const AnnouncementBarDismissStorageKey =
   'docusaurus.announcement.dismiss';
 const AnnouncementBarDismissDataAttribute =
   'data-announcement-bar-initially-dismissed';
-// We always render the announcement bar html on the server, to prevent layout shifts on React hydration
-// The theme can use CSS + the data attribute to hide the announcement bar asap (before React hydration)
+// We always render the announcement bar html on the server, to prevent layout
+// shifts on React hydration. The theme can use CSS + the data attribute to hide
+// the announcement bar asap (before React hydration)
 const AnnouncementBarInlineJavaScript = `
 (function() {
   function isDismissed() {

package/src/theme/BackToTopButton/index.tsx

@@ -22,7 +22,9 @@ const threshold = 300;
 // TODO proper detection is currently unreliable!
 // see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
 const SupportsNativeSmoothScrolling = false;
-// const SupportsNativeSmoothScrolling = ExecutionEnvironment.canUseDOM && 'scrollBehavior' in document.documentElement.style;
+// const SupportsNativeSmoothScrolling =
+//   ExecutionEnvironment.canUseDOM &&
+//   'scrollBehavior' in document.documentElement.style;
 
 type CancelScrollTop = () => void;
 
@@ -44,13 +46,14 @@ function smoothScrollTopPolyfill(): CancelScrollTop {
   }
   rafRecursion();
 
-  // Break the recursion
-  // Prevents the user from "fighting" against that recursion producing a weird UX
+  // Break the recursion. Prevents the user from "fighting" against that
+  // recursion producing a weird UX
   return () => raf && cancelAnimationFrame(raf);
 }
 
 type UseSmoothScrollTopReturn = {
-  // We use a cancel function because the non-native smooth scroll-top implementation must be interrupted if user scroll down
+  // We use a cancel function because the non-native smooth scroll-top
+  // implementation must be interrupted if user scroll down
   smoothScrollTop: () => void;
   cancelScrollToTop: CancelScrollTop;
 };

package/src/theme/BlogPostAuthor/index.tsx

@@ -21,27 +21,24 @@ function BlogPostAuthor({author}: Props): JSX.Element {
         </Link>
       )}
 
-      {
-        // Note: only legacy author front matter allow empty name (not frontMatter.authors)
-        name && (
-          <div
-            className="avatar__intro"
-            itemProp="author"
-            itemScope
-            itemType="https://schema.org/Person">
-            <div className="avatar__name">
-              <Link href={url} itemProp="url">
-                <span itemProp="name">{name}</span>
-              </Link>
-            </div>
-            {title && (
-              <small className="avatar__subtitle" itemProp="description">
-                {title}
-              </small>
-            )}
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <Link href={url} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </Link>
           </div>
-        )
-      }
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/src/theme/BlogPostPage/index.tsx

@@ -53,8 +53,9 @@ function BlogPostPage(props: Props): JSX.Element {
         ) : undefined
       }>
       <Seo
-        // TODO refactor needed: it's a bit annoying but Seo MUST be inside BlogLayout
-        // otherwise  default image (set by BlogLayout) would shadow the custom blog post image
+        // TODO refactor needed: it's a bit annoying but Seo MUST be inside
+        // BlogLayout, otherwise default image (set by BlogLayout) would shadow
+        // the custom blog post image
         title={title}
         description={description}
         keywords={keywords}

package/src/theme/CodeBlock/index.tsx

@@ -51,7 +51,8 @@ export default function CodeBlock({
   const prismTheme = usePrismTheme();
 
   // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
-  // When the children is not a simple string, we just return a styled block without actually highlighting.
+  // When the children is not a simple string, we just return a styled block
+  // without actually highlighting.
   if (React.Children.toArray(children).some((el) => isValidElement(el))) {
     return (
       <Highlight

package/src/theme/Details/index.tsx

@@ -11,7 +11,8 @@ import {Details as DetailsGeneric} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Details';
 import styles from './styles.module.css';
 
-// Should we have a custom details/summary comp in Infima instead of reusing alert classes?
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
 const InfimaClasses = 'alert alert--info';
 
 export default function Details({...props}: Props): JSX.Element {

package/src/theme/DocItem/index.tsx

@@ -75,8 +75,9 @@ export default function DocItem(props: Props): JSX.Element {
               <div
                 className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
                 {/*
-                Title can be declared inside md content or declared through front matter and added manually
-                To make both cases consistent, the added title is added under the same div.markdown block
+                Title can be declared inside md content or declared through
+                front matter and added manually. To make both cases consistent,
+                the added title is added under the same div.markdown block
                 See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
                 */}
                 {shouldAddTitle && (

package/src/theme/DocPage/index.tsx

@@ -168,7 +168,7 @@ function DocPage(props: Props): JSX.Element {
   return (
     <>
       <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) generic plugin option */}
+        {/* TODO we should add a core addRoute({htmlClassName}) action */}
         <html className={versionMetadata.className} />
       </Head>
       <DocsVersionProvider version={versionMetadata}>

package/src/theme/DocSidebarItem/index.tsx

@@ -16,6 +16,7 @@ import {
   ThemeClassNames,
   useThemeConfig,
   useDocSidebarItemsExpandedState,
+  isSamePath,
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -48,7 +49,8 @@ export default function DocSidebarItem({
   }
 }
 
-// If we navigate to a category and it becomes active, it should automatically expand itself
+// If we navigate to a category and it becomes active, it should automatically
+// expand itself
 function useAutoExpandActiveCategory({
   isActive,
   collapsed,
@@ -67,11 +69,14 @@ function useAutoExpandActiveCategory({
   }, [isActive, wasActive, collapsed, setCollapsed]);
 }
 
-// When a collapsible category has no link, we still link it to its first child during SSR as a temporary fallback
-// This allows to be able to navigate inside the category even when JS fails to load, is delayed or simply disabled
-// React hydration becomes an optional progressive enhancement
-// see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
-// see https://github.com/facebook/docusaurus/issues/3030
+/**
+ * When a collapsible category has no link, we still link it to its first child
+ * during SSR as a temporary fallback. This allows to be able to navigate inside
+ * the category even when JS fails to load, is delayed or simply disabled
+ * React hydration becomes an optional progressive enhancement
+ * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+ * see https://github.com/facebook/docusaurus/issues/3030
+ */
 function useCategoryHrefWithSSRFallback(
   item: PropSidebarItemCategory,
 ): string | undefined {
@@ -101,6 +106,7 @@ function DocSidebarItemCategory({
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
 
   const isActive = isActiveSidebarItem(item, activePath);
+  const isCurrentPage = isSamePath(href, activePath);
 
   const {collapsed, setCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
@@ -148,7 +154,10 @@ function DocSidebarItemCategory({
         },
         className,
       )}>
-      <div className="menu__list-item-collapsible">
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isCurrentPage,
+        })}>
         <Link
           className={clsx('menu__link', {
             'menu__link--sublist': collapsible && !href,
@@ -171,7 +180,7 @@ function DocSidebarItemCategory({
                   onItemClick?.(item);
                 }
           }
-          aria-current={isActive ? 'page' : undefined}
+          aria-current={isCurrentPage ? 'page' : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}>
           {label}

package/src/theme/MDXComponents/index.tsx

@@ -19,8 +19,8 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
 
 import './styles.css';
 
-// MDX elements are wrapped through the MDX pragma
-// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
+// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
+// with Head/Helmet) we need to unwrap those elements.
 function unwrapMDXElement(element: ReactElement) {
   if (element?.props?.mdxType && element?.props?.originalType) {
     const {mdxType, originalType, ...newProps} = element.props;
@@ -55,7 +55,8 @@ const MDXComponents: MDXComponentsObject = {
   ),
   details: (props): JSX.Element => {
     const items = React.Children.toArray(props.children) as ReactElement[];
-    // Split summary item from the rest to pass it as a separate prop to the Details theme component
+    // Split summary item from the rest to pass it as a separate prop to the
+    // Details theme component
     const summary: ReactElement<ComponentProps<'summary'>> = items.find(
       (item) => item?.props?.mdxType === 'summary',
     )!;

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -78,8 +78,8 @@ export default function DocsVersionDropdownNavbarItem({
       ? undefined
       : getVersionMainDoc(dropdownVersion).path;
 
-  // We don't want to render a version dropdown with 0 or 1 item
-  // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
+  // We don't want to render a version dropdown with 0 or 1 item. If we build
+  // the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
   // We'd rather render a button instead of a dropdown
   if (items.length <= 1) {
     return (

package/src/theme/NavbarItem/index.tsx

@@ -25,8 +25,8 @@ const NavbarItemComponents: Record<
   search: () => SearchNavbarItem,
   dropdown: () => DropdownNavbarItem,
 
-  // Need to lazy load these items as we don't know for sure the docs plugin is loaded
-  // See https://github.com/facebook/docusaurus/issues/3360
+  // Need to lazy load these items as we don't know for sure the docs plugin is
+  // loaded. See https://github.com/facebook/docusaurus/issues/3360
   /* eslint-disable @typescript-eslint/no-var-requires, global-require */
   docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
   docsVersionDropdown: () =>

package/src/theme/SearchBar.tsx

@@ -6,7 +6,7 @@
  */
 
 // By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this file, it is your responsibility to provide an implementation
+// If you swizzled this, it is your responsibility to provide an implementation
 // Tip: swizzle the SearchBar from the Algolia theme for inspiration:
 // npm run swizzle @docusaurus/theme-search-algolia SearchBar
 export {default} from '@docusaurus/Noop';

package/src/theme/TOC/index.tsx

@@ -12,7 +12,7 @@ import TOCItems from '@theme/TOCItems';
 import styles from './styles.module.css';
 
 // Using a custom className
-// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 

package/src/theme/Tabs/index.tsx

@@ -55,7 +55,7 @@ function TabsComponent(props: Props): JSX.Element {
   });
   const values =
     valuesProp ??
-    // We only pick keys that we recognize. MDX would inject some keys by default
+    // Only pick keys that we recognize. MDX would inject some keys by default
     children.map(({props: {value, label, attributes}}) => ({
       value,
       label,

package/src/translations.ts

@@ -171,7 +171,7 @@ export function translateThemeConfig({
   themeConfig,
   translationFiles,
 }: {
-  // Why partial? To make TS correctly figure out the contravariance in parameter.
+  // To make TS correctly figure out the contravariance in parameter.
   // In practice it's always normalized
   themeConfig: ThemeConfig;
   translationFiles: TranslationFile[];

package/src/validateThemeConfig.ts

@@ -54,8 +54,8 @@ const NavbarItemBaseSchema = Joi.object({
   label: Joi.string(),
   className: Joi.string(),
 })
-  // We allow any unknown attributes on the links
-  // (users may need additional attributes like target, aria-role, data-customAttribute...)
+  // We allow any unknown attributes on the links (users may need additional
+  // attributes like target, aria-role, data-customAttribute...)
   .unknown();
 
 const DefaultNavbarItemSchema = NavbarItemBaseSchema.append({
@@ -251,8 +251,8 @@ const FooterLinkItemSchema = Joi.object({
   .with('to', 'label')
   .with('href', 'label')
   .nand('html', 'label')
-  // We allow any unknown attributes on the links
-  // (users may need additional attributes like target, aria-role, data-customAttribute...)
+  // We allow any unknown attributes on the links (users may need additional
+  // attributes like target, aria-role, data-customAttribute...)
   .unknown();
 
 const CustomCssSchema = Joi.alternatives()