diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index c387917698da..bda664f80888 100644 --- a/CHANGELOG-2.x.md +++ b/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. 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..1904f11814f3 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,10 +285,7 @@ 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; + blogItems.map(blogItem => { 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, + }, }); }); 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) {
- +