@docusaurus/theme-classic 3.1.0 → 3.2.0

package/lib/theme/BlogArchivePage/index.js

@@ -8,9 +8,17 @@ 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 Heading from '@theme/Heading';
 function Year({year, posts}) {
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'long',
+    timeZone: 'UTC',
+  });
+  const formatDate = (lastUpdated) =>
+    dateTimeFormat.format(new Date(lastUpdated));
   return (
     <>
       <Heading as="h3" id={year}>
@@ -20,7 +28,7 @@ function Year({year, posts}) {
         {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/lib/theme/BlogLayout/index.js

@@ -20,9 +20,7 @@ export default function BlogLayout(props) {
             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/lib/theme/BlogListPage/StructuredData/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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="@docusaurus/plugin-content-blog" />
+/// <reference types="react" />
+import type { Props } from '@theme/BlogListPage/StructuredData';
+export default function BlogListPageStructuredData(props: Props): JSX.Element;

package/lib/theme/BlogListPage/StructuredData/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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';
+export default function BlogListPageStructuredData(props) {
+  const structuredData = useBlogListPageStructuredData(props);
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

package/lib/theme/BlogListPage/index.js

@@ -16,6 +16,7 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import BlogPostItems from '@theme/BlogPostItems';
+import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData';
 function BlogListPageMetadata(props) {
   const {metadata} = props;
   const {
@@ -48,6 +49,7 @@ export default function BlogListPage(props) {
         ThemeClassNames.page.blogListPage,
       )}>
       <BlogListPageMetadata {...props} />
+      <BlogListPageStructuredData {...props} />
       <BlogListPageContent {...props} />
     </HtmlClassNameProvider>
   );

package/lib/theme/BlogPostItem/Container/index.js

@@ -5,31 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
 export default function BlogPostItemContainer({children, className}) {
-  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/lib/theme/BlogPostItem/Content/index.js

@@ -15,8 +15,7 @@ export default function BlogPostItemContent({children, className}) {
     <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/lib/theme/BlogPostItem/Footer/index.js

@@ -7,13 +7,20 @@
 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() {
   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;
   const tagsExists = tags.length > 0;
@@ -21,32 +28,55 @@ export default function BlogPostItemFooter() {
   if (!renderFooter) {
     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/lib/theme/BlogPostItem/Header/Author/index.js

@@ -20,31 +20,18 @@ export default function BlogPostItemHeaderAuthor({author, className}) {
     <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/lib/theme/BlogPostItem/Header/Info/index.js

@@ -8,7 +8,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 styles from './styles.module.css';
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {
@@ -33,22 +36,25 @@ function ReadingTime({readingTime}) {
   const readingTimePlural = useReadingTimePlural();
   return <>{readingTimePlural(readingTime)}</>;
 }
-function Date({date, formattedDate}) {
-  return (
-    <time dateTime={date} itemProp="datePublished">
-      {formattedDate}
-    </time>
-  );
+function DateTime({date, formattedDate}) {
+  return <time dateTime={date}>{formattedDate}</time>;
 }
 function Spacer() {
   return <>{' · '}</>;
 }
 export default function BlogPostItemHeaderInfo({className}) {
   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) => 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/lib/theme/BlogPostItem/Header/Title/index.js

@@ -14,14 +14,8 @@ export default function BlogPostItemHeaderTitle({className}) {
   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/lib/theme/{BlogPostItem/Footer/styles.module.css → BlogPostPage/StructuredData/index.d.ts}

@@ -4,7 +4,5 @@
  * 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;
-}
+/// <reference types="react" />
+export default function BlogPostStructuredData(): JSX.Element;

package/lib/theme/BlogPostPage/StructuredData/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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() {
+  const structuredData = useBlogPostStructuredData();
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

package/lib/theme/BlogPostPage/index.js

@@ -12,6 +12,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 Unlisted from '@theme/Unlisted';
 function BlogPostPageContent({sidebar, children}) {
@@ -35,6 +36,7 @@ function BlogPostPageContent({sidebar, children}) {
         ) : undefined
       }>
       {unlisted && <Unlisted />}
+
       <BlogPostItem>{children}</BlogPostItem>
 
       {(nextItem || prevItem) && (
@@ -53,6 +55,7 @@ export default function BlogPostPage(props) {
           ThemeClassNames.page.blogPostPage,
         )}>
         <BlogPostPageMetadata />
+        <BlogPostPageStructuredData />
         <BlogPostPageContent sidebar={props.sidebar}>
           <BlogPostContent />
         </BlogPostPageContent>

package/lib/theme/DocCard/index.js

@@ -11,10 +11,27 @@ import {
   findFirstSidebarItemLink,
   useDocById,
 } from '@docusaurus/theme-common/internal';
+import {usePluralForm} from '@docusaurus/theme-common';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+function useCategoryItemsPlural() {
+  const {selectMessage} = usePluralForm();
+  return (count) =>
+    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}) {
   return (
     <Link
@@ -45,6 +62,7 @@ function CardLayout({href, icon, title, description}) {
 }
 function CardCategory({item}) {
   const href = findFirstSidebarItemLink(item);
+  const categoryItemsPlural = useCategoryItemsPlural();
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
     return null;
@@ -54,18 +72,7 @@ function CardCategory({item}) {
       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/lib/theme/DocItem/Footer/index.js

@@ -8,49 +8,11 @@ import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/theme-common/internal';
-import LastUpdated from '@theme/LastUpdated';
-import EditThisPage from '@theme/EditThisPage';
 import TagsListInline from '@theme/TagsListInline';
-import styles from './styles.module.css';
-function TagsRow(props) {
-  return (
-    <div
-      className={clsx(
-        ThemeClassNames.docs.docFooterTagsRow,
-        'row margin-bottom--sm',
-      )}>
-      <div className="col">
-        <TagsListInline {...props} />
-      </div>
-    </div>
-  );
-}
-function EditMetaRow({
-  editUrl,
-  lastUpdatedAt,
-  lastUpdatedBy,
-  formattedLastUpdatedAt,
-}) {
-  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() {
   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);
   const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
@@ -60,13 +22,26 @@ export default function DocItemFooter() {
   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>

package/lib/theme/DocSidebarItem/Category/index.js

@@ -78,6 +78,7 @@ function CollapseButton({collapsed, categoryLabel, onClick}) {
               {label: categoryLabel},
             )
       }
+      aria-expanded={!collapsed}
       type="button"
       className="clean-btn menu__caret"
       onClick={onClick}
@@ -165,7 +166,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/lib/theme/EditMetaRow/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from '@theme/EditMetaRow';
+export default function EditMetaRow({ className, editUrl, lastUpdatedAt, lastUpdatedBy, }: Props): JSX.Element;

package/lib/theme/EditMetaRow/index.js

@@ -0,0 +1,31 @@
+/**
+ * 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 LastUpdated from '@theme/LastUpdated';
+import styles from './styles.module.css';
+export default function EditMetaRow({
+  className,
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}) {
+  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/lib/theme/LastUpdated/index.d.ts

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/LastUpdated';
-export default function LastUpdated({ lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, }: Props): JSX.Element;
+export default function LastUpdated({ lastUpdatedAt, lastUpdatedBy, }: Props): JSX.Element;

package/lib/theme/LastUpdated/index.js

@@ -7,7 +7,16 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
+function LastUpdatedAtDate({lastUpdatedAt}) {
+  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"
@@ -15,7 +24,7 @@ function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
       values={{
         date: (
           <b>
-            <time dateTime={new Date(lastUpdatedAt * 1000).toISOString()}>
+            <time dateTime={atDate.toISOString()} itemProp="dateModified">
               {formattedLastUpdatedAt}
             </time>
           </b>
@@ -37,26 +46,18 @@ function LastUpdatedByUser({lastUpdatedBy}) {
     </Translate>
   );
 }
-export default function LastUpdated({
-  lastUpdatedAt,
-  formattedLastUpdatedAt,
-  lastUpdatedBy,
-}) {
+export default function LastUpdated({lastUpdatedAt, lastUpdatedBy}) {
   return (
     <span className={ThemeClassNames.common.lastUpdated}>
       <Translate
         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/lib/theme/MDXComponents/Img/index.js

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