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,25 +463,7 @@ declare module '@docusaurus/plugin-content-blog' {
     items: string[];
   };
 
-  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,
-  } from '@docusaurus/plugin-content-blog';
-  import type {Overwrite} from 'utility-types';
-
-  export type FrontMatter = BlogPostFrontMatter;
-
-  export type Metadata = Overwrite<
+  type PropBlogPostMetadata = Overwrite<
     BlogPostMetadata,
     {
       /** The publish date of the post. Serialized from the `Date` object. */
@@ -488,7 +471,28 @@ declare module '@theme/BlogPostPage' {
     }
   >;
 
-  export type Content = LoadedMDXContent<FrontMatter, Metadata, Assets>;
+  export type PropBlogPostContent = LoadedMDXContent<
+    BlogPostFrontMatter,
+    PropBlogPostMetadata,
+    Assets
+  >;
+
+  export default function pluginContentBlog(
+    context: LoadContext,
+    options: PluginOptions,
+  ): Promise<Plugin<BlogContent>>;
+}
+
+declare module '@theme/BlogPostPage' {
+  import type {
+    BlogPostFrontMatter,
+    BlogSidebar,
+    PropBlogPostContent,
+  } from '@docusaurus/plugin-content-blog';
+
+  export type FrontMatter = BlogPostFrontMatter;
+
+  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 {