feat: dev draft & unlisted banner

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -1610,6 +1610,14 @@ declare module '@theme/Unlisted' {
   export default function Unlisted(props: Props): JSX.Element;
 }
 
+declare module '@theme/Drafted' {
+  export interface Props {
+    className?: string;
+  }
+
+  export default function Unlisted(props: Props): JSX.Element;
+}
+
 declare module '@theme/prism-include-languages' {
   import type * as PrismNamespace from 'prismjs';
 

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -20,6 +20,7 @@ import BlogPostPageStructuredData from '@theme/BlogPostPage/StructuredData';
 import TOC from '@theme/TOC';
 import type {Props} from '@theme/BlogPostPage';
 import Unlisted from '@theme/Unlisted';
+import Drafted from '@theme/Drafted';
 import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
 
 function BlogPostPageContent({
@@ -48,7 +49,8 @@ function BlogPostPageContent({
           />
         ) : undefined
       }>
-      {unlisted && <Unlisted />}
+      {(unlisted || frontMatter.unlisted) && <Unlisted />}
+      {frontMatter.draft && <Drafted />}
 
       <BlogPostItem>{children}</BlogPostItem>
 

packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx

@@ -20,6 +20,7 @@ import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Unlisted from '@theme/Unlisted';
 import type {Props} from '@theme/DocItem/Layout';
 
+import Drafted from '@theme/Drafted';
 import styles from './styles.module.css';
 
 /**
@@ -49,12 +50,13 @@ function useDocTOC() {
 export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
   const {
-    metadata: {unlisted},
+    metadata: {unlisted, frontMatter},
   } = useDoc();
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
-        {unlisted && <Unlisted />}
+        {(unlisted || frontMatter.unlisted) && <Unlisted />}
+        {frontMatter.draft && <Drafted />}
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
           <article>

packages/docusaurus-theme-classic/src/theme/Drafted/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,
+  DraftedBannerTitle,
+  DraftedBannerMessage,
+} from '@docusaurus/theme-common';
+import Admonition from '@theme/Admonition';
+import type {Props} from '@theme/Drafted';
+
+export default function Drafted({className}: Props): JSX.Element | null {
+  return (
+    <Admonition
+      type="caution"
+      title={<DraftedBannerTitle />}
+      className={clsx(className, ThemeClassNames.common.draftedBanner)}>
+      <DraftedBannerMessage />
+    </Admonition>
+  );
+}

packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx

@@ -19,6 +19,7 @@ import Unlisted from '@theme/Unlisted';
 import type {Props} from '@theme/MDXPage';
 
 import EditMetaRow from '@theme/EditMetaRow';
+import Drafted from '@theme/Drafted';
 import styles from './styles.module.css';
 
 export default function MDXPage(props: Props): JSX.Element {
@@ -60,7 +61,8 @@ 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 />}
+              {(unlisted || frontMatter.unlisted) && <Unlisted />}
+              {frontMatter.draft && <Drafted />}
               <article>
                 <MDXContent>
                   <MDXPageContent />

packages/docusaurus-theme-common/src/index.ts

@@ -125,6 +125,8 @@ export {
   UnlistedMetadata,
 } from './utils/unlistedUtils';
 
+export {DraftedBannerTitle, DraftedBannerMessage} from './utils/draftedUtils';
+
 export {
   ErrorBoundaryTryAgainButton,
   ErrorBoundaryError,

packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts

@@ -43,6 +43,7 @@ export const ThemeClassNames = {
     codeBlock: 'theme-code-block',
     admonition: 'theme-admonition',
     unlistedBanner: 'theme-unlisted-banner',
+    draftedBanner: 'theme-drafted-banner',
 
     admonitionType: (type: string) => `theme-admonition-${type}`,
   },

packages/docusaurus-theme-common/src/utils/draftedUtils.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 Translate from '@docusaurus/Translate';
+
+export function DraftedBannerTitle(): JSX.Element {
+  return (
+    <Translate
+      id="theme.draftedContent.title"
+      description="The drafted content banner title">
+      Drafted page
+    </Translate>
+  );
+}
+
+export function DraftedBannerMessage(): JSX.Element {
+  return (
+    <Translate
+      id="theme.draftedContent.message"
+      description="The drafted content banner message">
+      This page is drafted and will be excluded from production build.
+    </Translate>
+  );
+}