From 2f8d1614b4bc882fb34f585c7b7a8ff217a855ad Mon Sep 17 00:00:00 2001 From: endiliey Date: Tue, 29 Oct 2019 12:46:02 +0700 Subject: [PATCH 1/2] feat(v2): simplify blog metadata to minimize number of request --- CHANGELOG-2.x.md | 1 + .../src/__tests__/index.test.ts | 33 +++++++++--- .../src/index.ts | 53 ++++++++++++------- .../src/types.ts | 7 +++ .../src/theme/BlogPostPage/index.js | 7 ++- 5 files changed, 72 insertions(+), 29 deletions(-) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index d6f8436f07cf..5cce82cac59a 100644 --- 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 index 7a4b606db4f9..ccb51d252996 100644 --- 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 index c8f7dce0b740..0ca5c999dd9d 100644 --- 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 index 0c8076e9c7c2..c050e9e9366a 100644 --- 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 index bb3ffb80509e..38e5b0330030 100644 --- 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 ( @@ -24,7 +24,10 @@ function BlogPostPage(props) {
- +
From 9b024093e687d1e4c604ad5b39c1b3193d7ed52d Mon Sep 17 00:00:00 2001 From: endiliey Date: Tue, 29 Oct 2019 14:02:54 +0700 Subject: [PATCH 2/2] remove async --- .../src/index.ts | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index 0ca5c999dd9d..1904f11814f3 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/packages/docusaurus-plugin-content-blog/src/index.ts @@ -285,22 +285,20 @@ export default function pluginContentBlog( }), ); - await Promise.all( - blogItems.map(async blogItem => { - const {metadata, metadataPath} = blogItem; - const {source, permalink} = metadata; + blogItems.map(blogItem => { + const {metadata, metadataPath} = blogItem; + const {source, permalink} = metadata; - addRoute({ - path: permalink, - component: blogPostComponent, - exact: true, - modules: { - content: source, - metadata: aliasedSource(metadataPath), - }, - }); - }), - ); + addRoute({ + path: permalink, + component: blogPostComponent, + exact: true, + modules: { + content: source, + metadata: aliasedSource(metadataPath), + }, + }); + }); // Create routes for blog's paginated list entries. await Promise.all(