@docusaurus/theme-classic 0.0.0-6016 → 0.0.0-6019

package/lib/theme/BlogPostPage/index.js

@@ -17,10 +17,10 @@ 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,
@@ -38,7 +38,7 @@ function BlogPostPageContent({sidebar, children}) {
           />
         ) : undefined
       }>
-      {unlisted && <Unlisted />}
+      <ContentVisibility metadata={metadata} />
 
       <BlogPostItem>{children}</BlogPostItem>
 

package/lib/theme/BlogTagsPostsPage/index.js

@@ -18,7 +18,7 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import BlogPostItems from '@theme/BlogPostItems';
-import Unlisted from '@theme/Unlisted';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
 import Heading from '@theme/Heading';
 function BlogTagsPostsPageMetadata({tag}) {
   const title = useBlogTagsPostsPageTitle(tag);

package/lib/theme/ContentVisibility/Draft/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/ContentVisibility/Draft';
+export default function Draft({ className }: Props): JSX.Element | null;

package/lib/theme/ContentVisibility/Draft/index.js

@@ -0,0 +1,24 @@
+/**
+ * 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';
+export default function Draft({className}) {
+  return (
+    <Admonition
+      type="caution"
+      title={<DraftBannerTitle />}
+      className={clsx(className, ThemeClassNames.common.draftBanner)}>
+      <DraftBannerMessage />
+    </Admonition>
+  );
+}

package/lib/theme/{Unlisted → ContentVisibility/Unlisted}/index.d.ts

@@ -4,5 +4,5 @@
  * 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/Unlisted';
+import type { Props } from '@theme/ContentVisibility/Unlisted';
 export default function Unlisted(props: Props): JSX.Element | null;

package/lib/theme/ContentVisibility/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/ContentVisibility';
+export default function ContentVisibility({ metadata, }: Props): JSX.Element | null;

package/lib/theme/ContentVisibility/index.js

@@ -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 Draft from '@theme/ContentVisibility/Draft';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
+export default function ContentVisibility({metadata}) {
+  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 />}
+    </>
+  );
+}

package/lib/theme/DocItem/Layout/index.js

@@ -16,7 +16,7 @@ import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import Unlisted from '@theme/Unlisted';
+import ContentVisibility from '@theme/ContentVisibility';
 import styles from './styles.module.css';
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
@@ -39,13 +39,11 @@ function useDocTOC() {
 }
 export default function DocItemLayout({children}) {
   const docTOC = useDocTOC();
-  const {
-    metadata: {unlisted},
-  } = useDoc();
+  const {metadata} = useDoc();
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
-        {unlisted && <Unlisted />}
+        <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
           <article>

package/lib/theme/DocTagDocListPage/index.js

@@ -15,7 +15,7 @@ import {
 } from '@docusaurus/theme-common';
 import Translate, {translate} from '@docusaurus/Translate';
 import SearchMetadata from '@theme/SearchMetadata';
-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 useNDocsTaggedPlural() {

package/lib/theme/MDXPage/index.js

@@ -14,23 +14,20 @@ import {
 import Layout from '@theme/Layout';
 import MDXContent from '@theme/MDXContent';
 import TOC from '@theme/TOC';
-import Unlisted from '@theme/Unlisted';
+import ContentVisibility from '@theme/ContentVisibility';
 import EditMetaRow from '@theme/EditMetaRow';
 import styles from './styles.module.css';
 export default function MDXPage(props) {
   const {content: MDXPageContent} = props;
+  const {metadata, assets} = MDXPageContent;
   const {
-    metadata: {
-      title,
-      editUrl,
-      description,
-      frontMatter,
-      unlisted,
-      lastUpdatedBy,
-      lastUpdatedAt,
-    },
-    assets,
-  } = MDXPageContent;
+    title,
+    editUrl,
+    description,
+    frontMatter,
+    lastUpdatedBy,
+    lastUpdatedAt,
+  } = metadata;
   const {
     keywords,
     wrapperClassName,
@@ -54,7 +51,7 @@ export default function MDXPage(props) {
         <main className="container container--fluid margin-vert--lg">
           <div className={clsx('row', styles.mdxPageWrapper)}>
             <div className={clsx('col', !hideTableOfContents && 'col--8')}>
-              {unlisted && <Unlisted />}
+              <ContentVisibility metadata={metadata} />
               <article>
                 <MDXContent>
                   <MDXPageContent />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-6016",
+  "version": "0.0.0-6019",
   "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": "0.0.0-6016",
-    "@docusaurus/mdx-loader": "0.0.0-6016",
-    "@docusaurus/module-type-aliases": "0.0.0-6016",
-    "@docusaurus/plugin-content-blog": "0.0.0-6016",
-    "@docusaurus/plugin-content-docs": "0.0.0-6016",
-    "@docusaurus/plugin-content-pages": "0.0.0-6016",
-    "@docusaurus/theme-common": "0.0.0-6016",
-    "@docusaurus/theme-translations": "0.0.0-6016",
-    "@docusaurus/types": "0.0.0-6016",
-    "@docusaurus/utils": "0.0.0-6016",
-    "@docusaurus/utils-common": "0.0.0-6016",
-    "@docusaurus/utils-validation": "0.0.0-6016",
+    "@docusaurus/core": "0.0.0-6019",
+    "@docusaurus/mdx-loader": "0.0.0-6019",
+    "@docusaurus/module-type-aliases": "0.0.0-6019",
+    "@docusaurus/plugin-content-blog": "0.0.0-6019",
+    "@docusaurus/plugin-content-docs": "0.0.0-6019",
+    "@docusaurus/plugin-content-pages": "0.0.0-6019",
+    "@docusaurus/theme-common": "0.0.0-6019",
+    "@docusaurus/theme-translations": "0.0.0-6019",
+    "@docusaurus/types": "0.0.0-6019",
+    "@docusaurus/utils": "0.0.0-6019",
+    "@docusaurus/utils-common": "0.0.0-6019",
+    "@docusaurus/utils-validation": "0.0.0-6019",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "c51435db0c58b94667da1c745f1635de65240c63"
+  "gitHead": "9b3ca6607004589c61b00374dcf694bdbee1c844"
 }

package/src/theme/BlogPostPage/index.tsx

@@ -18,8 +18,8 @@ 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({
@@ -30,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,
@@ -48,7 +48,7 @@ function BlogPostPageContent({
           />
         ) : undefined
       }>
-      {unlisted && <Unlisted />}
+      <ContentVisibility metadata={metadata} />
 
       <BlogPostItem>{children}</BlogPostItem>
 

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -20,7 +20,7 @@ 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';
 
 function BlogTagsPostsPageMetadata({tag}: Props): JSX.Element {

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 />}
+    </>
+  );
+}

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

@@ -17,7 +17,7 @@ import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import Unlisted from '@theme/Unlisted';
+import ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/DocItem/Layout';
 
 import styles from './styles.module.css';
@@ -48,13 +48,11 @@ function useDocTOC() {
 
 export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
-  const {
-    metadata: {unlisted},
-  } = useDoc();
+  const {metadata} = useDoc();
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
-        {unlisted && <Unlisted />}
+        <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
           <article>

package/src/theme/DocTagDocListPage/index.tsx

@@ -17,7 +17,7 @@ import {
 import Translate, {translate} from '@docusaurus/Translate';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocTagDocListPage';
-import Unlisted from '@theme/Unlisted';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
 import Heading from '@theme/Heading';
 
 // Very simple pluralization: probably good enough for now

package/src/theme/MDXPage/index.tsx

@@ -15,7 +15,7 @@ import {
 import Layout from '@theme/Layout';
 import MDXContent from '@theme/MDXContent';
 import TOC from '@theme/TOC';
-import Unlisted from '@theme/Unlisted';
+import ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/MDXPage';
 
 import EditMetaRow from '@theme/EditMetaRow';
@@ -23,18 +23,15 @@ import styles from './styles.module.css';
 
 export default function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
+  const {metadata, assets} = MDXPageContent;
   const {
-    metadata: {
-      title,
-      editUrl,
-      description,
-      frontMatter,
-      unlisted,
-      lastUpdatedBy,
-      lastUpdatedAt,
-    },
-    assets,
-  } = MDXPageContent;
+    title,
+    editUrl,
+    description,
+    frontMatter,
+    lastUpdatedBy,
+    lastUpdatedAt,
+  } = metadata;
   const {
     keywords,
     wrapperClassName,
@@ -60,7 +57,7 @@ export default function MDXPage(props: Props): JSX.Element {
         <main className="container container--fluid margin-vert--lg">
           <div className={clsx('row', styles.mdxPageWrapper)}>
             <div className={clsx('col', !hideTableOfContents && 'col--8')}>
-              {unlisted && <Unlisted />}
+              <ContentVisibility metadata={metadata} />
               <article>
                 <MDXContent>
                   <MDXPageContent />

package/src/theme-classic.d.ts

@@ -1602,7 +1602,19 @@ declare module '@theme/Tag' {
   export default function Tag(props: Props): JSX.Element;
 }
 
-declare module '@theme/Unlisted' {
+declare module '@theme/ContentVisibility' {
+  export interface Props {
+    readonly metadata: {
+      // the visibility metadata our 3 content plugins share in common
+      readonly unlisted: boolean;
+      readonly frontMatter: {draft?: boolean; unlisted?: boolean};
+    };
+  }
+
+  export default function ContentVisibility(props: Props): JSX.Element;
+}
+
+declare module '@theme/ContentVisibility/Unlisted' {
   export interface Props {
     className?: string;
   }
@@ -1610,6 +1622,14 @@ declare module '@theme/Unlisted' {
   export default function Unlisted(props: Props): JSX.Element;
 }
 
+declare module '@theme/ContentVisibility/Draft' {
+  export interface Props {
+    className?: string;
+  }
+
+  export default function Draft(props: Props): JSX.Element;
+}
+
 declare module '@theme/prism-include-languages' {
   import type * as PrismNamespace from 'prismjs';