@docusaurus/theme-classic 3.1.0 → 3.2.0

package/{src/theme/BlogPostItem/Footer/styles.module.css → lib/theme/MDXComponents/Li.d.ts}

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-.blogPostFooterDetailsFull {
-  flex-direction: column;
-}
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/MDXComponents/Li';
+export default function MDXLi(props: Props): ReactNode | undefined;

package/lib/theme/MDXComponents/Li.js

@@ -0,0 +1,13 @@
+/**
+ * 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 useBrokenLinks from '@docusaurus/useBrokenLinks';
+export default function MDXLi(props) {
+  // MDX Footnotes have ids such as <li id="user-content-fn-1-953011">
+  useBrokenLinks().collectAnchor(props.id);
+  return <li {...props} />;
+}

package/lib/theme/MDXComponents/index.js

@@ -12,6 +12,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';
@@ -23,6 +24,7 @@ const MDXComponents = {
   a: MDXA,
   pre: MDXPre,
   ul: MDXUl,
+  li: MDXLi,
   img: MDXImg,
   h1: (props) => <MDXHeading as="h1" {...props} />,
   h2: (props) => <MDXHeading as="h2" {...props} />,

package/lib/theme/NavbarItem/DropdownNavbarItem/index.js

@@ -66,6 +66,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.1.0",
-    "@docusaurus/mdx-loader": "3.1.0",
-    "@docusaurus/module-type-aliases": "3.1.0",
-    "@docusaurus/plugin-content-blog": "3.1.0",
-    "@docusaurus/plugin-content-docs": "3.1.0",
-    "@docusaurus/plugin-content-pages": "3.1.0",
-    "@docusaurus/theme-common": "3.1.0",
-    "@docusaurus/theme-translations": "3.1.0",
-    "@docusaurus/types": "3.1.0",
-    "@docusaurus/utils": "3.1.0",
-    "@docusaurus/utils-common": "3.1.0",
-    "@docusaurus/utils-validation": "3.1.0",
+    "@docusaurus/core": "3.2.0",
+    "@docusaurus/mdx-loader": "3.2.0",
+    "@docusaurus/module-type-aliases": "3.2.0",
+    "@docusaurus/plugin-content-blog": "3.2.0",
+    "@docusaurus/plugin-content-docs": "3.2.0",
+    "@docusaurus/plugin-content-pages": "3.2.0",
+    "@docusaurus/theme-common": "3.2.0",
+    "@docusaurus/theme-translations": "3.2.0",
+    "@docusaurus/types": "3.2.0",
+    "@docusaurus/utils": "3.2.0",
+    "@docusaurus/utils-common": "3.2.0",
+    "@docusaurus/utils-validation": "3.2.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
@@ -47,7 +47,6 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.5.1",
@@ -62,5 +61,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "a5e675821f0e8b70b591fcebf19fd60a70d55548"
+  "gitHead": "5af143651b26b39761361acd96e9c5be7ba0cb25"
 }

package/src/theme/BlogArchivePage/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
 import Layout from '@theme/Layout';
 import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
 import Heading from '@theme/Heading';
@@ -19,6 +20,15 @@ type YearProp = {
 };
 
 function Year({year, posts}: YearProp) {
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    timeZone: 'UTC',
+  });
+
+  const formatDate = (lastUpdated: string) =>
+    dateTimeFormat.format(new Date(lastUpdated));
+
   return (
     <>
       <Heading as="h3" id={year}>
@@ -28,7 +38,7 @@ function Year({year, posts}: YearProp) {
         {posts.map((post) => (
           <li key={post.metadata.date}>
             <Link to={post.metadata.permalink}>
-              {post.metadata.formattedDate} - {post.metadata.title}
+              {formatDate(post.metadata.date)} - {post.metadata.title}
             </Link>
           </li>
         ))}

package/src/theme/BlogLayout/index.tsx

@@ -25,9 +25,7 @@ export default function BlogLayout(props: Props): JSX.Element {
             className={clsx('col', {
               'col--7': hasSidebar,
               'col--9 col--offset-1': !hasSidebar,
-            })}
-            itemScope
-            itemType="https://schema.org/Blog">
+            })}>
             {children}
           </main>
           {toc && <div className="col col--2">{toc}</div>}

package/src/theme/BlogListPage/StructuredData/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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 Head from '@docusaurus/Head';
+import {useBlogListPageStructuredData} from '@docusaurus/theme-common';
+import type {Props} from '@theme/BlogListPage/StructuredData';
+
+export default function BlogListPageStructuredData(props: Props): JSX.Element {
+  const structuredData = useBlogListPageStructuredData(props);
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

package/src/theme/BlogListPage/index.tsx

@@ -19,6 +19,7 @@ import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/BlogListPage';
 import BlogPostItems from '@theme/BlogPostItems';
+import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData';
 
 function BlogListPageMetadata(props: Props): JSX.Element {
   const {metadata} = props;
@@ -54,6 +55,7 @@ export default function BlogListPage(props: Props): JSX.Element {
         ThemeClassNames.page.blogListPage,
       )}>
       <BlogListPageMetadata {...props} />
+      <BlogListPageStructuredData {...props} />
       <BlogListPageContent {...props} />
     </HtmlClassNameProvider>
   );

package/src/theme/BlogPostItem/Container/index.tsx

@@ -6,36 +6,11 @@
  */
 
 import React from 'react';
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/BlogPostItem/Container';
 
 export default function BlogPostItemContainer({
   children,
   className,
 }: Props): JSX.Element {
-  const {
-    frontMatter,
-    assets,
-    metadata: {description},
-  } = useBlogPost();
-  const {withBaseUrl} = useBaseUrlUtils();
-  const image = assets.image ?? frontMatter.image;
-  const keywords = frontMatter.keywords ?? [];
-  return (
-    <article
-      className={className}
-      itemProp="blogPost"
-      itemScope
-      itemType="https://schema.org/BlogPosting">
-      {description && <meta itemProp="description" content={description} />}
-      {image && (
-        <link itemProp="image" href={withBaseUrl(image, {absolute: true})} />
-      )}
-      {keywords.length > 0 && (
-        <meta itemProp="keywords" content={keywords.join(',')} />
-      )}
-      {children}
-    </article>
-  );
+  return <article className={className}>{children}</article>;
 }

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

