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

facebook · Oct 29, 2019 · 2f8d161 · 2f8d161
1 parent 7714afb
commit 2f8d161
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 29 deletions.
diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
@@ -10,6 +10,7 @@
 - Changed the way we read the `USE_SSH` env variable during deployment to be the same as in v1.
 - Add highlight specific lines in code blocks.
 - 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.  
 
 ## 2.0.0-alpha.31
 

diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts b/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
-        .toISOString()
-        .substr(0, '2019-01-01'.length)
-        .replace(/-/g, '/')}/no date`,
+      permalink: noDatePermalink,
       source: noDateSource,
       title: 'no date',
       description: `no date`,
       date: noDateSourceBirthTime,
       tags: [],
+      nextItem: {
+        permalink: '/blog/2019/01/01/date-matter',
+        title: 'date-matter',
+      },
     });
   });
 });
diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/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,25 +285,22 @@ export default function pluginContentBlog(
         }),
       );
 
-      blogItems.forEach((blogItem, index) => {
-        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;
+      await Promise.all(
+        blogItems.map(async blogItem => {
+          const {metadata, metadataPath} = blogItem;
+          const {source, permalink} = metadata;
 
-        addRoute({
-          path: permalink,
-          component: blogPostComponent,
-          exact: true,
-          modules: {
-            content: source,
-            metadata: aliasedSource(metadataPath),
-            prevItem: prevItem && aliasedSource(prevItem.metadataPath),
-            nextItem: nextItem && aliasedSource(nextItem.metadataPath),
-          } as RouteModule,
-        });
-      });
+          addRoute({
+            path: permalink,
+            component: blogPostComponent,
+            exact: true,
+            modules: {
+              content: source,
+              metadata: aliasedSource(metadataPath),
+            },
+          });
+        }),
+      );
 
       // Create routes for blog's paginated list entries.
       await Promise.all(

diff --git a/packages/docusaurus-plugin-content-blog/src/types.ts b/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 {

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.js b/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>