From 747505152626f1c4bbb74ccdc6ccff1dd48d51c1 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sun, 3 Mar 2019 22:14:16 -0800 Subject: [PATCH] refactor(v2): convert blog page to be added to routes by plugin lifecycle --- v2/lib/load/routes.js | 75 +++++++-------------------- v2/lib/theme/BlogPage/index.js | 6 ++- v2/lib/theme/BlogPost/index.js | 5 +- v2/plugins/docusaurus-content-blog.js | 15 ++++-- 4 files changed, 37 insertions(+), 64 deletions(-) diff --git a/v2/lib/load/routes.js b/v2/lib/load/routes.js index c7082df564..310e870faf 100644 --- a/v2/lib/load/routes.js +++ b/v2/lib/load/routes.js @@ -11,16 +11,14 @@ async function genRoutesConfig({ siteConfig = {}, docsMetadatas = {}, pagesMetadatas = [], - contentsStore = {}, pluginRouteConfigs = [], }) { - const modules = [ + const imports = [ `import React from 'react';`, `import Loadable from 'react-loadable';`, `import Loading from '@theme/Loading';`, `import Doc from '@theme/Doc';`, `import DocBody from '@theme/DocBody';`, - `import BlogPage from '@theme/BlogPage';`, `import Pages from '@theme/Pages';`, `import NotFound from '@theme/NotFound';`, ]; @@ -34,7 +32,7 @@ async function genRoutesConfig({ path: '${permalink}', exact: true, component: Loadable({ - loader: () => import(/* webpackPrefetch: true */ '${source}'), + loader: () => import('${source}'), loading: Loading, render(loaded, props) { let Content = loaded.default; @@ -66,7 +64,7 @@ async function genRoutesConfig({ path: '${permalink}', exact: true, component: Loadable({ - loader: () => import(/* webpackPrefetch: true */ '${source}'), + loader: () => import('${source}'), loading: Loading, render(loaded, props) { let Content = loaded.default; @@ -80,40 +78,6 @@ async function genRoutesConfig({ }`; } - // Blog. - function genBlogPageRoute(metadata) { - const {permalink} = metadata; - const {posts} = metadata; - return ` -{ - path: '${permalink}', - exact: true, - component: Loadable.Map({ - loader: { - ${posts - .map( - (post, index) => - `post${index}: () => import(/* webpackPrefetch: true */ '${ - post.source - }')`, - ) - .join(',\n\t\t\t\t')} - }, - loading: Loading, - render(loaded, props) { - ${posts - .map((p, i) => `const Post${i} = loaded.post${i}.default;`) - .join('\n\t\t\t\t')} - return ( - - ${posts.map((p, i) => ``).join(' ')} - - ) - } - }) -}`; - } - const notFoundRoute = ` { path: '*', @@ -121,47 +85,46 @@ async function genRoutesConfig({ }`; const routes = pluginRouteConfigs.map(pluginRouteConfig => { - const {path, component, metadata, content} = pluginRouteConfig; + const {path, component, metadata, modules} = pluginRouteConfig; return ` { path: '${path}', exact: true, component: Loadable.Map({ loader: { - Content: () => import('${content}'), +${modules + .map( + (module, index) => ` Module${index}: () => import('${module}'),`, + ) + .join('\n')} Component: () => import('${component}'), }, loading: Loading, render(loaded, props) { - const Content = loaded.Content.default; const Component = loaded.Component.default; + const modules = [ +${modules + .map((module, index) => ` loaded.Module${index}.default,`) + .join('\n')} + ]; return ( - - - - ) + + ); } }) }`; }); return ` -${modules.join('\n')} +${imports.join('\n')} const routes = [ // Docs.${pagesMetadatas.map(genPagesRoute).join(',')}, // Pages.${docsRoutes}, -// Blog.${ - contentsStore.blog - ? contentsStore.blog.contents - .filter(metadata => metadata.isBlogPage) - .map(genBlogPageRoute) - .join(',') - : '' - }, - // Plugins.${routes.join(',')}, // Not Found.${notFoundRoute}, diff --git a/v2/lib/theme/BlogPage/index.js b/v2/lib/theme/BlogPage/index.js index d044f63504..7ba7df383b 100644 --- a/v2/lib/theme/BlogPage/index.js +++ b/v2/lib/theme/BlogPage/index.js @@ -9,7 +9,6 @@ import React, {useContext} from 'react'; import Link from '@docusaurus/Link'; import Head from '@docusaurus/Head'; import Layout from '@theme/Layout'; // eslint-disable-line -import BlogPost from '@theme/BlogPost'; // eslint-disable-line import DocusaurusContext from '@docusaurus/context'; @@ -17,6 +16,7 @@ function BlogPage(props) { const context = useContext(DocusaurusContext); const {blogMetadata, language, siteConfig = {}} = context; const {baseUrl, favicon} = siteConfig; + const {modules: BlogPosts} = props; return ( @@ -34,7 +34,9 @@ function BlogPage(props) { ))} - {props.children} + {BlogPosts.map(BlogPost => ( + + ))} ); diff --git a/v2/lib/theme/BlogPost/index.js b/v2/lib/theme/BlogPost/index.js index 6337111291..ce6306eb6a 100644 --- a/v2/lib/theme/BlogPost/index.js +++ b/v2/lib/theme/BlogPost/index.js @@ -88,6 +88,9 @@ class BlogPost extends React.Component { const {metadata = {}, siteConfig = {}} = this.context; const {baseUrl, favicon} = siteConfig; const {language, title} = metadata; + const {modules} = this.props; + const BlogPostContents = modules[0]; + return ( @@ -96,7 +99,7 @@ class BlogPost extends React.Component { {language && } {this.renderPostHeader()} - {this.props.children} + ); } diff --git a/v2/plugins/docusaurus-content-blog.js b/v2/plugins/docusaurus-content-blog.js index 6d0d1f2ee9..a342dfd5cf 100644 --- a/v2/plugins/docusaurus-content-blog.js +++ b/v2/plugins/docusaurus-content-blog.js @@ -105,12 +105,17 @@ class DocusaurusContentBlogPlugin { } async generateRoutes({contents, actions}) { - const {blogPostComponent} = this.options; + const {blogPageComponent, blogPostComponent} = this.options; const {addRoute} = actions; contents.forEach(metadata => { - const {permalink, source} = metadata; - if (metadata.isBlogPage) { - // TODO: Handle blog page. + const {isBlogPage, permalink} = metadata; + if (isBlogPage) { + addRoute({ + path: permalink, + component: blogPageComponent, + metadata, + modules: metadata.posts.map(post => post.source), + }); return; } @@ -118,7 +123,7 @@ class DocusaurusContentBlogPlugin { path: permalink, component: blogPostComponent, metadata, - content: source, + modules: [metadata.source], }); }); }