feat(v2): simplify blog metadata to minimize number of request (#1908)

* feat(v2): simplify blog metadata to minimize number of request

* remove async

CHANGELOG-2.x.md

@@ -9,6 +9,7 @@
 - Refactor dark toggle into a hook.
 - Changed the way we read the `USE_SSH` env variable during deployment to be the same as in v1.
 - Fix accessing `docs/` or `/docs/xxxx` that does not match any existing doc page should return 404 (Not found) page, not blank page.
+- Simplify blog metadata. Previously, accessing `/blog/post-xxx` will request for next and prev blog post metadata too aside from target post metadata. We should only request target post metadata.  
 - Prioritize `@docusaurus/core` dependencies/ node_modules over user's node_modules. This fix a bug whereby if user has core-js@3 on its own node_modules but docusaurus depends on core-js@2, we previously encounter `Module not found: core-js/modules/xxxx` (because core-js@3 doesn't have that).
 Another example is if user installed webpack@3 but docusaurus depends on webpack@4.
 - Added code block line highlighting feature (thanks @lex111)! If you have previously swizzled the `CodeBlock` theme component, it is recommended to update your source code to have this feature.

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

@@ -31,6 +31,14 @@ describe('loadBlog', () => {
       },
     );
     const {blogPosts} = await plugin.loadContent();
+    const noDateSource = path.join('@site', pluginPath, 'no date.md');
+    const noDateSourceBirthTime = (await fs.stat(
+      noDateSource.replace('@site', siteDir),
+    )).birthtime;
+    const noDatePermalink = `/blog/${noDateSourceBirthTime
+      .toISOString()
+      .substr(0, '2019-01-01'.length)
+      .replace(/-/g, '/')}/no date`;
 
     expect(
       blogPosts.find(v => v.metadata.title === 'date-matter').metadata,
@@ -41,6 +49,14 @@ describe('loadBlog', () => {
       description: `date inside front matter`,
       date: new Date('2019-01-01'),
       tags: [],
+      nextItem: {
+        permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
+        title: 'Happy 1st Birthday Slash!',
+      },
+      prevItem: {
+        permalink: noDatePermalink,
+        title: 'no date',
+      },
     });
     expect(
       blogPosts.find(v => v.metadata.title === 'Happy 1st Birthday Slash!')
@@ -56,24 +72,25 @@ describe('loadBlog', () => {
       description: `pattern name`,
       date: new Date('2018-12-14'),
       tags: [],
+      prevItem: {
+        permalink: '/blog/2019/01/01/date-matter',
+        title: 'date-matter',
+      },
     });
 
-    const noDateSource = path.join('@site', pluginPath, 'no date.md');
-    const noDateSourceBirthTime = (await fs.stat(
-      noDateSource.replace('@site', siteDir),
-    )).birthtime;
     expect(
       blogPosts.find(v => v.metadata.title === 'no date').metadata,
     ).toEqual({
-      permalink: `/blog/${noDateSourceBirthTime
+      permalink: noDatePermalink,
-        .toISOString()
-        .substr(0, '2019-01-01'.length)
-        .replace(/-/g, '/')}/no date`,
       source: noDateSource,
       title: 'no date',
       description: `no date`,
       date: noDateSourceBirthTime,
       tags: [],
+      nextItem: {
+        permalink: '/blog/2019/01/01/date-matter',
+        title: 'date-matter',
+      },
     });
   });
 });

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

@@ -23,7 +23,6 @@ import {
 import {
   LoadContext,
   PluginContentLoadedActions,
-  RouteModule,
   ConfigureWebpackUtils,
 } from '@docusaurus/types';
 import {Configuration} from 'webpack';
@@ -138,6 +137,25 @@ export default function pluginContentBlog(
         (a, b) => b.metadata.date.getTime() - a.metadata.date.getTime(),
       );
 
+      // Colocate next and prev metadata
+      blogPosts.forEach((blogPost, index) => {
+        const prevItem = index > 0 ? blogPosts[index - 1] : null;
+        if (prevItem) {
+          blogPost.metadata.prevItem = {
+            title: prevItem.metadata.title,
+            permalink: prevItem.metadata.permalink,
+          };
+        }
+        const nextItem =
+          index < blogPosts.length - 1 ? blogPosts[index + 1] : null;
+        if (nextItem) {
+          blogPost.metadata.nextItem = {
+            title: nextItem.metadata.title,
+            permalink: nextItem.metadata.permalink,
+          };
+        }
+      });
+
       // Blog pagination routes.
       // Example: `/blog`, `/blog/page/1`, `/blog/page/2`
       const totalCount = blogPosts.length;
@@ -267,10 +285,7 @@ export default function pluginContentBlog(
         }),
       );
 
-      blogItems.forEach((blogItem, index) => {
+      blogItems.map(blogItem => {
-        const prevItem = index > 0 ? blogItems[index - 1] : null;
-        const nextItem =
-          index < blogItems.length - 1 ? blogItems[index + 1] : null;
         const {metadata, metadataPath} = blogItem;
         const {source, permalink} = metadata;
 
@@ -281,9 +296,7 @@ export default function pluginContentBlog(
           modules: {
             content: source,
             metadata: aliasedSource(metadataPath),
-            prevItem: prevItem && aliasedSource(prevItem.metadataPath),
+          },
-            nextItem: nextItem && aliasedSource(nextItem.metadataPath),
-          } as RouteModule,
         });
       });
 

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

@@ -51,6 +51,13 @@ export interface MetaData {
   date: Date;
   tags: (Tag | string)[];
   title: string;
+  prevItem?: Paginator;
+  nextItem?: Paginator;
+}
+
+export interface Paginator {
+  title: string;
+  permalink: string;
 }
 
 export interface Tag {

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

@@ -12,7 +12,7 @@ import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 
 function BlogPostPage(props) {
-  const {content: BlogPostContents, metadata, nextItem, prevItem} = props;
+  const {content: BlogPostContents, metadata} = props;
   const {frontMatter} = BlogPostContents;
   return (
     <Layout title={metadata.title} description={metadata.description}>
@@ -24,7 +24,10 @@ function BlogPostPage(props) {
                 <BlogPostContents />
               </BlogPostItem>
               <div className="margin-vert--xl">
-                <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+                <BlogPostPaginator
+                  nextItem={metadata.nextItem}
+                  prevItem={metadata.prevItem}
+                />
               </div>
             </div>
           </div>