refactor(theme): split BlogPostItem into smaller theme subcomponents (#…

…7716)

packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/translations.test.ts.snap

@@ -52,11 +52,11 @@ exports[`translateContent falls back when translation is incomplete 1`] = `
         "description": "/blog/2021/06/19/hello",
         "formattedDate": "June 19, 2021",
         "frontMatter": {},
+        "hasTruncateMarker": true,
         "permalink": "/blog/2021/06/19/hello",
         "source": "/blog/2021/06/19/hello",
         "tags": [],
         "title": "Hello",
-        "truncated": true,
       },
     },
   ],
@@ -96,11 +96,11 @@ exports[`translateContent returns translated loaded 1`] = `
         "description": "/blog/2021/06/19/hello",
         "formattedDate": "June 19, 2021",
         "frontMatter": {},
+        "hasTruncateMarker": true,
         "permalink": "/blog/2021/06/19/hello",
         "source": "/blog/2021/06/19/hello",
         "tags": [],
         "title": "Hello",
-        "truncated": true,
       },
     },
   ],

packages/docusaurus-plugin-content-blog/src/__tests__/blogUtils.test.ts

@@ -210,7 +210,7 @@ describe('linkify', () => {
           permalink: '/blog/2019/01/01/date-matter',
           title: 'date-matter',
         },
-        truncated: false,
+        hasTruncateMarker: false,
         frontMatter: {},
         authors: [],
         formattedDate: '',

packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts

@@ -171,7 +171,7 @@ describe('blog plugin', () => {
         permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
         title: 'Happy 1st Birthday Slash! (translated)',
       },
-      truncated: false,
+      hasTruncateMarker: false,
     });
 
     expect(
@@ -214,7 +214,7 @@ describe('blog plugin', () => {
         permalink: '/blog/date-matter',
         title: 'date-matter',
       },
-      truncated: false,
+      hasTruncateMarker: false,
     });
 
     expect({
@@ -251,7 +251,7 @@ describe('blog plugin', () => {
           permalink: '/blog/tags/complex',
         },
       ],
-      truncated: false,
+      hasTruncateMarker: false,
     });
 
     expect({
@@ -288,7 +288,7 @@ describe('blog plugin', () => {
         title: 'Simple Slug',
       },
       tags: [],
-      truncated: false,
+      hasTruncateMarker: false,
     });
 
     expect({
@@ -313,7 +313,7 @@ describe('blog plugin', () => {
         permalink: '/blog/date-matter',
         title: 'date-matter',
       },
-      truncated: false,
+      hasTruncateMarker: false,
     });
   });
 
@@ -470,7 +470,7 @@ describe('blog plugin', () => {
       tags: [],
       prevItem: undefined,
       nextItem: undefined,
-      truncated: false,
+      hasTruncateMarker: false,
     });
   });
 

packages/docusaurus-plugin-content-blog/src/__tests__/translations.test.ts

@@ -32,7 +32,7 @@ const sampleBlogPosts: BlogPost[] = [
       formattedDate: 'June 19, 2021',
       tags: [],
       title: 'Hello',
-      truncated: true,
+      hasTruncateMarker: true,
       authors: [],
       frontMatter: {},
     },

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -323,7 +323,7 @@ async function processBlogSourceFile(
             defaultReadingTime,
           })
         : undefined,
