@docusaurus/theme-classic 3.4.0 → 3.5.0

package/src/theme/Blog/Pages/BlogAuthorsListPage/index.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {translateBlogAuthorsListPageTitle} from '@docusaurus/theme-common/internal';
+import BlogLayout from '@theme/BlogLayout';
+import type {Props} from '@theme/Blog/Pages/BlogAuthorsListPage';
+import SearchMetadata from '@theme/SearchMetadata';
+import Heading from '@theme/Heading';
+import Author from '@theme/Blog/Components/Author';
+import type {AuthorItemProp} from '@docusaurus/plugin-content-blog';
+import styles from './styles.module.css';
+
+function AuthorListItem({author}: {author: AuthorItemProp}) {
+  return (
+    <li className={styles.authorListItem}>
+      <Author as="h2" author={author} count={author.count} />
+    </li>
+  );
+}
+
+function AuthorsList({authors}: {authors: Props['authors']}) {
+  return (
+    <section className={clsx('margin-vert--lg', styles.authorsListSection)}>
+      <ul>
+        {authors.map((author) => (
+          <AuthorListItem key={author.key} author={author} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default function BlogAuthorsListPage({
+  authors,
+  sidebar,
+}: Props): ReactNode {
+  const title: string = translateBlogAuthorsListPageTitle();
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogAuthorsListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_authors_list" />
+      <BlogLayout sidebar={sidebar}>
+        <Heading as="h1">{title}</Heading>
+        <AuthorsList authors={authors} />
+      </BlogLayout>
+    </HtmlClassNameProvider>
+  );
+}

package/src/theme/Blog/Pages/BlogAuthorsListPage/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.authorListItem {
+  list-style-type: none;
+  margin-bottom: 2rem;
+}

package/src/theme/Blog/Pages/BlogAuthorsPostsPage/index.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {
+  useBlogAuthorPageTitle,
+  BlogAuthorsListViewAllLabel,
+} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import {useBlogMetadata} from '@docusaurus/plugin-content-blog/client';
+import BlogLayout from '@theme/BlogLayout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import type {Props} from '@theme/Blog/Pages/BlogAuthorsPostsPage';
+import BlogPostItems from '@theme/BlogPostItems';
+import Author from '@theme/Blog/Components/Author';
+
+function Metadata({author}: Props): JSX.Element {
+  const title = useBlogAuthorPageTitle(author);
+  return (
+    <>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_authors_posts" />
+    </>
+  );
+}
+
+function ViewAllAuthorsLink() {
+  const {authorsListPath} = useBlogMetadata();
+  return (
+    <Link href={authorsListPath}>
+      <BlogAuthorsListViewAllLabel />
+    </Link>
+  );
+}
+
+function Content({author, items, sidebar, listMetadata}: Props): JSX.Element {
+  return (
+    <BlogLayout sidebar={sidebar}>
+      <header className="margin-bottom--xl">
+        <Author as="h1" author={author} />
+        {author.description && <p>{author.description}</p>}
+        <ViewAllAuthorsLink />
+      </header>
+      <hr />
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={listMetadata} />
+    </BlogLayout>
+  );
+}
+
+export default function BlogAuthorsPostsPage(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogAuthorsPostsPage,
+      )}>
+      <Metadata {...props} />
+      <Content {...props} />
+    </HtmlClassNameProvider>
+  );
+}

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogListPageStructuredData} from '@docusaurus/theme-common';
+import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogListPage/StructuredData';
 
 export default function BlogListPageStructuredData(props: Props): JSX.Element {

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

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {blogPostContainerID} from '@docusaurus/utils-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import MDXContent from '@theme/MDXContent';
 import type {Props} from '@theme/BlogPostItem/Content';
 

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';

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

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
-import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
+import BlogAuthor from '@theme/Blog/Components/Author';
 import type {Props} from '@theme/BlogPostItem/Header/Authors';
 import styles from './styles.module.css';
 
@@ -25,6 +25,7 @@ export default function BlogPostItemHeaderAuthors({
     return null;
   }
   const imageOnly = authors.every(({name}) => !name);
+  const singleAuthor = authors.length === 1;
   return (
     <div
       className={clsx(
@@ -35,11 +36,11 @@ export default function BlogPostItemHeaderAuthors({
       {authors.map((author, idx) => (
         <div
           className={clsx(
-            !imageOnly && 'col col--6',
+            !imageOnly && (singleAuthor ? 'col col--12' : 'col col--6'),
             imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
           )}
           key={idx}>
-          <BlogPostItemHeaderAuthor
+          <BlogAuthor
             author={{
               ...author,
               // Handle author images using relative paths

package/src/theme/BlogPostItem/Header/Authors/styles.module.css

@@ -7,7 +7,6 @@
 
 .authorCol {
   max-width: inherit !important;
-  flex-grow: 1 !important;
 }
 
 .imageOnlyAuthorRow {

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

@@ -9,10 +9,8 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {
-  useBlogPost,
-  useDateTimeFormat,
-} from '@docusaurus/theme-common/internal';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogPostItem/Header/Info';
 
 import styles from './styles.module.css';

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

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogPostItem/Header/Title';
 
 import styles from './styles.module.css';

package/src/theme/BlogPostItem/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemContainer from '@theme/BlogPostItem/Container';
 import BlogPostItemHeader from '@theme/BlogPostItem/Header';
 import BlogPostItemContent from '@theme/BlogPostItem/Content';

package/src/theme/BlogPostItems/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {BlogPostProvider} from '@docusaurus/theme-common/internal';
+import {BlogPostProvider} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogPostItems';
 

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {PageMetadata} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
 export default function BlogPostPageMetadata(): JSX.Element {
   const {assets, metadata} = useBlogPost();

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogPostStructuredData} from '@docusaurus/theme-common';
+import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client';
 
 export default function BlogPostStructuredData(): JSX.Element {
   const structuredData = useBlogPostStructuredData();

package/src/theme/BlogPostPage/index.tsx

@@ -8,15 +8,18 @@
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
-import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  BlogPostProvider,
+  useBlogPost,
+} from '@docusaurus/plugin-content-blog/client';
 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 ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/BlogPostPage';
-import Unlisted from '@theme/Unlisted';
 import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
 
 function BlogPostPageContent({
@@ -27,7 +30,7 @@ function BlogPostPageContent({
   children: ReactNode;
 }): JSX.Element {
   const {metadata, toc} = useBlogPost();
-  const {nextItem, prevItem, frontMatter, unlisted} = metadata;
+  const {nextItem, prevItem, frontMatter} = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
@@ -45,7 +48,7 @@ function BlogPostPageContent({
           />
         ) : undefined
       }>
-      {unlisted && <Unlisted />}
+      <ContentVisibility metadata={metadata} />
 
       <BlogPostItem>{children}</BlogPostItem>
 

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

@@ -0,0 +1,57 @@
+/**
+ * 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, {memo, type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {groupBlogSidebarItemsByYear} from '@docusaurus/plugin-content-blog/client';
+import Heading from '@theme/Heading';
+import type {Props} from '@theme/BlogSidebar/Content';
+
+function BlogSidebarYearGroup({
+  year,
+  yearGroupHeadingClassName,
+  children,
+}: {
+  year: string;
+  yearGroupHeadingClassName?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div role="group">
+      <Heading as="h3" className={yearGroupHeadingClassName}>
+        {year}
+      </Heading>
+      {children}
+    </div>
+  );
+}
+
+function BlogSidebarContent({
+  items,
+  yearGroupHeadingClassName,
+  ListComponent,
+}: Props): ReactNode {
+  const themeConfig = useThemeConfig();
+  if (themeConfig.blog.sidebar.groupByYear) {
+    const itemsByYear = groupBlogSidebarItemsByYear(items);
+    return (
+      <>
+        {itemsByYear.map(([year, yearItems]) => (
+          <BlogSidebarYearGroup
+            key={year}
+            year={year}
+            yearGroupHeadingClassName={yearGroupHeadingClassName}>
+            <ListComponent items={yearItems} />
+          </BlogSidebarYearGroup>
+        ))}
+      </>
+    );
+  } else {
+    return <ListComponent items={items} />;
+  }
+}
+
+export default memo(BlogSidebarContent);

package/src/theme/BlogSidebar/Desktop/index.tsx

@@ -5,16 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {memo} from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
-import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/plugin-content-blog/client';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Desktop';
 
 import styles from './styles.module.css';
 
-export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
+const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName={clsx(styles.sidebarItemList, 'clean-list')}
+      liClassName={styles.sidebarItem}
+      linkClassName={styles.sidebarItemLink}
+      linkActiveClassName={styles.sidebarItemLinkActive}
+    />
+  );
+};
+
+function BlogSidebarDesktop({sidebar}: Props) {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
     <aside className="col col--3">
@@ -28,20 +44,14 @@ export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
         <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
           {sidebar.title}
         </div>
-        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
-          {items.map((item) => (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}>
-                {item.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <BlogSidebarContent
+          items={items}
+          ListComponent={ListComponent}
+          yearGroupHeadingClassName={styles.yearGroupHeading}
+        />
       </nav>
     </aside>
   );
 }
+
+export default memo(BlogSidebarDesktop);

package/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -43,3 +43,8 @@
     display: none;
   }
 }
+
+.yearGroupHeading {
+  margin-top: 1.6rem;
+  margin-bottom: 0.4rem;
+}

package/src/theme/BlogSidebar/Mobile/index.tsx

@@ -5,32 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import Link from '@docusaurus/Link';
-import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import React, {memo} from 'react';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/plugin-content-blog/client';
 import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Mobile';
+import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content';
+
+import styles from './styles.module.css';
+
+const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName="menu__list"
+      liClassName="menu__list-item"
+      linkClassName="menu__link"
+      linkActiveClassName="menu__link--active"
+    />
+  );
+};
 
 function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
-    <ul className="menu__list">
-      {items.map((item) => (
-        <li key={item.permalink} className="menu__list-item">
-          <Link
-            isNavLink
-            to={item.permalink}
-            className="menu__link"
-            activeClassName="menu__link--active">
-            {item.title}
-          </Link>
-        </li>
-      ))}
-    </ul>
+    <BlogSidebarContent
+      items={items}
+      ListComponent={ListComponent}
+      yearGroupHeadingClassName={styles.yearGroupHeading}
+    />
   );
 }
 
-export default function BlogSidebarMobile(props: Props): JSX.Element {
+function BlogSidebarMobile(props: Props): JSX.Element {
   return (
     <NavbarSecondaryMenuFiller
       component={BlogSidebarMobileSecondaryMenu}
@@ -38,3 +48,5 @@ export default function BlogSidebarMobile(props: Props): JSX.Element {
     />
   );
 }
+
+export default memo(BlogSidebarMobile);

package/src/theme/BlogSidebar/Mobile/styles.module.css

@@ -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.
+ */
+
+.yearGroupHeading {
+  margin: 1rem 0.75rem 0.5rem;
+}

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -7,52 +7,22 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Translate, {translate} from '@docusaurus/Translate';
+import Translate from '@docusaurus/Translate';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
-  usePluralForm,
 } from '@docusaurus/theme-common';
+import {useBlogTagsPostsPageTitle} from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import BlogLayout from '@theme/BlogLayout';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/BlogTagsPostsPage';
 import BlogPostItems from '@theme/BlogPostItems';
-import Unlisted from '@theme/Unlisted';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
 import Heading from '@theme/Heading';
 
-// Very simple pluralization: probably good enough for now
-function useBlogPostsPlural() {
-  const {selectMessage} = usePluralForm();
-  return (count: number) =>
-    selectMessage(
-      count,
-      translate(
-        {
-          id: 'theme.blog.post.plurals',
-          description:
-            'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
-          message: 'One post|{count} posts',
-        },
-        {count},
-      ),
-    );
-}
-
-function useBlogTagsPostsPageTitle(tag: Props['tag']): string {
-  const blogPostsPlural = useBlogPostsPlural();
-  return translate(
-    {
-      id: 'theme.blog.tagTitle',
-      description: 'The title of the page for a blog tag',
-      message: '{nPosts} tagged with "{tagName}"',
-    },
-    {nPosts: blogPostsPlural(tag.count), tagName: tag.label},
-  );
-}
-
 function BlogTagsPostsPageMetadata({tag}: Props): JSX.Element {
   const title = useBlogTagsPostsPageTitle(tag);
   return (

package/src/theme/ContentVisibility/Draft/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 {
+  ThemeClassNames,
+  DraftBannerTitle,
+  DraftBannerMessage,
+} from '@docusaurus/theme-common';
+import Admonition from '@theme/Admonition';
+import type {Props} from '@theme/ContentVisibility/Draft';
+
+export default function Draft({className}: Props): JSX.Element | null {
+  return (
+    <Admonition
+      type="caution"
+      title={<DraftBannerTitle />}
+      className={clsx(className, ThemeClassNames.common.draftBanner)}>
+      <DraftBannerMessage />
+    </Admonition>
+  );
+}

package/src/theme/{Unlisted → ContentVisibility/Unlisted}/index.tsx

@@ -14,7 +14,7 @@ import {
   UnlistedMetadata,
 } from '@docusaurus/theme-common';
 import Admonition from '@theme/Admonition';
-import type {Props} from '@theme/Unlisted';
+import type {Props} from '@theme/ContentVisibility/Unlisted';
 
 function UnlistedBanner({className}: Props) {
   return (

package/src/theme/ContentVisibility/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 type {Props} from '@theme/ContentVisibility';
+import Draft from '@theme/ContentVisibility/Draft';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
+
+export default function ContentVisibility({
+  metadata,
+}: Props): JSX.Element | null {
+  const {unlisted, frontMatter} = metadata;
+  // Reading draft/unlisted status from frontMatter is useful to display
+  // the banners in dev mode (in dev, metadata.unlisted is always false)
+  // See https://github.com/facebook/docusaurus/issues/8285
+  return (
+    <>
+      {(unlisted || frontMatter.unlisted) && <Unlisted />}
+      {frontMatter.draft && <Draft />}
+    </>
+  );
+}