@docusaurus/theme-classic 3.1.0 → 3.2.0

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

@@ -101,6 +101,7 @@ function CollapseButton({
               {label: categoryLabel},
             )
       }
+      aria-expanded={!collapsed}
       type="button"
       className="clean-btn menu__caret"
       onClick={onClick}
@@ -193,7 +194,8 @@ export default function DocSidebarItemCategory({
                 }
           }
           aria-current={isCurrentPage ? 'page' : undefined}
-          aria-expanded={collapsible ? !collapsed : undefined}
+          role={collapsible && !href ? 'button' : undefined}
+          aria-expanded={collapsible && !href ? !collapsed : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}>
           {label}

package/src/theme/EditMetaRow/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 EditThisPage from '@theme/EditThisPage';
+import type {Props} from '@theme/EditMetaRow';
+
+import LastUpdated from '@theme/LastUpdated';
+import styles from './styles.module.css';
+
+export default function EditMetaRow({
+  className,
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}: Props): JSX.Element {
+  return (
+    <div className={clsx('row', className)}>
+      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+      <div className={clsx('col', styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/theme/LastUpdated/index.tsx

@@ -8,15 +8,25 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/LastUpdated';
 
 function LastUpdatedAtDate({
   lastUpdatedAt,
-  formattedLastUpdatedAt,
 }: {
   lastUpdatedAt: number;
-  formattedLastUpdatedAt: string;
 }): JSX.Element {
+  const atDate = new Date(lastUpdatedAt);
+
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+
+  const formattedLastUpdatedAt = dateTimeFormat.format(atDate);
+
   return (
     <Translate
       id="theme.lastUpdated.atDate"
@@ -24,7 +34,7 @@ function LastUpdatedAtDate({
       values={{
         date: (
           <b>
-            <time dateTime={new Date(lastUpdatedAt * 1000).toISOString()}>
+            <time dateTime={atDate.toISOString()} itemProp="dateModified">
               {formattedLastUpdatedAt}
             </time>
           </b>
@@ -54,7 +64,6 @@ function LastUpdatedByUser({
 
 export default function LastUpdated({
   lastUpdatedAt,
-  formattedLastUpdatedAt,
   lastUpdatedBy,
 }: Props): JSX.Element {
   return (
@@ -63,15 +72,11 @@ export default function LastUpdated({
         id="theme.lastUpdated.lastUpdatedAtBy"
         description="The sentence used to display when a page has been last updated, and by who"
         values={{
-          atDate:
-            lastUpdatedAt && formattedLastUpdatedAt ? (
-              <LastUpdatedAtDate
-                lastUpdatedAt={lastUpdatedAt}
-                formattedLastUpdatedAt={formattedLastUpdatedAt}
-              />
-            ) : (
-              ''
-            ),
+          atDate: lastUpdatedAt ? (
+            <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
+          ) : (
+            ''
+          ),
           byUser: lastUpdatedBy ? (
             <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
           ) : (

package/src/theme/MDXComponents/Img/index.tsx

@@ -19,6 +19,7 @@ export default function MDXImg(props: Props): JSX.Element {
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
     <img
+      decoding="async"
       loading="lazy"
       {...props}
       className={transformImgClassName(props.className)}

package/src/theme/MDXComponents/Li.tsx

@@ -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.
+ */
+
+import React, {type ReactNode} from 'react';
+import useBrokenLinks from '@docusaurus/useBrokenLinks';
+import type {Props} from '@theme/MDXComponents/Li';
+
+export default function MDXLi(props: Props): ReactNode | undefined {
+  // MDX Footnotes have ids such as <li id="user-content-fn-1-953011">
+  useBrokenLinks().collectAnchor(props.id);
+
+  return <li {...props} />;
+}

package/src/theme/MDXComponents/index.tsx

@@ -13,6 +13,7 @@ import MDXPre from '@theme/MDXComponents/Pre';
 import MDXDetails from '@theme/MDXComponents/Details';
 import MDXHeading from '@theme/MDXComponents/Heading';
 import MDXUl from '@theme/MDXComponents/Ul';
+import MDXLi from '@theme/MDXComponents/Li';
 import MDXImg from '@theme/MDXComponents/Img';
 import Admonition from '@theme/Admonition';
 import Mermaid from '@theme/Mermaid';
@@ -27,6 +28,7 @@ const MDXComponents: MDXComponentsObject = {
   a: MDXA,
   pre: MDXPre,
   ul: MDXUl,
+  li: MDXLi,
   img: MDXImg,
   h1: (props: ComponentProps<'h1'>) => <MDXHeading as="h1" {...props} />,
   h2: (props: ComponentProps<'h2'>) => <MDXHeading as="h2" {...props} />,

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

@@ -89,6 +89,9 @@ function DropdownNavbarItemDesktop({
         aria-haspopup="true"
         aria-expanded={showDropdown}
         role="button"
+        // # hash permits to make the <a> tag focusable in case no link target
+        // See https://github.com/facebook/docusaurus/pull/6003
+        // There's probably a better solution though...
         href={props.to ? undefined : '#'}
         className={clsx('navbar__link', className)}
         {...props}

package/src/theme-classic.d.ts

@@ -676,6 +676,16 @@ declare module '@theme/DocVersionSuggestions' {
   export default function DocVersionSuggestions(): JSX.Element;
 }
 
+declare module '@theme/EditMetaRow' {
+  export interface Props {
+    readonly className: string;
+    readonly editUrl: string | null | undefined;
+    readonly lastUpdatedAt: number | undefined;
+    readonly lastUpdatedBy: string | undefined;
+  }
+  export default function EditMetaRow(props: Props): JSX.Element;
+}
+
 declare module '@theme/EditThisPage' {
   export interface Props {
     readonly editUrl: string;
@@ -824,7 +834,6 @@ declare module '@theme/SearchMetadata' {
 declare module '@theme/LastUpdated' {
   export interface Props {
     readonly lastUpdatedAt?: number;
-    readonly formattedLastUpdatedAt?: string;
     readonly lastUpdatedBy?: string;
   }
 
@@ -867,6 +876,14 @@ declare module '@theme/MDXComponents/Ul' {
   export default function MDXUl(props: Props): JSX.Element;
 }
 
+declare module '@theme/MDXComponents/Li' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'li'> {}
+
+  export default function MDXLi(props: Props): JSX.Element;
+}
+
 declare module '@theme/MDXComponents/Img' {
   import type {ComponentProps} from 'react';
 

package/lib/theme/{DocItem/Footer → EditMetaRow}/styles.module.css

@@ -6,9 +6,9 @@
  */
 
 .lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
   font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
 }
 
 @media (min-width: 997px) {

package/src/theme/{DocItem/Footer → EditMetaRow}/styles.module.css

@@ -6,9 +6,9 @@
  */
 
 .lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
   font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
 }
 
 @media (min-width: 997px) {