make ContentVisibility receive full item metadata: more flexible for …

…swizzling users
facebook · Aug 8, 2024 · 60cea96 · 60cea96
1 parent 151a002
commit 60cea96
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 26 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -1604,9 +1604,11 @@ declare module '@theme/Tag' {
 
 declare module '@theme/ContentVisibility' {
   export interface Props {
-    // these are the common data our 3 content plugins share in common
-    readonly unlisted: boolean;
-    readonly frontMatter: {draft?: boolean; unlisted?: boolean};
+    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;

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -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
       }>
-      <ContentVisibility unlisted={unlisted} frontMatter={frontMatter} />
+      <ContentVisibility metadata={metadata} />
 
       <BlogPostItem>{children}</BlogPostItem>
 

diff --git a/packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx b/packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx
@@ -12,9 +12,9 @@ import Draft from '@theme/ContentVisibility/Draft';
 import Unlisted from '@theme/ContentVisibility/Unlisted';
 
 export default function ContentVisibility({
-  unlisted,
-  frontMatter,
+  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

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx
@@ -48,13 +48,11 @@ function useDocTOC() {
 
 export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
-  const {
-    metadata: {unlisted, frontMatter},
-  } = useDoc();
+  const {metadata} = useDoc();
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
-        <ContentVisibility unlisted={unlisted} frontMatter={frontMatter} />
+        <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
           <article>

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
@@ -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,10 +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')}>
-              <ContentVisibility
-                unlisted={unlisted}
-                frontMatter={frontMatter}
-              />
+              <ContentVisibility metadata={metadata} />
               <article>
                 <MDXContent>
                   <MDXPageContent />