@@ -21,8 +21,7 @@ export default function BlogPostItemContent({
     <div
       // This ID is used for the feed generation to locate the main content
       id={isBlogPostPage ? blogPostContainerID : undefined}
-      className={clsx('markdown', className)}
-      itemProp="articleBody">
+      className={clsx('markdown', className)}>
       <MDXContent>{children}</MDXContent>
     </div>
   );

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

@@ -8,15 +8,21 @@
 import React from 'react';
 import clsx from 'clsx';
 import {useBlogPost} from '@docusaurus/theme-common/internal';
-import EditThisPage from '@theme/EditThisPage';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';
 import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
 
-import styles from './styles.module.css';
-
 export default function BlogPostItemFooter(): JSX.Element | null {
   const {metadata, isBlogPostPage} = useBlogPost();
-  const {tags, title, editUrl, hasTruncateMarker} = metadata;
+  const {
+    tags,
+    title,
+    editUrl,
+    hasTruncateMarker,
+    lastUpdatedBy,
+    lastUpdatedAt,
+  } = metadata;
 
   // A post is truncated if it's in the "list view" and it has a truncate marker
   const truncatedPost = !isBlogPostPage && hasTruncateMarker;
@@ -29,32 +35,56 @@ export default function BlogPostItemFooter(): JSX.Element | null {
     return null;
   }
 
-  return (
-    <footer
-      className={clsx(
-        'row docusaurus-mt-lg',
-        isBlogPostPage && styles.blogPostFooterDetailsFull,
-      )}>
-      {tagsExists && (
-        <div className={clsx('col', {'col--9': truncatedPost})}>
-          <TagsListInline tags={tags} />
-        </div>
-      )}
-
-      {isBlogPostPage && editUrl && (
-        <div className="col margin-top--sm">
-          <EditThisPage editUrl={editUrl} />
-        </div>
-      )}
-
-      {truncatedPost && (
-        <div
-          className={clsx('col text--right', {
-            'col--3': tagsExists,
-          })}>
-          <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
-        </div>
-      )}
-    </footer>
-  );
+  // BlogPost footer - details view
+  if (isBlogPostPage) {
+    const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+
+    return (
+      <footer className="docusaurus-mt-lg">
+        {tagsExists && (
+          <div
+            className={clsx(
+              'row',
+              'margin-top--sm',
+              ThemeClassNames.blog.blogFooterEditMetaRow,
+            )}>
+            <div className="col">
+              <TagsListInline tags={tags} />
+            </div>
+          </div>
+        )}
+        {canDisplayEditMetaRow && (
+          <EditMetaRow
+            className={clsx(
+              'margin-top--sm',
+              ThemeClassNames.blog.blogFooterEditMetaRow,
+            )}
+            editUrl={editUrl}
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </footer>
+    );
+  }
+  // BlogPost footer - list view
+  else {
+    return (
+      <footer className="row docusaurus-mt-lg">
+        {tagsExists && (
+          <div className={clsx('col', {'col--9': truncatedPost})}>
+            <TagsListInline tags={tags} />
+          </div>
+        )}
+        {truncatedPost && (
+          <div
+            className={clsx('col text--right', {
+              'col--3': tagsExists,
+            })}>
+            <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
+          </div>
+        )}
+      </footer>
+    );
+  }
 }

package/src/theme/BlogPostItem/Header/Author/index.tsx

@@ -28,31 +28,18 @@ export default function BlogPostItemHeaderAuthor({
     <div className={clsx('avatar margin-bottom--sm', className)}>
       {imageURL && (
         <MaybeLink href={link} className="avatar__photo-link">
-          <img
-            className="avatar__photo"
-            src={imageURL}
-            alt={name}
-            itemProp="image"
-          />
+          <img className="avatar__photo" src={imageURL} alt={name} />
         </MaybeLink>
       )}
 
       {name && (
-        <div
-          className="avatar__intro"
-          itemProp="author"
-          itemScope
-          itemType="https://schema.org/Person">
+        <div className="avatar__intro">
           <div className="avatar__name">
-            <MaybeLink href={link} itemProp="url">
-              <span itemProp="name">{name}</span>
+            <MaybeLink href={link}>
+              <span>{name}</span>
             </MaybeLink>
           </div>
-          {title && (
-            <small className="avatar__subtitle" itemProp="description">
-              {title}
-            </small>
-          )}
+          {title && <small className="avatar__subtitle">{title}</small>}
         </div>
       )}
     </div>

package/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -9,7 +9,10 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  useBlogPost,
+  useDateTimeFormat,
+} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/BlogPostItem/Header/Info';
 
 import styles from './styles.module.css';
@@ -39,12 +42,14 @@ function ReadingTime({readingTime}: {readingTime: number}) {
   return <>{readingTimePlural(readingTime)}</>;
 }
 
-function Date({date, formattedDate}: {date: string; formattedDate: string}) {
-  return (
-    <time dateTime={date} itemProp="datePublished">
-      {formattedDate}
-    </time>
-  );
+function DateTime({
+  date,
+  formattedDate,
+}: {
+  date: string;
+  formattedDate: string;
+}) {
+  return <time dateTime={date}>{formattedDate}</time>;
 }
 
 function Spacer() {
@@ -55,11 +60,21 @@ export default function BlogPostItemHeaderInfo({
   className,
 }: Props): JSX.Element {
   const {metadata} = useBlogPost();
-  const {date, formattedDate, readingTime} = metadata;
+  const {date, readingTime} = metadata;
+
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+
+  const formatDate = (blogDate: string) =>
+    dateTimeFormat.format(new Date(blogDate));
 
   return (
     <div className={clsx(styles.container, 'margin-vert--md', className)}>
-      <Date date={date} formattedDate={formattedDate} />
+      <DateTime date={date} formattedDate={formatDate(date)} />
       {typeof readingTime !== 'undefined' && (
         <>
           <Spacer />

package/src/theme/BlogPostItem/Header/Title/index.tsx

@@ -20,14 +20,8 @@ export default function BlogPostItemHeaderTitle({
   const {permalink, title} = metadata;
   const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
   return (
-    <TitleHeading className={clsx(styles.title, className)} itemProp="headline">
-      {isBlogPostPage ? (
-        title
-      ) : (
-        <Link itemProp="url" to={permalink}>
-          {title}
-        </Link>
-      )}
+    <TitleHeading className={clsx(styles.title, className)}>
+      {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
     </TitleHeading>
   );
 }

package/src/theme/BlogPostPage/StructuredData/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 Head from '@docusaurus/Head';
+import {useBlogPostStructuredData} from '@docusaurus/theme-common';
+
+export default function BlogPostStructuredData(): JSX.Element {
+  const structuredData = useBlogPostStructuredData();
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

package/src/theme/BlogPostPage/index.tsx

@@ -13,6 +13,7 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
+import BlogPostPageStructuredData from '@theme/BlogPostPage/StructuredData';
 import TOC from '@theme/TOC';
 import type {Props} from '@theme/BlogPostPage';
 import Unlisted from '@theme/Unlisted';
@@ -45,6 +46,7 @@ function BlogPostPageContent({
         ) : undefined
       }>
       {unlisted && <Unlisted />}
+
       <BlogPostItem>{children}</BlogPostItem>
 
       {(nextItem || prevItem) && (
@@ -64,6 +66,7 @@ export default function BlogPostPage(props: Props): JSX.Element {
           ThemeClassNames.page.blogPostPage,
         )}>
         <BlogPostPageMetadata />
+        <BlogPostPageStructuredData />
         <BlogPostPageContent sidebar={props.sidebar}>
           <BlogPostContent />
         </BlogPostPageContent>

package/src/theme/DocCard/index.tsx

@@ -12,6 +12,7 @@ import {
   findFirstSidebarItemLink,
   useDocById,
 } from '@docusaurus/theme-common/internal';
+import {usePluralForm} from '@docusaurus/theme-common';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 
@@ -24,6 +25,23 @@ import type {
 
 import styles from './styles.module.css';
 
+function useCategoryItemsPlural() {
+  const {selectMessage} = usePluralForm();
+  return (count: number) =>
+    selectMessage(
+      count,
+      translate(
+        {
+          message: '{count} items',
+          id: 'theme.docs.DocCard.categoryDescription.plurals',
+          description:
+            'The default description for a category card in the generated index about how many items this category includes',
+        },
+        {count},
+      ),
+    );
+}
+
 function CardContainer({
   href,
   children,
@@ -76,6 +94,7 @@ function CardCategory({
   item: PropSidebarItemCategory;
 }): JSX.Element | null {
   const href = findFirstSidebarItemLink(item);
+  const categoryItemsPlural = useCategoryItemsPlural();
 
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
@@ -87,18 +106,7 @@ function CardCategory({
       href={href}
       icon="🗃️"
       title={item.label}
-      description={
-        item.description ??
-        translate(
-          {
-            message: '{count} items',
-            id: 'theme.docs.DocCard.categoryDescription',
-            description:
-              'The default description for a category card in the generated index about how many items this category includes',
-          },
-          {count: item.items.length},
-        )
-      }
+      description={item.description ?? categoryItemsPlural(item.items.length)}
     />
   );
 }

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

@@ -8,60 +8,14 @@
 import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc, type DocContextValue} from '@docusaurus/theme-common/internal';
-import LastUpdated from '@theme/LastUpdated';
-import EditThisPage from '@theme/EditThisPage';
-import TagsListInline, {
-  type Props as TagsListInlineProps,
-} from '@theme/TagsListInline';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import TagsListInline from '@theme/TagsListInline';
 
-import styles from './styles.module.css';
-
-function TagsRow(props: TagsListInlineProps) {
-  return (
-    <div
-      className={clsx(
-        ThemeClassNames.docs.docFooterTagsRow,
-        'row margin-bottom--sm',
-      )}>
-      <div className="col">
-        <TagsListInline {...props} />
-      </div>
-    </div>
-  );
-}
-
-type EditMetaRowProps = Pick<
-  DocContextValue['metadata'],
-  'editUrl' | 'lastUpdatedAt' | 'lastUpdatedBy' | 'formattedLastUpdatedAt'
->;
-function EditMetaRow({
-  editUrl,
-  lastUpdatedAt,
-  lastUpdatedBy,
-  formattedLastUpdatedAt,
-}: EditMetaRowProps) {
-  return (
-    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
-      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
-
-      <div className={clsx('col', styles.lastUpdated)}>
-        {(lastUpdatedAt || lastUpdatedBy) && (
-          <LastUpdated
-            lastUpdatedAt={lastUpdatedAt}
-            formattedLastUpdatedAt={formattedLastUpdatedAt}
-            lastUpdatedBy={lastUpdatedBy}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
+import EditMetaRow from '@theme/EditMetaRow';
 
 export default function DocItemFooter(): JSX.Element | null {
   const {metadata} = useDoc();
-  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
-    metadata;
+  const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
 
   const canDisplayTagsRow = tags.length > 0;
   const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
@@ -75,13 +29,26 @@ export default function DocItemFooter(): JSX.Element | null {
   return (
     <footer
       className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
-      {canDisplayTagsRow && <TagsRow tags={tags} />}
+      {canDisplayTagsRow && (
+        <div
+          className={clsx(
+            'row margin-top--sm',
+            ThemeClassNames.docs.docFooterTagsRow,
+          )}>
+          <div className="col">
+            <TagsListInline tags={tags} />
+          </div>
+        </div>
+      )}
       {canDisplayEditMetaRow && (
         <EditMetaRow
+          className={clsx(
+            'margin-top--sm',
+            ThemeClassNames.docs.docFooterEditMetaRow,
+          )}
           editUrl={editUrl}
           lastUpdatedAt={lastUpdatedAt}
           lastUpdatedBy={lastUpdatedBy}
-          formattedLastUpdatedAt={formattedLastUpdatedAt}
         />
       )}
     </footer>