-      truncated: truncateMarker.test(content),
+      hasTruncateMarker: truncateMarker.test(content),
       authors,
       frontMatter,
     },

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -195,6 +195,21 @@ export default async function pluginContentBlog(
           ? blogPosts
           : blogPosts.slice(0, options.blogSidebarCount);
 
+      function blogPostItemsModule(items: string[]) {
+        return items.map((postId) => {
+          const blogPostMetadata = blogItemsToMetadata[postId]!;
+          return {
+            content: {
+              __import: true,
+              path: blogPostMetadata.source,
+              query: {
+                truncated: true,
+              },
+            },
+          };
+        });
+      }
+
       if (archiveBasePath && blogPosts.length) {
         const archiveUrl = normalizeUrl([
           baseUrl,
@@ -275,15 +290,7 @@ export default async function pluginContentBlog(
             exact: true,
             modules: {
               sidebar: aliasedSource(sidebarProp),
-              items: items.map((postID) => ({
-                content: {
-                  __import: true,
-                  path: blogItemsToMetadata[postID]!.source,
-                  query: {
-                    truncated: true,
-                  },
-                },
-              })),
+              items: blogPostItemsModule(items),
               metadata: aliasedSource(pageMetadataPath),
             },
           });
@@ -344,18 +351,7 @@ export default async function pluginContentBlog(
               exact: true,
               modules: {
                 sidebar: aliasedSource(sidebarProp),
-                items: items.map((postID) => {
-                  const blogPostMetadata = blogItemsToMetadata[postID]!;
-                  return {
-                    content: {
-                      __import: true,
-                      path: blogPostMetadata.source,
-                      query: {
-                        truncated: true,
-                      },
-                    },
-                  };
-                }),
+                items: blogPostItemsModule(items),
                 tag: aliasedSource(tagPropPath),
                 listMetadata: aliasedSource(listMetadataPath),
               },

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -6,6 +6,7 @@
  */
 
 declare module '@docusaurus/plugin-content-blog' {
+  import type {LoadedMDXContent} from '@docusaurus/mdx-loader';
   import type {MDXOptions} from '@docusaurus/mdx-loader';
   import type {FrontMatterTag, Tag} from '@docusaurus/utils';
   import type {Plugin, LoadContext} from '@docusaurus/types';
@@ -201,7 +202,7 @@ declare module '@docusaurus/plugin-content-blog' {
     /**
      * Whether the truncate marker exists in the post's content.
      */
-    readonly truncated?: boolean;
+    readonly hasTruncateMarker: boolean;
     /**
      * Used in pagination. Generated after the other metadata, so not readonly.
      * Content is just a subset of another post's metadata.
@@ -462,33 +463,36 @@ declare module '@docusaurus/plugin-content-blog' {
     items: string[];
   };
 
+  type PropBlogPostMetadata = Overwrite<
+    BlogPostMetadata,
+    {
+      /** The publish date of the post. Serialized from the `Date` object. */
+      date: string;
+    }
+  >;
+
+  export type PropBlogPostContent = LoadedMDXContent<
+    BlogPostFrontMatter,
+    PropBlogPostMetadata,
+    Assets
+  >;
+
   export default function pluginContentBlog(
     context: LoadContext,
     options: PluginOptions,
   ): Promise<Plugin<BlogContent>>;
 }
 
 declare module '@theme/BlogPostPage' {
-  import type {LoadedMDXContent} from '@docusaurus/mdx-loader';
   import type {
     BlogPostFrontMatter,
-    BlogPostMetadata,
-    Assets,
     BlogSidebar,
+    PropBlogPostContent,
   } from '@docusaurus/plugin-content-blog';
-  import type {Overwrite} from 'utility-types';
 
   export type FrontMatter = BlogPostFrontMatter;
 
-  export type Metadata = Overwrite<
-    BlogPostMetadata,
-    {
-      /** The publish date of the post. Serialized from the `Date` object. */
-      date: string;
-    }
-  >;
-
-  export type Content = LoadedMDXContent<FrontMatter, Metadata, Assets>;
+  export type Content = PropBlogPostContent;
 
   export interface Props {
     /** Blog sidebar. */
@@ -500,6 +504,10 @@ declare module '@theme/BlogPostPage' {
   export default function BlogPostPage(props: Props): JSX.Element;
 }
 
+declare module '@theme/BlogPostPage/Metadata' {
+  export default function BlogPostPageMetadata(): JSX.Element;
+}
+
 declare module '@theme/BlogListPage' {
   import type {Content} from '@theme/BlogPostPage';
   import type {

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

@@ -95,41 +95,103 @@ declare module '@theme/BlogSidebar' {
 }
 
 declare module '@theme/BlogPostItem' {
-  import type {FrontMatter, Metadata} from '@theme/BlogPostPage';
-  import type {Assets} from '@docusaurus/plugin-content-blog';
+  import type {ReactNode} from 'react';
 
   export interface Props {
-    readonly frontMatter: FrontMatter;
-    readonly assets: Assets;
-    readonly metadata: Metadata;
-    readonly truncated?: string | boolean;
-    readonly isBlogPostPage?: boolean;
-    readonly children: JSX.Element;
+    children: ReactNode;
+    className?: string;
+  }
+
+  export default function BlogPostItem(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItems' {
+  import type {ComponentType, ReactNode} from 'react';
+  import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';
+
+  export interface Props {
+    items: readonly {content: PropBlogPostContent}[];
+    component?: ComponentType<{children: ReactNode}>;
   }
 
   export default function BlogPostItem(props: Props): JSX.Element;
 }
 
-declare module '@theme/BlogPostAuthor' {
-  import type {Metadata} from '@theme/BlogPostPage';
+declare module '@theme/BlogPostItem/Container' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    children: ReactNode;
+    className?: string;
+  }
+
+  export default function BlogPostItemContainer(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header' {
+  export default function BlogPostItemHeader(): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header/Title' {
+  export interface Props {
+    className?: string;
+  }
+
+  export default function BlogPostItemHeaderTitle(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header/Info' {
+  export interface Props {
+    className?: string;
+  }
+
+  export default function BlogPostItemHeaderInfo(): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Header/Author' {
+  import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';
 
   export interface Props {
-    readonly author: Metadata['authors'][number];
+    readonly author: PropBlogPostContent['metadata']['authors'][number];
+    readonly className?: string;
   }
 
-  export default function BlogPostAuthor(props: Props): JSX.Element;
+  export default function BlogPostItemHeaderAuthor(props: Props): JSX.Element;
 }
 
-declare module '@theme/BlogPostAuthors' {
-  import type {Metadata} from '@theme/BlogPostPage';
-  import type {Assets} from '@docusaurus/plugin-content-blog';
+declare module '@theme/BlogPostItem/Header/Authors' {
+  export interface Props {
+    readonly className?: string;
+  }
+
+  export default function BlogPostItemHeaderAuthors(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Content' {
+  import type {ReactNode} from 'react';
 
   export interface Props {
-    readonly authors: Metadata['authors'];
-    readonly assets: Assets;
+    children: ReactNode;
+    className?: string;
   }
 
-  export default function BlogPostAuthors(props: Props): JSX.Element;
+  export default function BlogPostItemContent(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogPostItem/Footer' {
+  export default function BlogPostItemFooter(): JSX.Element | null;
+}
+
+declare module '@theme/BlogPostItem/Footer/ReadMoreLink' {
+  import type {Props as LinkProps} from '@docusaurus/Link';
+
+  export type Props = LinkProps & {
+    blogPostTitle: string;
+  };
+
+  export default function BlogPostItemFooterReadMoreLink(
+    props: Props,
+  ): JSX.Element | null;
 }
 
 declare module '@theme/BlogPostPaginator' {

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

@@ -15,10 +15,10 @@ import {
   ThemeClassNames,
 } from '@docusaurus/theme-common';
 import BlogLayout from '@theme/BlogLayout';
-import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/BlogListPage';
+import BlogPostItems from '@theme/BlogPostItems';
 
 function BlogListPageMetadata(props: Props): JSX.Element {
   const {metadata} = props;
@@ -40,16 +40,7 @@ function BlogListPageContent(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   return (
     <BlogLayout sidebar={sidebar}>
-      {items.map(({content: BlogPostContent}) => (
-        <BlogPostItem
-          key={BlogPostContent.metadata.permalink}
-          frontMatter={BlogPostContent.frontMatter}
-          assets={BlogPostContent.assets}
-          metadata={BlogPostContent.metadata}
-          truncated={BlogPostContent.metadata.truncated}>
-          <BlogPostContent />
-        </BlogPostItem>
-      ))}
+      <BlogPostItems items={items} />
       <BlogListPaginator metadata={metadata} />
     </BlogLayout>
   );