@docusaurus/theme-classic 3.3.2 → 3.5.0

package/lib/theme/Blog/Components/Author/index.js

@@ -0,0 +1,86 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import AuthorSocials from '@theme/Blog/Components/Author/Socials';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+function MaybeLink(props) {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+function AuthorTitle({title}) {
+  return (
+    <small className={styles.authorTitle} title={title}>
+      {title}
+    </small>
+  );
+}
+function AuthorName({name, as}) {
+  if (!as) {
+    return <span className={styles.authorName}>{name}</span>;
+  } else {
+    return (
+      <Heading as={as} className={styles.authorName}>
+        {name}
+      </Heading>
+    );
+  }
+}
+function AuthorBlogPostCount({count}) {
+  return <span className={clsx(styles.authorBlogPostCount)}>{count}</span>;
+}
+// Note: in the future we might want to have multiple "BlogAuthor" components
+// Creating different display modes with the "as" prop may not be the best idea
+// Explainer: https://kyleshevlin.com/prefer-multiple-compositions/
+// For now, we almost use the same design for all cases, so it's good enough
+export default function BlogAuthor({as, author, className, count}) {
+  const {name, title, url, imageURL, email, page} = author;
+  const link =
+    page?.permalink || url || (email && `mailto:${email}`) || undefined;
+  return (
+    <div
+      className={clsx(
+        'avatar margin-bottom--sm',
+        className,
+        styles[`author-as-${as}`],
+      )}>
+      {imageURL && (
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img
+            className={clsx('avatar__photo', styles.authorImage)}
+            src={imageURL}
+            alt={name}
+          />
+        </MaybeLink>
+      )}
+
+      {(name || title) && (
+        <div className={clsx('avatar__intro', styles.authorDetails)}>
+          <div className="avatar__name">
+            {name && (
+              <MaybeLink href={link}>
+                <AuthorName name={name} as={as} />
+              </MaybeLink>
+            )}
+            {count && <AuthorBlogPostCount count={count} />}
+          </div>
+          {!!title && <AuthorTitle title={title} />}
+
+          {/*
+              We always render AuthorSocials even if there's none
+              This keeps other things aligned with flexbox layout
+            */}
+          <AuthorSocials author={author} />
+        </div>
+      )}
+    </div>
+  );
+}

package/lib/theme/Blog/Components/Author/styles.module.css

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+
+.authorImage {
+  --ifm-avatar-photo-size: 3.6rem;
+}
+
+.author-as-h1 .authorImage {
+  --ifm-avatar-photo-size: 7rem;
+}
+
+.author-as-h2 .authorImage {
+  --ifm-avatar-photo-size: 5.4rem;
+}
+
+.authorDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-around;
+}
+
+.authorName {
+  font-size: 1.1rem;
+  line-height: 1.1rem;
+  display: flex;
+  flex-direction: row;
+}
+
+.author-as-h1 .authorName {
+  font-size: 2.4rem;
+  line-height: 2.4rem;
+  display: inline;
+}
+
+.author-as-h2 .authorName {
+  font-size: 1.4rem;
+  line-height: 1.4rem;
+  display: inline;
+}
+
+.authorTitle {
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+  display: -webkit-box;
+  overflow: hidden;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.author-as-h1 .authorTitle {
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+}
+
+.author-as-h2 .authorTitle {
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+.authorBlogPostCount {
+  background: var(--ifm-color-secondary);
+  color: var(--ifm-color-black);
+  font-size: 0.8rem;
+  line-height: 1.2;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.1rem 0.4rem;
+  margin-left: 0.3rem;
+}

package/lib/theme/Blog/Pages/BlogAuthorsListPage/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { type ReactNode } from 'react';
+import type { Props } from '@theme/Blog/Pages/BlogAuthorsListPage';
+export default function BlogAuthorsListPage({ authors, sidebar, }: Props): ReactNode;

package/lib/theme/Blog/Pages/BlogAuthorsListPage/index.js

@@ -0,0 +1,54 @@
+/**
+ * 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 {translateBlogAuthorsListPageTitle} from '@docusaurus/theme-common/internal';
+import BlogLayout from '@theme/BlogLayout';
+import SearchMetadata from '@theme/SearchMetadata';
+import Heading from '@theme/Heading';
+import Author from '@theme/Blog/Components/Author';
+import styles from './styles.module.css';
+function AuthorListItem({author}) {
+  return (
+    <li className={styles.authorListItem}>
+      <Author as="h2" author={author} count={author.count} />
+    </li>
+  );
+}
+function AuthorsList({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}) {
+  const title = 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/lib/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/lib/theme/Blog/Pages/BlogAuthorsPostsPage/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 type { Props } from '@theme/Blog/Pages/BlogAuthorsPostsPage';
+export default function BlogAuthorsPostsPage(props: Props): JSX.Element;

package/lib/theme/Blog/Pages/BlogAuthorsPostsPage/index.js

@@ -0,0 +1,67 @@
+/**
+ * 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 BlogPostItems from '@theme/BlogPostItems';
+import Author from '@theme/Blog/Components/Author';
+function Metadata({author}) {
+  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}) {
+  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) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogAuthorsPostsPage,
+      )}>
+      <Metadata {...props} />
+      <Content {...props} />
+    </HtmlClassNameProvider>
+  );
+}

package/lib/theme/BlogArchivePage/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.
  */
-/// <reference types="@docusaurus/plugin-content-blog" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogArchivePage';
 export default function BlogArchive({ archive }: Props): JSX.Element;

package/lib/theme/BlogLayout/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.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogLayout';
 export default function BlogLayout(props: Props): JSX.Element;

package/lib/theme/BlogListPage/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.
  */
-/// <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

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogListPageStructuredData} from '@docusaurus/theme-common';
+import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
 export default function BlogListPageStructuredData(props) {
   const structuredData = useBlogListPageStructuredData(props);
   return (

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

package/lib/theme/BlogListPaginator/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.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogListPaginator';
 export default function BlogListPaginator(props: Props): JSX.Element;

package/lib/theme/BlogPostItem/Container/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.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem/Container';
 export default function BlogPostItemContainer({ children, className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Content/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.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem/Content';
 export default function BlogPostItemContent({ children, className, }: Props): JSX.Element;

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

@@ -7,7 +7,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';
 export default function BlogPostItemContent({children, className}) {
   const {isBlogPostPage} = useBlogPost();

package/lib/theme/BlogPostItem/Footer/ReadMoreLink/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.
  */
-/// <reference path="../../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem/Footer/ReadMoreLink';
 export default function BlogPostItemFooterReadMoreLink(props: Props): JSX.Element;

package/lib/theme/BlogPostItem/Footer/index.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export default function BlogPostItemFooter(): JSX.Element | null;

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

@@ -6,7 +6,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/lib/theme/BlogPostItem/Header/Authors/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.
  */
-/// <reference path="../../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem/Header/Authors';
 export default function BlogPostItemHeaderAuthors({ className, }: Props): JSX.Element | null;

package/lib/theme/BlogPostItem/Header/Authors/index.js

@@ -6,8 +6,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 styles from './styles.module.css';
 // Component responsible for the authors layout
 export default function BlogPostItemHeaderAuthors({className}) {
@@ -20,6 +20,7 @@ export default function BlogPostItemHeaderAuthors({className}) {
     return null;
   }
   const imageOnly = authors.every(({name}) => !name);
+  const singleAuthor = authors.length === 1;
   return (
     <div
       className={clsx(
@@ -30,11 +31,11 @@ export default function BlogPostItemHeaderAuthors({className}) {
       {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/lib/theme/BlogPostItem/Header/Authors/styles.module.css

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

package/lib/theme/BlogPostItem/Header/Info/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.
  */
-/// <reference path="../../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem/Header/Info';
 export default function BlogPostItemHeaderInfo({ className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Header/Info/index.js

@@ -8,10 +8,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 styles from './styles.module.css';
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {

package/lib/theme/BlogPostItem/Header/Title/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.
  */
-/// <reference path="../../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem/Header/Title';
 export default function BlogPostItemHeaderTitle({ className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Header/Title/index.js

@@ -7,7 +7,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 styles from './styles.module.css';
 export default function BlogPostItemHeaderTitle({className}) {
   const {metadata, isBlogPostPage} = useBlogPost();

package/lib/theme/BlogPostItem/Header/index.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export default function BlogPostItemHeader(): JSX.Element;

package/lib/theme/BlogPostItem/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.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem';
 export default function BlogPostItem({ children, className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/index.js

@@ -6,7 +6,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/lib/theme/BlogPostItems/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.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostItems';
 export default function BlogPostItems({ items, component: BlogPostItemComponent, }: Props): JSX.Element;

package/lib/theme/BlogPostItems/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {BlogPostProvider} from '@docusaurus/theme-common/internal';
+import {BlogPostProvider} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItem from '@theme/BlogPostItem';
 export default function BlogPostItems({
   items,

package/lib/theme/BlogPostPage/Metadata/index.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export default function BlogPostPageMetadata(): JSX.Element;

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

@@ -6,7 +6,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() {
   const {assets, metadata} = useBlogPost();
   const {title, description, date, tags, authors, frontMatter} = metadata;

package/lib/theme/BlogPostPage/StructuredData/index.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export default function BlogPostStructuredData(): JSX.Element;

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

@@ -6,7 +6,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() {
   const structuredData = useBlogPostStructuredData();
   return (

package/lib/theme/BlogPostPage/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.
  */
-/// <reference types="@docusaurus/plugin-content-blog" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostPage';
 export default function BlogPostPage(props: Props): JSX.Element;

package/lib/theme/BlogPostPage/index.js

@@ -7,17 +7,20 @@
 import React 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 Unlisted from '@theme/Unlisted';
+import ContentVisibility from '@theme/ContentVisibility';
 function BlogPostPageContent({sidebar, children}) {
   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,
@@ -35,7 +38,7 @@ function BlogPostPageContent({sidebar, children}) {
           />
         ) : undefined
       }>
-      {unlisted && <Unlisted />}
+      <ContentVisibility metadata={metadata} />
 
       <BlogPostItem>{children}</BlogPostItem>
 

package/lib/theme/BlogPostPaginator/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.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/BlogPostPaginator';
 export default function BlogPostPaginator(props: Props): JSX.Element;